educational_Template3/pages/learn/index.vue

<template>
	<view class="page-container">
		<!-- <view class="status_bar" :style="{ height: statusBarHeight }"></view> -->
		
		<!-- 学习统计卡片 -->
		<view class="stats-card">
			<view class="stats-item">
				<view class="num-box">
					<text class="num">30</text>
					<text class="unit">分钟</text>
				</view>
				<view class="label">今日学习</view>
			</view>
			<view class="divider"></view>
			<view class="stats-item">
				<view class="num-box">
					<text class="num">250</text>
					<text class="unit">金币</text>
				</view>
				<view class="label">累计奖励</view>
			</view>
		</view>

		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(item, index) in studyList" :key="index" @click="goCourse(item)">
				<view class="course-left">
					<image class="cover" :src="item.image" mode="aspectFill"></image>
					<view class="play-tag">{{ item.playCount }}次播放</view>
				</view>
				<view class="course-right">
					<view class="title">{{ item.title }}</view>
					<view class="subtitle">共{{ item.total }}节 | 已学{{ item.learned }}节</view>
					<view class="progress-box">
						<view class="progress-bar">
							<view class="progress-inner" :style="{ width: item.percent + '%' }"></view>
						<text class="percent-text">{{ item.percent }}%</text>

						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: uni.getStorageSync('menuInfo') ? uni.getStorageSync('menuInfo').statusBarHeight : 20,
			studyList: [
				{
					id: 1,
					image: "/static/famous_doctor_img.png",
					title: "中医降脂养肝课",
					playCount: "8.1万",
					total: 20,
					learned: 10,
					percent: 50
				},
				{
					id: 2,
					image: "/static/famous_doctor_img2.png",
					title: "五脏养生操",
					playCount: "8.1万",
					total: 35,
					learned: 10,
					percent: 40
				}
			]
		};
	},
	methods: {
		goCourse(item) {
			uni.navigateTo({
				url: `/pages_course/learn?courseId=${item.id}&type=1`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	width: 100%;
	min-height: 100vh;
	background-color: #F8F9FB;
	padding: 0 30rpx 140rpx;
}

.status_bar {
	width: 100%;
}

.stats-card {
	margin-top: 30rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 40rpx;

	.stats-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.num-box {
			display: flex;
			align-items: baseline;
			margin-bottom: 12rpx;

			.num {
				font-size: 48rpx;
				font-weight: bold;
				color: #1A1A1A;
			}

			.unit {
				font-size: 24rpx;
				color: #999;
				margin-left: 8rpx;
			}
		}

		.label {
			font-size: 26rpx;
			color: #666;
		}
	}

	.divider {
		width: 1rpx;
		height: 80rpx;
		background-color: #F0F0F0;
	}
}

.course-list {
	margin-top: 30rpx;

	.course-item {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		display: flex;
		margin-bottom: 30rpx;

		.course-left {
			position: relative;
			width: 240rpx;
			height: 160rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 24rpx;

			.cover {
				width: 100%;
				height: 100%;
			}

			.play-tag {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 48rpx;
				background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 12rpx;
				display: flex;
				align-items: center;
			}
		}

		.course-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-bottom: 8rpx;
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.progress-box {
				display: flex;
				align-items: center;

				.progress-bar {
					flex: 1;
					height: 12rpx;
					background: #F5F6F8;
					border-radius: 6rpx;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					overflow: hidden;

					.progress-inner {
						height: 100%;
						background: #FEB413;
						border-radius: 6rpx;
					}
				}

				.percent-text {
					font-size:14rpx;
					color: #FFFFFF;
					flex: 1;
					text-align: center;
				}
			}
		}
	}
}
</style>