From d6d5e4619beced82832ca1137ebdede18360a8e6 Mon Sep 17 00:00:00 2001
From: JiXinHui <985276981@qq.com>
Date: Wed, 9 Jul 2025 10:36:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=BF=E6=8D=A2=E7=95=99=E8=A8=80?=
 =?UTF-8?q?=E6=9D=BF=E9=A1=B6=E9=83=A8=E5=88=87=E6=8D=A2=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=87=E7=AD=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/notes/index.vue | 82 +++++++++++++++++++++----------------------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 0bb3bfe..16238e2 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -2,23 +2,23 @@
   <div class="notes-page">
     <div class="header">
       <div class="title">留言板</div>
-      <!-- 顶部切换标签 -->
-      <div class="tab-header">
-        <div 
-          class="tab-item" 
-          :class="{ active: activeTab === 'unread' }" 
-          @click="switchTab('unread')"
-        >
-          未回复
-        </div>
-        <div 
-          class="tab-item" 
-          :class="{ active: activeTab === 'replied' }" 
-          @click="switchTab('replied')"
-        >
-          已回复
-        </div>
-      </div>
+      <view class="custom-tabs-box">
+        <u-tabs
+          :list="tabList"
+          :current="tabCurrent"
+          @change="onTabChange"
+          :is-scroll="false"
+          :height="80"
+          :font-size="28"
+          active-color="#4A6CF7"
+          inactive-color="#333333"
+          :bar-width="120"
+          :bar-height="4"
+          bg-color="#ffffff"
+          :item-width="200"
+          item-style="padding-left: 0; padding-right: 0;"
+        ></u-tabs>
+      </view>
     </div>
     
     <!-- 内容区域包装器 -->
@@ -110,6 +110,11 @@ export default {
   },
   data() {
     return {
+      tabList: [
+        { name: '未回复' },
+        { name: '已回复' }
+      ],
+      tabCurrent: 0,
       activeTab: 'unread',
       showDevModal: false,
       defaultAvatar: '/static/avatar/default-avatar.png',
@@ -166,8 +171,17 @@ export default {
     }
   },
   methods: {
+    onTabChange(index) {
+      this.tabCurrent = index;
+      // 根据索引设置activeTab值
+      this.activeTab = index === 0 ? 'unread' : 'replied';
+      // 切换选项卡时关闭所有打开的滑动按钮
+      this.closeAllSwipe();
+    },
     switchTab(tab) {
       this.activeTab = tab;
+      // 更新tabCurrent以匹配activeTab
+      this.tabCurrent = tab === 'unread' ? 0 : 1;
       // 切换选项卡时关闭所有打开的滑动按钮
       this.closeAllSwipe();
     },
@@ -255,36 +269,20 @@ export default {
   padding: 10px 0;
 }
 
-/* 顶部切换标签样式 */
-.tab-header {
-  display: flex;
-  height: 40px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.tab-item {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  color: #333;
+.custom-tabs-box {
+  padding-left: 20px; /* 添加左侧padding，使tabs位于左侧 */
   position: relative;
+  box-sizing: border-box;
 }
 
-.tab-item.active {
-  color: #4A6CF7;
-  font-weight: 500;
+.custom-tabs-box >>> .u-tabs__wrapper__nav__item {
+  padding: 0 20px 0 0 !important; /* 调整标签项的padding */
 }
 
-.tab-item.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #4A6CF7;
+.custom-tabs-box >>> .u-tabs__wrapper__nav__line {
+  bottom: 0 !important; /* 确保下划线位于底部 */
+  height: 4px !important; /* 设置下划线高度 */
+  border-radius: 2px !important; /* 圆角 */
 }
 
 .content-wrapper {