From 16ff0d1c4a16b5e5aaa2b6d2b94865ff042304e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E8=BE=89?= <francis_fh@163.com>
Date: Fri, 13 Mar 2026 14:44:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=9B=E9=80=89tab=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E7=BA=B5=E5=90=91=E6=8E=92=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../new-filter-page/new-filter-page.vue       | 73 ++++++++++++-------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/components/new-filter-page/new-filter-page.vue b/components/new-filter-page/new-filter-page.vue
index 037f503..2507361 100644
--- a/components/new-filter-page/new-filter-page.vue
+++ b/components/new-filter-page/new-filter-page.vue
@@ -113,13 +113,14 @@
                     </label>
                 </radio-group>
             </view>
+            <!-- 底部按钮 -->
+            <view class="filter-footer">
+                <button class="footer-btn clear-btn" @click="handleClear">清除</button>
+                <button class="footer-btn confirm-btn" @click="handleConfirm">确认</button>
+            </view>
         </view>
 
-        <!-- 底部按钮 -->
-        <view class="filter-footer">
-            <button class="footer-btn clear-btn" @click="handleClear">清除</button>
-            <button class="footer-btn confirm-btn" @click="handleConfirm">确认</button>
-        </view>
+        
     </view>
 </template>
 
@@ -217,8 +218,8 @@ const handleClose = () => {
     background-color: #fff;
     z-index: 9999;
     display: flex;
-    flex-direction: column;
-    padding-top: 84rpx;
+    flex-direction: row;
+    box-sizing: border-box;
 }
 
 .filter-header {
@@ -255,33 +256,40 @@ const handleClose = () => {
 
 .filter-tabs {
     display: flex;
-    border-bottom: 1rpx solid #eee;
-    background-color: #fff;
-    box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.05);
+    flex-direction: column;
+    width: 250rpx;
+    border-right: 1rpx solid #eee;
+    background-color: #f9f9f9;
+    box-shadow: 3rpx 0 15rpx rgba(0, 0, 0, 0.05);
+    height: 100vh;
+    padding-top: 84rpx;
+    box-sizing: border-box;
 
     .tab-item {
-        flex: 1;
-        height: 135rpx;
-        line-height: 135rpx;
+        height: 130rpx;
+        line-height: 130rpx;
         text-align: center;
-        font-size: 45rpx;
+        font-size: 42rpx;
         color: #666;
         position: relative;
         transition: all 0.3s ease;
+        border-bottom: 1rpx solid #f0f0f0;
 
         &.active {
             color: #256BFA;
             font-weight: 600;
+            background-color: #fff;
+            box-shadow: 3rpx 0 10rpx rgba(37, 107, 250, 0.1);
             
             &::after {
                 content: '';
                 position: absolute;
-                bottom: 0;
-                left: 25%;
-                width: 50%;
-                height: 6rpx;
+                right: 0;
+                top: 25%;
+                width: 6rpx;
+                height: 50%;
                 background-color: #256BFA;
-                border-radius: 3rpx;
+                border-radius: 3rpx 0 0 3rpx;
             }
         }
 
@@ -293,11 +301,18 @@ const handleClose = () => {
 
 .filter-content {
     flex: 1;
-    padding: 60rpx 48rpx;
-    overflow-y: auto;
+    padding: 60rpx 0rpx;
+    // overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding-top: 100rpx;
+    padding-bottom: 160rpx;
+    box-sizing: border-box;
 }
 
 .content-section {
+    padding: 0 4%;
+    overflow-y: auto;
     .radio-item {
             display: flex;
             align-items: center;
@@ -365,23 +380,25 @@ const handleClose = () => {
 }
 
 .filter-footer {
-    height: 240rpx;
+    height: 200rpx;
+    flex: 1;
     display: flex;
     border-top: 1rpx solid #eee;
     background-color: #fff;
     box-shadow: 0 -3rpx 15rpx rgba(0, 0, 0, 0.05);
-    padding: 30rpx 48rpx 150rpx;
+    padding: 30rpx 0;
     flex-shrink: 0;
-    position: relative;
     z-index: 10;
+    margin-top: auto;
+    box-sizing: border-box;
 
     .footer-btn {
         flex: 1;
-        margin: 0;
+        margin: 0 40rpx;
         border-radius: 24rpx;
-        height: 120rpx;
-        line-height: 120rpx;
-        font-size: 48rpx;
+        height: 100rpx;
+        line-height: 100rpx;
+        font-size: 45rpx;
         transition: all 0.3s ease;
         font-weight: 500;