Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop

src/components/comment-input/comment-input.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="main-div" @click.stop>
+	<view class="main-div" @click.stop="clickHandler">
 		<view class="main-input-div">
 			<!-- 多行文本 -->
 			<view class="input-div">
@@ -9,7 +9,7 @@
 					ref="textareaRef"
 					v-model="value"
 					border="none"
-					placeholder="发条评论，和大家一起讨论"
+					:placeholder="placeholder"
 					:customStyle="customStyle"
 					autoHeight
 					:adjustPosition="false"
@@ -21,18 +21,33 @@
 				></uv-textarea>
 			</view>
 			
-			<view class="num" v-if="isShow">
+			<view class="picture-cont" v-if="isShow && !isReply">
 				<!-- 下方的图片展示框 -->
 				<view class="imgs-div" v-if="!isImg">
 					<image-preview class="upload-img" v-for="item in fileList" :src="item" mode=""></image-preview>
 				</view>
 				<view class="picture" v-if="isImg">
-					<picture-upload :limit="3" v-model="fileList"></picture-upload>
+					<picture-upload :limit="4" v-model="fileList"></picture-upload>
 					<!-- </view> -->
 				</view>
-				<view class="tips font_pf" v-if="isImg">最多可添加3张图片</view>
+				<view class="picture-tips" v-if="isImg">最多可添加4张图片</view>
 				<view class="num-box">
-					<view class="font_pf fz-28 c-666">综合评分</view>
+					<view class="tab" v-if="isShow">
+						<view
+							class="tab-btn"
+							:class="{ 'is-active': bbsTag == 'SUG' }"
+							@click="bbsTag = 'SUG'"
+						>
+							建议
+						</view>
+						<view
+							class="tab-btn"
+							:class="{ 'is-active': bbsTag == 'ASK' }"
+							@click="bbsTag = 'ASK'"
+						>
+							提问
+						</view>
+					</view>
 					<view class="slider-box">
 						<slider
 							:min="0"
@@ -42,32 +57,17 @@
 							:step="0.1"
 							:show-value="true"
 							:blockSize="14"
+							class="custom-slider"
 						></slider>
 					</view>
 				</view>
 			</view>
-			<view class="tab" v-if="isShow">
-				<view
-					class="tab-btn"
-					:class="{ 'is-active': bbsTag == 'SUG' }"
-					@click="bbsTag = 'SUG'"
-				>
-					建议
-				</view>
-				<view
-					class="tab-btn"
-					:class="{ 'is-active': bbsTag == 'ASK' }"
-					@click="bbsTag = 'ASK'"
-				>
-					提问
-				</view>
-			</view>
 			
 			<!-- 工具框 -->
-			<view class="setting-div" v-if="isShow"></view>
+			<!-- <view class="setting-div" v-if="isShow"></view> -->
 		</view>
 		<view class="tool-div" v-if="isShow">
-			<view class="tool-icon tool-icon-img" @click="upload()">
+			<view class="tool-icon tool-icon-img" @click="upload()" v-if="!isReply">
 				<image class="img" :src="commentInput3" mode="aspectFit"></image>
 			</view>
 			<view class="tool-icon tool-icon-emoji" @click="showKeyborad">
@@ -82,7 +82,7 @@
 				<view :class="['tool-icon tool-icon-img checked_tool',currentIndex === 0 ? 'is-active-tool':'']" @click="currentIndex = 0">
 					<image class="img" :src="commentInput1" mode="aspectFit"></image>
 				</view>
-				<view :class="['tool-icon tool-icon-img checked_tool',currentIndex === 1 ? 'is-active-tool':'']" @click="currentIndex = 1">
+				<view v-if="!isReply" :class="['tool-icon tool-icon-img checked_tool',currentIndex === 1 ? 'is-active-tool':'']" @click="currentIndex = 1">
 					<image class="img" :src="commentInput4" mode="aspectFit"></image>
 				</view>
 				<view class="fl1"></view>
@@ -96,7 +96,7 @@
 						</view>
 					</scroll-view>
 				</swiper-item>
-				<swiper-item key="2" class="swiper-item">
+				<swiper-item key="2" class="swiper-item" v-if="!isReply">
 					<scroll-view :scroll-y="true" class="img-list">
 						<view class="img-item" v-for="memItem in memList" @click="setMemValue(memItem)">
 							<image-preview class="img_100" :src="memItem.ossAddr" :isCache="true" mode="aspectFill"></image-preview>
