From d1d783bd4095939de2fb8e21a262de150453f3cd Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Wed, 13 Aug 2025 11:33:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/XtxSwiper.vue | 82 ++++++++++++++++++++++++++++++++++++++++++++
 src/pages/index/index.vue    |  2 ++
 src/types/component.d.ts     |  2 +-
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/XtxSwiper.vue

diff --git a/src/components/XtxSwiper.vue b/src/components/XtxSwiper.vue
new file mode 100644
index 0000000..dafe056
--- /dev/null
+++ b/src/components/XtxSwiper.vue
@@ -0,0 +1,82 @@
+<template>
+  <view class="carousel">
+    <swiper :circular="true" :autoplay="false" :interval="3000">
+      <swiper-item>
+        <navigator url="/pages/index/index" hover-class="none" class="navigator">
+          <image
+            mode="aspectFill"
+            class="image"
+            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"
+          ></image>
+        </navigator>
+      </swiper-item>
+      <swiper-item>
+        <navigator url="/pages/index/index" hover-class="none" class="navigator">
+          <image
+            mode="aspectFill"
+            class="image"
+            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"
+          ></image>
+        </navigator>
+      </swiper-item>
+      <swiper-item>
+        <navigator url="/pages/index/index" hover-class="none" class="navigator">
+          <image
+            mode="aspectFill"
+            class="image"
+            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
+          ></image>
+        </navigator>
+      </swiper-item>
+    </swiper>
+    <!-- 指示点 -->
+    <view class="indicator">
+      <text
+        v-for="(item, index) in 3"
+        :key="item"
+        class="dot"
+        :class="{ active: index === activeIndex }"
+      ></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeIndex = ref(0)
+</script>
+
+<style lang="scss">
+/* 轮播图 */
+.carousel {
+  height: 280rpx;
+  position: relative;
+  overflow: hidden;
+  transform: translateY(0);
+  background-color: #efefef;
+  .indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 16rpx;
+    display: flex;
+    justify-content: center;
+    .dot {
+      width: 30rpx;
+      height: 6rpx;
+      margin: 0 8rpx;
+      border-radius: 6rpx;
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+    .active {
+      background-color: #fff;
+    }
+  }
+  .navigator,
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 36b618c..a27bb01 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,11 +2,13 @@
   <view>
     <!-- 自定义导航栏 -->
     <CustomNavbar />
+    <XtxSwiper />
   </view>
 </template>
 
 <script setup lang="ts">
 import CustomNavbar from './components/CustomNavbar.vue'
+import XtxSwiper from '../../components/XtxSwiper.vue'
 </script>
 
 <style lang="scss">
diff --git a/src/types/component.d.ts b/src/types/component.d.ts
index 10a5d6e..af2d7f9 100644
--- a/src/types/component.d.ts
+++ b/src/types/component.d.ts
@@ -6,6 +6,6 @@
 import 'vue'
 declare module 'vue' {
   export interface GlobalComponents {
-    //
+    XtxSwiper: typeof XtxSwiper
   }
 }