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;
  width: 100%;
}

/* 轮播图组件样式 */
.banner-swiper {
  width: 100%;
  height: 360rpx;
}

/* 轮播内容容器样式 */
.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;
  background: linear-gradient(135deg, rgba(11, 43, 75, 0.85) 0%, rgba(26, 74, 111, 0.6) 100%);
}

/* 轮播文字信息容器样式 */
.banner-text {
  position: absolute;
  left: 32rpx;
  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(0, 0, 0, 0.3);
}

/* 轮播副标题样式 */
.banner-subtitle {
  display: block;
  font-size: 56rpx;
  font-weight: 800;
  color: #f97316;
  margin-bottom: 16rpx;
  text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
}

/* 轮播描述文字样式 */
.banner-desc {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 轮播指示器容器样式 */
.banner-dots {
  display: flex;
  justify-content: center;
  gap: 16rpx;
  margin-top: 24rpx;
}

/* 轮播指示器点样式 */
.dot {
  width: 48rpx;
  height: 8rpx;
  border-radius: 9999rpx;
  background: #d1d5db;
  transition: all 0.3s ease;
}

/* 轮播指示器激活状态样式 */
.dot.active {
  width: 64rpx;
  background: #f97316;
}
</style>