fix: 调整课程目录(小节)弹窗页面

pages/course/catalogueN.nvue

@@ -1,22 +1,25 @@
 <template>
-	<view class="es content es-bc-white" style="position: relative; flex-direction: column" @touchmove.stop>
+	<view class="es content es-bc-white es-br-30" style="position: relative; flex-direction: column;" @touchmove.stop>
 		<view class="pBox es-bc-white es-br-20 flex" style="padding: 20rpx 0; box-sizing: border-box">
-			<view class="es-view-w-x">
-				<view class="es es-h-60">
+			<view class="es-view-w-x" style="padding-left:24rpx;padding-right: 24rpx;">
+				<view class="es topTitleViewClass">
 					<view class="es es-ac es-h-44 es-mt-5">
-						<image class="es-w-27 es-h-29" src="../../static/images/other/course/icon-6.png"></image>
-						<text class="es-ml-20 es-fs-28 es-fw-600 es-f1">目录</text>
-						<text class="es-ml-1 es-fs-30 es-c-99">（{{ totalNum }}）</text>
+						<image class="es-w-30 es-h-30" src="/static/images/new/ke_list-icon.png"></image>
+						<text class="es-ml-20 es-fs-36 es-fw-600 es-f1" style="color: #222;">课程目录</text>
+						<!-- <text class="es-ml-1 es-fs-30 es-c-99">（{{ totalNum }}）</text> -->
 					</view>
-					<image @tap="closePopup()" style="position: absolute; right: 10rpx; top: 0rpx" class="es-w-40 es-h-40" src="../../static/images/close40.png"></image>
+					<image @tap="closePopup()" class="es-w-50 es-h-50" src="../../static/images/close_icon.png"></image>
 				</view>
 
-				<view class="es-f1 es-bc-f7 es-h-74 es-br es es-ac flex" style="box-sizing: border-box; margin-bottom: 24rpx">
+				<view v-if="false" class="es-f1 es-bc-f7 es-h-74 es-br es es-ac flex"
+					style="box-sizing: border-box; margin-bottom: 24rpx">
 					<image class="es-icon-26 es-ml-27" src="../../static/images/other/search/search.png"></image>
 					<view class="es-f1 es-ipt es-ml-10 es-bc-f7 es-br-10 flex">
-						<input v-model="searchText" placeholder="请输入关键字搜索" @input="onKeyInput" class="es-h-76 es-fs-28" placeholder-class="es-c-b4" />
+						<input v-model="searchText" placeholder="请输入关键字搜索" @input="onKeyInput" class="es-h-76 es-fs-28"
+							placeholder-class="es-c-b4" />
 					</view>
-					<view @tap="doSearch()" class="es-w-108 es-h-54 es-br es-bc es-mr-10 es es-ac es-pc es-fw-500 es-fs-26">
+					<view @tap="doSearch()"
+						class="es-w-108 es-h-54 es-br es-bc es-mr-10 es es-ac es-pc es-fw-500 es-fs-26">
 						<text class="es-c-white es-fs-26">搜索</text>
 					</view>
 				</view>
@@ -24,28 +27,29 @@
 				<!-- 下面是目录列表 -->
 
 				<list loadmoreoffset="100" @loadmore="loadmore" :style="{ height: listHei + 'px' }">
-					<refresh @pullingdown="onpullingdown" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'" class="refresh x-c">
+					<refresh @pullingdown="onpullingdown" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'"
+						class="refresh x-c">
 						<loading-indicator style="width: 22px; height: 22px; color: #999"></loading-indicator>
 						<text class="es-fs-32 es-ml-8">{{ refreshText }}</text>
 					</refresh>
 
 					<cell v-for="(item, index) in dataList" :key="index">
-						<view @click="pickCatalogAction(Number(item.courseSort) - 1)" 
-						:class="Number(item.courseSort) - 1 == pickCatalogIdx ?'cateitem cate-bg1': 'cateitem cate-bg2'">
+						<view @click="pickCatalogAction(Number(item.courseSort) - 1)"
+							:class="Number(item.courseSort) - 1 == pickCatalogIdx ?'cateitem cate-bg1': 'cateitem cate-bg2'">
 							<!-- <image class="bgImg" :src="Number(item.courseSort) - 1 == pickCatalogIdx ? '../../static/images/other/course/cate-bg1.png'
 										: '../../static/images/other/course/cate-bg2.png'"></image> -->
 							<view class="es-f1 flex">
