完成首页布局

2026-06-01 19:57:43 +08:00
parent b4710b6397
commit 8e7c8f52f6
32 changed files with 4009 additions and 48 deletions
@@ -0,0 +1,171 @@
+<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>