视频解析页面

common/styles/global/components.scss

@@ -93,7 +93,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	}
 	.danxuan-question{
 		margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx 0 20rpx;box-sizing: border-box;
-		text-align: justify;
+		text-align: justify;word-wrap: break-word;word-break: break-all;
 	}
 	.danxuan-option{
 		width: 596rpx;height: 93rpx;line-height:96rpx;background-color:#fff;border-radius: 8px;margin-bottom: 20rpx;
@@ -110,6 +110,16 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	}
 }
 
+/***** 试题白色的框 *****/
+.shiti-frame-box{
+	flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
+	margin: 32rpx auto;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column;
+}
+.shiti-frame-box::before{
+	content: "";display: block;background-color: rgba(255, 255, 255, 0.6);border-radius: 0 0 10rpx 10rpx;
+	position: absolute;top: 20rpx;left: 20rpx;right: 20rpx;bottom: 30rpx;z-index: 1;
+}
+	
 /***** 模拟标题栏 *****/
 .ezy-title-bar {
 	height: calc(44px + env(safe-area-inset-top));

common/styles/global/pages.scss

@@ -247,14 +247,6 @@
 .ezy-exam-page{
 	width: 100%;height: 100vh;background-color: #0ab2f0;position: relative;
 	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
-	.exam-body-box{
-		flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
-		margin: 32rpx auto;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column;
-	}
-	.exam-body-box::before{
-		content: "";display: block;background-color: rgba(255, 255, 255, 0.6);border-radius: 0 0 10rpx 10rpx;
-		position: absolute;top: 20rpx;left: 20rpx;right: 20rpx;bottom: 30rpx;z-index: 1;
-	}
 	.ezy-exam-swiper{
 		width: 615rpx;flex: 1;z-index: 2;margin: 0 auto;
 		uni-swiper-item{overflow: auto;}
@@ -275,14 +267,6 @@
 .ezy-result-page{
 	width: 100%;height: 100vh;background-color: #0ab2f0;position: relative;
 	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
-	.result-body-box{
-		flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
-		margin: 32rpx auto;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column;
-	}
-	.result-body-box::before{
-		content: "";display: block;background-color: rgba(255, 255, 255, 0.6);border-radius: 0 0 10rpx 10rpx;
-		position: absolute;top: 20rpx;left: 20rpx;right: 20rpx;bottom: 30rpx;z-index: 1;
-	}
 	.result-exam-swiper{
 		width: 615rpx;flex: 1;z-index: 2;margin: 0 auto;
 		uni-swiper-item{overflow: auto;}
@@ -338,6 +322,42 @@
 	@media (max-height: 600px) {margin-bottom: 40%;}
 }
 
+// 答案解析
+.ezy-dajx-page{
+	width: 100%;height: 100vh;background-color: #0ab2f0;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	.shiti-frame-box{overflow-y: auto;}
+	.dajx-content-box{
+		width: 615rpx;flex: 1;z-index: 2;margin: 0 auto;overflow-y: auto;
+		.slfx-title,.spjj-title{
+			width: 231rpx;height: 63rpx;@include ezy-no-repeat-cover;margin-bottom: 16rpx;
+		}
+		.slfx-title{background-image: url("@/static/images/exam/slfx-title.png");}
+		.spjj-title{background-image: url("@/static/images/exam/spjj-title.png");}
+		.slfx-content{
+			font-size: 32rpx;color: #333;line-height: 1.6;margin-bottom: 42rpx;
+			box-sizing: border-box;padding: 0 20rpx;word-wrap: break-word;word-break: break-all;
+		}
+		
+	}
+	.spjj-video-box{
+		width: 606rpx;height: 394rpx;@include ezy-no-repeat-cover;margin: 0 auto 42rpx;
+		background-image: url("@/static/images/exam/video-frame-bj.png");position: relative;
+		box-sizing: border-box;padding: 18rpx;
+		.play-btn{
+			width: 90rpx;height:90rpx;position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/exam/video-play-btn.png");
+		}
+		.scale-btn{
+			width: 29rpx;height:29rpx;position:absolute;right: 30rpx;bottom: 24rpx;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/exam/video-zoom-btn.png");
+		}
+		.spjj-video{
+			width: 100%;height: 100%;background-color: blue;
+		}
+	}
+}
+
 	// height:$titleBar-tabBar-page;
 .lli-develop-expect-page{
 	display: flex;flex-direction: column;justify-content: space-between;align-items: center;

components/chengji/chengji.vue

@@ -5,7 +5,7 @@
 				<view @click="handleBack" class="nav-bar-icon"></view>
 				<view class="nav-bar-title">成绩</view>
 			</view>
-			<view class="result-body-box">
+			<view class="shiti-frame-box">
 				<w-swiper :list="list" :positionIndex="current" class="result-exam-swiper">
 					<template v-slot:default="{item,index}">
 						<view class="body" v-if="item.mta_show">

components/questionJiexi/questionJiexi.vue

@@ -1,15 +1,30 @@
 <template>
 	<uni-popup ref="popupRef" background-color="#fff" type="left" class="popup-container">
-		<button @click="handleBack">返回</button>
-		<view class="popup-content">
-			<text class="text">popup 内容</text>
-			<!-- 思路分析 -->
-			<view> {{data.answer}}</view>
-			<!-- 视频讲解 -->
-			<view>
-				{{data.jiangjie}}
+		<view class="ezy-dajx-page">
+			<view class="icon-title-navBar-box">
+				<view @click="handleBack" class="nav-bar-icon"></view>
+				<view class="nav-bar-title">单元测试</view>
+			</view>
+			<view class="shiti-frame-box">
+				<view class="dajx-content-box">
+					<!-- 思路分析 -->
+					<view class="slfx-title"></view>
+					<view class="slfx-content"> {{data.jiangjie}}</view>
+					<!-- <view class="slfx-content"> {{data.answer}}</view> -->
+					
+					<!-- 视频讲解 -->
+					<view class="spjj-title"></view>
+					<view class="spjj-video-box">
+						<!-- 播放和放大按钮不用可以删除 -->
+						<view class="play-btn"></view>
+						<view class="scale-btn"></view>
+						<!-- 这里放视频 ↓ -->
+						<view class="spjj-video"></view>
+					</view>
+				</view>
 			</view>
 		</view>
+		
 	</uni-popup>
 </template>
 

pages/unitTest/index.vue

@@ -6,7 +6,7 @@
 			<view class="nav-bar-other"><text class="key-note">{{count}}</text>/<text>{{total}}</text></view>
 		</view>
 		
-		<view class="exam-body-box">
+		<view class="shiti-frame-box">
 			<w-swiper :list="list" :positionIndex="current" class="ezy-exam-swiper">
 				<template v-slot:default="{item}">
 					<view class="body" v-if="item.mta_show">