feat(咨询页面): 添加咨询页面tab切换功能并优化首页布局

pages/home/admissions/index.vue

@@ -8,16 +8,29 @@
           @click="handleLeftClick"
         ></u-icon>
       </div>
-      <text class="header-title">招办在线</text>
+      <text class="header-title">在线咨询</text>
       <div></div>
     </view>
 
     <view class="admissions-content">
+      <!-- 自定义tab -->
+      <view class="custom-tab">
+        <view
+          v-for="tab in tabList"
+          :key="tab.id"
+          :class="['tab-item', { active: activeTab === tab.id }]"
+          @click="switchTab(tab.id)"
+        >
+          <text class="tab-text">{{ tab.name }}</text>
+          <view class="tab-underline" v-if="activeTab === tab.id"></view>
+        </view>
+      </view>
+
       <view class="teacher-list">
         <!-- 教师列表 -->
         <view
           class="teacher-item"
-          v-for="(teacher, index) in teacherList"
+          v-for="(teacher, index) in currentList"
           :key="index"
         >
           <image class="teacher-avatar" :src="teacher.avatar"></image>
@@ -32,9 +45,9 @@
               </view>
               <view class="teacher-department">{{ teacher.department }}</view>
             </view>
-            <view class="ask-button" @click="handleAskQuestion(teacher)">{{
+            <view class="ask-button" @click="handleAskQuestion(teacher)">
-              teacher.online ? "立即提问" : "留言"
+              立即提问
-            }}</view>
+            </view>
           </view>
         </view>
       </view>
@@ -58,6 +71,11 @@ export default {
   },
   data() {
     return {
+      activeTab: "1", // 当前激活的tab
+      tabList: [
+        { id: "1", name: "招生在线", key: "admissions" },
+        { id: "2", name: "迎新在线", key: "welcome" },
+      ],
       showLeaveMessage: false,
       teacherList: [
         {
@@ -89,10 +107,41 @@ export default {
           online: false,
         },
       ],
+      welcomeList: [
+        {
+          id: 5,
+          name: "李老师",
+          department: "学生处",
+          avatar: "/static/common/images/avatar.png",
+          online: true,
+        },
+        {
+          id: 6,
+          name: "张老师",
+          department: "宿管中心",
+          avatar: "/static/common/images/student.png",
+          online: true,
+        },
+        {
+          id: 7,
+          name: "迎新办陈老师",
+          department: "后勤服务中心",
+          avatar: "/static/common/images/student.png",
+          online: false,
+        },
+      ],
       currentTeacher: null,
     };
   },
+  computed: {
+    currentList() {
+      return this.activeTab === "1" ? this.teacherList : this.welcomeList;
+    },
+  },
   methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
     handleLeftClick() {
       uni.navigateBack();
     },
@@ -159,6 +208,44 @@ export default {
   }
 
   .admissions-content {
+    .custom-tab {
+      padding: 0 30rpx;
+      margin: 24rpx 0;
+      display: flex;
+      align-items: center;
+
+      .tab-item {
+        position: relative;
+        padding: 12rpx 0;
+        margin-right: 60rpx;
+        cursor: pointer;
+
+        .tab-text {
+          font-size: 32rpx;
+          font-weight: 500;
+          color: #505866;
+          letter-spacing: 0.04rpx;
+        }
+
+        &.active .tab-text {
+          color: #4f6aff;
+          font-weight: 600;
+        }
+
+        .tab-underline {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          right: 0;
+          width: 80rpx;
+          height: 4rpx;
+          background-color: #4f6aff;
+          border-radius: 2rpx;
+        }
+      }
+    }
+
     .teacher-list {
       .teacher-item {
         display: flex;

pages/home/index/index.vue

@@ -19,7 +19,7 @@
         >
       </view>
 
-      <!-- <view class="qa-section">
+      <view class="qa-section">
         <view class="qa-header">
           <text class="qa-title">大家都在问</text>
           <view class="more-link">
@@ -37,16 +37,6 @@
           </view>
         </view>
 
-        <button class="chat-button" @click="isChat = true">
-          <image
-            class="chat-icon"
-            src="/static/common/images/icon_chat.png"
-          ></image>
-          <text class="chat-text">开启对话</text>
-        </button>
-      </view> -->
-
-      <view class="start-chat">
         <button class="chat-button" @click="handleStartChat">
           <image
             class="chat-icon"
@@ -61,6 +51,9 @@
           class="feature-item"
           v-for="(item, index) in features"
           :key="index"
+          :style="{
+            background: item.background,
+          }"
           @click="handleFeatureClick(item)"
         >
           <image :src="item.icon" class="feature-icon"></image>
@@ -294,18 +287,20 @@ export default {
       ],
       features: [
         {
-          title: "招办在线",
+          title: "在线咨询",
           icon: "/static/common/images/icon_admissions.png",
           path: "/pages/home/admissions/index",
+          background: "linear-gradient(0deg, #F4FBFE 0%, #F4FBFE 100%)",
         },
-        {
+        // {
-          title: "留言板",
+        //   title: "留言板",
-          icon: "/static/common/images/icon_messageBoard.png",
+        //   icon: "/static/common/images/icon_messageBoard.png",
-          path: "/pages/home/messageBoard/index",
+        //   path: "/pages/home/messageBoard/index",
-        },
+        // },
         {
           title: "电话咨询",
           icon: "/static/common/images/icon_phone.png",
+          background: "linear-gradient(0deg, #F4FBF9 0%, #F4FBF9 100%)",
         },
       ],
       popupShow: false,
@@ -771,7 +766,7 @@ export default {
 
   .main-content {
     padding: 30rpx;
-    padding-top: 100rpx;
+    padding-top: 60rpx;
 
     .welcome-message {
       //   display: inline-block;
@@ -784,8 +779,8 @@ export default {
 
       .avatar {
         display: inline-block;
-        width: 42rpx;
+        width: 50rpx;
-        height: 34rpx;
+        height: 44rpx;
         margin-right: 12rpx;
       }
 
@@ -894,20 +889,19 @@ export default {
       gap: 30rpx;
 
       .feature-item {
-        height: 210rpx;
+        height: 150rpx;
         border-radius: 16rpx;
-        background-color: #fafafc;
         display: flex;
-        flex-direction: column;
+        justify-content: flex-start;
         align-items: center;
-        justify-content: center;
+        padding-left: 30rpx;
-        // gap: 20rpx;
+        gap: 20rpx;
         flex: 1;
 
         .feature-icon {
           width: 80rpx;
           height: 80rpx;
-          margin-bottom: 12rpx;
+          margin-top: 16rpx;
         }
 
         .feature-text {