-								<view class="es es-ac flex">
-									<text class="es-fs-30 es-fw-600 cateitem-title">第{{ item.courseSort }}讲</text>
-									<image src="../../static/images/other/course/play-loading.png" class="es-w-60 es-h-31 es-ml-10" 
-									v-if="Number(item.courseSort) - 1 == pickCatalogIdx"></image>
+								<view class="es es-ac flex es-mb-12">
+									<text class="es-fs-32 es-fw-600 cateitem-title">第{{ item.courseSort }}讲</text>
+									<image src="@/static/image/hall/hear_icon.png" class="es-w-32 es-h-32 es-ml-10"
+										v-if="Number(item.courseSort) - 1 == pickCatalogIdx"></image>
 								</view>
-								<text class="es-fs-26 es-mt-4 cateitem-sub">{{ item.title }}</text>
+								<text class="es-fs-32 es-mt-4 cateitem-sub">{{ item.title }}</text>
 							</view>
 							<view
 								:class="item.courseSort>2 && canShowVip(item) ? 'freeflag freeflag-member':'freeflag freeflag-free'">
-								<text class="es-fs-22 es-fw-500" style="color: #fff;">
-									{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '免费'}}
+								<text class="es-fs-28 es-fw-400" style="color: #fff;">
+									{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '限时免费'}}
 								</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">
@@ -63,8 +67,10 @@
 					</cell>
 
 					<cell>
-						<view v-if="totalNum == 0 && reqDataCode != 0" class="y-f" style="height: 300px; padding-top: 200rpx">
-							<image @tap="refreshPage()" class="es-w-124 es-h-80" style="width: 187rpx; height: 120rpx" src="../../static/image/nodata.png"></image>
+						<view v-if="totalNum == 0 && reqDataCode != 0" class="y-f"
+							style="height: 300px; padding-top: 200rpx">
+							<image @tap="refreshPage()" class="es-w-124 es-h-80" style="width: 187rpx; height: 120rpx"
+								src="../../static/image/nodata.png"></image>
 							<text @tap="refreshPage()" class="es-c-33">{{ reqDataCode == 1 ? '暂无数据' : '请求超时' }}</text>
 						</view>
 					</cell>
@@ -75,152 +81,168 @@
 </template>
 
 <script>