@@ -113,7 +113,7 @@
 	import commentInput2 from '@/static/images/courseDetail/comment-input-2.png'
 	import commentInput3 from '@/static/images/courseDetail/comment-input-3.png'
 	import commentInput4 from '@/static/images/courseDetail/comment-input-4.png'
-	import { reactive, ref, watch, nextTick } from 'vue';
+	import { reactive, ref, watch, nextTick, computed } from 'vue';
 	import { emojiList } from '@/emoji';
 	import { publishCrsEvaluation, queryTraMemeInfoList } from '@/api/courseDetail.js'
 	import common from '@/common/common.js';
@@ -128,7 +128,14 @@
 		}
 	})
 	
+	const emit = defineEmits(['submitOver', 'sendReply'])
 	
+	const isReply = ref(false)
+	const clickHandler = () => {
+		if(!isShow.value){
+			isReply.value = false
+		}
+	}
 	const customStyle = {
 		backgroundColor: 'rgb(227, 230, 237)',
 		padding: '18rpx'
@@ -158,8 +165,17 @@
 		popHeight.value = 'calc(270px + 120rpx)'
 		isShow.value = true
 		console.log('focusevent');
-		getMemList()
+		if(!isReply.value){
+			getMemList()
+		}
 	}
+	const placeholder = computed(()=>{
+		if(isReply.value){
+			return answerData.value.placeholder||'请输入回复信息'
+		}else{
+			return '发条评论，和大家一起讨论'
+		}
+	})
 	const resStart = ref(-1)
 	const blur = (event) => {
 		console.log('失去焦点不一定关闭',event);
@@ -168,10 +184,26 @@
 		isShow.value = true
 		isFocus.value = false
 	}
