feat: 使用图片替换上传

src/components/AiTabSwitch/index.vue

@@ -1,13 +1,21 @@
 <template>
   <view class="ai-tab-wrapper">
     <view class="tab-container">
-      <view class="tab-item is-left" :class="{ 'active': modelValue === 0 }" @tap="handleSwitch(0)">
+      <view
+        class="tab-item is-left"
+        :class="{ active: modelValue === 0 }"
+        @tap="handleSwitch(0)"
+      >
         <view class="tab-content">
           <text class="tab-text">探索发现</text>
         </view>
       </view>
 
-      <view class="tab-item is-right" :class="{ 'active': modelValue === 1 }" @tap="handleSwitch(1)">
+      <view
+        class="tab-item is-right"
+        :class="{ active: modelValue === 1 }"
+        @tap="handleSwitch(1)"
+      >
         <view class="tab-content">
           <text class="tab-text">AI伴游</text>
           <view v-if="showDot" class="status-dot"></view>
@@ -20,20 +28,20 @@
 <script setup>
 const props = defineProps({
   modelValue: { type: Number, default: 0 },
-  showDot: { type: Boolean, default: true }
+  showDot: { type: Boolean, default: true },
 });
-const emit = defineEmits(['update:modelValue', 'change']);
+const emit = defineEmits(["update:modelValue", "change"]);
 
 const handleSwitch = (i) => {
-  emit('update:modelValue', i);
+  emit("update:modelValue", i);
-  emit('change', i);
+  emit("change", i);
 };
 </script>
 
 <style scoped>
 .ai-tab-wrapper {
   width: 100%;
-  background-color: #61D68B;
+  background-color: #61d68b;
 }
 
 .tab-container {
@@ -73,7 +81,11 @@ const handleSwitch = (i) => {
 
 .tab-item.active .tab-content {
   /* 选中样式：纯白 */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F8F3 75.52%);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    #f0f8f3 75.52%
+  );
 }
 
 .tab-text {
@@ -83,7 +95,7 @@ const handleSwitch = (i) => {
 }
 
 .tab-item.active .tab-text {
-  color: #2E312F;
+  color: #2e312f;
   font-weight: bold;
 }
 
@@ -102,8 +114,8 @@ const handleSwitch = (i) => {
 
 .is-left .tab-content {
   /* 路径：左侧顶满 -> 顶部直线 -> 在中间开始向下弯曲 -> 底部平齐拉回 */
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H140 C155,0 160,12 165,24 C170,36 175,48 185,48 H0 V0 Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("./images/L_01.png");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H140 C155,0 160,12 165,24 C170,36 175,48 185,48 H0 V0 Z' fill='black'/%3E%3C/svg%3E");
+  mask-image: url("./images/L_01.png");
   -webkit-mask-size: 100% 100%;
 }
 
@@ -112,8 +124,8 @@ const handleSwitch = (i) => {
 }
 
 .is-right .tab-content {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M180,0 H40 C25,0 20,12 15,24 C10,36 5,48 -5,48 H180 V0 Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("./images/R_01.png");
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M180,0 H40 C25,0 20,12 15,24 C10,36 5,48 -5,48 H180 V0 Z' fill='black'/%3E%3C/svg%3E");
+  mask-image: url("./images/R_01.png");
   -webkit-mask-size: 100% 100%;
 }
 
@@ -126,23 +138,27 @@ const handleSwitch = (i) => {
   z-index: 15;
   pointer-events: none;
   /* 360deg 渐变 */
-  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
 }
 
 .is-left.active::after {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M0.5,47.5 V0.5 H140 C155,0.5 160,12.5 165,24.5 C170,36.5 175,47.5 184.5,47.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("./images/L_02.png");
 }
 
 .is-right.active::after {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 48' preserveAspectRatio='none'%3E%3Cpath d='M179.5,47.5 V0.5 H40 C25,0.5 20,12.5 15,24.5 C10,36.5 5,47.5 -4.5,47.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("./images/R_02.png");
 }
 
 .status-dot {
   width: 7px;
   height: 7px;
-  background-color: #26D46C;
+  background-color: #26d46c;
   border-radius: 50%;
   margin-left: 5px;
   transform: translateY(-8px);
 }
-</style>
+</style>