ac8f5b5f64
- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools - Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58 - Add sass 1.58.3 dependency and update vite config for modern scss compiler support - Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route - Add utility functions for URL parameter handling - Add static assets including custom znicons font, component images and icons - Fix scss syntax issues and deprecation warnings
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<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 }" @tap="handleSwitch(0)">
|
|
<div class="tab-content">
|
|
<img v-if="leftSelected || leftUnselected" :src="modelValue === 0
|
|
? leftSelected || leftUnselected
|
|
: leftUnselected || leftSelected
|
|
" class="tab-image" mode="scaleToFill" />
|
|
<div class="tab-label">
|
|
<spanclass="tab-text">探索发现</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-item is-right" :class="{ active: modelValue === 1 }" @tap="handleSwitch(1)">
|
|
<div class="tab-content">
|
|
<img v-if="rightSelected || rightUnselected" :src="modelValue === 1
|
|
? rightSelected || rightUnselected
|
|
: rightUnselected || rightSelected
|
|
" class="tab-image" mode="scaleToFill" />
|
|
<div class="tab-label">
|
|
<spanclass="tab-text">AI伴游</text>
|
|
<div v-if="showDot" :class="[
|
|
'status-dot',
|
|
modelValue === 1
|
|
? 'status-dot--active'
|
|
: 'status-dot--inactive',
|
|
]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|