提交

2023-08-25 15:06:46 +08:00
parent d36b01a69f
commit 9e4b78882e
19 changed files with 393 additions and 229 deletions
--- a/src/pages/questionBank/baseOperate.vue
+++ b/src/pages/questionBank/baseOperate.vue
@@ -5,9 +5,9 @@
 		  <u-tabs :list="categoryList" :scrollable="false" @click="changeCategory"></u-tabs>
 		</u-sticky>
 		<view class="p14">
-			<view class="flex ai-c">
+			<!-- <view class="flex ai-c">
 				<view class="car_item mr10" v-for="(item,index) of carTypeList" :key="index" @tap="chooseCar(item.value)" :class="item.value===tCar?'checked_car':'unchecked_car'">{{item.label}}</view>
-			</view>
+			</view> -->
 			<view class="flex p14 bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
 				<image class="pic" src="../../static/image/index/index_bg.png"></image>
 				<view class="ml10">
--- a/src/pages/questionBank/components/Question.vue
+++ b/src/pages/questionBank/components/Question.vue
@@ -13,6 +13,9 @@
              <text class="tag_box">{{getQuestType(quesItem.type)}}</text>
              <text class="fs18">{{quesItem.question}}</text>
            </view>
+						<view class="p14" v-if="quesItem.imageUrl">
+							<image style="width: 100%;" mode="widthFix" :src="quesItem.imageUrl"></image>
+						</view>
            <template v-if="quesItem.type!='3'">
              <view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList"
                    :key="item.op" @tap="answerQues(item.opValue,index)">
--- a/src/pages/questionBank/examResult.vue
+++ b/src/pages/questionBank/examResult.vue
@@ -8,7 +8,7 @@
 				<view class="wp100 text-center" style="margin-top: -153rpx;">
 					<text v-if="score>=90">太棒了！正确率很高了！</text>
 					<text v-else>很遗憾！考试不及格</text>
-					<button class="centerBtn">马上提分</button>
+					<button class="centerBtn" @click="toVip">马上提分</button>
 					<view class="flex ai-c jc-c mt10">
 						<view class="text-center wp33">
 							<view>{{doNotNum}}</view>
@@ -48,6 +48,11 @@
 </template>

 <script>
