Merge branch 'main' of http://sl.vrgon.com:3000/JiXinHui/YingXingAI

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 {