-	const hideAll = () => {
+	const hideAll = (flag=false) => {
 		popHeight.value = '0px'
+		console.log('hideAll');
 		isShow.value = false
 		isFocus.value = false
+		if(flag){
+			value.value = ''
+			fileList.value = []
+		}
+	}
+	const answerData = ref({})
+	const resetVal = (data={} , $isReply = true) => {
+		value.value = ''
+		fileList.value = []
+		isReply.value = $isReply 
+		answerData.value = data || {}
+		if($isReply){
+			focus()
+			// showKeyborad()
+		}
 	}
 	const insertValue = (emojiItem) => {
 		let _val = value.value
@@ -182,7 +214,7 @@
 	const bbsTag = ref('SUG')
 	// 方法
 	
-	const uploadNow = (limit = 3) => {
+	const uploadNow = (limit = 4) => {
 		if(!isImg.value){
 			upload(limit)
 		}else{
@@ -193,7 +225,7 @@
 			});
 		}
 	}
-	const upload = (limit = 3) => {
+	const upload = (limit = 4) => {
 		uni.chooseImage({
 			count: limit,
 			sizeType: ['original', 'compressed'],
@@ -246,6 +278,10 @@
 	}
 	
 	const submit = () => {
+		if(isReply.value){
+			reply_send() 
+			return
+		}
 		if (value.value === '') {
 			if (bbsTag.value === 'SUG') {
 				return common.msg('请输入你的建议');
@@ -275,6 +311,9 @@
 				setTimeout(() => {
 					uni.$emit('refresh_comment_data');
 					hideAll()
+					value.value = ''
+					fileList.value = []
+					emit('submitOver')
 					if (from.value === 'study') {
 					} else {
 					}
@@ -284,6 +323,9 @@
 			console.log(err)
 		})
 	};
+	const reply_send = async () => {
+		emit('sendReply', {...answerData.value, bbsContent: value.value})
+	};
 	const bbsGrade = ref(10)
 	const sliderChange = (event) => {
 		bbsGrade.value = event.detail.value;
@@ -293,7 +335,7 @@
 			isImg.value = true
 		}
 	})
-	defineExpose({hideAll})
+	defineExpose({hideAll, resetVal})
 </script>
 
 <style scoped lang="scss">
@@ -469,30 +511,53 @@
 		overflow: hidden;
 	}
 	
-	.num-box {
-		flex: 1;
-		display: flex;
-		// height: 100%;
-		justify-content: space-between;
-		flex-direction: column;
-	}
-	
-	.tab-btn {
-		width: 78rpx;
-		height: 36rpx;
-		font-size: 22rpx;
-		color: #999999;
-		text-align: center;
-		border-radius: 8rpx;
-		border: 2rpx solid #999999;
-		margin-right: 30rpx;
-		&.is-active {
-			color: #0066ff;
-			border: 2rpx solid #0066ff;
-		}
-	}
 	.img-show{
 		width: 120rpx;
 		height: 120rpx;
 	}
+	.picture-cont{
+		padding: 0 16rpx;
+	}
+	.picture-tips{
+		color: #999;
+		font-size: 22rpx;
+		padding: 10rpx 0;
+	}
+	.num-box{
+		overflow: hidden;
+		height: 60rpx;
+		// padding-bottom: 30rpx;
+		.tab{
+			float: left;
+			width: 200rpx;
+			overflow: hidden;
+			height: 40rpx;
+			.tab-btn{
+				float: left;
+				width: 78rpx;
+				height: 36rpx;
+				font-size: 22rpx;
+				color: #999999;
+				text-align: center;
+				border-radius: 8rpx;
+				border: 2rpx solid #999999;
+				&:not(:last-child){
+					margin-right: 20rpx;
+				}
+				&.is-active {
+					color: #0066ff;
+					border: 2rpx solid #0066ff;
+				}
+			}
+		}
+		.slider-box{
+			width: calc(100% - 200rpx);
+			float: left;
+			box-sizing: border-box;
+			// padding-left: 40rpx;
+			.custom-slider{
+				margin: 0 !important;
+			}
+		}
+	}
 </style>

src/pages/courseDetail/components/comment.vue

@@ -119,6 +119,7 @@
 	import {setupKeyboardHeightListener} from '@/common/common.js';
 	import { get_base_url } from '@/api/request.js';
 
+	const emit = defineEmits(['replayInput'])
 	const popup = ref(null);
 	const popup_input_bottom = ref('0px');
 	const message_list = reactive([]);
@@ -143,16 +144,25 @@
 	});
 	const click_reply = (item, parentBbsId, index) => {
 		
-		popup.value.open('bottom');
+		// popup.value.open('bottom');
 		reply_data.placeholder = '回复 ' + item.userName + '：';
 		reply_data.parentBbsId = parentBbsId;
 		reply_data.bbsId = item.bbsId;
 		reply_data.index = index;
-		setupKeyboardHeightListener((height) => {
-			popup_input_bottom.value = `${height}px`;
-		});
+		// setupKeyboardHeightListener((height) => {
+		// 	popup_input_bottom.value = `${height}px`;
+		// });
+		emit('replayInput', reply_data)
 	};
-	const reply_send = async () => {
+	const setReplyData = (data,cb) => {
+		reply_data.placeholder = data.placeholder
+		reply_data.parentBbsId = data.parentBbsId
+		reply_data.bbsId = data.bbsId
+		reply_data.index = data.index
+		reply_data.bbsContent = data.bbsContent
+		reply_send(cb)
+	}
+	const reply_send = async (cb=()=>{}) => {
 		if (reply_data.bbsContent === '') {
 			return common.msg('回复内容不能为空');
 		}
@@ -171,6 +181,7 @@
 			});
 			message_list[reply_data.index]['children'] = res.body;
 			Object.assign(reply_data, reply_data_init);
+			cb()
 		} catch (e) {
 			common.msg('发送失败');
 		} finally {
@@ -234,7 +245,8 @@
 		});
 	};
 	defineExpose({
-		getData
+		getData,
+		setReplyData
 	});
 	onMounted(() => {
 		getData();

src/pages/courseDetail/index.vue

@@ -1,13 +1,8 @@
 <template>
 	<view class="max_page" @click="hideKeyboradNow">
 		<nav-bar :is_seat="false" :backgroundColor="bgOpacity"></nav-bar>
-		<scroll-view
-			:scroll-y="true"
-			class="scroll detail-main"
-			@scroll="scroll_fun"
-			@scrolltolower="scrolltolower"
-			:show-scrollbar="false"
-		>
+		<scroll-view :scroll-y="true" class="scroll detail-main" @scroll="scroll_fun" @scrolltolower="scrolltolower"
+			:show-scrollbar="false">
 			<view class="bg_div">
 				<image-preview class="img_100" :imgId="form.imgId" mode="widthFix"></image-preview>
 			</view>
@@ -21,55 +16,35 @@
 					</view>
 					<view class="title-num">
 						<view class="num-item">
-							<image
-								class="title-icon"
-								src="/src/static/images/courseDetail/zhishidian.png"
-								mode="widthFix"
-							></image>
+							<image class="title-icon" src="/src/static/images/courseDetail/zhishidian.png" mode="widthFix"></image>
 							<view class="text-1">当前进度</view>
 						</view>
 						<view class="line-progress-div">
-							<text class="text-2">(<text class="text-1">{{ form.styParaGraphNum || 0 }}</text>/{{ form.pgrphNum || 0 }})</text>
+							<text class="text-2">(<text
+									class="text-1">{{ form.styParaGraphNum || 0 }}</text>/{{ form.pgrphNum || 0 }})</text>
 							<view class="progress-div">
 								<view class="progress-line"></view>
 							</view>
 						</view>
-						<view
-							class="num-item examination"
-							@click="common.navigateTo(`/pages/examRanking/index?crsId=${crsId}`)"
-						>
-							<image
-								class="ranking-icon"
-								src="/src/static/images/courseDetail/charts.png"
-								mode="aspectFill"
-							></image>
+						<view class="num-item examination" @click="common.navigateTo(`/pages/examRanking/index?crsId=${crsId}`)">
+							<image class="ranking-icon" src="/src/static/images/courseDetail/charts.png" mode="aspectFill"></image>
 							<view>考试排行榜</view>
 							<view class="back-icon"></view>
 						</view>
 
 						<view class="num-item" @click="collect_click(form.collectId)">
-							<image
-								class="collect-icon"
-								:src="form.collectId ? collectedImg : notCollectedImg"
-								mode="widthFix"
-							></image>
+							<image class="collect-icon" :src="form.collectId ? collectedImg : notCollectedImg" mode="widthFix">
+							</image>
 						</view>
 					</view>
 				</view>
 				<view class="body-box">
 					<uv-sticky :customNavHeight="statusBarHeight" class="sticky">
 						<view class="body-tab">
-							<uv-tabs
-								class="font_pf my_tabs"
-								:current="tabAct"
-								:list="tabList"
-								@change="tabSwitch"
-								:scrollable="false"
-								line-color="#0066FF"
-								:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '500' }"
+							<uv-tabs class="font_pf my_tabs" :current="tabAct" :list="tabList" @change="tabSwitch" :scrollable="false"
+								line-color="#0066FF" :inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '500' }"
 								:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