+	import {
+		mapState,
+		mapActions
+	} from 'pinia' //引入映射函数
+	import useUserStore from '@/jtools/store/user'
 	import GradesChart from "./components/GradesChart.vue"
 	import storage from '@/jtools/storage';
 	import {
@@ -119,7 +124,24 @@
 	onReady() {
 			this.getServerData();
 		},
+		computed: {
+			...mapState(useUserStore, ["vipOnList"])
+		},
 		methods: {
+			...mapActions(useUserStore, ['searchUserVip']),
+			async toVip(){
+				await this.searchUserVip()
+				const res = this.vipOnList.some(item => item.subjects == this.subject)
+				if(res){
+					uni.navigateTo({
+					  url: '/pages/me/vip'
+					})
+				}else{
+					uni.navigateTo({
+					 url:"/pages/index/videoVip?subject="+this.subject
+					})
+				}
+			},
 			getServerData() {
 				testTotal({
 					"carTypeId": storage.get('carType') || '1001',
--- a/src/pages/questionBank/exclusiveExercise.vue
+++ b/src/pages/questionBank/exclusiveExercise.vue
@@ -19,7 +19,7 @@
 		</view>
 		<view class="bc-fff pt14" style="border-radius: 20rpx;">
 			<u-grid :border="false" col="4">
-				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toAnswer(listItem.title)">
+				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toAnswer(listItem.title,listItem.isError,listItem.isNew)">
 					<view style="width: 84rpx;height: 84rpx;">
 						<image style="width: 84rpx;" mode="widthFix" :src="listItem.image"></image>
 					</view>
@@ -57,26 +57,32 @@
 				list:[{
 					title:'新规题',
 					subTitle:'392题',
+					isNew:1,
+					isError:0,
 					image:newRulesIcon
 				},{
 					title:'易错题',
+					isNew:0,
+					isError:1,
 					subTitle:'392题',
 					image:errorIcon
-				},{
-					title:'未做题',
-					subTitle:'392题',
-					image:neverWriteIcon
 				},{
 					title:'单选题',
 					subTitle:'392题',
+					isNew:0,
+					isError:0,
 					image:newRulesIcon
 				},{
 					title:'判断题',
 					subTitle:'392题',
+					isNew:0,
+					isError:0,
 					image:errorIcon
 				},{
 					title:'图片题',
 					subTitle:'392题',
+					isNew:0,
+					isError:0,
 					image:neverWriteIcon
 				}],
 				testCenterList:[]
@@ -94,9 +100,9 @@
 					}
 				})
 			},
-			toAnswer(title) {
+			toAnswer(title,isError,isNew) {
 				uni.navigateTo({
-					url:"/pages/questionBank/questionBank?navTitle="+title
+					url:"/pages/questionBank/questionBank?navTitle="+title+"&isError="+isError+"&isNew="+isNew
 				})
 			},
 			toQuestionBank(val){
--- a/src/pages/questionBank/practiceResult.vue
+++ b/src/pages/questionBank/practiceResult.vue
@@ -92,9 +92,9 @@
 			}
 		},
 		computed: {
-			...mapState(useQuestionStore, ["orderQuestion"]), //映射函数，取出tagslist
+			...mapState(useQuestionStore, ["orderQuestion_subject1","orderQuestion_subject1"]), //映射函数，取出tagslist
 			getNotDoNum(){
-				return this.orderQuestion.length-(this.allRightList.length+this.allWrongList.length)
+				return this[`orderQuestion_subject${this.subject}`].length-(this.allRightList.length+this.allWrongList.length)
 			}
 		},
 		methods: {
--- a/src/pages/questionBank/questionBank.vue
+++ b/src/pages/questionBank/questionBank.vue
@@ -44,11 +44,18 @@
 			if (op.needVip) {
 				this.needVip = op.needVip
 			}
+			if(op.subject){
+				this.subject=op.subject
+			}
 			if (op && op.navTitle) {
 				this.navTitle = op.navTitle
 				const param = {}
 				if (this.navTitle === '顺序答题' || this.navTitle === '精简500题') {
-					this.questionArr = [...this.orderQuestion]
+					if(this.subject=='1'){
+						this.questionArr = [...this.orderQuestion_subject1]
+					}else if(this.subject=='4'){
+						this.questionArr = [...this.orderQuestion_subject4]
+					}
 					if (this.needVip === 'true') {
 						if (this.token) {
 							await this.searchUserVip()
@@ -65,12 +72,6 @@
 					}
 					this.$refs.question.getQuestionList(JSON.stringify(this.questionArr))
 				} else {
-					if (!storage.get('token')) {
-						uni.navigateTo({
-							url: '/pages/login/login'
-						})
-						return
-					}
 					if (this.navTitle === '错题本') {
 						param.questionIdList = storage.get(`wrongList_subject${this.subject}`) || []
 					} else if (this.navTitle === '收藏夹') {
@@ -85,6 +86,12 @@
 					if (op.examKey) {
 						param.examKey = op.examKey
 					}
+					if(op.isError&&op.isError=='1'){
+						param.isError=Number(op.isError)
+					}
+					if(op.isNew&&op.isNew=='1'){
+						param.isNew=Number(op.isNew)
+					}
 					queryQuestion(param).then(res => {
 						if (res.code == '0000') {
 							this.questionArr = res.data
@@ -93,12 +100,9 @@
 					})
 				}
 			}
-			if (op.subject) {
-				this.subject = op.subject
-			}
 		},
 		computed: {
-			...mapState(useQuestionStore, ["orderQuestion"]), //映射函数，取出tagslist
+			...mapState(useQuestionStore, ["orderQuestion_subject1","orderQuestion_subject4"]), //映射函数，取出tagslist
 			...mapState(useUserStore, ["vipOnList", "token"])
 		},
 		methods: {
--- a/src/pages/questionBank/videoDetail.vue
+++ b/src/pages/questionBank/videoDetail.vue
@@ -1,8 +1,7 @@
 <template>
 	<view>
 		<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频"
-			src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
-			@timeupdate="timeupdate" />
+			src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" />
 		<view class="p14tb bc-fff">
 			<view class="skill-sequence-panel-content-wrapper pr14" v-if="videoType=='test'">
 				<scroll-view class="skill-sequence-panel-content" scroll-x>
@@ -28,7 +27,7 @@
 						@click="checkVideo(item.projectId)">
 						<view>
 							<view class="mb10 relative">
-								<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
+								<image class="contain-box" src="../../static/image/index/jpsp.png"></image>
 								<view v-if="projectId==item.projectId" class="playLogo">播放中</view>
 								<image class="play_btn" src="../../static/image/index/play.png" />
 								<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
@@ -48,7 +47,7 @@
 				<view class="flex bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index"
 					@tap="toDetail">
 					<view class="pic relative">
-						<image class="pic" src="../../static/image/index/index_bg.png"></image>
+						<image class="pic" src="../../static/image/index/jpsp.png"></image>
 						<image class="play_btn_2" src="../../static/image/index/play.png" />
 						<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
 					</view>
--- a/src/pages/questionBank/wrongQuestion.vue
+++ b/src/pages/questionBank/wrongQuestion.vue
@@ -1,77 +1,84 @@
 <template>
 	<view>
 		<u-sticky bgColor="#fff">
-		  <u-tabs :list="categoryList" :scrollable="false" @click="tabChange"></u-tabs>
+			<u-tabs :list="categoryList" :scrollable="false" @click="tabChange"></u-tabs>
 		</u-sticky>
 		<view class="p14">
 			<view class="top_box">
-					<view class="tip_box flex ai-c jc-sb" v-if="tIndex==0">
-						<view class="flex ai-c">
-							<u-icon name="error-circle-fill" color="#FF6E02" size="18"></u-icon>
-							<text class="ml10 fs12" style="color: #FF6E02;">{{title}}</text>
-						</view>
-						<u-icon name="close" color="#FF6E02" size="18"></u-icon>
+				<view class="tip_box flex ai-c jc-sb" v-if="tIndex==0">
+					<view class="flex ai-c">
+						<u-icon name="error-circle-fill" color="#FF6E02" size="18"></u-icon>
+						<text class="ml10 fs12" style="color: #FF6E02;">{{title}}</text>
 					</view>
-					<view class="p14">
-						<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏'}}情况</text>
-						<view class="total_box mt10">
-							<view class="flex ai-c jc-sb">
-									<view class="text-center">
-										<view style="width: 111rpx;" class="fs30 cor-000">{{tIndex==0?wrongList.length:collectList.length}}</view>
-									</view>
-									<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c" @tap="toPractice">
-										<u-icon name="arrow-right" size="18"></u-icon>
+					<u-icon name="close" color="#FF6E02" size="18"></u-icon>
+				</view>
+				<view class="p14">
+					<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏'}}情况</text>
+					<view class="total_box mt10">
+						<view class="flex ai-c jc-sb">
+							<view class="text-center">
+								<view style="width: 111rpx;" class="fs30 cor-000">{{tIndex==0?wrongList.length:collectList.length}}
 								</view>
 							</view>
-							<view class="flex ai-c jc-sb mt5">
-									<view class="text-center">
-										<text class="fs14 cor-666">全部{{tIndex==0?'错题':'收藏'}}</text>
-									</view>
-									<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c">
-										<text v-if="tIndex==0" class="fs14 cor-666">错{{wrongList.length}}/已做{{wrongList.length+rightList.length}}</text>
-								</view>
+							<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c"
+								@tap="toPractice">
+								<u-icon name="arrow-right" size="18"></u-icon>
 							</view>
 						</view>
-						<view class="yellow_box" v-if="tIndex==0&&getPercent>10">
-							<view class="flex jc-sb ai-c">
-								<view>
-									<text class="fs24 fw600" style="color: #FF6E02;">{{getPercent}}%</text><text class="fs18 cor-000 fw600">错题率</text>
-									<view class="fs14 cor-000">错题率有点高，快去提升吧</view>
-								</view>
-								<!-- <view style="width: 156rpx;">
+						<view class="flex ai-c jc-sb mt5">
+							<view class="text-center">
+								<text class="fs14 cor-666">全部{{tIndex==0?'错题':'收藏'}}</text>
+							</view>
+							<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c">
+								<text v-if="tIndex==0"
+									class="fs14 cor-666">错{{wrongList.length}}/已做{{wrongList.length+rightList.length}}</text>
+							</view>
+						</view>
+					</view>
+					<view class="yellow_box" v-if="tIndex==0&&getPercent>10">
+						<view class="flex jc-sb ai-c">
+							<view>
+								<text class="fs24 fw600" style="color: #FF6E02;">{{getPercent}}%</text><text
+									class="fs18 cor-000 fw600">错题率</text>
+								<view class="fs14 cor-000">错题率有点高，快去提升吧</view>
+							</view>
+							<!-- <view style="width: 156rpx;">
 									<button class="riseBtn">马上提升</button>
 								</view> -->
+						</view>
+					</view>
+					<view class="flex jc-sb ai-c mt10" v-if="tIndex==0">
+						<text>答对后自动移除错题</text>
+						<u-switch v-model="isMoveWrong" activeColor="#0BD032"></u-switch>
+					</view>
+				</view>
+				<view style="margin-top: 30rpx;" v-if="tIndex==0">
+					<view class="video-box">
+						<view class="flex jc-sb ai-c wp100">
+							<text style="color: #05C341;font-size: 36rpx;">科{{subject==1?'一':'四'}}精品视频课</text>
+							<text class="cor-666 fs12">全部10节课 ></text>
+						</view>
+						<view class="flex ai-c mt20">
+							<view class="contain-box relative">
+								<image class="contain-box" src="../../../static/image/index/jpsp.png"></image>
+								<image class="play_btn_2" src="../../static/image/index/play.png" />
+							</view>
+							<view class="ml15 text-center">
+								<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
+									text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle">
+								</u-button>
+								<view class="cor-333 fs15 fw600 mt10">科{{subject==1?'一':'四'}}易错试题</view>
 							</view>
 						</view>
-						<view class="flex jc-sb ai-c mt10"  v-if="tIndex==0">
-							<text>答对后自动移除错题</text>
-							<u-switch v-model="isMoveWrong" activeColor="#0BD032" ></u-switch>
-						</view>
+
+					</view>
+				</view>
+
 			</view>
-		  <view style="margin-top: 30rpx;"  v-if="tIndex==0">
-		  		<view class="video-box">
-		  			<view class="flex jc-sb ai-c wp100">
-		  				<text style="color: #05C341;font-size: 36rpx;">科{{subject==1?'一':'四'}}精品视频课</text>
-		  				<text class="cor-666 fs12">全部10节课 ></text>
-		  			</view>
-		  			<view class="flex ai-c mt20">
-		  				<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
-		  				<view class="ml15 text-center">
-		  					<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
-		  						text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle">
-		  					</u-button>
-		  					<view class="cor-333 fs15 fw600 mt10">科{{subject==1?'一':'四'}}易错试题</view>
-		  				</view>
-		  			</view>
-		  
-		  		</view>
-		  	</view>
-		  
-		</view>
-	    <view class="top_box mt15 p14">
+			<view class="top_box mt15 p14">
 				<view class="flex jc-sb aic">
 					<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏题'}}分类</text>
-					<u-icon name="arrow-right" size="18"></u-icon>
+					<!-- <u-icon name="arrow-right" size="18"></u-icon> -->
 				</view>
 				<view class="flex ai-c jc-sb" style="flex-wrap: wrap;">
 					<view v-for="(item,index) of typeList" :key="index" class="category_item p14 flex jc-sb ai-c mb10">
@@ -80,7 +87,7 @@
 					</view>
 				</view>
 			</view>
-	</view>
+		</view>
 	</view>
 </template>

@@ -89,56 +96,85 @@
 	import {
 		questionCategory
 	} from '@/jtools/api/question';
-	export default{
-		data(){
-			return{
-				collectList:[],
-				rightList:storage.get(`rightList_subject${this.subject}`) || [],
-				wrongList:storage.get(`wrongList_subject${this.subject}`) || [],
-				subject:0,
-				tIndex:0,
-				isMoveWrong:true,
-				title:'重要提示：所有错题做对，再去考试！',
-				categoryList:[{
-					name:'错题本'
-				},{name:'收藏夹'}],
-				typeList:[]
+	export default {
+		data() {
+			return {
+				collectList: [],
+				rightList: storage.get(`rightList_subject${this.subject}`) || [],
+				wrongList: storage.get(`wrongList_subject${this.subject}`) || [],
+				subject: 0,
+				tIndex: 0,
+				isMoveWrong: true,
+				title: '重要提示：所有错题做对，再去考试！',
+				categoryList: [{
+					name: '错题本'
+				}, {
+					name: '收藏夹'
+				}],
+				typeList: []
 			}
 		},
-		onLoad(op){
-			if(op.subject){
-				this.subject=op.subject
-				this.rightList=storage.get(`rightList_subject${this.subject}`) || []
-				this.wrongList=storage.get(`wrongList_subject${this.subject}`) || []
-				this.collectList=storage.get(`collectList_subject${this.subject}`) || []
+		onLoad(op) {
+			if (op.subject) {
+				this.subject = op.subject
+				this.rightList = storage.get(`rightList_subject${this.subject}`) || []
+				this.wrongList = storage.get(`wrongList_subject${this.subject}`) || []
+				this.collectList = storage.get(`collectList_subject${this.subject}`) || []
 				this.getQuestionCategory()
 			}
 		},
-		computed:{
-			getPercent(){
-				return ((this.wrongList.length/(this.wrongList.length+this.rightList.length))*100).toFixed(0)
+		computed: {
+			getPercent() {
+				return ((this.wrongList.length / (this.wrongList.length + this.rightList.length)) * 100).toFixed(0)
 			}
 		},
-		methods:{
-			getQuestionCategory(){
-				const param={}
-				if(this.tIndex==0){
-					param.questionIdList=this.wrongList
-				}else{
-					param.questionIdList=this.collectList
+		methods: {
+			getQuestionCategory() {
+				const param = {}
+				if (this.tIndex == 0) {
+					param.questionIdList = this.wrongList
+				} else {
+					param.questionIdList = this.collectList
 				}
-				questionCategory(param).then(resp=>{
-					this.typeList=resp.data
+				questionCategory(param).then(resp => {
+					this.typeList = resp.data
 				})
 			},
-			tabChange(val){
-				this.tIndex=val.index
+			tabChange(val) {
+				this.tIndex = val.index
 				this.getQuestionCategory()
 			},
-			toPractice(){
-				const navTitle=this.tIndex==0?'错题本':'收藏夹'
+			toPractice() {
+				const navTitle = this.tIndex == 0 ? '错题本' : '收藏夹'
+				if (navTitle == '错题本') {
+					if (!this.wrongList.length) {
+					uni.showModal({
+						title: '提示',
+						content: '当前无错题，继续保持吧~',
+						showCancel:false,
+						success: function (res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							}
+						}
+					});
+						return
+					}
+				} else if (navTitle == '收藏夹') {
+					uni.showModal({
+						title: '提示',
+						content: '当前无收藏题~',
+						showCancel:false,
+						success: function (res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							}
+						}
+					});
+					return
+				}
 				uni.navigateTo({
-					url:"/pages/questionBank/questionBank?navTitle="+navTitle+"&subject="+this.subject
+					url: "/pages/questionBank/questionBank?navTitle=" + navTitle + "&subject=" + this.subject
 				})
 			}
 		}
@@ -147,65 +183,80 @@

 <style scoped>
 	::v-deep .u-tabs__wrapper__nav__line {
-			background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
-			bottom: 14rpx !important;
-		}
-		.top_box{
-			width: 100%;
-			background: #FDFDFD;
-			border-radius: 20rpx;
-		}
-		.tip_box{
-			width: 100%;
-			background: #FFE6D4;
-			border-radius: 20rpx 20rpx 0rpx 0rpx;
-			padding: 10px 14px;
-		}
-		.total_box{
-			width: 100%;
-			background: #F5F5F5;
-			border-radius: 20rpx;
-			padding: 14px;
-		}
-		.yellow_box{
-			margin-top: 10px;
-			padding: 14px;
-			width: 100%;
-			background: linear-gradient(90deg, #FBF2D4 0%, #F7E4B5 100%);
-			border-radius: 20rpx;
-		}
-		.riseBtn{
-			width: 156rpx;
-			height: 56rpx;
-			text-align: center;
-			line-height: 56rpx;
-			font-size: 12px;
-			background-color: #F7E4B5;
-			border: 1px solid #FF6E02;
-			color: #FF6E02;
-			border-radius: 28rpx;
-		}
-		.video-box {
-			padding: 20rpx;
-			width: 694rpx;
-			height: 369rpx;
-			background: #DEEFE5;
-			border: 2px solid #47DB87;
-			border-radius: 16rpx;
-		}
-		
-		.contain-box {
-			width: 406rpx;
-			height: 228rpx;
-			background: #00B74F;
-			border-radius: 16rpx;
-		}
-		.category_item{
-			width: 312rpx;
-			height: 90rpx;
-			text-align: center;
-			line-height: 90rpx;
-			background: #F5F5F5;
-			border-radius: 20rpx;
-		}
+		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
+		bottom: 14rpx !important;
+	}
+
+	.top_box {
+		width: 100%;
+		background: #FDFDFD;
+		border-radius: 20rpx;
+	}
+
+	.tip_box {
+		width: 100%;
+		background: #FFE6D4;
+		border-radius: 20rpx 20rpx 0rpx 0rpx;
+		padding: 10px 14px;
+	}
+
+	.total_box {
+		width: 100%;
+		background: #F5F5F5;
+		border-radius: 20rpx;
+		padding: 14px;
+	}
+
+	.yellow_box {
+		margin-top: 10px;
+		padding: 14px;
+		width: 100%;
+		background: linear-gradient(90deg, #FBF2D4 0%, #F7E4B5 100%);
+		border-radius: 20rpx;
+	}
+
+	.riseBtn {
+		width: 156rpx;
+		height: 56rpx;
+		text-align: center;
+		line-height: 56rpx;
+		font-size: 12px;
+		background-color: #F7E4B5;
+		border: 1px solid #FF6E02;
+		color: #FF6E02;
+		border-radius: 28rpx;
+	}
+
+	.video-box {
+		padding: 20rpx;
+		width: 694rpx;
+		height: 369rpx;
+		background: #DEEFE5;
+		border: 2px solid #47DB87;
+		border-radius: 16rpx;
+	}
+
+	.contain-box {
+		width: 406rpx;
+		height: 228rpx;
+		background: #00B74F;
+		border-radius: 16rpx;
+	}
+
+	.category_item {
+		width: 312rpx;
+		height: 90rpx;
+		text-align: center;
+		line-height: 90rpx;
+		background: #F5F5F5;
+		border-radius: 20rpx;
+	}
+
+	.play_btn_2 {
+		width: 65rpx;
+		height: 65rpx;
+		position: absolute;
+		left: 165.5rpx;
+		top: 78rpx
+	}
 </style>