feat: 实现了无限轮播的展示卡片组件

src/pages/Discovery/index.vue

@@ -1,22 +1,63 @@
 <template>
   <view>
-    <FindTabs v-model="activeIndex" @change="handleTabChange" />
+    <FindTabs
+      v-model="activeIndex"
+      :tabs="discoveryTabs"
+    />
+    <CardSwiper 
+    :list="discoveryCards" 
+    @card-click="cardClick" />
     <QuickQuestions />
-   
   </view>
-  
-  
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import FindTabs from "./components/FindTabs/index.vue";
+import CardSwiper from "./components/CardSwiper/index.vue";
 import QuickQuestions from "./components/QuickQuestions/index.vue";
+import discoveryCover from "@/components/ImageSwiper/images/2025-07-12_180248.jpg";
 
 const activeIndex = ref(0);
+const discoveryCards = ref([
+  {
+    title: "卧龙潭漂流",
+    tag: "夏日必玩",
+    desc: "15米极速落差，极致清凉体验。",
+    image: discoveryCover,
+    tabLabel: "卧龙潭",
+  },
+  {
+    title: "峡谷徒步",
+    tag: "清凉徒步",
+    desc: "穿行山谷栈道，沿路都是瀑布与云雾。",
+    image: discoveryCover,
+    tabLabel: "峡谷探秘",
+  },
+  {
+    title: "竹筏观景",
+    tag: "轻松观光",
+    desc: "低头可见鱼群，抬眼就是山水画卷。",
+    image: discoveryCover,
+    tabLabel: "竹筏观景",
+  },
+  {
+    title: "秘境潜游",
+    tag: "人气推荐",
+    desc: "近距离观察水下生态，沉浸感很强。",
+    image: discoveryCover,
+    tabLabel: "秘境潜游",
+  },
+]);
 
-const handleTabChange = (index) => {
-  activeIndex.value = index;
+const discoveryTabs = computed(() =>
+  discoveryCards.value.map((item) => ({
+    label: item.tabLabel || item.title,
+  }))
+);
+
+const cardClick = (item) => {
+  console.log(JSON.stringify(item));
 };
 
-</script>
+</script>