From 4209f2abaa77e2f7fa0dac0ab5d131d60f3158bf Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Thu, 10 Sep 2026 17:15:23 +0800
Subject: [PATCH] fix filter style

---
 src/pages/point/PointAccountList.vue |  33 +++++--
 src/pages/point/PointLedgerList.vue  | 130 +++++++++++++++------------
 2 files changed, 95 insertions(+), 68 deletions(-)

diff --git a/src/pages/point/PointAccountList.vue b/src/pages/point/PointAccountList.vue
index 00c51c0..318d342 100644
--- a/src/pages/point/PointAccountList.vue
+++ b/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"
-				placeholder="搜索客户编码、姓名、拼音或电话"
+				class="customer"
+				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;
-		position: fixed;
+		display: flex;
+		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 {
diff --git a/src/pages/point/PointLedgerList.vue b/src/pages/point/PointLedgerList.vue
index 8597262..db40fd1 100644
--- a/src/pages/point/PointLedgerList.vue
+++ b/src/pages/point/PointLedgerList.vue
@@ -1,43 +1,39 @@
 <template>
 	<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
-		<div class="header bg-white">
-			<div class="buttons">
-				<t-input
-					v-model.trim="customerKeyword"
-					class="search"
-					borderless
-					clearable
-					placeholder="输入客户编码或姓名"
-					@clear="applyCustomerSearch"
-					@enter="applyCustomerSearch"
-				>
-					<template #suffix-icon>
-						<t-button
-							size="extra-small"
-							theme="primary"
-							variant="outline"
-							content="选择客户"
-							@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"
+		<div class="filters">
+			<t-input
+				v-model.trim="customerKeyword"
+				class="customer"
+				borderless
+				clearable
+				placeholder="输入客户编码或姓名"
+				@clear="applyCustomerSearch"
+				@enter="applyCustomerSearch"
+			>
+				<template #suffix-icon>
+					<t-button
+						size="extra-small"
+						theme="primary"
+						variant="outline"
+						content="选择客户"
+						@click.stop="selectorVisible = true"
 					/>
-					<t-dropdown-item
-						v-model="dateFilter"
-						:label="dateFilterLabel"
-						:options="dateFilterOptions"
-						@change="selectDateFilter"
-					/>
-				</t-dropdown-menu>
-			</div>
+				</template>
+			</t-input>
+			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="changeTypeFilter"
+					label="流水类型"
+					:options="changeTypeOptions"
+					@change="selectChangeType"
+				/>
+				<t-dropdown-item
+					v-model="dateFilter"
+					:label="dateFilterLabel"
+					:options="dateFilterOptions"
+					@change="selectDateFilter"
+				/>
+			</t-dropdown-menu>
 			<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;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
 
-		.buttons {
-			display: flex;
+		.customer {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;
 
-			.search {
-				--td-input-vertical-padding: .25rem 1rem;
-
-				width: 100%;
-				border: 1px solid var(--td-component-border);
-				padding-right: .3rem;
-				border-radius: 1rem;
-			}
+			width: 100%;
+			border: 1px solid var(--td-component-border);
+			background: var(--td-bg-color-container);
+			padding-right: .3rem;
+			border-radius: 1rem;
 		}
 
-		.filters {
-			margin: .5rem -1rem 0;
-		}
+		.menus {
+			--td-spacer-1: 6px;
 
-		:deep(.t-dropdown-menu) {
-			background: transparent;
+			width: 100%;
+			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;
+			}
+
+			.customer {
+				background: #10161f;
+			}
 		}
 
-		.header .date-range span,
+		.filters .date-range span,
 		.customer-id,
 		.empty {
 			color: #94a3b8;