diff --git a/src/components/AiTabSwitch/images/L_01.png b/src/components/AiTabSwitch/images/L_01.png
index c8616a7..4fd32e9 100644
Binary files a/src/components/AiTabSwitch/images/L_01.png and b/src/components/AiTabSwitch/images/L_01.png differ
diff --git a/src/components/AiTabSwitch/images/L_02.png b/src/components/AiTabSwitch/images/L_02.png
index 5b9f54f..3124cbe 100644
Binary files a/src/components/AiTabSwitch/images/L_02.png and b/src/components/AiTabSwitch/images/L_02.png differ
diff --git a/src/components/AiTabSwitch/images/R_01.png b/src/components/AiTabSwitch/images/R_01.png
index 6142809..87e3bb3 100644
Binary files a/src/components/AiTabSwitch/images/R_01.png and b/src/components/AiTabSwitch/images/R_01.png differ
diff --git a/src/components/AiTabSwitch/images/R_02.png b/src/components/AiTabSwitch/images/R_02.png
index 2d749cd..97a7f0a 100644
Binary files a/src/components/AiTabSwitch/images/R_02.png and b/src/components/AiTabSwitch/images/R_02.png differ
diff --git a/src/components/AiTabSwitch/index.vue b/src/components/AiTabSwitch/index.vue
index d292b6a..58b7d19 100644
--- a/src/components/AiTabSwitch/index.vue
+++ b/src/components/AiTabSwitch/index.vue
@@ -11,7 +11,7 @@
v-if="leftSelected || leftUnselected"
:src="modelValue === 0 ? (leftSelected || leftUnselected) : (leftUnselected || leftSelected)"
class="tab-image"
- mode="aspectFill"
+ mode="scaleToFill"
/>
探索发现
@@ -27,7 +27,7 @@
v-if="rightSelected || rightUnselected"
:src="modelValue === 1 ? (rightSelected || rightUnselected) : (rightUnselected || rightSelected)"
class="tab-image"
- mode="aspectFill"
+ mode="scaleToFill"
/>
AI伴游
{
};
-
diff --git a/src/components/AiTabSwitch/styles/index.scss b/src/components/AiTabSwitch/styles/index.scss
new file mode 100644
index 0000000..6455e0c
--- /dev/null
+++ b/src/components/AiTabSwitch/styles/index.scss
@@ -0,0 +1,88 @@
+.ai-tab-wrapper {
+ width: 100%;
+}
+
+.tab-container {
+ position: relative;
+ width: 100%;
+ height: 50px;
+ display: flex;
+ overflow: hidden;
+}
+
+.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);
+ z-index: 20;
+}
+
+.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-item.active .tab-text {
+ color: #2e312f;
+ font-weight: bold;
+}
+
+.is-left {
+ margin-right: -24px;
+}
+
+.is-right {
+ margin-left: -24px;
+}
+
+.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);
+}
diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue
index 5ad6372..45f312a 100644
--- a/src/pages/Home/index.vue
+++ b/src/pages/Home/index.vue
@@ -15,18 +15,17 @@
mode="widthFix"
/>
-
+
+
+
+
+
+
-
-
@@ -46,6 +45,7 @@ import ChatMainList from "../ChatMain/ChatMainList/index.vue";
import Discovery from "../Discovery/index.vue";
const tabIndex = ref(0);
+const tabList = ["探索发现", "AI伴游"];
const handleChange = (i) => {
console.log("切换:", i);