浏览代码

fix: 调整5个页面模块

wenxingxing 22 小时之前
父节点
当前提交
95189662b1
共有 6 个文件被更改,包括 651 次插入631 次删除
  1. 6 1
      pages/course/catalogueN.nvue
  2. 2 1
      pages/course/info.vue
  3. 5 4
      pages/index/course.vue
  4. 2 1
      pages/index/homePageSearch.vue
  5. 632 621
      pages/index/index.vue
  6. 4 3
      pages/index/video.vue

+ 6 - 1
pages/course/catalogueN.nvue

@@ -46,12 +46,17 @@
 								</view>
 								<text class="es-fs-32 es-mt-4 cateitem-sub">{{ item.title }}</text>
 							</view>
-							<view
+							<view v-if="false"
 								:class="item.courseSort>2 && canShowVip(item) ? 'freeflag freeflag-member':'freeflag freeflag-free'">
 								<text class="es-fs-28 es-fw-400" style="color: #fff;">
 									{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '限时免费'}}
 								</text>
 							</view>
+							<view class="freeflag freeflag-free">
+								<text class="es-fs-28 es-fw-400" style="color: #fff;">
+									限时免费
+								</text>
+							</view>
 							<!-- <view class="vip es-icon-auto es-w-87 es-h-42 es es-ac es-fs-22 es es-ac es-pc" v-if="Number(item.courseSort) - 1 != pickCatalogIdx">
 								<image class="bgImg" src="../../static/images/other/course/cate-bg3.png"></image>
 								<image v-if="item.courseSort > 2 && canShowVip(item)" class="es-icon-22" src="../../static/images/other/course/vip.png"></image>

+ 2 - 1
pages/course/info.vue

@@ -215,10 +215,11 @@
 					<view :id="'cataLogue' + index"
 						:class="pickCatalogIdx == index ? 'active-scrollitem video-directory-scrollitem' : 'video-directory-scrollitem'"
 						v-for="(item, index) in catalogueList" :key="index" @click="pickCatalogAction(index)">
-						<view
+						<view v-if="false"
 							:class="index > 1 && canShowVip(item) ? 'freeflag freeflag-member' : 'freeflag freeflag-free'">
 							{{ index > 1 && canShowVip(item) ? '限时特惠' : '限时免费' }}
 						</view>
+						<view class="freeflag freeflag-free">限时免费</view>
 						<view class="video-directory-num">
 							<text>第{{ item.courseSort }}讲</text>
 							<image v-if='pickCatalogIdx == index' src="@/static/image/hall/hear_icon.png"></image>

+ 5 - 4
pages/index/course.vue

@@ -16,7 +16,7 @@
 				<view class="category-tags" :class="{ collapsed: !categoryExpand }">
 					<view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
 						:class="{ active: categoryIndex === cat.cateId }" @click="handleCategoryIdClick(cat.cateId)">
-						<text>{{ cat.cateName }}</text>
+						<text class="textTwo">{{ cat.cateName }}</text>
 					</view>
 				</view>
 				<view class="expand-btn" @click="categoryExpand = !categoryExpand">
@@ -101,7 +101,7 @@
 								<text class="card-title">{{ course.courseName }}</text>
 								<view class="x-end" style="justify-content: space-between;">
 									<view class="course-meta">
-										<image src="@/static/images/new/renshu.png"></image>
+										<image class="courseMetaIcon" src="@/static/images/new/renshu.png"></image>
 										<text class="meta-count">{{ course.watchUserCount }}</text>
 									</view>
 									<view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
@@ -148,7 +148,7 @@ export default {
 			recommendList: [],
 			recommendPage: {
 				pageNum: 1,
-				pageSize: 10,
+				pageSize: 6,
 				total: 0,
 			},
 		}
