UI流程完善

src/components/Swiper.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  interval: {
+    type: Number,
+    default: 3000,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const currentIndex = ref(0);
+
+const handleChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+</script>
+
+<template>
+  <view>
+    <swiper
+      class="swiper-container"
+      v-if="data.length > 0"
+      :current="currentIndex"
+      @change="handleChange"
+      :autoplay="autoplay"
+      :interval="interval"
+    >
+      <swiper-item v-for="(imgSrc, index) in data" :key="index">
+        <image :src="imgSrc" mode="widthFix" />
+      </swiper-item>
+    </swiper>
+    <view class="dots">
+      <view
+        v-for="index in data.length"
+        :key="index"
+        class="dot"
+        :class="{ active: currentIndex === index - 1 }"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.swiper-container {
+  width: calc(100% - 20px);
+  margin: 10px;
+  height: 440px;
+  position: relative;
+}
+
+.swiper-container > swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-container image {
+  width: 100%;
+}
+
+.dots {
+  position: absolute;
+  bottom: 27%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.dot.active {
+  background-color: #fff;
+}
+</style>