-								:lineColor="`url(${LineBg}) 10% 10%`"
-							></uv-tabs>
+								:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
 						</view>
 					</uv-sticky>
 					<view class="course-info" v-if="tabAct === 0">
@@ -79,43 +54,64 @@
 						<knowledge v-model="form" @toStudyPrgh="toStudyPrgh"></knowledge>
 					</view>
 					<view class="evaluate" v-if="tabAct === 2 && form">
-						<comment ref="commentRef" :crsId="crsId" :imgId="form.imgId"></comment>
+						<comment ref="commentRef" :crsId="crsId" :imgId="form.imgId" @replayInput="replayInput"></comment>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
 		<view class="btn-box btn-box-height font_pf" v-if="[0, 1].includes(tabAct)">
-				<view class="fl1">
-					<uv-button type="primary" @click="goto_study()">去学习</uv-button>
-				</view>
-				<view class="fl1" @click="goto_practice()">
-					<uv-button type="success" :disabled="practiceButtonDisabled">去练习</uv-button>
-				</view>
-				<view class="fl1" @click="goto_examination()">
-					<uv-button type="success" :disabled="examinationButtonDisabled">去考试</uv-button>
-					<!-- <uv-button type="success" :disabled="true">去考试</uv-button> -->
-				</view>
+			<view class="fl1">
+				<uv-button type="primary" @click="goto_study()">去学习</uv-button>
+			</view>
+			<view class="fl1" @click="goto_practice()">
+				<uv-button type="success" :disabled="practiceButtonDisabled">去练习</uv-button>
+			</view>
+			<view class="fl1" @click="goto_examination()">
+				<uv-button type="success" :disabled="examinationButtonDisabled">去考试</uv-button>
+				<!-- <uv-button type="success" :disabled="true">去考试</uv-button> -->
+			</view>
 			<!-- <template v-if="tabAct === 2"> -->
