gym-manage/gym-manage-uniapp/components/index/BannerSwiper.vue

<template>
  <view class="banner-container">
    <swiper
      class="banner-swiper"
      :circular="true"
      :autoplay="true"
      :interval="4000"
      :duration="500"
      :indicator-dots="false"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <view class="banner-content">
          <image :src="banner.image" mode="aspectFill" class="banner-image" />
          <view class="banner-overlay"></view>
          <view class="banner-text">
            <text class="banner-title">{{ banner.title }}</text>
            <text class="banner-subtitle">{{ banner.subtitle }}</text>
            <text class="banner-desc">{{ banner.desc }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="banner-dots">
      <view
        v-for="(_, index) in banners"
        :key="index"
        :class="['dot', { active: currentIndex === index }]"
      ></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const banners = [
  {
    image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800&q=80',
    title: '突破自我',
    subtitle: '超越极限',
    desc: '科学训练 · 遇见更好的自己'
  },
  {
    image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800&q=80',
    title: '专业指导',
    subtitle: '高效训练',
    desc: '私人定制 · 专属健身方案'
  },
  {
    image: 'https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=800&q=80',
    title: '健康生活',
    subtitle: '从这里开始',
    desc: '全方位 · 打造完美体态'
  }
]

const currentIndex = ref(0)

const onSwiperChange = (e) => {
  currentIndex.value = e.detail.current
}
</script>

<style lang="scss" scoped>
.banner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.banner-swiper {
  width: 100%;
  height: 480rpx;
}

.banner-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.wave-transition {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2rpx;
  height: 100rpx;
  z-index: 3;
  overflow: hidden;
}

.wt-layer {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 100%;
}

.wt-layer-1 {
  bottom: 0;
  background: #C0DDE9;
  border-radius: 45% 55% 0 0;
  opacity: 0.9;
}

.wt-layer-2 {
  bottom: -10rpx;
  background: #D4EAF2;
  border-radius: 55% 45% 0 0;
  opacity: 0.85;
}

.wt-layer-3 {
  bottom: -20rpx;
  background: #E8F4F9;
  border-radius: 40% 60% 0 0;
  opacity: 0.9;
}

.banner-text {
  position: absolute;
  left: 36rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.banner-title {
  display: block;
  font-size: 48rpx;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8rpx;
  text-shadow: 0 4rpx 16rpx rgba(80, 150, 190, 0.4);
}

.banner-subtitle {
  display: block;
  font-size: 56rpx;
  font-weight: 800;
  color: #E0F0FA;
  margin-bottom: 16rpx;
  text-shadow: 0 4rpx 16rpx rgba(80, 150, 190, 0.4);
}

.banner-desc {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.85);
}

.banner-dots {
  display: flex;
  justify-content: center;
  gap: 16rpx;
  margin-top: -100rpx;
  position: relative;
  z-index: 3;
}

.dot {
  width: 48rpx;
  height: 8rpx;
  border-radius: 9999rpx;
  background: #D0E4EE;
  transition: all 0.3s ease;
}

.dot.active {
  width: 64rpx;
  background: linear-gradient(90deg, #7AB5CC, #9CCFDF);
}
</style>