-	
-import { getCourseById, getCourseVideoList, addDuration } from '@/api/course';
-import { isEmpty } from '@/utils/common';
-export default {
-	data() {
-		return {
-			dataList: [],
-			pickCatalog: { videoUrl: '', thumbnail: '', duration: 0, videoId: 0, seconds: 0 },
-			pickCatalogIdx: 0,
-			searchText: '',
-			videoContext: null,
-			video: {
-				percent: 10 //进度百分比
-			},
-			courseId: null,
-			data: {
+	import {
+		getCourseById,
+		getCourseVideoList,
+		addDuration
+	} from '@/api/course';
+	import {
+		isEmpty
+	} from '@/utils/common';
+	export default {
+		data() {
+			return {
+				dataList: [],
+				pickCatalog: {
+					videoUrl: '',
+					thumbnail: '',
+					duration: 0,
+					videoId: 0,
+					seconds: 0
+				},
+				pickCatalogIdx: 0,
+				searchText: '',
+				videoContext: null,
+				video: {
+					percent: 10 //进度百分比
+				},
 				courseId: null,
-				imgUrl: '',
-				talentAvatar: '',
-				price: '',
-				remark: '',
-				noteNum: 0,
-				courseName: '',
-				description: '',
-				cataIndex: 0,
-				isFast: false,
-				isAutoPlay: false
-			},
-			danmuList: [],
-			tempStudyTimes: 0,
-			studyTimes: 0,
-			audioContext: null,
-			audioPlayIng: false,
-			showFullScreenBtn: true,
-			isLearning: false,
-			myVideo: null,
-			showProgress: true,
-			videoUrl: 'https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4',
-			poster: '',
-			videoId: null,
-			isAutoPlay: false,
-			loadMoreText: '加载中...',
-			showLoadMore: false,
-			isLastPage: false,
-			refreshing: false,
-			refreshText: '下拉刷新',
-			pageNum: 1,
-			listHei: 0,
-			totalNum: 0,
-			reqDataCode: 0, //1:正常加载 -1 请求超时
-			myUserInfo: {}
-		};
-	},
-	mounted() {
-		try {
-			let that = this;
-			this.subNVue = uni.getSubNVueById('catalogueN');
-			uni.$on('catalogue', (data) => {
-				console.log('qxj catalogue ondata:' + JSON.stringify(data));
-				that.courseId = data.courseId;
-				that.videoId = data.videoId;
-				that.pickCatalogIdx = data.pickCatalogIdx;
-				if (that.reqDataCode == 1) {
-					return;
-				}
-				that.getCourseInfo();
-				that.upCallback();
-			});
-
-			uni.$on('pickCatalogIdx', (data) => {
-				that.pickCatalogIdx = data.pickCatalogIdx;
-				if (data.type == 'catalogueN') {
-					that.closePopup();
-				}
-			});
+				data: {
+					courseId: null,
+					imgUrl: '',
+					talentAvatar: '',
+					price: '',
+					remark: '',
+					noteNum: 0,
+					courseName: '',
+					description: '',
+					cataIndex: 0,
+					isFast: false,
+					isAutoPlay: false
+				},
+				danmuList: [],
+				tempStudyTimes: 0,
+				studyTimes: 0,
+				audioContext: null,
+				audioPlayIng: false,
+				showFullScreenBtn: true,
+				isLearning: false,
+				myVideo: null,
+				showProgress: true,
+				videoUrl: 'https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4',
+				poster: '',
+				videoId: null,
+				isAutoPlay: false,
+				loadMoreText: '加载中...',
+				showLoadMore: false,
+				isLastPage: false,
+				refreshing: false,
+				refreshText: '下拉刷新',
+				pageNum: 1,
+				listHei: 0,
+				totalNum: 0,
+				reqDataCode: 0, //1:正常加载 -1 请求超时
+				myUserInfo: {}
+			};
+		},
+		mounted() {
+			try {
+				let that = this;
+				this.subNVue = uni.getSubNVueById('catalogueN');
+				uni.$on('catalogue', (data) => {
+					console.log('qxj catalogue ondata:' + JSON.stringify(data));
+					that.courseId = data.courseId;
+					that.videoId = data.videoId;
+					that.pickCatalogIdx = data.pickCatalogIdx;
+					if (that.reqDataCode == 1) {
+						return;
+					}
+					that.getCourseInfo();
+					that.upCallback();
+				});
+
+				uni.$on('pickCatalogIdx', (data) => {
+					that.pickCatalogIdx = data.pickCatalogIdx;
+					if (data.type == 'catalogueN') {
+						that.closePopup();
+					}
+				});
 
-			const res = uni.getSystemInfoSync();
-			// this.listHei=res.windowHeight*1.05;
-			this.listHei = res.windowHeight * 0.85 - uni.upx2px(200);
+				const res = uni.getSystemInfoSync();
+				// this.listHei=res.windowHeight*1.05;
+				this.listHei = res.windowHeight * 0.85 - uni.upx2px(200);
 
-			if (!this.$isLogin()) {
-				let useInfo = uni.getStorageSync('userInfo');
-				if (!!useInfo && useInfo != null) {
-					this.myUserInfo = JSON.parse(useInfo);
-				}
-			}
-		} catch (e) {}
-	},
-	onUnload() {
-		// 注销全局配置监听
-		uni.$off('catalogue');
-		uni.$off('pickCatalogIdx');
-	},
-	methods: {
-		getCourseInfo() {
-			getCourseById(this.courseId).then(
-				(res) => {
-					if (res.code == 200) {
-						this.courseData = res.data;
+				if (!this.$isLogin()) {
+					let useInfo = uni.getStorageSync('userInfo');
+					if (!!useInfo && useInfo != null) {
+						this.myUserInfo = JSON.parse(useInfo);
 					}
-				},
-				(rej) => {}
-			);
-		},
-		onpullingdown(e) {
-			if (this.refreshing) return;
-			if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
-				this.refreshText = '下拉更新';
-			} else {
-				this.refreshText = '释放更新';
-			}
+				}
+			} catch (e) {}
 		},
-		onrefresh(e) {
-			console.log('onRefreshing...');
-			this.refreshing = true;
-			this.pageNum = 1;
-			this.upCallback();
-			if (this.refreshing) return;
+		onUnload() {
+			// 注销全局配置监听
+			uni.$off('catalogue');
+			uni.$off('pickCatalogIdx');
 		},
-		loadmore() {
-			if (this.isLastPage) {
-				return;
-			}
-			console.log('loadmore');
-			this.pageNum++;
-			this.showLoadMore = true;
-			setTimeout(() => {
+		methods: {
+			getCourseInfo() {
+				getCourseById(this.courseId).then(
+					(res) => {
+						if (res.code == 200) {
+							this.courseData = res.data;
+						}
+					},
+					(rej) => {}
+				);
+			},
+			onpullingdown(e) {
+				if (this.refreshing) return;
+				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
+					this.refreshText = '下拉更新';
+				} else {
+					this.refreshText = '释放更新';
+				}
+			},
+			onrefresh(e) {
+				console.log('onRefreshing...');
+				this.refreshing = true;
+				this.pageNum = 1;
 				this.upCallback();
-			}, 300);
-		},
-		pickCatalogAction(index) {
-			const data = {
-				index: index,
-				type: 'catalogueN'
-			};
-			uni.$emit('pickCatalogAction', data);
-		},
-		/*下拉刷新的回调 */
-		upCallback() {
-			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
-			if (this.courseId == null) {
-				this.courseId = 7;
-			}
-			const params = { courseId: this.courseId, keyword: this.searchText };
-			uni.showLoading({ title: '' });
-			getCourseVideoList(params, this.pageNum).then((res) => {
+				if (this.refreshing) return;
+			},
+			loadmore() {
+				if (this.isLastPage) {
+					return;
+				}
+				console.log('loadmore');
+				this.pageNum++;
+				this.showLoadMore = true;
+				setTimeout(() => {
+					this.upCallback();
+				}, 300);
+			},
+			pickCatalogAction(index) {
+				const data = {
+					index: index,
+					type: 'catalogueN'
+				};
+				uni.$emit('pickCatalogAction', data);
+			},
+			/*下拉刷新的回调 */
+			upCallback() {
+				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+				if (this.courseId == null) {
+					this.courseId = 7;
+				}
+				const params = {
+					courseId: this.courseId,
+					keyword: this.searchText
+				};
+				uni.showLoading({
+					title: ''
+				});
+				getCourseVideoList(params, this.pageNum).then((res) => {
 						uni.hideLoading();
 						if (res.code == 200) {
 							setTimeout(() => {
@@ -254,213 +276,234 @@ export default {
 					this.refreshText = '加载完成';
 					this.reqDataCode = -1;
 				});
-		},
-		closePopup() {
-			const subNVue = uni.getSubNVueById('catalogueN');
-			subNVue.hide('slide-out-bottom');
-		},
-		doSearch() {
-			this.pageNum = 1;
-			this.upCallback();
-		},
-		refreshPage() {
-			this.pageNum = 1;
-			this.upCallback();
-		},
-		onKeyInput: function (event) {
-			this.refreshPage();
-		},
-		canShowVip(item) {
-			return true;
-			if (this.myUserInfo.isVip) {
-				return false;
+			},
+			closePopup() {
+				const subNVue = uni.getSubNVueById('catalogueN');
+				subNVue.hide('slide-out-bottom');
+			},
+			doSearch() {
+				this.pageNum = 1;
+				this.upCallback();
+			},
+			refreshPage() {
+				this.pageNum = 1;
+				this.upCallback();
+			},
+			onKeyInput: function(event) {
+				this.refreshPage();
+			},
+			canShowVip(item) {
+				return true;
+				if (this.myUserInfo.isVip) {
+					return false;
+				}
+				return item.isVip == 1 && item.isBuy == 0;
 			}
-			return item.isVip == 1 && item.isBuy == 0;
 		}
-	}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-	
-page {
-	background-color: white;
-}
-.cateitem {
-	 /* es es-ac es-icon-auto es-view-w-x es-pt-15 es-pb-15 es-mb-16 */
-	padding: 20rpx;
-	margin-bottom: 20rpx;
-	border-radius: 16rpx 16rpx 16rpx 16rpx;
-}
-.cate-bg1 {
-	background-color: #eef5fd;
-	.cateitem-title {
-		color: #FF233C !important;
+	page {
+		background-color: white;
 	}
-	.cateitem-sub {
-		color: #FF233C !important;
+
+	.topTitleViewClass {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 26rpx !important;
+		border-bottom: 2rpx solid #D8D8D8;
+		margin-bottom: 24rpx;
 	}
-}
-.cate-bg2 {
-	background-color: #F5F7FA;
-	.cateitem-sub {
-		color: #757575
+
+	.cateitem {
+		/* es es-ac es-icon-auto es-view-w-x es-pt-15 es-pb-15 es-mb-16 */
+		padding: 24rpx;
+		margin-bottom: 24rpx;
+		border-radius: 20rpx;
 	}
-}
-.freeflag {
-	min-width: 68rpx;
-	// height: 32rpx;
-	padding: 4rpx 12rpx;
-	text-align: center;
-	line-height: 32rpx;
-	position: absolute;
-	right: 0;
-	top: 0;
-	border-radius: 0 16rpx 0 16rpx;
-	&-free {
-		// background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 100% 32rpx;
-		background-color: #FF233C;
+
+	.cate-bg1 {
+		background-color: #FFF0F2;
+
+		.cateitem-title {
+			color: #FF233C !important;
+		}
+
+		.cateitem-sub {
+			color: #FF233C !important;
+		}
 	}
 
-	&-member {
-		// background: url('@/static/image/hall/member_label_bg.png') no-repeat right / 100% 32rpx;
-		background-color: #FFB205;
+	.cate-bg2 {
+		background-color: #F5F5F5;
+
+		.cateitem-title {
+			color: #000 !important;
+		}
+
+		.cateitem-sub {
+			color: #666 !important;
+		}
 	}
-}
-
-.fl-row {
-	display: flex;
-	flex-direction: row;
-}
-
-.pBox {
-	background-color: #171a1d;
-	box-sizing: border-box;
-}
-
-.es-icon-course-icon-6 {
-	background-image: url(../../static/images/other/course/icon-6.png);
-}
-
-.es-icon-course-close {
-	background-image: url(../../static/images/other/course/close.png);
-}
-
-.es-icon-course-cate-bg1 {
-	background-image: url(../../static/images/other/course/cate-bg1.png);
-}
-
-.es-icon-course-cate-bg2 {
-	background-image: url(../../static/images/other/course/cate-bg2.png);
-}
-
-.es-icon-course-cate-bg3 {
-	background-image: url(../../static/images/other/course/cate-bg3.png);
-}
-
-.es-icon-course-play-loading {
-	background-image: url(../../static/images/other/course/play-loading.png);
-}
-
-.es-icon-course-cate-vip {
-	background-image: url(../../static/images/other/course/vip.png);
-}
-
-.es-icon-search-search {
-	background-image: url(../../static/images/other/search/search.png);
-}
-
-.bgImg {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-}
-
-.vip {
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
-.video {
-	height: 380rpx;
-	position: relative;
-	display: flex;
-	
-}
-
-.video .cover {
+
+	.freeflag {
+		min-width: 132rpx;
+		// height: 32rpx;
+		padding: 4rpx 12rpx;
+		text-align: center;
+		line-height: 32rpx;
+		position: absolute;
+		right: 0;
+		top: 0;
+		border-radius: 0 20rpx 0 20rpx;
+
+		&-free {
+			// background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 100% 32rpx;
+			background-color: #FF233C;
+		}
+
+		&-member {
+			// background: url('@/static/image/hall/member_label_bg.png') no-repeat right / 100% 32rpx;
+			background-color: #FFB205;
+		}
+	}
+
+	.fl-row {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.pBox {
+		background-color: #171a1d;
+		box-sizing: border-box;
+	}
+
+	.es-icon-course-icon-6 {
+		background-image: url(../../static/images/other/course/icon-6.png);
+	}
+
+	.es-icon-course-close {
+		background-image: url(../../static/images/other/course/close.png);
+	}
+
+	.es-icon-course-cate-bg1 {
+		background-image: url(../../static/images/other/course/cate-bg1.png);
+	}
+
+	.es-icon-course-cate-bg2 {
+		background-image: url(../../static/images/other/course/cate-bg2.png);
+	}
+
+	.es-icon-course-cate-bg3 {
+		background-image: url(../../static/images/other/course/cate-bg3.png);
+	}
+
+	.es-icon-course-play-loading {
+		background-image: url(../../static/images/other/course/play-loading.png);
+	}
+
+	.es-icon-course-cate-vip {
+		background-image: url(../../static/images/other/course/vip.png);
+	}
+
+	.es-icon-search-search {
+		background-image: url(../../static/images/other/search/search.png);
+	}
+
+	.bgImg {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+	}
+
+	.vip {
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
+	.video {
+		height: 380rpx;
+		position: relative;
+		display: flex;
+
+	}
+
+	.video .cover {
 		position: absolute;
 		left: 0;
 		top: 0;
 		width: 100%;
 		height: 100%;
 		border-radius: 20rpx;
-}
+	}
 
-.video .playIcon {
+	.video .playIcon {
 		position: absolute;
 		width: 44rpx;
 		height: 44rpx;
 		z-index: 10;
 		right: 26rpx;
 		bottom: 50rpx;
-}
-
-.video video {
-	width: 100%;
-	height: 100%;
-	border-radius: 20rpx;
-}
-
-.video .video-1,
-.video .video-2,
-.video .video-3,
-.video .video-4 {
-	position: absolute;
-	width: 20rpx;
-	height: 20rpx;
-	z-index: 1;
-}
-
-.video .video-1 {
-	left: 0;
-	top: 0;
-}
-.video .video-2 {
-	right: 0;
-	top: 0;
-}
-
-.video .video-3 {
-	left: 0;
-	bottom: 0;
-}
-.video .video-4 {
-	right: 0;
-	bottom: 0;
-}
-
-.refresh {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	height: 50px;
-}
-
-.loading-more {
-	align-items: center;
-	justify-content: center;
-	padding-top: 14px;
-	padding-bottom: 14px;
-	text-align: center;
-}
-
-.loading-more-text {
-	font-size: 28rpx;
-	color: #999;
-}
-
-</style>
+	}
+
+	.video video {
+		width: 100%;
+		height: 100%;
+		border-radius: 20rpx;
+	}
+
+	.video .video-1,
+	.video .video-2,
+	.video .video-3,
+	.video .video-4 {
+		position: absolute;
+		width: 20rpx;
+		height: 20rpx;
+		z-index: 1;
+	}
+
+	.video .video-1 {
+		left: 0;
+		top: 0;
+	}
+
+	.video .video-2 {
+		right: 0;
+		top: 0;
+	}
+
+	.video .video-3 {
+		left: 0;
+		bottom: 0;
+	}
+
+	.video .video-4 {
+		right: 0;
+		bottom: 0;
+	}
+
+	.refresh {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		height: 50px;
+	}
+
+	.loading-more {
+		align-items: center;
+		justify-content: center;
+		padding-top: 14px;
+		padding-bottom: 14px;
+		text-align: center;
+	}
+
+	.loading-more-text {
+		font-size: 28rpx;
+		color: #999;
+	}
+</style>

pages/course/info.vue

@@ -3270,7 +3270,7 @@
 		z-index: 900;
 		bottom: 0;
 		width: 100%;
-		height: 180rpx;
+		height: 160rpx;
 		background-color: #fff;
 		padding: 0 24rpx 10rpx;
 		display: flex;
@@ -3297,7 +3297,7 @@
 			font-size: 40rpx;
 			text-align: center;
 			color: #FFFFFF;
-			line-height: 90rpx;
+			line-height: 96rpx;
 			margin-right: 25rpx;
 		}