'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,91 @@
+<template>
+  <!-- 产品图片轮播 + 自定义指示点 -->
+  <view class="detail-swiper">
+    <swiper
+      class="swiper"
+      :circular="true"
+      :indicator-dots="false"
+      @change="onChange"
+    >
+      <swiper-item v-for="(item, index) in images" :key="index">
+        <view class="swiper-item">
+          <image class="swiper-image" :src="item" mode="aspectFill"></image>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 自定义指示点：active 16x8 橙色胶囊，inactive 8x8 黑色 20% -->
+    <view class="dots">
+      <view
+        v-for="(item, index) in images"
+        :key="index"
+        class="dot"
+        :class="{ active: current === index }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DetailSwiper',
+  props: {
+    images: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      current: 0
+    }
+  },
+  methods: {
+    onChange(e) {
+      this.current = e.detail.current
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-swiper {
+  position: relative;
+  width: 100%;
+  background: #f2f2f2;
+}
+.swiper {
+  width: 100%;
+  height: 500rpx; /* 260px */
+}
+.swiper-item {
+  width: 100%;
+  height: 100%;
+}
+.swiper-image {
+  width: 100%;
+  height: 100%;
+}
+
+/* 指示点：覆盖在图片底部 */
+.dots {
+  position: absolute;
+  bottom: 20rpx; /* 距图片底部 10px */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12rpx; /* 6px */
+}
+.dot {
+  width: 16rpx; /* 8px */
+  height: 16rpx;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8rpx; /* 4px */
+}
+.dot.active {
+  width: 32rpx; /* 16px */
+  height: 16rpx; /* 8px */
+  background: #ff6800;
+}
+</style>