69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<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-content">
|
|
<image
|
|
v-if="leftSelected || leftUnselected"
|
|
:src="modelValue === 0 ? (leftSelected || leftUnselected) : (leftUnselected || leftSelected)"
|
|
class="tab-image"
|
|
mode="scaleToFill"
|
|
/>
|
|
<view class="tab-label">
|
|
<text class="tab-text">探索发现</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="tab-item is-right"
|
|
:class="{ active: modelValue === 1 }"
|
|
@tap="handleSwitch(1)"
|
|
>
|
|
<view class="tab-content">
|
|
<image
|
|
v-if="rightSelected || rightUnselected"
|
|
:src="modelValue === 1 ? (rightSelected || rightUnselected) : (rightUnselected || rightSelected)"
|
|
class="tab-image"
|
|
mode="scaleToFill"
|
|
/>
|
|
<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>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import leftSelected from "./images/L_02.png";
|
|
import leftUnselected from "./images/L_01.png";
|
|
import rightSelected from "./images/R_02.png";
|
|
import rightUnselected from "./images/R_01.png";
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Number, default: 0 },
|
|
showDot: { type: Boolean, default: true },
|
|
});
|
|
const emit = defineEmits(["update:modelValue", "change"]);
|
|
|
|
const handleSwitch = (i) => {
|
|
emit("update:modelValue", i);
|
|
emit("change", i);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|