feat: tab的调整

src/components/AiTabSwitch/index.vue

@@ -13,7 +13,9 @@
             class="tab-image"
             mode="scaleToFill"
           />
-          <text class="tab-text">探索发现</text>
+          <view class="tab-label">
+            <text class="tab-text">探索发现</text>
+          </view>
         </view>
       </view>
 
@@ -29,11 +31,13 @@
             class="tab-image"
             mode="scaleToFill"
           />
-          <text class="tab-text">AI伴游</text>
-          <view
-            v-if="showDot"
-            :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']"
-          ></view>
+          <view class="tab-label">
+            <text class="tab-text">AI伴游</text>
+            <view
+              v-if="showDot"
+              :class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']"
+            ></view>
+          </view>
         </view>
       </view>
     </view>

src/components/AiTabSwitch/styles/index.scss

@@ -39,7 +39,6 @@
   font-size: 18px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.65);
-  z-index: 20;
 }
 
 .tab-image {
@@ -55,6 +54,14 @@
   z-index: 5;
 }
 
+.tab-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 20;
+}
+
 .tab-item.active .tab-text {
   color: #2e312f;
   font-weight: bold;
@@ -64,10 +71,18 @@
   margin-right: -24px;
 }
 
+.is-left .tab-label {
+  transform: translateX(-20px);
+}
+
 .is-right {
   margin-left: -24px;
 }
 
+.is-right .tab-label {
+  transform: translateX(20px);
+}
+
 .status-dot {
   display: inline-block;
   margin-left: 6px;