<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>
