novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化会员信息模块及首页组件，清理冗余图片资源

Browse Source
This commit is contained in:
future
2026-06-07 22:41:55 +08:00
committed by liwentao
parent 5bc31f8936
commit c909b023c7
111 changed files with 667 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/index/BannerSwiper.vue
+51 -34
View File
@@ -1,7 +1,5 @@
<template>
<!-- 轮播图容器 -->
<view class="banner-container">
<!-- 轮播图组件 -->
<swiper
class="banner-swiper"
:circular="true"
@@ -11,15 +9,10 @@
: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>
@@ -28,7 +21,6 @@
</view>
</swiper-item>
</swiper>
<!-- 轮播指示器点 -->
<view class="banner-dots">
<view
v-for="(_, index) in banners"
@@ -42,7 +34,6 @@
<script setup>
import { ref } from 'vue'
// 轮播图数据列表
const banners = [
{
image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800&q=80',
@@ -64,29 +55,25 @@ const banners = [
}
]
// 当前轮播索引，用于控制指示器激活状态
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: 360rpx;
height: 480rpx;
}
/* 轮播内容容器样式 */
.banner-content {
width: 100%;
height: 100%;
@@ -94,78 +81,108 @@ const onSwiperChange = (e) => {
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%);
}
/* 轮播文字信息容器样式 */
.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: 32rpx;
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(0, 0, 0, 0.3);
text-shadow: 0 4rpx 16rpx rgba(80, 150, 190, 0.4);
}
/* 轮播副标题样式 */
.banner-subtitle {
display: block;
font-size: 56rpx;
font-weight: 800;
color: #f97316;
color: #E0F0FA;
margin-bottom: 16rpx;
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
text-shadow: 0 4rpx 16rpx rgba(80, 150, 190, 0.4);
}
/* 轮播描述文字样式 */
.banner-desc {
display: block;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, 0.85);
}
/* 轮播指示器容器样式 */
.banner-dots {
display: flex;
justify-content: center;
gap: 16rpx;
margin-top: 24rpx;
margin-top: -100rpx;
position: relative;
z-index: 3;
}
/* 轮播指示器点样式 */
.dot {
width: 48rpx;
height: 8rpx;
border-radius: 9999rpx;
background: #d1d5db;
background: #D0E4EE;
transition: all 0.3s ease;
}
/* 轮播指示器激活状态样式 */
.dot.active {
width: 64rpx;
background: #f97316;
background: linear-gradient(90deg, #7AB5CC, #9CCFDF);
}
</style>
</style>
gym-manage-uniapp/components/index/QuickEntry.vue
+15 -23
View File
@@ -1,21 +1,15 @@
<template>
<!-- 快捷入口容器 -->
<view class="quick-entry">
<!-- 快捷入口项 -->
<view
v-for="(item, index) in entries"
:key="index"
class="entry-item"
@tap="QEClick(item.path)"
>
<!-- 入口图标容器 -->
<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>
@@ -28,7 +22,6 @@ const QEClick = path => {
url:path
})
}
// 快捷入口数据列表
const entries = [
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
@@ -66,18 +59,21 @@ const entries = [
</script>
<style lang="scss" scoped>
/* 快捷入口容器样式 */
.quick-entry {
display: flex;
justify-content: space-between;
padding: 32rpx 24rpx;
background: #ffffff;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
margin: 24rpx;
border-radius: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border-radius: 28rpx;
box-shadow: 0 8rpx 32rpx rgba(120, 185, 215, 0.18);
border: 1rpx solid rgba(255, 255, 255, 0.7);
position: relative;
z-index: 3;
}
/* 快捷入口项样式 */
.entry-item {
display: flex;
flex-direction: column;
@@ -85,40 +81,36 @@ const entries = [
flex: 1;
}
/* 入口图标容器样式 */
.entry-icon {
width: 104rpx;
height: 104rpx;
border-radius: 20rpx;
background: #072A4E;
border-radius: 24rpx;
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
box-shadow: 0 6rpx 20rpx rgba(122, 181, 204, 0.35);
}
/* 入口图标图片样式 */
.icon-img {
width: 52rpx;
height: 52rpx;
}
/* 入口图标强调色样式（橙色背景） */
.entry-icon.accent {
background: #FC5A15;
background: linear-gradient(135deg, #6BA8C0 0%, #8CC5D5 100%);
}
/* 入口标题样式 */
.entry-title {
font-size: 26rpx;
font-weight: 600;
color: #1a202c;
color: #2D4A5A;
margin-bottom: 4rpx;
}
/* 入口描述文字样式 */
.entry-desc {
font-size: 22rpx;
color: #94a3b8;
color: #8AABBB;
}
</style>
</style>
gym-manage-uniapp/components/index/RecommendCourses.vue
+52 -208
View File
@@ -9,7 +9,7 @@
<view class="view-more">
<text>查看更多</text>
<text class="arrow">
<uni-icons type="right" size="20" color="#94a3b8"/>
<uni-icons type="right" size="20" color="#8CA0B0"/>
</text>
</view>
</view>
@@ -94,41 +94,21 @@ const getCourseTypeName = (type) => {
// 根据课程信息获取标签文本
const getTag = (course) => {
// 满员标签
if (course.currentMembers >= course.maxMembers) {
return '已满员'
}
// 已结束的课程
if (course.status === '2') {
return '已结束'
}
// 高人气标签（参与人数超过最大人数的80%）
if (course.currentMembers / course.maxMembers >= 0.8) {
return '热门'
}
// 课程类型标签
if (course.currentMembers >= course.maxMembers) return '已满员'
if (course.status === '2') return '已结束'
if (course.currentMembers / course.maxMembers >= 0.8) return '热门'
return getCourseTypeName(course.courseType)
}
// 根据课程信息获取标签样式类型
const getTagType = (course) => {
// 满员标签样式
if (course.currentMembers >= course.maxMembers) {
return 'full'
}
// 已结束标签样式
if (course.status === '2') {
return 'ended'
}
// 热门标签样式
if (course.currentMembers / course.maxMembers >= 0.8) {
return 'hot'
}
// 默认样式
if (course.currentMembers >= course.maxMembers) return 'full'
if (course.status === '2') return 'ended'
if (course.currentMembers / course.maxMembers >= 0.8) return 'hot'
return 'default'
}
// 计算课程时长（从startTime和endTime计算）
// 计算课程时长
const calculateDuration = (startTime, endTime) => {
if (!startTime || !endTime) return '60分钟'
const start = new Date(startTime)
@@ -137,9 +117,8 @@ const calculateDuration = (startTime, endTime) => {
return `${durationMinutes}分钟`
}
// 获取课程难度（基于课程类型和描述简单判断）
// 获取课程难度
const getCourseLevel = (course) => {
// 可以根据实际需求调整逻辑
if (course.courseType === '2') return '中级'
if (course.courseType === '3') return '高级'
if (course.courseType === '1') return '初级'
@@ -148,169 +127,61 @@ const getCourseLevel = (course) => {
// 处理图片URL
const getImageUrl = (coverImage) => {
if (!coverImage) {
return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
}
// 如果已经是完整URL直接返回，否则拼接基础路径
if (coverImage.startsWith('http')) {
return coverImage
}
// 这里需要根据您的实际图片基础路径配置
if (!coverImage) return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
if (coverImage.startsWith('http')) return coverImage
return `https://your-domain.com${coverImage}`
}
// 获取推荐课程（按最火排序，返回5条）
// 获取推荐课程
const fetchRecommendCourses = async () => {
try {
const res = await getGroupCoursePage({
page: 0,
size: 5,
sort: 'current_members', // 按参与人数排序
order: 'desc' // 降序，即最火的在前
page: 0, size: 5, sort: 'current_members', order: 'desc'
}, { cache: true, cacheTime: 5 * 60 * 1000 })
if (res && res.content && Array.isArray(res.content)) {
// 将后端数据转换为组件所需格式
courses.value = res.content.map(course => ({
id: course.id,
image: getImageUrl(course.coverImage),
tag: getTag(course),
tagType: getTagType(course),
name: course.courseName || '未知课程',
id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
tagType: getTagType(course), name: course.courseName || '未知课程',
duration: calculateDuration(course.startTime, course.endTime),
level: getCourseLevel(course),
participants: course.currentMembers || 0,
// 保存原始数据供点击事件使用
rawData: course
level: getCourseLevel(course), participants: course.currentMembers || 0, rawData: course
}))
} else {
// 如果没有数据，使用提供的示例数据作为fallback
useFallbackData()
}
} catch (err) {
// console.error('获取推荐课程失败:', err)
// 使用提供的示例数据作为fallback
useFallbackData()
}
} else { useFallbackData() }
} catch (err) { useFallbackData() }
}
// 使用提供的响应数据作为默认数据
const useFallbackData = () => {
const fallbackContent = [
{
id: "3",
courseName: "燃脂搏击",
courseType: "2",
startTime: "2026-06-10T18:30:00",
endTime: "2026-06-10T19:30:00",
maxMembers: 20,
currentMembers: 20,
status: "0",
coverImage: "/images/kickboxing.jpg",
description: "高强度间歇训练，配合音乐快速燃脂，释放压力。名额已满，无法预约。"
},
{
id: "2",
courseName: "清晨流瑜伽",
courseType: "1",
startTime: "2026-06-12T09:00:00",
endTime: "2026-06-12T10:30:00",
maxMembers: 15,
currentMembers: 5,
status: "0",
coverImage: "/images/yoga_flow.jpg",
description: "适合有一定基础的学员，通过流畅的体式连接呼吸，唤醒身体能量。"
},
{
id: "4",
courseName: "哈他瑜伽",
courseType: "1",
startTime: "2026-06-01T15:20:00",
endTime: "2026-06-01T16:50:00",
maxMembers: 12,
currentMembers: 3,
status: "0",
coverImage: "/images/hatha_yoga.jpg",
description: "基础哈他瑜伽，适合所有级别。距开始不足30分钟，已停止预约。"
},
{
id: "6",
courseName: "蜜桃臀塑造",
courseType: "3",
startTime: "2026-05-30T19:00:00",
endTime: "2026-05-30T20:00:00",
maxMembers: 10,
currentMembers: 8,
status: "2",
coverImage: "/images/glute.jpg",
description: "针对性训练臀部肌肉群，课程已于5月30日结束，无法预约。"
},
{
id: "7",
courseName: "午间冥想放松",
courseType: "1",
startTime: "2026-05-31T12:00:00",
endTime: "2026-05-31T13:00:00",
maxMembers: 15,
currentMembers: 6,
status: "2",
coverImage: "/images/meditation_noon.jpg",
description: "午间冥想课程，已于5月31日结束。"
}
{ id: "3", courseName: "燃脂搏击", courseType: "2", startTime: "2026-06-10T18:30:00", endTime: "2026-06-10T19:30:00", maxMembers: 20, currentMembers: 20, status: "0", coverImage: "/images/kickboxing.jpg", description: "高强度间歇训练" },
{ id: "2", courseName: "清晨流瑜伽", courseType: "1", startTime: "2026-06-12T09:00:00", endTime: "2026-06-12T10:30:00", maxMembers: 15, currentMembers: 5, status: "0", coverImage: "/images/yoga_flow.jpg", description: "流畅体式" },
{ id: "4", courseName: "哈他瑜伽", courseType: "1", startTime: "2026-06-01T15:20:00", endTime: "2026-06-01T16:50:00", maxMembers: 12, currentMembers: 3, status: "0", coverImage: "/images/hatha_yoga.jpg", description: "基础瑜伽" },
{ id: "6", courseName: "蜜桃臀塑造", courseType: "3", startTime: "2026-05-30T19:00:00", endTime: "2026-05-30T20:00:00", maxMembers: 10, currentMembers: 8, status: "2", coverImage: "/images/glute.jpg", description: "臀部训练" },
{ id: "7", courseName: "午间冥想放松", courseType: "1", startTime: "2026-05-31T12:00:00", endTime: "2026-05-31T13:00:00", maxMembers: 15, currentMembers: 6, status: "2", coverImage: "/images/meditation_noon.jpg", description: "冥想" }
]
courses.value = fallbackContent.map(course => ({
id: course.id,
image: getImageUrl(course.coverImage),
tag: getTag(course),
tagType: getTagType(course),
name: course.courseName || '未知课程',
id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
tagType: getTagType(course), name: course.courseName || '未知课程',
duration: calculateDuration(course.startTime, course.endTime),
level: getCourseLevel(course),
participants: course.currentMembers || 0,
rawData: course
level: getCourseLevel(course), participants: course.currentMembers || 0, rawData: course
}))
}
// 处理参与课程点击
const handleJoinCourse = (course) => {
// 根据课程状态判断是否可以参与
if (course.rawData.status === '2') {
uni.showToast({
title: '课程已结束',
icon: 'none'
})
return
}
if (course.rawData.currentMembers >= course.rawData.maxMembers) {
uni.showToast({
title: '课程已满员',
icon: 'none'
})
return
}
// 跳转到课程详情页
uni.navigateTo({
url: `/pages/course/detail?id=${course.id}`
})
if (course.rawData.status === '2') { uni.showToast({ title: '课程已结束', icon: 'none' }); return }
if (course.rawData.currentMembers >= course.rawData.maxMembers) { uni.showToast({ title: '课程已满员', icon: 'none' }); return }
uni.navigateTo({ url: `/pages/course/detail?id=${course.id}` })
}
// 组件挂载时获取数据
onMounted(() => {
fetchRecommendCourses()
})
onMounted(() => { fetchRecommendCourses() })
</script>
<style lang="scss">
/* 推荐课程容器样式 */
.recommend-courses {
padding: 0 24rpx;
margin-bottom: 32rpx;
position: relative;
z-index: 1;
}
/* 区域标题栏样式 */
.section-header {
display: flex;
justify-content: space-between;
@@ -318,50 +189,46 @@ onMounted(() => {
margin-bottom: 24rpx;
}
/* 区域标题样式 */
.section-title {
font-size: 34rpx;
font-weight: 700;
color: #1a202c;
color: #2D4A5A;
}
/* 查看更多按钮样式 */
.view-more {
display: flex;
align-items: center;
gap: 4rpx;
font-size: 26rpx;
color: #94a3b8;
color: #8AABBB;
}
/* 箭头图标样式 */
.arrow {
font-size: 32rpx;
}
/* 课程横向滚动容器样式 */
.courses-scroll {
white-space: nowrap;
}
/* 课程列表样式 */
.courses-list {
display: inline-flex;
gap: 48rpx;
}
/* 课程卡片样式 */
.course-card {
width: 320rpx;
background: #ffffff;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
box-shadow: 0 8rpx 28rpx rgba(120, 185, 215, 0.18);
border: 1rpx solid rgba(255, 255, 255, 0.6);
display: inline-block;
vertical-align: top;
}
/* 课程图片区域样式 */
.course-image {
height: 280rpx;
position: relative;
@@ -371,7 +238,6 @@ onMounted(() => {
padding: 20rpx;
}
/* 课程封面图片样式 */
.img {
position: absolute;
left: 0;
@@ -380,17 +246,15 @@ onMounted(() => {
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%);
background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
}
/* 课程标签样式 */
.course-tag {
position: absolute;
top: 16rpx;
@@ -400,47 +264,33 @@ onMounted(() => {
font-size: 20rpx;
font-weight: 600;
color: #ffffff;
background: #f97316;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
z-index: 2;
/* 热门标签 */
&.hot {
background: #ef4444;
background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
}
/* 新课标签 */
&.new {
background: #10b981;
background: linear-gradient(135deg, #6DB5C8, #90CEDD);
}
/* 免费标签 */
&.free {
background: #3b82f6;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
/* 满员标签 */
&.full {
background: #64748b;
background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
}
/* 已结束标签 */
&.ended {
background: #94a3b8;
background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
}
/* 默认标签 */
&.default {
background: #f97316;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
}
/* 课程信息区域样式 */
.course-info {
position: relative;
z-index: 2;
}
/* 课程名称样式 */
.course-name {
display: block;
font-size: 28rpx;
@@ -449,14 +299,12 @@ onMounted(() => {
margin-bottom: 8rpx;
}
/* 课程元信息容器样式 */
.course-meta {
display: flex;
gap: 16rpx;
align-items: center;
}
/* 课程元信息项样式 */
.meta-item {
display: flex;
align-items: end;
@@ -465,7 +313,6 @@ onMounted(() => {
color: rgba(255, 255, 255, 0.8);
}
/* 元信息图标样式 */
.meta-icon {
font-size: 20rpx;
image{
@@ -476,7 +323,6 @@ onMounted(() => {
}
}
/* 课程底部区域样式 */
.course-footer {
padding: 16rpx 10rpx;
display: flex;
@@ -484,16 +330,14 @@ onMounted(() => {
align-items: center;
}
/* 参与人数信息样式 */
.participants {
display: flex;
align-items: center;
gap: 6rpx;
font-size: 22rpx;
color: #94a3b8;
color: #8AABBB;
}
/* 火热图标样式 */
.fire-icon {
font-size: 24rpx;
image{
@@ -504,14 +348,14 @@ onMounted(() => {
}
}
/* 去参与按钮样式 */
.join-btn {
padding: 12rpx 28rpx;
background: transparent;
border: 2rpx solid #f97316;
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
border: none;
border-radius: 9999rpx;
font-size: 22rpx;
font-weight: 600;
color: #f97316;
color: #ffffff;
box-shadow: 0 6rpx 16rpx rgba(122, 181, 204, 0.35);
}
</style>
gym-manage-uniapp/components/index/TodayRecommend.vue
+18 -30
View File
@@ -9,7 +9,7 @@
<view class="view-more">
<text>查看更多</text>
<text class="arrow">
<uni-icons type="right" size="20" color="#94a3b8"></uni-icons>
<uni-icons type="right" size="20" color="#8CA0B0"></uni-icons>
</text>
</view>
</view>
@@ -77,12 +77,12 @@ const recommends = [
</script>
<style lang="scss" scoped>
/* 今日推荐容器样式 */
.today-recommend {
padding: 0 24rpx;
position: relative;
z-index: 1;
}
/* 区域标题栏样式 */
.section-header {
display: flex;
justify-content: space-between;
@@ -90,45 +90,42 @@ const recommends = [
margin-bottom: 24rpx;
}
/* 区域标题样式 */
.section-title {
font-size: 34rpx;
font-weight: 700;
color: #1a202c;
color: #2D4A5A;
}
/* 查看更多按钮样式 */
.view-more {
display: flex;
align-items: center;
gap: 4rpx;
font-size: 26rpx;
color: #94a3b8;
color: #8AABBB;
}
/* 箭头图标样式 */
.arrow {
font-size: 32rpx;
}
/* 推荐列表样式 */
.recommend-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}
/* 推荐项卡片样式 */
.recommend-item {
display: flex;
gap: 24rpx;
background: #ffffff;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 24rpx;
padding: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
box-shadow: 0 8rpx 28rpx rgba(120, 185, 215, 0.18);
border: 1rpx solid rgba(255, 255, 255, 0.6);
}
/* 推荐项图片样式 */
.item-image {
width: 200rpx;
height: 160rpx;
@@ -136,7 +133,6 @@ const recommends = [
flex-shrink: 0;
}
/* 推荐项内容区域样式 */
.item-content {
flex: 1;
display: flex;
@@ -145,40 +141,35 @@ const recommends = [
min-width: 0;
}
/* 推荐项标题样式 */
.item-title {
font-size: 30rpx;
font-weight: 600;
color: #1a202c;
color: #2D4A5A;
margin-bottom: 12rpx;
}
/* 推荐项标签列表样式 */
.item-tags {
display: flex;
gap: 12rpx;
margin-bottom: 12rpx;
}
/* 推荐项标签样式 */
.tag {
padding: 6rpx 16rpx;
background: #f1f5f9;
background: rgba(122, 181, 204, 0.12);
border-radius: 8rpx;
font-size: 22rpx;
color: #64748b;
color: #6BA8C0;
}
/* 推荐项描述文字样式 */
.item-desc {
font-size: 24rpx;
color: #94a3b8;
color: #8AABBB;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 推荐项操作区域样式 */
.item-action {
display: flex;
flex-direction: column;
@@ -188,15 +179,13 @@ const recommends = [
flex-shrink: 0;
}
/* 开始训练按钮样式 */
.start-btn {
padding: 16rpx 28rpx;
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
border-radius: 9999rpx;
box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.4);
box-shadow: 0 6rpx 20rpx rgba(122, 181, 204, 0.4);
}
/* 开始训练按钮文字样式 */
.start-btn-text {
font-size: 24rpx;
font-weight: 600;
@@ -204,10 +193,9 @@ const recommends = [
white-space: nowrap;
}
/* 参与人数文字样式 */
.participants {
font-size: 22rpx;
color: #94a3b8;
color: #8AABBB;
white-space: nowrap;
}
</style>
</style>