fix filter style
This commit is contained in:
Timi
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-can="permissionCodes.point.accountRead" class="point-account-list">
|
<div v-can="permissionCodes.point.accountRead" class="point-account-list">
|
||||||
<div class="filter bg-white">
|
<div class="filters">
|
||||||
<t-input
|
<t-input
|
||||||
v-model.trim="keyword"
|
v-model.trim="keyword"
|
||||||
class="search"
|
class="customer"
|
||||||
placeholder="搜索客户编码、姓名、拼音或电话"
|
placeholder="搜索客户编码、姓名（拼音）"
|
||||||
borderless
|
borderless
|
||||||
>
|
>
|
||||||
<template #suffix-icon>
|
<template #suffix-icon>
|
||||||
@@ -245,21 +245,28 @@ onMounted(async () => {
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.point-account-list {
|
.point-account-list {
|
||||||
padding: calc(var(--app-nav-height) + 4.5rem) 0 1rem;
|
padding: var(--app-nav-height) 0 1rem;
|
||||||
|
|
||||||
.filter {
|
.filters {
|
||||||
top: var(--app-nav-height);
|
top: var(--app-nav-height);
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: .5rem 1rem;
|
display: flex;
|
||||||
position: fixed;
|
padding: .75rem 1rem;
|
||||||
|
position: sticky;
|
||||||
|
background: #F5F5F8;
|
||||||
box-shadow: var(--td-shadow-1);
|
box-shadow: var(--td-shadow-1);
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.customer {
|
||||||
|
--td-button-border-radius: .75rem;
|
||||||
|
--td-input-vertical-padding: .25rem 1rem;
|
||||||
|
|
||||||
.search {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid var(--td-component-border);
|
border: 1px solid var(--td-component-border);
|
||||||
padding: .5rem 1rem;
|
background: var(--td-bg-color-container);
|
||||||
|
padding-right: .3rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -304,6 +311,14 @@ onMounted(async () => {
|
|||||||
|
|
||||||
:global(html.theme-dark) {
|
:global(html.theme-dark) {
|
||||||
.point-account-list {
|
.point-account-list {
|
||||||
|
.filters {
|
||||||
|
background: #10161f;
|
||||||
|
|
||||||
|
.customer {
|
||||||
|
background: #10161f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.description,
|
.description,
|
||||||
.zero,
|
.zero,
|
||||||
.center-tips {
|
.center-tips {
|
||||||
|
|||||||
@@ -1,43 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
|
<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
|
||||||
<div class="header bg-white">
|
<div class="filters">
|
||||||
<div class="buttons">
|
<t-input
|
||||||
<t-input
|
v-model.trim="customerKeyword"
|
||||||
v-model.trim="customerKeyword"
|
class="customer"
|
||||||
class="search"
|
borderless
|
||||||
borderless
|
clearable
|
||||||
clearable
|
placeholder="输入客户编码或姓名"
|
||||||
placeholder="输入客户编码或姓名"
|
@clear="applyCustomerSearch"
|
||||||
@clear="applyCustomerSearch"
|
@enter="applyCustomerSearch"
|
||||||
@enter="applyCustomerSearch"
|
>
|
||||||
>
|
<template #suffix-icon>
|
||||||
<template #suffix-icon>
|
<t-button
|
||||||
<t-button
|
size="extra-small"
|
||||||
size="extra-small"
|
theme="primary"
|
||||||
theme="primary"
|
variant="outline"
|
||||||
variant="outline"
|
content="选择客户"
|
||||||
content="选择客户"
|
@click.stop="selectorVisible = true"
|
||||||
@click.stop="selectorVisible = true"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</t-input>
|
|
||||||
</div>
|
|
||||||
<div class="filters">
|
|
||||||
<t-dropdown-menu>
|
|
||||||
<t-dropdown-item
|
|
||||||
v-model="changeTypeFilter"
|
|
||||||
label="流水类型"
|
|
||||||
:options="changeTypeOptions"
|
|
||||||
@change="selectChangeType"
|
|
||||||
/>
|
/>
|
||||||
<t-dropdown-item
|
</template>
|
||||||
v-model="dateFilter"
|
</t-input>
|
||||||
:label="dateFilterLabel"
|
<t-dropdown-menu class="menus">
|
||||||
:options="dateFilterOptions"
|
<t-dropdown-item
|
||||||
@change="selectDateFilter"
|
v-model="changeTypeFilter"
|
||||||
/>
|
label="流水类型"
|
||||||
</t-dropdown-menu>
|
:options="changeTypeOptions"
|
||||||
</div>
|
@change="selectChangeType"
|
||||||
|
/>
|
||||||
|
<t-dropdown-item
|
||||||
|
v-model="dateFilter"
|
||||||
|
:label="dateFilterLabel"
|
||||||
|
:options="dateFilterOptions"
|
||||||
|
@change="selectDateFilter"
|
||||||
|
/>
|
||||||
|
</t-dropdown-menu>
|
||||||
<div v-if="isCustomDate" class="date-range">
|
<div v-if="isCustomDate" class="date-range">
|
||||||
<t-button
|
<t-button
|
||||||
size="small"
|
size="small"
|
||||||
@@ -481,35 +477,43 @@ onMounted(async () => {
|
|||||||
.point-ledger-list {
|
.point-ledger-list {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: calc(var(--app-nav-height) + 7rem) 0 1rem;
|
padding: var(--app-nav-height) 0 1rem;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.header {
|
.filters {
|
||||||
top: var(--app-nav-height);
|
top: var(--app-nav-height);
|
||||||
width: 100%;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: .5rem 1rem 0;
|
display: flex;
|
||||||
position: fixed;
|
padding: .75rem 1rem;
|
||||||
|
position: sticky;
|
||||||
|
background: #F5F5F8;
|
||||||
|
box-shadow: var(--td-shadow-1);
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.buttons {
|
.customer {
|
||||||
display: flex;
|
--td-button-border-radius: .75rem;
|
||||||
|
--td-input-vertical-padding: .25rem 1rem;
|
||||||
|
|
||||||
.search {
|
width: 100%;
|
||||||
--td-input-vertical-padding: .25rem 1rem;
|
border: 1px solid var(--td-component-border);
|
||||||
|
background: var(--td-bg-color-container);
|
||||||
width: 100%;
|
padding-right: .3rem;
|
||||||
border: 1px solid var(--td-component-border);
|
border-radius: 1rem;
|
||||||
padding-right: .3rem;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.menus {
|
||||||
margin: .5rem -1rem 0;
|
--td-spacer-1: 6px;
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.t-dropdown-menu) {
|
width: 100%;
|
||||||
background: transparent;
|
border: 1px solid rgba(148, 163, 184, .18);
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: -1rem;
|
||||||
|
border-top: none;
|
||||||
|
padding-top: .8rem;
|
||||||
|
border-radius: 0 0 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-range {
|
.date-range {
|
||||||
@@ -583,11 +587,19 @@ onMounted(async () => {
|
|||||||
|
|
||||||
:global(html.theme-dark) {
|
:global(html.theme-dark) {
|
||||||
.point-ledger-list {
|
.point-ledger-list {
|
||||||
.search {
|
.filters {
|
||||||
background: #10161f;
|
background: #10161f;
|
||||||
|
|
||||||
|
.menus {
|
||||||
|
background: #1a2330;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer {
|
||||||
|
background: #10161f;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .date-range span,
|
.filters .date-range span,
|
||||||
.customer-id,
|
.customer-id,
|
||||||
.empty {
|
.empty {
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
|
|||||||
Reference in New Issue
Block a user