admingit/jewpms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 更新表单和过滤器的CSS类名及样式

Browse Source 
将表单和过滤器的CSS类名从`vxe-form-group`统一改为`vxe-filter-group`，并调整相关样式以提高响应式布局的灵活性。同时，为`vxe-select`组件添加`filterable`属性以支持过滤功能。
This commit is contained in:
user 2025-03-29 00:06:52 +08:00
parent 0b747d8b03
commit 8bdaba8509
3 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/webapp/app/entities/dict/dict.vue
View File

@ -24,7 +24,7 @@
</vxe-toolbar> </vxe-toolbar>
<!-- 过滤表单 --> <!-- 过滤表单 -->
<vxe-form v-show="showFilter" custom-layout class="vxe-form-group" :data="filterParams" title-align="left" title-width="90"> <vxe-form v-show="showFilter" custom-layout class="vxe-filter-group" :data="filterParams" title-align="left" title-width="90">
<vxe-form-item field="number" :title="$t('jewpmsApp.dict.number')" :item-render="{}"> <vxe-form-item field="number" :title="$t('jewpmsApp.dict.number')" :item-render="{}">
<template #default="{ data }"> <template #default="{ data }">
<div class="vxe-form-filter"> <div class="vxe-form-filter">
@ -36,6 +36,7 @@
:placeholder="$t('entity.action.select')" :placeholder="$t('entity.action.select')"
@change="handleInput" @change="handleInput"
clearable clearable
filterable
></vxe-select> ></vxe-select>
</div> </div>
</template> </template>

2
src/main/webapp/app/entities/stock/stock.vue
View File

@ -27,7 +27,7 @@
</template> </template>
</vxe-toolbar> </vxe-toolbar>
<!-- 过滤表单 --> <!-- 过滤表单 -->
<vxe-form v-show="showFilter" custom-layout class="vxe-form-group" :data="filterParams" title-align="left" title-width="90"> <vxe-form v-show="showFilter" custom-layout class="vxe-filter-group" :data="filterParams" title-align="left" title-width="90">
<vxe-form-item field="number" :title="$t('jewpmsApp.stock.number')" :item-render="{}"> <vxe-form-item field="number" :title="$t('jewpmsApp.stock.number')" :item-render="{}">
<template #default="{ data }"> <template #default="{ data }">
<div class="vxe-form-filter"> <div class="vxe-form-filter">

69
src/main/webapp/content/css/edit-form.css
View File

@ -50,34 +50,21 @@
.vxe-form-group .vxe-input, .vxe-form-group .vxe-input,
.vxe-form-group .vxe-select, .vxe-form-group .vxe-select,
.vxe-form-group .vxe-textarea { .vxe-form-group .vxe-textarea,
.vxe-filter-group .vxe-input,
.vxe-filter-group .vxe-select,
.vxe-filter-group .vxe-textarea {
width: 100%; width: 100%;
} }
.vxe-form-group .vxe-form--item-title, .vxe-form-group .vxe-form--item-title,
.vxe-form-group .vxe-form--item-content { .vxe-form-group .vxe-form--item-content,
padding: 0 0.25rem 0 0.25rem !important; .vxe-filter-group .vxe-form--item-title,
.vxe-filter-group .vxe-form--item-content {
min-height: 0rem !important;
} }
.vxe-form-group .vxe-form-filter { @media (max-width: 1560px) {
flex: 1;
display: flex;
gap: 5px;
}
.vxe-form-filter .vxe-filter-operator {
max-width: 80px;
}
.vxe-modal--body .text-lg {
font-size: larger;
}
.vxe-modal--body .text-xl {
font-size: large;
}
@media (max-width: 1580px) {
.vxe-form-group .vxe-form--item { .vxe-form-group .vxe-form--item {
flex: 1 1 calc(33.33% - 10px); /* 计算宽度，确保三列 */ flex: 1 1 calc(33.33% - 10px); /* 计算宽度，确保三列 */
} }
@ -94,3 +81,41 @@
flex: 1 1 100%; flex: 1 1 100%;
} }
} }
.vxe-filter-group .vxe-form-filter {
flex: 1;
display: flex;
gap: 5px;
}
.vxe-filter-group .vxe-filter-operator {
max-width: 80px;
}
.vxe-filter-group .vxe-form--item {
flex: 1 1 calc(33.33% - 10px); /* 计算宽度，确保三列 */
}
@media (max-width: 900px) {
.vxe-filter-group .vxe-form--item {
flex: 1 1 calc(50% - 10px);
}
}
@media (max-width: 650px) {
.vxe-filter-group .vxe-form--item {
flex: 1 1 100%;
}
}
.vxe-modal--body .text-lg {
font-size: larger;
}
.vxe-modal--body .text-xl {
font-size: large;
}
.vxe-modal--body .text-xxl {
font-size: x-large;
}