educational_Template4/pages/learn/index.vue

<template>
	<view class="learn-container">
		<image class="learn-bg" src="/static/home_top_bg.png" mode="aspectFill"></image>
		<!-- 顶部导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<text class="page-title">热门文章</text>
				<view class="search-box">
					<image class="search-icon" src="/static/icon_search_org.png" mode="aspectFit"></image>
					<input class="search-input" type="text" placeholder="搜索文章" placeholder-class="search-placeholder" />
					<button class="search-btn">搜索</button>
				</view>
			</view>
		</view>

		<!-- 分类标签栏 - 悬浮在导航栏下方 -->
		<view class="category-tabs-wrap" :style="{ top: (statusBarHeight + 44) + 'px' }">
			<scroll-view scroll-x class="category-tabs">
				<view class="tab-item" :class="{ active: activeCategory === index }" v-for="(category, index) in categories" :key="index" @click="selectCategory(index)">
					<text>{{ category }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 页面内容区域 - 可滚动 -->
		<scroll-view scroll-y class="page-content-scroll" :style="{ paddingTop: (statusBarHeight + 80) + 'px' }">
			<!-- 文章列表 -->
			<view class="article-list">
				<view class="article-card" v-for="(article, index) in articles" :key="index">
					<view class="article-header">
						<text class="article-main-title">{{ article.mainTitle }}</text>
						<text class="article-sub-title">{{ article.subTitle }}</text>
					</view>
					<view class="article-content">
						<image class="article-cover" :src="article.cover" mode="aspectFill"></image>
						<view class="article-info">
							<text class="article-description">{{ article.description }}</text>
							<view class="article-meta">
								<text class="category-tag">{{ article.category }}</text>
								<text class="category-line">|</text>
								<text class="play-count">{{ article.playCount }}次播放</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				categories: ['推荐', '科普', '养生', '中医', '自然', '饮食', '运动'],
				activeCategory: 0,
				articles: [{
					mainTitle: '熬夜党必看：养肝护肾，修复身体的夜间自愈课',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				}, {
					mainTitle: '科学饮食，稳糖稳脂不复发',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				}, {
					mainTitle: '护腰护颈，远离颈椎腰椎病',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				}, {
					mainTitle: '好睡眠，是成年人最高级的养生',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				},{
					mainTitle: '护腰护颈，远离颈椎腰椎病',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				}, {
					mainTitle: '好睡眠，是成年人最高级的养生',
					subTitle: '',
					cover: '/static/course_img.png',
					description: '睡眠是藏在夜里的养生良方。子时入睡，胆经得养；丑时安睡，肝经舒通。一夜好眠，能补气...',
					category: '科普',
					playCount: '2468'
				}]
			};
		},
		methods: {
			selectCategory(index) {
				this.activeCategory = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.learn-container {
		min-height: 100vh;
		background-color: #F8F8F8;
		position: relative;
		.learn-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 380rpx;
		}
	}

	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.navbar-content {
			height: 44px;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.page-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			.search-box {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 8rpx 8rpx 8rpx 24rpx;
			width: 324rpx;
				margin-left: 30rpx;
				border-radius: 36rpx;
border: 2rpx solid #F5723A;

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

				.search-input {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					height: 100%;
				}

				.search-placeholder {
					color: #999999;
				}

				.search-btn {
		
background: linear-gradient( 180deg, #FFA33B 0%, #F5723A 100%);
border-radius: 58rpx 58rpx 58rpx 58rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					padding: 16rpx 24rpx;
					margin-left: 20rpx;
					line-height: 1;
					height: auto;
				}
			}
		}
	}

	.category-tabs-wrap {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
		padding: 20rpx 0;
		
		.category-tabs {
			white-space: nowrap;
			padding: 0 30rpx;
			
			.tab-item {
				display: inline-block;
				margin-right: 68rpx;
				font-size: 30rpx;
				color: #666666;
				position: relative;
				padding-bottom: 10rpx;

				&.active {
					color: #333333;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 6rpx;
						background-color: #FF8D4D;
						border-radius: 3rpx;
					}
				}
			}
		}
	}

	.page-content-scroll {
		height: 100vh;
		box-sizing: border-box;
		
		.article-list {
			padding: 20rpx 24rpx;
			
			.article-card {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 24rpx;

				.article-header {
					margin-bottom: 20rpx;

					.article-main-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						line-height: 1.4;
					}

					.article-sub-title {
						font-size: 28rpx;
						color: #666666;
						margin-top: 8rpx;
					}
				}

				.article-content {
					display: flex;
					align-items: flex-start;

					.article-cover {
						width: 200rpx;
						height: 140rpx;
						border-radius: 12rpx;
						margin-right: 24rpx;
						flex-shrink: 0;
					}

					.article-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 140rpx;

						.article-description {
							font-size: 28rpx;
							color: #666666;
							line-height: 1.5;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.article-meta {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
								color: #999999;
font-size: 24rpx;
							.category-tag {
								padding: 4rpx 12rpx;
								border-radius: 8rpx;
							}
							.category-line {
								margin:0 16rpx;
							}
							.play-count {
							}
						}
					}
				}
			}
		}
	}
</style>