-				<!-- <view class="fl1" @click="goto_submit()"> -->
-					
-					<!-- <uv-button type="primary" class="send_evaluate" :disabled="isPreview === 'preview'">发布评价</uv-button> -->
-				<!-- </view> -->
+			<!-- <view class="fl1" @click="goto_submit()"> -->
+
+			<!-- <uv-button type="primary" class="send_evaluate" :disabled="isPreview === 'preview'">发布评价</uv-button> -->
+			<!-- </view> -->
 			<!-- </template> -->
 		</view>
-		<comment-input v-if="tabAct === 2" ref="commentInputRef" :crsId="crsId"></comment-input>
+		<comment-input v-if="tabAct === 2" ref="commentInputRef" :crsId="crsId" @sendReply="sendReply"></comment-input>
 	</view>
 </template>
 
 <script setup>
-	import { LineBg } from '@/enum.js';
-	import { ref, computed, onMounted } from 'vue';
-	import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';
-	import { getCourseDetailApi } from '@/api/courseDetail.js';
-	import { startExamByCrs } from '@/api/examination.js';
-	import { insertTraPersonalCollectionTask, deleteTraPersonalCollectionById } from '@/api/favorites.js';
-	import { startPracticeByCrs } from '@/api/practice.js';
+	import {
+		LineBg
+	} from '@/enum.js';
+	import {
+		ref,
+		computed,
+		onMounted
+	} from 'vue';
+	import {
+		onShow,
+		onLoad,
+		onUnload
+	} from '@dcloudio/uni-app';
+	import {
+		getCourseDetailApi
+	} from '@/api/courseDetail.js';
+	import {
+		startExamByCrs
+	} from '@/api/examination.js';
+	import {
+		insertTraPersonalCollectionTask,
+		deleteTraPersonalCollectionById
+	} from '@/api/favorites.js';
+	import {
+		startPracticeByCrs
+	} from '@/api/practice.js';
 	import common from '@/common/common';
-	import { setPageCache } from '@/common/common';
+	import {
+		setPageCache
+	} from '@/common/common';
 	import introduceVue from './components/introduce.vue';
 	import knowledge from './components/knowledge.vue';
 	import comment from './components/comment.vue';
@@ -123,7 +119,13 @@
 	import notCollectedImg from '@/static/images/courseDetail/in_collect.png';
 	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 	// tab栏
-	const tabList = ref([{ name: '课程介绍' }, { name: '知识点' }, { name: '评价' }]);
+	const tabList = ref([{
+		name: '课程介绍'
+	}, {
+		name: '知识点'
+	}, {
+		name: '评价'
+	}]);
 	const commentRef = ref(null);
 	const commentInputRef = ref(null)
 	const form = ref({});
@@ -139,7 +141,7 @@
 		const total = form.value.pgrphNum;
 		if (total === 0) return '0%';
 		const completed = form.value.styParaGraphNum;
-		return Math.min(Math.round((completed / total) * 10000) / 100, 100)+'%';
+		return Math.min(Math.round((completed / total) * 10000) / 100, 100) + '%';
 	});
 	const tabSwitch = (item) => {
 		tabAct.value = item.index;
@@ -150,13 +152,30 @@
 			commentRef.value?.getData();
 		}
 	};
