gym-manage/gym-manage-uniapp/components/index/RecommendCourses.vue

<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>