You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.0 KiB
29 lines
1.0 KiB
<template>
|
|
<swiper class="banner-swiper" :autoplay="true" :interval="10000" :circular="true" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#F5A623">
|
|
<swiper-item v-for="(b, i) in banners" :key="i">
|
|
<view class="banner-slide" :style="{ background: b.bg }">
|
|
<text>{{ b.text }}</text>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BannerSwiper',
|
|
setup() {
|
|
const banners = [
|
|
{ text: '🍸 新品特调上线', bg: 'linear-gradient(135deg,#2d1b69,#e74c3c)' },
|
|
{ text: '🕐 调酒师已起床营业', bg: 'linear-gradient(135deg,#1a3a2a,#2ecc71)' },
|
|
{ text: '🍺 精酿啤酒冰凉供应', bg: 'linear-gradient(135deg,#5c2a0a,#f39c12)' },
|
|
]
|
|
return { banners }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-swiper{width:100%;height:260rpx;margin:12rpx 0}
|
|
.banner-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
|
|
.banner-slide text{font-size:36rpx;color:#fff;font-weight:800;letter-spacing:2rpx}
|
|
</style>
|