61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<swiper class="swiper" :style="{ '--banner-height': height }" circular :indicator-dots="true" autoplay
|
|
:interval="4000" :duration="500">
|
|
<block v-for="(v, i) in list" :key="i">
|
|
<swiper-item>
|
|
<image :src="v.imgUrl" mode="aspectFill" />
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<!-- 等待商家付款 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="wait-mch">
|
|
<view class="wait-title">请等待商家发起收款</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
list: { type: Array, default: [] },
|
|
// interval: { type: [String, Number] }, 暂时写死轮播时间
|
|
height: { type: String, default: '88vh' }
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.uni-margin-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
.swiper {
|
|
height: var(--banner-height) !important;
|
|
}
|
|
|
|
.swiper-item {
|
|
display: block;
|
|
height: calc(100% - 150rpx)
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.wait-mch{
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 150rpx;
|
|
|
|
border-radius: 32rpx 32rpx;
|
|
.wait-title{
|
|
font-size: 45rpx;
|
|
font-weight: 700;
|
|
color:$v-primary;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
</style>
|