fix: 调整首页模块

pages/index/index.vue

@@ -37,27 +37,22 @@
 					</swiper>
 				</view>
 			</view>
-			
+
 			<!-- 央广原乡行 视频推荐区 -->
 			<view class="section video-section">
 				<view class="section-head">
 					<view class="section-title-wrap">
 						<image class="play-icon" src="/static/images/new/bofang.png" mode=""></image>
-						<image class="section-title" src="/static/images/new/yyx.png" ></image>
+						<image class="section-title" src="/static/images/new/yyx.png"></image>
 					</view>
 					<view class="section-more" @click="onMoreVideos">查看更多
-					 <image src="/static/images/new/back.png" ></image>
+						<image src="/static/images/new/back.png"></image>
 					</view>
 				</view>
-				<view class="feature-video-card" >
+				<view class="feature-video-card">
 					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
-						<view
-							v-for="(tag, idx) in videoTags"
-							:key="idx"
-							class="tag-item"
-							:class="{ active: videoTagIndex === idx }"
-							@click="videoTagIndex = idx"
-						>
+						<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
+							:class="{ active: videoTagIndex === idx }" @click="videoTagIndex = idx">
 							<text>{{ tag }}</text>
 						</view>
 					</scroll-view>
@@ -75,7 +70,7 @@
 							<view class="btn-watch" @click.stop="onWatchLive">立即观看</view>
 						</view>
 					</view>
-					
+
 				</view>
 			</view>
 
@@ -84,21 +79,23 @@
 				<view class="section-head">
 					<view class="section-title-wrap">
 						<image class="play-icon" src="/static/images/new/bofang.png" mode=""></image>
-						<image class="section-title" src="/static/images/new/jpk.png" ></image>
+						<image class="section-title" src="/static/images/new/jpk.png"></image>
 					</view>
 					<view class="section-more" @click="onMoreCourses">更多课程
-					 <image src="/static/images/new/back.png" ></image>
+						<image src="/static/images/new/back.png"></image>
 					</view>
 				</view>
+				<view class="courseTabViewClass">
+					<u-tabs :list="courseTabList" lineWidth="0" lineHeight="0" lineColor="#FF233CFF"
+						:activeStyle="courseTabActiveStyle" :inactiveStyle="courseTabInactiveStyle">
+					</u-tabs>
+				</view>
 				<view class="course-list">
-					<view
-						v-for="(course, idx) in courses"
-						:key="idx"
-						class="course-card"
-						@click="onCourseClick(course)"
-					>
+					<view v-for="(course, idx) in courses" :key="idx" class="course-card"
+						@click="onCourseClick(course)">
 						<view class="course-thumb">
-							<image class="course-img" :src="course.cover || '/static/logo.jpg'" mode="aspectFill"></image>
+							<image class="course-img" :src="course.cover || '/static/logo.jpg'" mode="aspectFill">
+							</image>
 							<!-- <text class="course-tag">{{ course.tag }}</text> -->
 						</view>
 						<view class="course-info">
@@ -110,7 +107,7 @@
 								</view>
 								<view class="btn-watch2" @click.stop="onCourseClick(course)">立即观看</view>
 							</view>
-							
+
 						</view>
 					</view>
 				</view>
