feat: 搭建了tabs样式

src/pages/Discovery/components/FindTabs.vue

@@ -0,0 +1,122 @@
+<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 scoped>
+.find-tabs-wrapper {
+  width: 100%;
+  background-color: transparent;
+}
+
+.tabs-scroll {
+  width: 100%;
+} 
+
+.tabs-list {
+  display: flex;
+  align-items: flex-end;
+  height: 50px;
+  gap: 16px;
+  flex-wrap: nowrap;
+  padding: 0 12px;
+}
+
+.tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.tab-item:last-child {
+  margin-right: 12px;
+}
+
+.tab-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+}
+
+.tab-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-text {
+  font-size: 20px;
+  color: rgba(128,140,153,0.9);
+  z-index: 5;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.tab-item.active .tab-text {
+  color: #0b0b0b;
+  font-weight: 800;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: auto;
+  z-index: 6;
+}
+
+</style>

src/pages/Discovery/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <view> 探索发现
+  <view>
+    <FindTabs v-model="activeIndex" @change="handleTabChange" />
    
   </view>
   
@@ -7,5 +8,13 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+import FindTabs from "./components/FindTabs.vue";
+
+const activeIndex = ref(0);
+
+const handleTabChange = (index) => {
+  activeIndex.value = index;
+};
 
 </script>