fix filter style

src/pages/point/PointAccountList.vue

@@ -1,10 +1,10 @@
 <template>
 	<div v-can="permissionCodes.point.accountRead" class="point-account-list">
-		<div class="filter bg-white">
+		<div class="filters">
 			<t-input
 				v-model.trim="keyword"
-				class="search"
+				class="customer"
-				placeholder="搜索客户编码、姓名、拼音或电话"
+				placeholder="搜索客户编码、姓名（拼音）"
 				borderless
 			>
 				<template #suffix-icon>
@@ -245,21 +245,28 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .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);
 		left: 0;
 		right: 0;
 		z-index: 10;
-		padding: .5rem 1rem;
+		display: flex;
-		position: fixed;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
 		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
+
+		.customer {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;
 
-		.search {
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			padding-right: .3rem;
 			border-radius: 1rem;
 		}
 	}
@@ -304,6 +311,14 @@ onMounted(async () => {
 
 :global(html.theme-dark) {
 	.point-account-list {
+		.filters {
+			background: #10161f;
+
+			.customer {
+				background: #10161f;
+			}
+		}
+
 		.description,
 		.zero,
 		.center-tips {

src/pages/point/PointLedgerList.vue

@@ -1,10 +1,9 @@
 <template>
 	<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
-		<div class="header bg-white">
+		<div class="filters">
-			<div class="buttons">
 			<t-input
 				v-model.trim="customerKeyword"
-					class="search"
+				class="customer"
 				borderless
 				clearable
 				placeholder="输入客户编码或姓名"
@@ -21,9 +20,7 @@
 					/>
 				</template>
 			</t-input>
-			</div>
+			<t-dropdown-menu class="menus">
-			<div class="filters">
-				<t-dropdown-menu>
 				<t-dropdown-item
 					v-model="changeTypeFilter"
 					label="流水类型"
@@ -37,7 +34,6 @@
 					@change="selectDateFilter"
 				/>
 			</t-dropdown-menu>
-			</div>
 			<div v-if="isCustomDate" class="date-range">
 				<t-button
 					size="small"
@@ -481,35 +477,43 @@ onMounted(async () => {
 .point-ledger-list {
 	gap: 1rem;
 	display: flex;
-	padding: calc(var(--app-nav-height) + 7rem) 0 1rem;
+	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
 
-	.header {
+	.filters {
 		top: var(--app-nav-height);
-		width: 100%;
+		left: 0;
+		right: 0;
 		z-index: 10;
-		padding: .5rem 1rem 0;
-		position: fixed;
-
-		.buttons {
 		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
 
-			.search {
+		.customer {
+			--td-button-border-radius: .75rem;
 			--td-input-vertical-padding: .25rem 1rem;
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
+			background: var(--td-bg-color-container);
 			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 {
@@ -583,11 +587,19 @@ onMounted(async () => {
 
 :global(html.theme-dark) {
 	.point-ledger-list {
-		.search {
+		.filters {
 			background: #10161f;
+
+			.menus {
+				background: #1a2330;
 			}
 
-		.header .date-range span,
+			.customer {
+				background: #10161f;
+			}
+		}
+
+		.filters .date-range span,
 		.customer-id,
 		.empty {
 			color: #94a3b8;