@@ -122,65 +119,118 @@
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
-			videoTagIndex: 0,
-			videoTags: ['恩施', '长白山', '吉林', '武当山', '张家界', '更多'],
-			courses: [
-				{
-					name: '歌唱家刘金的《0基础金曲演唱速练课》',
-					views: '9239',
-					tag: '0基础 金曲演唱速练',
-					cover: ''
-				},
-				{
-					name: '资深编辑邹方斌讲《毛笔书法修心课》',
-					views: '7.2w',
-					tag: '毛笔书法修心课',
-					cover: ''
+	export default {
+		data() {
+			return {
+				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
+				videoTagIndex: 0,
+				videoTags: ['恩施', '长白山', '吉林', '武当山', '张家界', '更多'],
+				courses: [{
+						name: '歌唱家刘金的《0基础金曲演唱速练课》',
+						views: '9239',
+						tag: '0基础 金曲演唱速练',
+						cover: ''
+					},
+					{
+						name: '资深编辑邹方斌讲《毛笔书法修心课》',
+						views: '7.2w',
+						tag: '毛笔书法修心课',
+						cover: ''
+					},
+					{
+						name: '张斌《元气八段锦》系列课',
+						views: '5.9w',
+						tag: '元气八段锦',
+						cover: ''
+					},
+					{
+						name: '翔哥精讲摄影课-手机微距拍摄技巧分享',
+						views: '100w+',
+						tag: '手机微距 拍摄技巧分享',
+						cover: ''
+					}
+				],
+				courseTabList: [{
+						id: 1,
+						name: '精选'
+					},
+					{
+						id: 2,
+						name: '美食烹饪'
+					},
+					{
+						id: 3,
+						name: '居家安全'
+					},
+					{
+						id: 4,
+						name: '膳食营养'
+					},
+					{
+						id: 5,
+						name: '养生食谱'
+					},
+					{
+						id: 6,
+						name: '健康饮食'
+					}
+				],
+				courseTabActiveStyle: {
+					color: '#FFFFFFFF',
+					fontSize: '32rpx',
+					padding: '8rpx 20rpx 10rpx',
+					background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
+					borderRadius: '32rpx'
 				},
-				{
-					name: '张斌《元气八段锦》系列课',
-					views: '5.9w',
-					tag: '元气八段锦',
-					cover: ''
-				},
-				{
-					name: '翔哥精讲摄影课-手机微距拍摄技巧分享',
-					views: '100w+',
-					tag: '手机微距 拍摄技巧分享',
-					cover: ''
+				courseTabInactiveStyle: {
+					color: '#000000D9',
+					fontSize: '32rpx',
+					background: '#FFFFFFFF',
+					padding: '8rpx 20rpx 10rpx',
+					borderRadius: '32rpx'
 				}
-			]
-		}
-	},
-	onLoad() {},
-	methods: {
-		onSearch() {
-			// 可跳转搜索页
-			uni.showToast({ title: '搜索', icon: 'none' })
-		},
-		onBannerClick() {
-			uni.navigateTo({ url: '/pages/index/course' })
-		},
-		onMoreVideos() {
-			uni.navigateTo({ url: '/pages/index/video' })
-		},
-		onWatchLive() {
-			uni.showToast({ title: '立即观看', icon: 'none' })
-			// 可跳转: 
+			}
 		},
-		onMoreCourses() {
-			uni.navigateTo({ url: '/pages/index/course' })
-		},
-		onCourseClick(course) {
-			uni.showToast({ title: course.name, icon: 'none' })
-			// 可跳转课程详情: uni.navigateTo({ url: '/pages_course/videovip?id=' + course.id })
+		onLoad() {},
+		methods: {
+			onSearch() {
+				// 可跳转搜索页
+				uni.showToast({
+					title: '搜索',
+					icon: 'none'
+				})
+			},
+			onBannerClick() {
+				uni.navigateTo({
+					url: '/pages/index/course'
+				})
+			},
+			onMoreVideos() {
+				uni.navigateTo({
+					url: '/pages/index/video'
+				})
+			},
+			onWatchLive() {
+				uni.showToast({
+					title: '立即观看',
+					icon: 'none'
+				})
+				// 可跳转: 
+			},
+			onMoreCourses() {
+				uni.navigateTo({
+					url: '/pages/index/course'
+				})
+			},
+			onCourseClick(course) {
+				uni.showToast({
+					title: course.name,
+					icon: 'none'
+				})
+				// 可跳转课程详情: uni.navigateTo({ url: '/pages_course/videovip?id=' + course.id })
+			}
 		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
@@ -192,378 +242,439 @@ export default {
 		left: 0;
 		z-index: 0;
 	}
-.container {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-	background: #F4F6F7;
-}
-
-/* 顶部搜索 */
-.top-bar {
-	display: flex;
-	align-items: center;
-	padding: 24rpx 24rpx 30rpx;
-	position: relative;
-}
-.search-row {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	height: 76rpx;
-	padding: 0 24rpx;
-	background: rgba(255,255,255,0.5);
-	border-radius: 38rpx;
-	image{
-		width: 44rpx;
-		height: 44rpx;
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background: #F4F6F7;
+	}
+
+	/* 顶部搜索 */
+	.top-bar {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 24rpx 30rpx;
+		position: relative;
+	}
+
+	.search-row {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		height: 76rpx;
+		padding: 0 24rpx;
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 38rpx;
+
+		image {
+			width: 44rpx;
+			height: 44rpx;
+		}
+	}
+
+	.search-placeholder {
+		margin-left: 12rpx;
+		font-size: 32rpx;
+		color: rgba(0, 0, 0, 0.25);
+	}
+
+	.top-actions {
+		display: flex;
+		align-items: center;
+		margin-left: 20rpx;
+	}
+
+	.action-icon {
+		font-size: 36rpx;
+		color: #333;
+		margin-right: 16rpx;
+	}
+
+	.action-icon.scan {
+		font-size: 40rpx;
+	}
+
+	/* 品牌标题 */
+	.brand {
+		padding: 0 68rpx 30rpx;
+		background: #fff;
+
+		image {
+			width: 100%;
+		}
+	}
+
+	.brand-title {
+		display: block;
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 8rpx;
+	}
+
+	.brand-subtitle {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	/* Banner */
+	.banner {
+		position: relative;
+		height: 210rpx;
+		margin: 0 24rpx 40rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+
+		//background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
+		.inner {
+			width: 100%;
+			height: 210rpx;
+			border-radius: 10rpx;
+			overflow: hidden;
+
+			.swiper,
+			.swiper-item,
+			.swiper-item image {
+				width: 100%;
+				height: 100%;
+			}
+
+		}
 	}
-}
-
-.search-placeholder {
-	margin-left: 12rpx;
-	font-size: 32rpx;
-	color: rgba(0,0,0,0.25);
-}
-.top-actions {
-	display: flex;
-	align-items: center;
-	margin-left: 20rpx;
-}
-.action-icon {
-	font-size: 36rpx;
-	color: #333;
-	margin-right: 16rpx;
-}
-.action-icon.scan {
-	font-size: 40rpx;
-}
-
-/* 品牌标题 */
-.brand {
-	padding: 0 68rpx 30rpx;
-	background: #fff;
-	image{
+
+	.banner-bg {
+		position: absolute;
+		left: 0;
+		top: 0;
 		width: 100%;
+		height: 100%;
 	}
-}
-.brand-title {
-	display: block;
-	font-size: 40rpx;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 8rpx;
-}
-.brand-subtitle {
-	font-size: 24rpx;
-	color: #999;
-}
-
-/* Banner */
-.banner {
-	position: relative;
-	height: 210rpx;
-	margin: 0 24rpx 40rpx;
-	border-radius: 16rpx;
-	overflow: hidden;
-	//background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
-	.inner {
+
+	.banner-overlay {
+		position: absolute;
+		left: 0;
+		top: 0;
 		width: 100%;
-		height: 210rpx;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.15);
+	}
+
+	.banner-title {
+		font-size: 48rpx;
+		font-weight: bold;
+		color: #fff;
+		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+		margin-bottom: 8rpx;
+	}
+
+	.banner-desc {
+		font-size: 24rpx;
+		color: rgba(255, 255, 255, 0.95);
+	}
+
+	/* 滚动内容区 */
+	.scroll-content {
+		flex: 1;
+		height: 0;
+	}
+
+	.section {
+		padding-bottom: 32rpx;
+	}
+
+	.section-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
+		padding: 0 24rpx;
+	}
+
+	.section-title {
+		width: 226rpx;
+		height: 36rpx;
+	}
+
+	.section-title-wrap {
+		display: flex;
+		align-items: center;
+	}
+
+	.play-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 10rpx;
+	}
+
+	.section-more {
+		font-size: 26rpx;
+		color: #999;
+
+		image {
+			width: 16rpx;
+			height: 20rpx;
+		}
+	}
+
+	/* 横向标签 */
+	.tag-scroll {
+		white-space: nowrap;
+		margin-bottom: 20rpx;
+	}
+
+	.tag-item {
+		display: inline-block;
+		padding: 6rpx 24rpx;
+		margin-right: 24rpx;
 		border-radius: 10rpx;
+		background: rgba(255, 255, 255, 0.5);
+	}
+
+	.tag-item text {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 36rpx;
+		color: #FFFFFF;
+	}
+
+	.tag-item.active {
+		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
+	}
+
+	.tag-item.active text {
+		color: #fff;
+	}
+
+	/* 特色视频卡片 */
+	.feature-video-card {
+		display: flex;
+		//align-items: center;
+		flex-direction: column;
+		background: linear-gradient(135deg, #5F111A 0%, #37050B 100%);
+		border-radius: 30rpx;
 		overflow: hidden;
-	
-		.swiper,
-		.swiper-item,
-		.swiper-item image {
-			width: 100%;
-			height: 100%;
+		padding: 30rpx 20rpx;
+	}
+
+	.fv-thumb {
+		position: relative;
+		width: 360rpx;
+		height: 240rpx;
+		border-radius: 20rpx;
+		overflow: hidden;
+		margin-right: 20rpx;
+	}
+
+	.fv-img {
+		width: 100%;
+		height: 100%;
+		background: #e0e0e0;
+	}
+
+	.live-tag {
+		position: absolute;
+		left: 0;
+		top: 20rpx;
+		display: flex;
+		align-items: center;
+		width: 130rpx;
+		height: 44rpx;
+		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
+		border-radius: 0rpx 8rpx 8rpx 0rpx;
+	}
+
+	.live-tag text {
+		font-size: 28rpx;
+		color: #fff;
+		margin-left: 6rpx;
+	}
+
+	.live-dot {
+		width: 12rpx;
+		height: 12rpx;
+		background: #fff;
+		border-radius: 50%;
+		animation: blink 1s infinite;
+	}
+
+	@keyframes blink {
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	.fv-info {
+		flex: 1;
+		//padding: 20rpx 24rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+		min-width: 0;
+	}
+
+	.fv-title {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 600;
+		font-size: 36rpx;
+		color: #FFFFFF;
+		line-height: 50rpx;
+		text-align: center;
+		font-style: normal;
+		margin-bottom: 8rpx;
+	}
+
+	.fv-desc {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		line-height: 44rpx;
+		text-align: justify;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	/* 红色按钮 */
+	.btn-watch {
+		width: 188rpx;
+		height: 64rpx;
+		line-height: 64rpx;
+		text-align: center;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		margin-top: 28rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 600;
+		font-size: 32rpx;
+		color: #3F040B;
+	}
+
+	.btn-watch2 {
+		width: 168rpx;
+		height: 64rpx;
+		line-height: 64rpx;
+		text-align: center;
+		background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
+		border-radius: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 600;
+		font-size: 32rpx;
+		color: #FFFFFF;
+	}
+
+	.courseTabViewClass {
+		width: 100%;
+		padding-left: 14rpx;
+		margin-top: 8rpx;
+		margin-bottom: 24rpx;
+	}
+
+	/* 课程列表 */
+	.course-list {
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
+		padding: 0 24rpx
+	}
+
+	.course-card {
+		display: flex;
+		background: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		padding: 20rpx;
+	}
+
+	.course-thumb {
+		position: relative;
+		width: 296rpx;
+		height: 222rpx;
+		border-radius: 20rpx;
+		overflow: hidden;
+		flex-shrink: 0;
+	}
+
+	.course-img {
+		width: 100%;
+		height: 100%;
+		background: #BB6D6D;
+	}
+
+	.course-tag {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		padding: 8rpx 12rpx;
+		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+		font-size: 22rpx;
+		color: #fff;
+	}
+
+	.course-info {
+		flex: 1;
+		padding-left: 24rpx;
+		// padding: 20rpx 24rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-width: 0;
+	}
+
+	.course-name {
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 600;
+		font-size: 36rpx;
+		color: #222222;
+		line-height: 50rpx;
+		text-align: justify;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.course-meta {
+		display: flex;
+		align-items: center;
+
+		image {
+			width: 30rpx;
+			height: 30rpx;
 		}
-	
-	}
-}
-.banner-bg {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-}
-.banner-overlay {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background: rgba(0,0,0,0.15);
-}
-.banner-title {
-	font-size: 48rpx;
-	font-weight: bold;
-	color: #fff;
-	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
-	margin-bottom: 8rpx;
-}
-.banner-desc {
-	font-size: 24rpx;
-	color: rgba(255,255,255,0.95);
-}
-
-/* 滚动内容区 */
-.scroll-content {
-	flex: 1;
-	height: 0;
-}
-.section {
-	padding: 0 24rpx 32rpx;
-}
-.section-head {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 20rpx;
-}
-.section-title {
-	width: 226rpx;
-	height: 36rpx;
-}
-.section-title-wrap {
-	display: flex;
-	align-items: center;
-}
-.play-icon {
-	width: 36rpx;
-	height: 36rpx;
-	margin-right: 10rpx;
-}
-.section-more {
-	font-size: 26rpx;
-	color: #999;
-	image{
-		width: 16rpx;
-		height: 20rpx;
-	}
-}
-
-/* 横向标签 */
-.tag-scroll {
-	white-space: nowrap;
-	margin-bottom: 20rpx;
-}
-.tag-item {
-	display: inline-block;
-	padding: 6rpx 24rpx;
-	margin-right: 24rpx;
-	border-radius: 10rpx;
-	background: rgba(255,255,255,0.5);
-}
-.tag-item text {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 400;
-	font-size: 36rpx;
-	color: #FFFFFF;
-}
-.tag-item.active {
-	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
-}
-.tag-item.active text {
-	color: #fff;
-}
-
-/* 特色视频卡片 */
-.feature-video-card {
-	display: flex;
-	//align-items: center;
-	flex-direction: column;
-	background: linear-gradient( 135deg, #5F111A 0%, #37050B 100%);
-	border-radius: 30rpx;
-	overflow: hidden;
-	padding: 30rpx 20rpx;
-}
-.fv-thumb {
-	position: relative;
-	width: 360rpx;
-	height: 240rpx;
-	border-radius: 20rpx;
-	overflow: hidden;
-	margin-right: 20rpx;
-}
-.fv-img {
-	width: 100%;
-	height: 100%;
-	background: #e0e0e0;
-}
-.live-tag {
-	position: absolute;
-	left:0;
-	top: 20rpx;
-	display: flex;
-	align-items: center;
-	width: 130rpx;
-	height: 44rpx;
-	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
-	border-radius: 0rpx 8rpx 8rpx 0rpx;
-}
-.live-tag text {
-	font-size: 28rpx;
-	color: #fff;
-	margin-left: 6rpx;
-}
-.live-dot {
-	width: 12rpx;
-	height: 12rpx;
-	background: #fff;
-	border-radius: 50%;
-	animation: blink 1s infinite;
-}
-@keyframes blink {
-	50% { opacity: 0.5; }
-}
-.fv-info {
-	flex: 1;
-	//padding: 20rpx 24rpx;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
-	min-width: 0;
-}
-.fv-title {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 600;
-	font-size: 36rpx;
-	color: #FFFFFF;
-	line-height: 50rpx;
-	text-align:center;
-	font-style: normal;
-	margin-bottom: 8rpx;
-}
-.fv-desc {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 400;
-	font-size: 32rpx;
-	color: #FFFFFF;
-	line-height: 44rpx;
-	text-align: justify;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-}
-
-/* 红色按钮 */
-.btn-watch {
-	width: 188rpx;
-	height: 64rpx;
-	line-height: 64rpx;
-	text-align: center;
-	background: #FFFFFF;
-	border-radius: 12rpx;
-	margin-top: 28rpx;
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 600;
-	font-size: 32rpx;
-	color: #3F040B;
-}
-.btn-watch2 {
-	width: 168rpx;
-	height: 64rpx;
-	line-height: 64rpx;
-	text-align: center;
-	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
-	border-radius: 32rpx;
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 600;
-	font-size: 32rpx;
-	color: #FFFFFF;
-}
-/* 课程列表 */
-.course-list {
-	display: flex;
-	flex-direction: column;
-	gap: 24rpx;
-}
-.course-card {
-	display: flex;
-	background: #fff;
-	border-radius: 20rpx;
-	overflow: hidden;
-	padding: 20rpx;
-}
-.course-thumb {
-	position: relative;
-	width: 296rpx;
-	height: 222rpx;
-	border-radius: 20rpx;
-	overflow: hidden;
-	flex-shrink: 0;
-}
-.course-img {
-	width: 100%;
-	height: 100%;
-	background: #BB6D6D;
-}
-.course-tag {
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	padding: 8rpx 12rpx;
-	background: linear-gradient(transparent, rgba(0,0,0,0.6));
-	font-size: 22rpx;
-	color: #fff;
-}
-.course-info {
-	flex: 1;
-	padding-left: 24rpx;
-	// padding: 20rpx 24rpx;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	min-width: 0;
-}
-.course-name {
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 600;
-	font-size: 36rpx;
-	color: #222222;
-	line-height: 50rpx;
-	text-align: justify;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-}
-.course-meta {
-	display: flex;
-	align-items: center;
-	image{
-		width: 30rpx;
-		height: 30rpx;
-	}
-	
-}
-.meta-icon {
-	font-size: 24rpx;
-	margin-right: 6rpx;
-	color: #999;
-}
-.meta-count {
-	margin-left: 10rpx;
-	font-family: PingFangSC, PingFang SC;
-	font-weight: 400;
-	font-size: 32rpx;
-	color: #666666;
-}
-
-/* 底部占位（为全局 tabBar 留出空间） */
-.bottom-placeholder {
-	height: 120rpx;
-}
-</style>
+
+	}
+
+	.meta-icon {
+		font-size: 24rpx;
+		margin-right: 6rpx;
+		color: #999;
+	}
+
+	.meta-count {
+		margin-left: 10rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 32rpx;
+		color: #666666;
+	}
+
+	/* 底部占位（为全局 tabBar 留出空间） */
+	.bottom-placeholder {
+		height: 120rpx;
+	}
+
+	::v-deep .u-tabs__wrapper__nav__item {
+		padding: 0 10rpx !important;
+	}
+</style>