@@ -222,6 +222,7 @@ export default {
 
 		// 分页获取为您精选课程列表
 		getPageRecommendCoursesData() {
+			return;
 			if (this.recommendPage.total <= this.recommendList.length) {
 				return;
 			}
@@ -394,7 +395,7 @@ export default {
 }
 
 .category-tags.collapsed {
-	max-height: 100rpx;
+	max-height: 340rpx;
 	overflow: hidden;
 }
 

+ 2 - 1
pages/index/homePageSearch.vue

@@ -131,7 +131,7 @@ export default {
 			recommendList: [],
 			recommendPage: {
 				pageNum: 1,
-				pageSize: 10,
+				pageSize: 6,
 				total: 0,
 			},
 		}
@@ -221,6 +221,7 @@ export default {
 
 		// 分页获取推荐课程列表
 		getPageRecommendCoursesData() {
+			return;
 			if (this.recommendPage.total <= this.recommendList.length) {
 				return;
 			}

+ 632 - 621
pages/index/index.vue

@@ -2,7 +2,7 @@
 	<view class="container">
 		<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
 		<!-- 顶部搜索栏 -->
-		<view class="top-bar" :style="{marginTop: statusBarHeight}">
+		<view class="top-bar" :style="{ marginTop: statusBarHeight }">
 			<view class="search-row" @click="onSearch">
 				<image src="@/static/images/new/search.png" mode=""></image>
 				<text class="search-placeholder">搜索你感兴趣的内容</text>
@@ -53,15 +53,16 @@
 					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
 						<view v-for="(tag, idx) in videoTags" :key="idx" class="tag-item"
 							:class="{ active: videoTagId === tag.cateId }" @click="handleSelectOneType(tag)">
-								<text>{{ tag.cateName }}</text>
-							 	<view v-if="videoTagId === tag.cateId" class="triangle"></view>
+							<text>{{ tag.cateName }}</text>
+							<view v-if="videoTagId === tag.cateId" class="triangle"></view>
 						</view>
 					</scroll-view>
-					<template v-if="oneCourseListData.length >0">
-						<view v-for="(item,index) in oneCourseListData" :key="index" class="x-bc"
+					<template v-if="oneCourseListData.length > 0">
+						<view v-for="(item, index) in oneCourseListData" :key="index" class="x-bc"
 							@click="onWatchLive(item)">
 							<view class="fv-thumb">
-								<image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'" mode="aspectFill"></image>
+								<image class="fv-img" :src="item.imgUrl || '/static/images/new/banner.png'"
+									mode="aspectFill"></image>
 								<view v-if="false" class="live-tag">
 									<text class="live-dot"></text>
 									<text>直播中</text>
@@ -90,13 +91,13 @@
 					</view>
 				</view>
 				<view class="courseTabViewClass">
-					<u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0" lineColor="#FF233CFF"
-						:activeStyle="courseTabActiveStyle" :inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
+					<u-tabs :list="courseTabList" :current="courseCurrentIndex" lineWidth="0" lineHeight="0"
+						lineColor="#FF233CFF" :activeStyle="courseTabActiveStyle"
+						:inactiveStyle="courseTabInactiveStyle" @click="handleSelectCourseTab">
 					</u-tabs>
 				</view>
-				<view v-if="courses.length>0" class="course-list">
-					<view v-for="(course, idx) in courses" :key="idx" class="course-card"
-						@click="onWatchLive(course)">
+				<view v-if="courses.length > 0" class="course-list">
+					<view v-for="(course, idx) in courses" :key="idx" class="course-card" @click="onWatchLive(course)">
 						<view class="course-thumb">
 							<image class="course-img" :src="course.imgUrl || '/static/logo.jpg'" mode="aspectFill">
 							</image>
@@ -124,641 +125,651 @@
 </template>
 
 <script>
-	import {
-		courseTypeDataApi,courseListDataApi
-	} from '@/api/home'
-	export default {
-		data() {
-			return {
-				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
-				videoTagId: null,
-				videoTags: [],
-				oneCourseListData: [],
-				courseTabId: null,
-				courseCurrentIndex: 0,
-				courses: [],
-				courseTabList: [],
-				freePage:{
-					pageNum: 1,
-					pageSize: 10,
-					total: 0,
-				},
-				courseTabActiveStyle: {
-					color: '#FFFFFFFF',
-					fontSize: '32rpx',
-					padding: '8rpx 20rpx 10rpx',
-					background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
-					borderRadius: '32rpx'
-				},
-				courseTabInactiveStyle: {
-					color: '#000000D9',
-					fontSize: '32rpx',
-					background: '#FFFFFFFF',
-					padding: '8rpx 20rpx 10rpx',
-					borderRadius: '32rpx'
-				}
+import {
+	courseTypeDataApi, courseListDataApi
+} from '@/api/home'
+export default {
+	data() {
+		return {
+			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
+			videoTagId: null,
+			videoTags: [],
+			oneCourseListData: [],
+			courseTabId: null,
+			courseCurrentIndex: 0,
+			courses: [],
+			courseTabList: [],
+			freePage: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+			},
+			courseTabActiveStyle: {
+				color: '#FFFFFFFF',
+				fontSize: '32rpx',
+				padding: '8rpx 20rpx 10rpx',
+				background: 'linear-gradient( 135deg, #FF5267 0%, #FF233C 100%)',
+				borderRadius: '32rpx'
+			},
+			courseTabInactiveStyle: {
+				color: '#000000D9',
+				fontSize: '32rpx',
+				background: '#FFFFFFFF',
+				padding: '8rpx 20rpx 10rpx',
+				borderRadius: '32rpx'
 			}
+		}
+	},
+	onLoad() {
+		this.getOneCourseTypeData()
+		this.getFreeCourseTypeData()
+	},
+	methods: {
+		onSearch() {
+			uni.navigateTo({
+				url: '/pages/index/homePageSearch'
+			})
 		},
-		onLoad() {
-			this.getOneCourseTypeData()
-			this.getFreeCourseTypeData()
+		onBannerClick() {
+			uni.navigateTo({
+				url: '/pages/index/course'
+			})
 		},
-		methods: {
-			onSearch() {
-				uni.navigateTo({
-					url: '/pages/index/homePageSearch'
-				})
-			},
-			onBannerClick() {
-				uni.navigateTo({
-					url: '/pages/index/course'
-				})
-			},
-			onMoreVideos() {
-				uni.navigateTo({
-					url: '/pages/index/video'
-				})
-			},
-			// 获取央广原乡行-类型
-			async getOneCourseTypeData() {
-				const params = {
-					pageNum: 1,
-					pageSize: 10,
-					isShow: 1,
-					cateType: 1,
-					yxxTag: 1
-				};
-				const res = await courseTypeDataApi(params);
-				if (res.code === 200) {
-					this.videoTags = res.data.list;
-					if(this.videoTags.length>0){
-						this.videoTagId = this.videoTags[0].cateId;
-						this.oneCourseListData = [];
-						// 获取原乡行课程列表
-						this.getYxxCourseList(this.videoTags[0].cateId)
-					}
+		onMoreVideos() {
+			uni.navigateTo({
+				url: '/pages/index/video'
+			})
+		},
+		// 获取央广原乡行-类型
+		async getOneCourseTypeData() {
+			const params = {
+				pageNum: 1,
+				pageSize: 4,
+				isShow: 1,
+				cateType: 1,
+				yxxTag: 1
+			};
+			const res = await courseTypeDataApi(params);
+			if (res.code === 200) {
+				this.videoTags = res.data.list;
+				if (this.videoTags.length > 0) {
+					this.videoTagId = this.videoTags[0].cateId;
+					this.oneCourseListData = [];
+					// 获取原乡行课程列表
+					this.getYxxCourseList(this.videoTags[0].cateId)
 				}
-			},
-			// 获取免费精品课-类型
-			async getFreeCourseTypeData() {
-				const params = {
-					pageNum: 1,
-					pageSize: 10,
-					isShow: 1,
-					cateType: 1,
-					yxxTag: 0
-				};
-				const res = await courseTypeDataApi(params);
-				if (res.code === 200) {
-					this.courseTabList = res.data.list.map(item => ({
-						id: item.cateId,
-						name: item.cateName
-					}));
-					if(this.courseTabList.length>0){
-						this.courseTabId = this.courseTabList[0].id;
-						this.courses = [];
-						// 获取免费精品课课程列表
-						this.getFreeCourseList(this.courseTabId)
-					}
+			}
+		},
+		// 获取免费精品课-类型
+		async getFreeCourseTypeData() {
+			const params = {
+				pageNum: 1,
+				pageSize: 10,
+				isShow: 1,
+				cateType: 1,
+				yxxTag: 0
+			};
+			const res = await courseTypeDataApi(params);
+			if (res.code === 200) {
+				this.courseTabList = res.data.list.map(item => ({
+					id: item.cateId,
+					name: item.cateName
+				}));
+				this.courseTabList = [
+					{
+						id: 0,
+						name: '精选'
+					},
+					...this.courseTabList
+				]
+				if (this.courseTabList.length > 0) {
+					this.courseTabId = this.courseTabList[0].id;
+					this.courses = [];
+					// 获取免费精品课课程列表
+					this.getFreeCourseList(this.courseTabId)
 				}
-			},
-			// 点击切换央广原乡行-类型
-			handleSelectOneType(e) {
-				this.videoTagId = e.cateId;
-				this.oneCourseListData = [];
-				// 获取原乡行课程列表
-				this.getYxxCourseList(this.videoTagId)
-			},
-			// 点击切换免费精品课-类型
-			handleSelectCourseTab(item) {
-				this.courseCurrentIndex = item.index;
-				this.courseTabId = item.id;
-				this.courses = [];
-				this.freePage.pageNum = 1;
-				this.freePage.total = 0;
-				// 获取免费精品课课程列表
-				this.getFreeCourseList(this.courseTabId)
-			},
+			}
+		},
+		// 点击切换央广原乡行-类型
+		handleSelectOneType(e) {
+			this.videoTagId = e.cateId;
+			this.oneCourseListData = [];
 			// 获取原乡行课程列表
-			async getYxxCourseList(cateId) {
-				const params = {
-					pageNum: 1,
-					pageSize: 10,
-					subCateId: cateId,
-					yxxTag: 1,
-					recommendSlot: 1,
-				};
-				const res = await courseListDataApi(params);
-				if (res.code === 200 && res.data.list.length > 0) {
-					this.oneCourseListData = [res.data.list[0]];
-				}
-			},
+			this.getYxxCourseList(this.videoTagId)
+		},
+		// 点击切换免费精品课-类型
+		handleSelectCourseTab(item) {
+			this.courseCurrentIndex = item.index;
+			this.courseTabId = item.id;
+			this.courses = [];
+			this.freePage.pageNum = 1;
+			this.freePage.total = 0;
 			// 获取免费精品课课程列表
-			async getFreeCourseList(cateId) {
-				const params = {
-					pageNum: this.freePage.pageNum,
-					pageSize: this.freePage.pageSize,
-					subCateId: cateId,
-					yxxTag: 0,
-					recommendSlot: 3,
-				};
-				const res = await courseListDataApi(params);
-				if (res.code === 200) {
-					this.freePage.total = res.data.total;
-					this.courses = [...this.courses, ...res.data.list];
-				}
-			},	
-			onWatchLive(e) {
-				uni.navigateTo({
-					url: `/pages/course/info?courseId=${e.courseId}`
-				})
-			},
-			onMoreCourses() {
-				uni.navigateTo({
-					url: '/pages/index/course'
-				})
-			},
-			// 分页获取免费精品课课程列表
-			getPageFreeCoursesData() {
-				if(this.freePage.total <= this.courses.length){
-					return;
-				}
-				this.freePage.pageNum = this.freePage.pageNum + 1;
-				this.getFreeCourseList(this.courseTabId)
-			},
-		}
+			this.getFreeCourseList(this.courseTabId)
+		},
+		// 获取原乡行课程列表
+		async getYxxCourseList(cateId) {
+			const params = {
+				pageNum: 1,
+				pageSize: 10,
+				subCateId: cateId,
+				yxxTag: 1,
+				recommendSlot: 1,
+			};
+			const res = await courseListDataApi(params);
+			if (res.code === 200 && res.data.list.length > 0) {
+				this.oneCourseListData = [res.data.list[0]];
+			}
+		},
+		// 获取免费精品课课程列表
+		async getFreeCourseList(cateId) {
+			let params = {
+				pageNum: this.freePage.pageNum,
+				pageSize: this.freePage.pageSize,
+				subCateId: cateId,
+				yxxTag: 0,
+				recommendSlot: 3,
+			};
+			if (params.subCateId == 0) {
+				delete params.subCateId;
+			}
+			const res = await courseListDataApi(params);
+			if (res.code === 200) {
+				this.freePage.total = res.data.total;
+				this.courses = [...this.courses, ...res.data.list];
+			}
+		},
+		onWatchLive(e) {
+			uni.navigateTo({
+				url: `/pages/course/info?courseId=${e.courseId}`
+			})
+		},
+		onMoreCourses() {
+			uni.navigateTo({
+				url: '/pages/index/course'
+			})
+		},
+		// 分页获取免费精品课课程列表
+		getPageFreeCoursesData() {
+			if (this.freePage.total <= this.courses.length) {
+				return;
+			}
+			this.freePage.pageNum = this.freePage.pageNum + 1;
+			this.getFreeCourseList(this.courseTabId)
+		},
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.bg {
-		width: 100%;
-		height: 380rpx;
-		position: absolute;
-		top: 0;
-		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;
-		}
-	}
-
-	.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%;
-			}
-
-		}
-	}
-
-	.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-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 {
-		height: 80rpx;
-		white-space: nowrap;
-		margin-bottom: 5rpx;
-	}
-
-	.tag-item {
-		position: relative;
-		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%);
-	}
-
-	/* 底部小三角核心 */
-    .triangle {
-		z-index: 10;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-		bottom: -5px;
-       	width: 0;
-		height: 0;
-		border-left: 30rpx solid transparent;
-  		border-right: 30rpx solid transparent;
-  		border-top: 20rpx solid #FF233C;
-    }
-
-	.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;
-		margin-left: 24rpx;
-		margin-right: 24rpx;
-	}
-
-	.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;
+.bg {
+	width: 100%;
+	height: 380rpx;
+	position: absolute;
+	top: 0;
+	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;
-		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;
-	}
+.search-placeholder {
+	margin-left: 12rpx;
+	font-size: 32rpx;
+	color: rgba(0, 0, 0, 0.25);
+}
 
-	.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;
-	}
+.top-actions {
+	display: flex;
+	align-items: center;
+	margin-left: 20rpx;
+}
 
-	.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;
-	}
+.action-icon {
+	font-size: 36rpx;
+	color: #333;
+	margin-right: 16rpx;
+}
 
-	/* 红色按钮 */
-	.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;
-	}
+.action-icon.scan {
+	font-size: 40rpx;
+}
 
-	.btn-watch2 {
-		width: 168rpx;
-		height: 64rpx;
-		line-height: 60rpx;
-		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;
-	}
+/* 品牌标题 */
+.brand {
+	padding: 0 68rpx 30rpx;
+	background: #fff;
 
-	.courseTabViewClass {
+	image {
 		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 {
+}
+
+.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: 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;
+		height: 210rpx;
+		border-radius: 10rpx;
 		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;
+		.swiper,
+		.swiper-item,
+		.swiper-item image {
+			width: 100%;
+			height: 100%;
 		}
 
 	}
-
-	.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;
-	}
-
-	.emptyCourse {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 200rpx;
-		padding: 24rpx 50rpx;
-		color: #999999;
-	}
+}
+
+.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-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 {
+	height: 80rpx;
+	white-space: nowrap;
+	margin-bottom: 5rpx;
+}
+
+.tag-item {
+	position: relative;
+	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%);
+}
+
+/* 底部小三角核心 */
+.triangle {
+	z-index: 10;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -5px;
+	width: 0;
+	height: 0;
+	border-left: 30rpx solid transparent;
+	border-right: 30rpx solid transparent;
+	border-top: 20rpx solid #FF233C;
+}
+
+.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;
+	margin-left: 24rpx;
+	margin-right: 24rpx;
+}
+
+.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: 60rpx;
+	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;
+	}
+
+}
+
+.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;
+}
+
+.emptyCourse {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 200rpx;
+	padding: 24rpx 50rpx;
+	color: #999999;
+}
 </style>

+ 4 - 3
pages/index/video.vue

@@ -16,7 +16,7 @@
 				<view class="category-tags" :class="{ collapsed: !categoryExpand }">
 					<view v-for="(cat, idx) in categories" :key="idx" class="tag-item"
 						:class="{ active: categoryIndex === cat.cateId }" @click="handleCategoryIdClick(cat.cateId)">
-						<text class="ellipsis">{{ cat.cateName }}</text>
+						<text class="ellipsis2">{{ cat.cateName }}</text>
 					</view>
 				</view>
 				<view class="expand-btn" @click="categoryExpand = !categoryExpand">
@@ -145,7 +145,7 @@ export default {
 			recommendList: [],
 			recommendPage: {
 				pageNum: 1,
-				pageSize: 10,
+				pageSize: 6,
 				total: 0,
 			},
 		}
@@ -219,6 +219,7 @@ export default {
 
 		// 分页获取精彩推荐课程列表
 		getPageRecommendCoursesData() {
+			return;
 			if (this.recommendPage.total <= this.recommendList.length) {
 				return;
 			}
@@ -394,7 +395,7 @@ export default {
 }
 
 .category-tags.collapsed {
-	max-height: 100rpx;
+	max-height: 340rpx;
 	overflow: hidden;
 }