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

修正布局，删改无用页面

Browse Source
This commit is contained in:
liwentao
2026-06-24 08:13:12 +08:00
parent 8d8c823616
commit 0bebce3dc1
24 changed files with 2677 additions and 2796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/recommendCourses/RecommendCourseCard.vue
+102 -162
View File
@@ -1,60 +1,43 @@
<template>
<!-- 推荐团课卡片 -->
<view class="recommend-card" :style="cardStyle" @click="handleCardClick">
<!-- 卡片头部：推荐信息 -->
<!-- 卡片头部：图片 + 推荐标题 -->
<view class="card-header">
<text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
<text class="recommend-content">{{ recommend.recommendContent }}</text>
<view class="recommend-reason" v-if="recommend.recommendReason">
<text class="reason-label">推荐理由：</text>
<text class="reason-text">{{ recommend.recommendReason }}</text>
</view>
</view>
<!-- 分割线 -->
<view class="divider"></view>
<!-- 卡片主体：团课信息 -->
<view class="card-body">
<!-- 团课封面 -->
<view class="course-image-wrapper">
<image :src="courseImage" mode="aspectFill" class="course-image" />
<view class="image-overlay"></view>
<!-- 状态标签 -->
<text :class="['status-tag', tagType]">{{ tagText }}</text>
</view>
<!-- 团课详情 -->
<view class="course-info">
<text class="course-name">{{ courseName }}</text>
<!-- 课程标签 -->
<view class="course-tags">
<text :class="['course-tag', tagType]">{{ tagText }}</text>
<text class="course-type">{{ courseTypeName }}</text>
</view>
<!-- 课程时间 -->
<view class="course-time" v-if="courseStartTime">
<text class="time-icon">📅</text>
<text class="time-text">{{ formattedTime }}</text>
</view>
<!-- 地点 -->
<view class="course-location" v-if="courseLocation">
<text class="location-icon">📍</text>
<text class="location-text">{{ courseLocation }}</text>
</view>
<!-- 参与人数 -->
<view class="course-members">
<text class="members-icon">🔥</text>
<text class="members-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
</view>
<!-- 课程描述 -->
<text class="course-description" v-if="courseDescription">{{ courseDescription }}</text>
<!-- 推荐标题区 -->
<view class="header-info">
<text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
<text class="recommend-content">{{ recommend.recommendContent }}</text>
</view>
</view>
<!-- 课程信息栏 -->
<view class="info-bar">
<view class="info-item">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="info-icon" />
<text class="info-text">{{ formattedTime }}</text>
</view>
<view class="info-item" v-if="courseLocation">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="info-icon" />
<text class="info-text">{{ courseLocation }}</text>
</view>
<view class="info-item">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="info-icon" />
<text class="info-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
</view>
</view>
<!-- 推荐理由 -->
<view class="card-reason" v-if="recommend.recommendReason">
<text class="reason-text">{{ recommend.recommendReason }}</text>
</view>
<!-- 卡片底部：操作按钮 -->
<view class="card-footer" @click.stop="handleJoinCourse">
<view class="action-btn">
@@ -98,13 +81,11 @@ const cardStyle = computed(() => {
})
// 团课信息
const courseName = computed(() => props.recommend.groupCourse?.courseName || '未知课程')
const courseStartTime = computed(() => props.recommend.groupCourse?.startTime)
const courseEndTime = computed(() => props.recommend.groupCourse?.endTime)
const courseMaxMembers = computed(() => props.recommend.groupCourse?.maxMembers)
const courseCurrentMembers = computed(() => props.recommend.groupCourse?.currentMembers)
const courseLocation = computed(() => props.recommend.groupCourse?.location)
const courseDescription = computed(() => props.recommend.groupCourse?.description)
const courseId = computed(() => props.recommend.groupCourse?.id)
// 课程封面图片
@@ -115,16 +96,6 @@ const courseImage = computed(() => {
return `https://your-domain.com${coverImage}`
})
// 课程类型映射
const courseTypeName = computed(() => {
const typeMap = {
1: '瑜伽',
2: '搏击',
3: '塑形'
}
return typeMap[props.recommend.groupCourse?.courseType] || '课程'
})
// 课程标签文本
const tagText = computed(() => {
const current = courseCurrentMembers.value || 0
@@ -194,6 +165,7 @@ const handleJoinCourse = () => {
<style lang="scss">
.recommend-card {
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
@@ -204,63 +176,16 @@ const handleJoinCourse = () => {
margin-bottom: 24rpx;
}
// 卡片头部
// 卡片头部：左图右文
.card-header {
padding: 24rpx;
background: linear-gradient(135deg, rgba(124, 181, 204, 0.1), rgba(156, 207, 223, 0.05));
}
.recommend-title {
font-size: 32rpx;
font-weight: 700;
color: #2D4A5A;
margin-bottom: 12rpx;
display: block;
}
.recommend-content {
display: block;
font-size: 26rpx;
color: #5A7A8A;
line-height: 1.6;
margin-bottom: 12rpx;
}
.recommend-reason {
display: flex;
align-items: flex-start;
gap: 8rpx;
}
.reason-label {
font-size: 24rpx;
color: #8CA0B0;
flex-shrink: 0;
}
.reason-text {
font-size: 24rpx;
color: #6A8A9A;
line-height: 1.5;
}
// 分割线
.divider {
height: 1rpx;
background: linear-gradient(90deg, transparent, rgba(124, 181, 204, 0.3), transparent);
margin: 0 24rpx;
}
// 卡片主体
.card-body {
padding: 24rpx;
display: flex;
gap: 24rpx;
padding: 24rpx;
}
.course-image-wrapper {
width: 200rpx;
height: 200rpx;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
overflow: hidden;
position: relative;
@@ -278,33 +203,17 @@ const handleJoinCourse = () => {
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, rgba(45, 74, 90, 0.4) 0%, transparent 50%);
background: linear-gradient(to top, rgba(45, 74, 90, 0.3) 0%, transparent 60%);
}
// 团课详情
.course-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
}
.course-name {
font-size: 30rpx;
font-weight: 600;
color: #2D4A5A;
}
.course-tags {
display: flex;
align-items: center;
gap: 12rpx;
}
.course-tag {
padding: 6rpx 16rpx;
border-radius: 10rpx;
font-size: 20rpx;
// 状态标签（图片左下角）
.status-tag {
position: absolute;
left: 8rpx;
bottom: 8rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
font-size: 18rpx;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #7CB5CC, #9CCFDF);
@@ -319,41 +228,72 @@ const handleJoinCourse = () => {
}
}
.course-type {
font-size: 22rpx;
color: #8CA0B0;
}
.course-time,
.course-location,
.course-members {
// 推荐标题区
.header-info {
flex: 1;
display: flex;
align-items: center;
gap: 8rpx;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.time-icon,
.location-icon,
.members-icon {
font-size: 24rpx;
}
.time-text,
.location-text,
.members-text {
font-size: 24rpx;
color: #5A7A8A;
}
.course-description {
font-size: 24rpx;
color: #8CA0B0;
line-height: 1.5;
.recommend-title {
font-size: 32rpx;
font-weight: 700;
color: #2D4A5A;
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recommend-content {
font-size: 24rpx;
color: #5A7A8A;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
// 信息栏：时间 | 地点 | 人数
.info-bar {
display: flex;
align-items: center;
gap: 24rpx;
padding: 0 24rpx 16rpx;
}
.info-item {
display: flex;
align-items: center;
gap: 6rpx;
}
.info-icon {
width: 28rpx;
height: 28rpx;
}
.info-text {
font-size: 22rpx;
color: #5A7A8A;
}
// 推荐理由
.card-reason {
margin: 0 24rpx;
padding: 16rpx;
background: rgba(124, 181, 204, 0.06);
border-radius: 12rpx;
border-left: 4rpx solid #7CB5CC;
}
.reason-text {
font-size: 22rpx;
color: #6A8A9A;
line-height: 1.5;
}
// 卡片底部
@@ -363,9 +303,9 @@ const handleJoinCourse = () => {
.action-btn {
width: 100%;
height: 80rpx;
height: 72rpx;
background: linear-gradient(135deg, #82DC82, #66CC66);
border-radius: 40rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;