+	const isShowing = ref(false)
+	const replayInput = (data) => {
+		isShowing.value = true
+		commentInputRef.value.resetVal(data, true)
+		setTimeout(() => {
+			isShowing.value = false
+		}, 800)
+	}
+	const sendReply = (data) => {
+		console.log(data,'111111111111')
+		commentRef.value?.setReplyData(data, ()=>{
+			commentInputRef.value.hideAll(true)
+		});
+	}
 	const hideKeyboradNow = () => {
+		if (isShowing.value) return
 		commentInputRef.value.hideAll()
 	}
 	const getData = async () => {
 		common.loading();
 		try {
-			const { body } = await getCourseDetailApi({
+			const {
+				body
+			} = await getCourseDetailApi({
 				crsId: crsId.value
 			});
 			form.value = body;
@@ -166,13 +185,13 @@
 	const toStudyPrgh = (info) => {
 		common.navigateTo(
 			'/pages/course/study?crsId=' +
-				crsId.value +
-				'&pgrphId=' +
-				info.pgrphId +
-				'&imgId=' +
-				form.imgId +
-				'&isPreview=' +
-				isPreview.value
+			crsId.value +
+			'&pgrphId=' +
+			info.pgrphId +
+			'&imgId=' +
+			form.imgId +
+			'&isPreview=' +
+			isPreview.value
 		);
 	};
 
@@ -198,8 +217,8 @@
 		if (form.value.examStat === '02') return common.msg('该课程下的试题未设置考试规则');
 		common.loading();
 		startExamByCrs({
-			crsId: crsId.value
-		})
+				crsId: crsId.value
+			})
 			.then((res) => {
 				setPageCache('examination', {
 					...res.body,
@@ -224,8 +243,8 @@
 		if (form.value.examStat === '01') return common.msg('该课程下暂无试题');
 		common.loading();
 		startPracticeByCrs({
-			crsId: crsId.value
-		})
+				crsId: crsId.value
+			})
 			.then((res) => {
 				console.log('res', res);
 				setPageCache('practice', {
@@ -244,9 +263,9 @@
 			if (!id) {
 				common.loading('收藏中');
 				insertTraPersonalCollectionTask({
-					collectTyp: '01',
-					collectBusId: crsId.value
-				})
+						collectTyp: '01',
+						collectBusId: crsId.value
+					})
 					.then((result) => {
 						form.value.collectId = result.body;
 						common.msg('收藏成功');
@@ -257,8 +276,8 @@
 			} else {
 				common.loading('取消收藏中');
 				deleteTraPersonalCollectionById({
-					collectId: id
-				})
+						collectId: id
+					})
 					.then(() => {
 						form.value.collectId = null;
 						common.msg('取消成功');
@@ -306,6 +325,7 @@
 
 <style lang="scss" scoped>
 	.my_tabs {
+
 		// 解决这个圆角的图片，开穿透
 		:deep(.uv-tabs__wrapper__nav__line) {
 			height: 20rpx !important;
@@ -323,12 +343,14 @@
 			opacity: 1;
 			border-color: #ededed;
 		}
+
 		:deep(.uv-button--success:not(.uv-button--disabled)) {
 			background-color: #dcedff;
 			color: #0066ff;
 			border-color: #dcedff;
 		}
 	}
+
 	// 1124新改样式 ↑↑↑↑↑
 	.back_div {
 		margin-right: 10rpx;
@@ -394,6 +416,7 @@
 		position: fixed;
 		width: calc(100% + 4rpx);
 		left: -4rpx;
+
 		.back-image {
 			width: 100%;
 		}
@@ -427,6 +450,7 @@
 		width: 30rpx;
 		margin-right: 10rpx;
 	}
+
 	.ranking-icon {
 		height: 40rpx;
 		width: 40rpx;
@@ -447,6 +471,7 @@
 		.examination {
 			color: #0066ff;
 			margin: 0 14rpx;
+
 			.back-icon {
 				position: relative;
 				width: 40rpx;
@@ -535,30 +560,35 @@
 		align-items: center;
 		font-size: 30rpx;
 		height: 30rpx;
-		
+
 	}
+
 	.line-progress-div {
 		display: flex;
 		align-items: center;
 		flex: 1;
 		margin-right: 20rpx;
+
 		.text-1 {
 			color: #333333;
 			font-size: 30rpx;
 		}
+
 		.text-2 {
 			color: #999999;
 			font-size: 30rpx;
 			margin: 0 8rpx;
 		}
-		.progress-div{
+
+		.progress-div {
 			position: relative;
 			background-color: #D9DEE8;
 			width: 100%;
 			height: 16rpx;
 			border-radius: 10rpx;
 			overflow: hidden;
-			.progress-line{
+
+			.progress-line {
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -570,6 +600,7 @@
 			}
 		}
 	}
+
 	.learn {
 		color: #1dd17a;
 	}
@@ -582,11 +613,13 @@
 		font-weight: 600;
 		color: #000000;
 	}
+
 	.c-000 {
 		font-weight: 600;
 		color: #000000;
 	}
+
 	.c-0066FF {
 		color: #0066ff;
 	}
-</style>
+</style>