完成首页布局
This commit is contained in:
future
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<!-- 底部导航栏容器 -->
|
||||
<view class="tab-bar">
|
||||
<!-- 导航栏项 -->
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: activeTab === index }]"
|
||||
@click="activeTab = index"
|
||||
>
|
||||
<!-- 导航栏图标 -->
|
||||
<image :src="activeTab === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
|
||||
<!-- 导航栏标签文字 -->
|
||||
<text class="tab-label">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 当前激活的导航栏索引
|
||||
const activeTab = ref(0)
|
||||
|
||||
// 导航栏数据列表
|
||||
const tabs = [
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
|
||||
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
|
||||
label: '首页',
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
|
||||
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
|
||||
label: '课程'
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
|
||||
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
|
||||
label: '训练' ,
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
|
||||
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
|
||||
label: '发现',
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
|
||||
iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
|
||||
label: '我的',
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 底部导航栏容器样式 */
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
background: #1A4A6F;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
}
|
||||
|
||||
/* 导航栏项样式 */
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 导航栏图标样式 */
|
||||
.tab-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 导航栏标签文字样式 */
|
||||
.tab-label {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 导航栏激活状态文字样式 */
|
||||
.tab-item.active .tab-label {
|
||||
color: #f97316;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<!-- 快捷入口容器 -->
|
||||
<view class="quick-entry">
|
||||
<!-- 快捷入口项 -->
|
||||
<view
|
||||
v-for="(item, index) in entries"
|
||||
:key="index"
|
||||
class="entry-item"
|
||||
>
|
||||
<!-- 入口图标容器 -->
|
||||
<view :class="['entry-icon', { accent: item.accent }]">
|
||||
<!-- 入口图标图片 -->
|
||||
<image :src="item.icon" mode="aspectFit" class="icon-img" />
|
||||
</view>
|
||||
<!-- 入口标题 -->
|
||||
<text class="entry-title">{{ item.title }}</text>
|
||||
<!-- 入口描述 -->
|
||||
<text class="entry-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 快捷入口数据列表
|
||||
const entries = [
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
|
||||
title: '找课程',
|
||||
desc: '精品课程',
|
||||
accent: false ,
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
|
||||
title: '训练计划',
|
||||
desc: '个性定制',
|
||||
accent: true ,
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
|
||||
title: '健身数据',
|
||||
desc: '记录分析',
|
||||
accent: false ,
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
|
||||
title: '消息',
|
||||
desc: '通知消息',
|
||||
accent: true,
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
|
||||
title: '签到',
|
||||
desc: '打卡签到',
|
||||
accent: false,
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 快捷入口容器样式 */
|
||||
.quick-entry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 24rpx;
|
||||
background: #ffffff;
|
||||
margin: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 快捷入口项样式 */
|
||||
.entry-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 入口图标容器样式 */
|
||||
.entry-icon {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #072A4E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
/* 入口图标图片样式 */
|
||||
.icon-img {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
/* 入口图标强调色样式（橙色背景） */
|
||||
.entry-icon.accent {
|
||||
background: #FC5A15;
|
||||
}
|
||||
|
||||
/* 入口标题样式 */
|
||||
.entry-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1a202c;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
/* 入口描述文字样式 */
|
||||
.entry-desc {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<!-- 推荐课程容器 -->
|
||||
<view class="recommend-courses">
|
||||
<!-- 区域标题栏 -->
|
||||
<view class="section-header">
|
||||
<!-- 区域标题 -->
|
||||
<text class="section-title">推荐课程</text>
|
||||
<!-- 查看更多按钮 -->
|
||||
<view class="view-more">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">
|
||||
<uni-icons type="right" size="20" color="#94a3b8"/>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程横向滚动容器 -->
|
||||
<scroll-view class="courses-scroll" scroll-x="true" :show-scrollbar="false">
|
||||
<!-- 课程列表 -->
|
||||
<view class="courses-list">
|
||||
<!-- 课程卡片 -->
|
||||
<view
|
||||
v-for="(course, index) in courses"
|
||||
:key="index"
|
||||
class="course-card"
|
||||
>
|
||||
<!-- 课程图片区域 -->
|
||||
<view class="course-image">
|
||||
<!-- 课程封面图片 -->
|
||||
<image :src="course.image" mode="aspectFill" class="img" />
|
||||
<!-- 图片渐变遮罩 -->
|
||||
<view class="course-overlay"></view>
|
||||
<!-- 课程标签 -->
|
||||
<text :class="['course-tag', course.tagType]">{{ course.tag }}</text>
|
||||
<!-- 课程信息区域 -->
|
||||
<view class="course-info">
|
||||
<!-- 课程名称 -->
|
||||
<text class="course-name">{{ course.name }}</text>
|
||||
<!-- 课程元信息（时长、难度） -->
|
||||
<view class="course-meta">
|
||||
<!-- 时长信息 -->
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png"/>
|
||||
</text>
|
||||
<text>{{ course.duration }}</text>
|
||||
</view>
|
||||
<!-- 难度信息 -->
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png"/>
|
||||
</text>
|
||||
<text>{{ course.level }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 课程底部区域 -->
|
||||
<view class="course-footer">
|
||||
<!-- 参与人数信息 -->
|
||||
<view class="participants">
|
||||
<text class="fire-icon">
|
||||
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png"/>
|
||||
</text>
|
||||
<text>{{ course.participants }}人参与</text>
|
||||
</view>
|
||||
<!-- 去参与按钮 -->
|
||||
<view class="join-btn">
|
||||
<text>去参与</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 推荐课程数据列表
|
||||
const courses = [
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
|
||||
tag: '限时免费',
|
||||
tagType: 'free',
|
||||
name: 'HIIT高强度燃脂',
|
||||
duration: '30分钟',
|
||||
level: '中级',
|
||||
participants: '4587'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
|
||||
tag: '人气TOP',
|
||||
tagType: 'hot',
|
||||
name: '力量进阶训练',
|
||||
duration: '45分钟',
|
||||
level: '高级',
|
||||
participants: '6231'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
|
||||
tag: '新课上线',
|
||||
tagType: 'new',
|
||||
name: '瑜伽·身心平衡',
|
||||
duration: '60分钟',
|
||||
level: '初级',
|
||||
participants: '3210'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 推荐课程容器样式 */
|
||||
.recommend-courses {
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 区域标题栏样式 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 区域标题样式 */
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
/* 查看更多按钮样式 */
|
||||
.view-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 箭头图标样式 */
|
||||
.arrow {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 课程横向滚动容器样式 */
|
||||
.courses-scroll {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 课程列表样式 */
|
||||
.courses-list {
|
||||
display: inline-flex;
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
/* 课程卡片样式 */
|
||||
.course-card {
|
||||
width: 320rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 课程图片区域样式 */
|
||||
.course-image {
|
||||
height: 280rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 课程封面图片样式 */
|
||||
.img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 图片渐变遮罩样式 */
|
||||
.course-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* 课程标签样式 */
|
||||
.course-tag {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
/* 课程信息区域样式 */
|
||||
.course-info {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 课程名称样式 */
|
||||
.course-name {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 课程元信息容器样式 */
|
||||
.course-meta {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 课程元信息项样式 */
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 元信息图标样式 */
|
||||
.meta-icon {
|
||||
font-size: 20rpx;
|
||||
image{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 课程底部区域样式 */
|
||||
.course-footer {
|
||||
padding: 16rpx 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 参与人数信息样式 */
|
||||
.participants {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 火热图标样式 */
|
||||
.fire-icon {
|
||||
font-size: 24rpx;
|
||||
image{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 去参与按钮样式 */
|
||||
.join-btn {
|
||||
padding: 12rpx 28rpx;
|
||||
background: transparent;
|
||||
border: 2rpx solid #f97316;
|
||||
border-radius: 9999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #f97316;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<!-- 今日推荐容器 -->
|
||||
<view class="today-recommend">
|
||||
<!-- 区域标题栏 -->
|
||||
<view class="section-header">
|
||||
<!-- 区域标题 -->
|
||||
<text class="section-title">今日推荐</text>
|
||||
<!-- 查看更多按钮 -->
|
||||
<view class="view-more">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">
|
||||
<uni-icons type="right" size="20" color="#94a3b8"></uni-icons>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推荐列表 -->
|
||||
<view class="recommend-list">
|
||||
<!-- 推荐项 -->
|
||||
<view
|
||||
v-for="(item, index) in recommends"
|
||||
:key="index"
|
||||
class="recommend-item"
|
||||
>
|
||||
<!-- 推荐项图片 -->
|
||||
<image :src="item.image" mode="aspectFill" class="item-image" />
|
||||
<!-- 推荐项内容区域 -->
|
||||
<view class="item-content">
|
||||
<!-- 推荐项标题 -->
|
||||
<text class="item-title">{{ item.title }}</text>
|
||||
<!-- 推荐项标签列表 -->
|
||||
<view class="item-tags">
|
||||
<text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</text>
|
||||
</view>
|
||||
<!-- 推荐项描述 -->
|
||||
<text class="item-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
<!-- 推荐项操作区域 -->
|
||||
<view class="item-action">
|
||||
<!-- 开始训练按钮 -->
|
||||
<view class="start-btn">
|
||||
<text class="start-btn-text">开始训练</text>
|
||||
</view>
|
||||
<!-- 参与人数 -->
|
||||
<text class="participants">{{ item.participants }}人参与</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 今日推荐数据列表
|
||||
const recommends = [
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&q=80',
|
||||
title: '晨间活力唤醒跑',
|
||||
tags: ['20分钟', '初级'],
|
||||
desc: '唤醒身体，开启活力一天',
|
||||
participants: '2784'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1581009146145-b5ef050c149a?w=300&q=80',
|
||||
title: '全身力量塑形',
|
||||
tags: ['50分钟', '中级'],
|
||||
desc: '全身综合训练，塑造完美线条',
|
||||
participants: '4126'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300&q=80',
|
||||
title: '蛋白增肌饮食指南',
|
||||
tags: ['营养饮食', '12分钟'],
|
||||
desc: '科学饮食搭配，助力肌肉增长',
|
||||
participants: '1865'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 今日推荐容器样式 */
|
||||
.today-recommend {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
/* 区域标题栏样式 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 区域标题样式 */
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
/* 查看更多按钮样式 */
|
||||
.view-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 箭头图标样式 */
|
||||
.arrow {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 推荐列表样式 */
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
/* 推荐项卡片样式 */
|
||||
.recommend-item {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 推荐项图片样式 */
|
||||
.item-image {
|
||||
width: 200rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 推荐项内容区域样式 */
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 推荐项标题样式 */
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a202c;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
/* 推荐项标签列表样式 */
|
||||
.item-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
/* 推荐项标签样式 */
|
||||
.tag {
|
||||
padding: 6rpx 16rpx;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 推荐项描述文字样式 */
|
||||
.item-desc {
|
||||
font-size: 24rpx;
|
||||
color: #94a3b8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 推荐项操作区域样式 */
|
||||
.item-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 开始训练按钮样式 */
|
||||
.start-btn {
|
||||
padding: 16rpx 28rpx;
|
||||
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
|
||||
border-radius: 9999rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
/* 开始训练按钮文字样式 */
|
||||
.start-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 参与人数文字样式 */
|
||||
.participants {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user