educational_Template3/pages/live/index.vue

<template>
	<view class="live-container">
		<!-- 状态栏占位 -->
		<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">讲堂</text>
			<view class="search-box" @click="toSearch">
				<image class="search-icon" src="/static/search_gray.png" mode="aspectFit"></image>
				<text class="placeholder">搜索课程</text>
			</view>
			<!-- 右侧留出微信胶囊位 -->
			<view class="capsule-placeholder"></view>
		</view>

		<!-- 分类切换栏 -->
		<view class="category-wrapper">
			<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
				<view class="category-list">
					<view 
						v-for="(item, index) in categories" 
						:key="index" 
						class="category-item"
						:class="{ active: currentCateIndex === index }"
						@click="changeCate(index)"
					>
						<text class="cate-name">{{ item }}</text>
						<view class="active-line" v-if="currentCateIndex === index"></view>
					</view>
				</view>
			</scroll-view>
			<view class="expand-btn">
				<image class="arrow-icon" src="/static/icon_arrow_down.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 课程列表 -->
		<scroll-view class="course-scroll" scroll-y @scrolltolower="loadMore">
			<view class="course-list">
				<view 
					class="course-item" 
					v-for="(item, index) in courseList" 
					:key="index"
					@click="goDetail(item)"
				>
					<image class="course-thumb" :src="item.image || '/static/course_img.png'" mode="aspectFill"></image>
					<view class="course-content">
						<view class="course-title-wrap">
							<text class="course-title ellipsis-2">{{ item.title }}</text>
						</view>
						<view class="course-footer">
							<text class="play-count">{{ item.playCount }}次播放</text>
							<view class="study-btn">去学习</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部占位，防止被系统tabbar遮挡 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			currentCateIndex: 0,
			categories: ['热门好课', '养生', '健康饮食', '乐器', '慢性病', '心理健康', '运动健身', '家庭教育'],
			courseList: [
				{
					id: 1,
					title: "脑梗塞是帕金森病的发病因素吗?",
					image: "/static/famous_doctor_img.png",
					playCount: "25862"
				},
				{
					id: 2,
					title: "合理的运动与健康",
					image: "/static/famous_doctor_img2.png",
					playCount: "25862"
				},
				{
					id: 3,
					title: "合理的运动与健康",
					image: "/static/course_img.png",
					playCount: "25862"
				},
				{
					id: 4,
					title: "合理的运动与健康",
					image: "/static/famous_doctor_img.png",
					playCount: "25862"
				},
				{
					id: 5,
					title: "合理的运动与健康",
					image: "/static/famous_doctor_img2.png",
					playCount: "25862"
				},
				{
					id: 6,
					title: "合理的运动与健康",
					image: "/static/course_img.png",
					playCount: "25862"
				}
			]
		};
	},
	methods: {
		changeCate(index) {
			this.currentCateIndex = index;
			// 这里通常会重新请求对应分类的课程数据
		},
		toSearch() {
			uni.navigateTo({
				url: '/pages/home/productSearch'
			});
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages_course/learn?courseId=${item.id}&type=1`
			});
		},
		loadMore() {
			console.log('加载更多...');
		}
	}
};
</script>

<style lang="scss" scoped>
.live-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}

.status_bar {
	width: 100%;
	background-color: #ffffff;
}

.nav-bar {
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #ffffff;

	.nav-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #1A1A1A;
		margin-right: 30rpx;
	}

	.search-box {
		flex: 1;
		height: 72rpx;
		background: #F5F6F8;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		margin-right: 20rpx;

		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		.placeholder {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.capsule-placeholder {
		width: 180rpx; // 模拟微信胶囊宽度
	}
}

.category-wrapper {
	display: flex;
	align-items: center;
	padding: 20rpx 0 10rpx;
	background-color: #ffffff;

	.category-scroll {
		flex: 1;
		white-space: nowrap;
		padding-left: 30rpx;

		.category-list {
			display: inline-flex;
			align-items: center;

			.category-item {
				margin-right: 50rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 15rpx;

				.cate-name {
					font-size: 32rpx;
					color: #666666;
					transition: all 0.3s;
				}

				.active-line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background: #5B37FD;
					border-radius: 3rpx;
				}

				&.active {
					.cate-name {
						color: #1A1A1A;
						font-weight: bold;
					}
				}
			}
		}
	}

	.expand-btn {
		width: 80rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, rgba(255,255,255,0), #fff 20%);

		.arrow-icon {
			width: 32rpx;
			height: 32rpx;
			opacity: 0.4;
		}
	}
}

.course-scroll {
	flex: 1;
	overflow: hidden;
}

.course-list {
	padding: 20rpx 30rpx;

	.course-item {
		display: flex;
		padding: 24rpx 0;

		&:last-child {
			border-bottom: none;
		}

		.course-thumb {
			width: 240rpx;
			height: 150rpx;
			border-radius: 12rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

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

			.course-title-wrap {
				.course-title {
					font-size: 32rpx;
					color: #1A1A1A;
					font-weight: 500;
					line-height: 1.4;
				}
			}

			.course-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.play-count {
					font-size: 24rpx;
					color: #CCCCCC;
				}

				.study-btn {
					padding: 10rpx 36rpx;
					background: #5B37FD;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 32rpx;
				}
			}
		}
	}
}

.bottom-placeholder {
	height: 40rpx;
}

.ellipsis-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
</style>