91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed, ref } from "vue";
|
|
|
|
const DEFAULT_PRODUCT_IMAGE =
|
|
"https://static.shelingxingqiu.com/shootmini/static/coin/product-hero-item.png";
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const current = ref(0);
|
|
const slideImages = computed(() => {
|
|
const images = props.images.filter(
|
|
(image) => typeof image === "string" && image.trim()
|
|
);
|
|
return images.length ? images : [DEFAULT_PRODUCT_IMAGE];
|
|
});
|
|
|
|
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="(image, index) in slideImages" :key="index">
|
|
<view class="hero-swiper__item">
|
|
<image
|
|
class="hero-swiper__background"
|
|
src="https://static.shelingxingqiu.com/shootmini/static/coin/product-hero-bg.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image class="hero-swiper__product" :src="image" mode="aspectFit" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="hero-swiper__dots">
|
|
<view
|
|
v-for="(_, index) in slideImages"
|
|
: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>
|