refactor(ai-tab-switch): inline styles and cleanup scss

migrate all component styles from external SCSS file to inline Tailwind utility classes, remove the scss import and delete the unused styles file

src/pages/home/components/AiTabSwitch/index.vue

@@ -1,31 +1,35 @@
 <template>
   <div class="w-full">
     <div class="relative w-full h-[50px] flex overflow-hidden">
-      <div class="tab-item is-left" :class="{ active: modelValue === 0 }" @click="handleSwitch(0)">
+      <div
-        <div class="tab-content">
+        class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] mr-[-24px]"
+        :class="{ 'z-10': modelValue === 0 }" @click="handleSwitch(0)">
+        <div
+          class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
           <img v-if="leftSelected || leftUnselected" :src="modelValue === 0
             ? leftSelected || leftUnselected
             : leftUnselected || leftSelected
-            " class="tab-image" mode="scaleToFill" />
+            " class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
-          <div class="tab-label">
+          <div class="relative flex items-center justify-center z-20 -translate-x-5">
-            <span class="tab-text">探索发现</span>
+            <span
+              :class="['text-[18px]', modelValue === 0 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">探索发现</span>
           </div>
         </div>
       </div>
 
-      <div class="tab-item is-right" :class="{ active: modelValue === 1 }" @click="handleSwitch(1)">
+      <div
-        <div class="tab-content">
+        class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] ml-[-24px]"
+        :class="{ 'z-10': modelValue === 1 }" @click="handleSwitch(1)">
+        <div
+          class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
           <img v-if="rightSelected || rightUnselected" :src="modelValue === 1
             ? rightSelected || rightUnselected
             : rightUnselected || rightSelected
-            " class="tab-image" mode="scaleToFill" />
+            " class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
-          <div class="tab-label">
+          <div class="translate-x-5">
-            <span class="tab-text">AI伴游</span>
+            <span
-            <div v-if="showDot" :class="[
+              :class="['text-[18px]', modelValue === 1 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">AI伴游</span>
-              'status-dot',
+            <div v-if="showDot" :class="['inline-block ml-1.5 w-1.5 h-1.5 rounded-full z-22 -translate-y-px', modelValue === 1 ? 'bg-[#26d46c]' : 'bg-white/65 border border-black/8',
-              modelValue === 1
-                ? 'status-dot--active'
-                : 'status-dot--inactive',
             ]"></div>
           </div>
         </div>
@@ -51,7 +55,3 @@ const handleSwitch = (i) => {
   emit("change", i);
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

src/pages/home/components/AiTabSwitch/styles/index.scss

@@ -1,91 +0,0 @@
-.tab-item {
-  position: relative;
-  flex: 1;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-}
-
-.tab-item.active {
-  z-index: 10;
-}
-
-.tab-content {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-  transition: background 0.3s;
-  overflow: hidden;
-}
-
-.tab-text {
-  font-size: 18px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.65);
-}
-
-.tab-image {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: auto;
-  bottom: 0;
-  width: 100%;
-  height: 48px;
-  display: block;
-  vertical-align: bottom;
-  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;
-}
-
-.is-left {
-  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;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  z-index: 22;
-  transform: translateY(-1px);
-}
-
-.status-dot--active {
-  background-color: #26d46c;
-}
-
-.status-dot--inactive {
-  background-color: rgba(255, 255, 255, 0.65);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-}