update:暂存金币相关

src/pages/coin/components/ProductHeroSwiper.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+  backgrounds: {
+    type: Array,
+    default: () => [],
+  },
+  productImage: {
+    type: String,
+    default: "",
+  },
+});
+
+const current = ref(0);
+
+const onChange = (event) => {
+  current.value = event.detail.current;
+};
+</script>
+
+<template>
+  <view class="hero-swiper">
+    <swiper class="hero-swiper__body" :duration="260" @change="onChange">
+      <swiper-item v-for="(background, index) in backgrounds" :key="index">
+        <view class="hero-swiper__item">
+          <image class="hero-swiper__background" :src="background" mode="scaleToFill" />
+          <image class="hero-swiper__product" :src="productImage" mode="aspectFit" />
+        </view>
+      </swiper-item>
+    </swiper>
+    <view class="hero-swiper__dots">
+      <view
+        v-for="(_, index) in backgrounds"
+        :key="index"
+        class="hero-swiper__dot"
+        :class="{ 'hero-swiper__dot--active': current === index }"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.hero-swiper,
+.hero-swiper__body,
+.hero-swiper__item {
+  position: relative;
+  width: 750rpx;
+  height: 750rpx;
+}
+
+.hero-swiper__background,
+.hero-swiper__product {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.hero-swiper__dots {
+  position: absolute;
+  left: 0;
+  bottom: 20rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-swiper__dot {
+  width: 12rpx;
+  height: 12rpx;
+  margin: 0 6rpx;
+  border-radius: 50%;
+  background-color: rgba(34, 34, 46, 0.55);
+}
+
+.hero-swiper__dot--active {
+  background-color: #ffd947;
+}
+</style>