style(payment): 调整账单搜索组件操作栏布局
- 将操作栏从水平方向排列改为垂直方向排列 - 调整按钮和标签间距增大,标签左对齐,按钮右对齐 - 标签和按钮分成独立两行显示,提高界面清晰度 style(transportCapacity): 统一到期快捷筛选标签布局及样式 - 将到期快捷筛选标签由搜索菜单槽位移至头部槽位独立一行 - 移除原先纵向顺序和内联样式,增加标签上下间距 - 统一 driver、ship、vehicle 三个页面到期标签的外观和结构 - 优化标签容器的 margin 边距,取消排序和宽度限制 style(transportCapacity/ship): 统一弹窗内输入控件宽度 - 删除强制设置 .el-input__wrapper 宽度为 150px 的样式 - 增加输入框、选择框及级联选择器等组件宽度为 100% 的样式覆盖 - 保证新增和修改弹窗内所有表单输入控件宽度一致,提升界面整齐度
This commit is contained in:
@@ -43,33 +43,21 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="bill-ledger-search__actions">
|
||||
<div class="bill-ledger-search__actions-tags">
|
||||
<el-check-tag
|
||||
v-for="item in shortcutOptions"
|
||||
:key="item.value"
|
||||
:checked="query.expiryShortcut === item.value"
|
||||
@change="handleShortcutChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-check-tag>
|
||||
</div>
|
||||
<div class="bill-ledger-search__actions-buttons">
|
||||
<el-button type="primary" :loading="loading" @click="$emit('search')">
|
||||
<el-icon><Search /></el-icon>
|
||||
<span>搜索</span>
|
||||
<div class="bill-ledger-search__actions-buttons">
|
||||
<el-button type="primary" :loading="loading" @click="$emit('search')">
|
||||
<el-icon><Search /></el-icon>
|
||||
<span>搜索</span>
|
||||
</el-button>
|
||||
<el-button @click="$emit('reset')">
|
||||
<el-icon><Delete /></el-icon>
|
||||
<span>重置</span>
|
||||
</el-button>
|
||||
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
|
||||
<el-button text @click="expanded = !expanded">
|
||||
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
|
||||
<span>{{ expanded ? '折叠' : '展开' }}</span>
|
||||
</el-button>
|
||||
<el-button @click="$emit('reset')">
|
||||
<el-icon><Delete /></el-icon>
|
||||
<span>重置</span>
|
||||
</el-button>
|
||||
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
|
||||
<el-button text @click="expanded = !expanded">
|
||||
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
|
||||
<span>{{ expanded ? '折叠' : '展开' }}</span>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
@@ -138,20 +126,19 @@ export default {
|
||||
}
|
||||
.bill-ledger-search__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bill-ledger-search__actions-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.bill-ledger-search__actions-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #search-menu>
|
||||
<template #header>
|
||||
<div class="driver-page__expiry-tags">
|
||||
<el-check-tag
|
||||
v-for="item in expiryTagOptions"
|
||||
@@ -1724,9 +1724,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
order: -1;
|
||||
margin-right: 12px;
|
||||
min-width: 0;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.el-check-tag) {
|
||||
margin: 0;
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #search-menu>
|
||||
<template #header>
|
||||
<div class="transport-ship-page__expiry-tags">
|
||||
<el-check-tag
|
||||
v-for="item in expiryTagOptions"
|
||||
@@ -1199,9 +1199,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
order: -1;
|
||||
margin-right: 12px;
|
||||
min-width: 0;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.el-check-tag) {
|
||||
margin: 0;
|
||||
@@ -1219,7 +1218,10 @@ export default {
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-select),
|
||||
:deep(.el-select__wrapper),
|
||||
:deep(.el-cascader),
|
||||
:deep(.el-input),
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1374,7 +1376,4 @@ export default {
|
||||
.el-form-item {
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
.el-input__wrapper{
|
||||
width: 150px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #search-menu>
|
||||
<template #header>
|
||||
<div class="transport-vehicle-page__expiry-tags">
|
||||
<el-check-tag
|
||||
v-for="item in expiryTagOptions"
|
||||
@@ -1407,9 +1407,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
order: -1;
|
||||
margin-right: 12px;
|
||||
min-width: 0;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.el-check-tag) {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user