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);