feat: tabs 结构调整

src/pages/Discovery/components/FindTabs/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="find-tabs-wrapper">
+    <scroll-view class="tabs-scroll" scroll-x="true" :scroll-into-view="'tab-' + modelValue" scroll-with-animation="true">
+      <view class="tabs-list">
+        <view
+          v-for="(tab, idx) in tabs"
+          :key="idx"
+          :id="'tab-' + idx"
+          class="tab-item"
+          :class="{ active: modelValue === idx }"
+          @tap="handleSwitch(idx)"
+        >
+          <view class="tab-content">
+            <view class="tab-label">
+              <text class="tab-text">{{ tab.label }}</text>
+              <image v-if="modelValue === idx && indicatorSrc" :src="indicatorSrc" class="tab-indicator" mode="widthFix" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import indicatorSrc from "./images/selected_tabs_icon.png";
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  tabs: {
+    type: Array,
+    default: () => [
+      { label: '小七孔古桥' },
+      { label: '翠谷瀑布' },
+      { label: '鸳鸯湖' },
+      { label: '天河潭' },
+      { label: '卧龙潭' }
+    ],
+  },
+});
+
+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>