答案页面改版

common/styles/global/components.scss

@@ -121,7 +121,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 /***** 试题 *****/
 // 标题
 .ezy-shiti-title{
-	width: 216rpx;height: 96rpx;line-height: 96rpx;text-align: center;color: #fff;font-size: 32rpx;
+	width: 208rpx;height: 91rpx;line-height: 91rpx;text-align: center;color: #fff;font-size: 32rpx;
 	background-image: url("@/static/images/exam/shiti-title.png");@include ezy-no-repeat-cover();
 }
 
@@ -134,9 +134,6 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 /***** 单选题 *****/
 .ezy-danxuan-box{
 	margin: 0 10rpx;
-	.danxuan-title{
-		width: 231rpx;height: 63rpx;
-	}
 	.danxuan-option-box{
 		width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
 		font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx;

common/styles/global/pages.scss

@@ -703,7 +703,8 @@
 	.exam-progress-box{border-radius: 20rpx;overflow: hidden;}
 	.ezy-exam-swiper{
 		width: 100%;flex: 1;z-index: 2;margin: 0 auto;
-		uni-swiper-item{overflow: auto;}
+		uni-swiper-item{overflow-y: auto;}
+		.uni-swiper-slides{left: -2rpx;right: -2rpx;}
 	}
 	.exam-submit-btn{
 		width: 87rpx;height: 125rpx;@include ezy-no-repeat-cover;z-index: 2;
@@ -729,45 +730,67 @@
 }
 
 // 成绩页
-.ezy-result-page{
-	width: 100%;height: 100vh;background-color: #0ab2f0;position: relative;
-	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
-	@include ezy-no-repeat-cover(top);
+.ezy-result-page1{
+	width: 100%;height: 100vh;background-color: #f9f9fb;position: relative;
+	display: flex;flex-direction: column;
 	.result-exam-swiper{
-		width: 615rpx;flex: 1;z-index: 2;margin: 0 auto;
-		uni-swiper-item{overflow: auto;}
-		.flex-center{
-			height: 100%;
-			.body{height: 100%;display: flex;flex-direction: column;}
-			// 试题部分滚动  解析部分固定
-			// .ezy-danxuan-box{flex: 1;overflow-y: auto;}
-		}
+		width: 100%;flex: 1;z-index: 2;margin: 0 auto;
+		uni-swiper-item{overflow-y: auto;}
+		.uni-swiper-slides{left: -2rpx;right: -2rpx;}
 	}
 	.answer-content-box{
 		margin-top: 24rpx;
-		.answer-dtjx-row{display: flex;justify-content: space-between;}
-		.answer-title{width: 150rpx;height: 62rpx;flex-shrink: 0;margin-left: 10rpx;
-		background-image: url("@/static/images/exam/answer-title.png");@include ezy-no-repeat-cover;
-		}
-		.tiankong-answer-content-box{background-color: rgba(255, 255, 255, 0.7);font-size: 32rpx;color: #15ab2e;
-		border-radius: 4px;box-sizing: border-box;padding: 16rpx;margin: 20rpx 0 20rpx 10rpx;min-height: 80rpx;}
-		.tiankong-answer-row{word-break: break-all;margin-bottom: 10rpx;}
+		.answer-title{
+			width: 208rpx;height: 91rpx;line-height: 91rpx;
+			font-size: 32rpx;text-align: center;margin-left: 10rpx;color: #fff;
+			background-image: url("@/static/images/exam/shiti-anser-title.png");@include ezy-no-repeat-cover;
+		}
+		.answer-text-title{font-size: 32rpx;color: #f6aa1d;margin: 24rpx 0;}
+		.answer-content-border{
+			width: 96%;box-shadow: 0 0rpx 8rpx rgba(100, 159, 241, 0.3);
+			border-radius: 12rpx;font-size: 32rpx;margin: 42rpx auto 56rpx;}
+		.tiankong-answer-content-box{background-color: rgba(255, 255, 255, 0.7);font-size: 32rpx;color: #499141;
+		border-radius: 4px;box-sizing: border-box;padding: 24rpx;min-height: 80rpx;
+		.tiankong-answer-title{color: #333;margin-bottom: 10rpx;}
+		.answer-index-box{
+			font-size: 24rpx;border: 1rpx solid #499141;border-radius: 24rpx;margin-right: 10rpx;
+			line-height: 1;text-align: center;padding: 2rpx 7rpx;display: inline-block;
+			flex-shrink: 0;
+		}
+		.tiankong-answer-row{
+			word-break: break-all;margin-bottom: 10rpx;margin: 24rpx 0;
+			display: flex;align-items: center;line-height: 1;
+			}
 		.tiankong-answer-row:last-child{margin-bottom: 0;}
-		.answer-btn-box{display: flex;height: 135rpx;margin: 20rpx 0 20rpx 10rpx;}
+		}
+		.answer-btn-box{display: flex;height: 135rpx;}
 		.answer-item-left,.answer-item-right{
 			width: 100%;flex: 1;align-items: center;justify-content: center;
 			display: flex;flex-direction: column;background-color: rgba(255, 255, 255, 0.7);
-			.answer-item-title{font-size: 32rpx;color: #333;margin-bottom: 4rpx;}
-			.answer-item-error{font-size: 32rpx;color: #ef1417;min-height: 36rpx;}
-			.answer-item-correct{font-size: 32rpx;color: #15ab2e;min-height: 36rpx;}
+			.answer-item-title{font-size: 30rpx;color: #333;margin-bottom: 10rpx;}
+			.answer-item-error{font-size: 30rpx;color: #ef1417;min-height: 36rpx;}
+			.answer-item-correct{font-size: 30rpx;color: #15ab2e;min-height: 36rpx;}
 		}
 		.answer-item-left{border-radius: 4px 0  4px 0;position: relative;}
 		.answer-item-right{border-radius: 0 4px  4px 0;}
 		.answer-line{width: 1px;position: absolute;top: 16rpx;right: 0;bottom: 16rpx;background: #d1e9f5;}
-		.answer-btn{width: 227rpx;height:72rpx;@include ezy-no-repeat-cover;margin-right: 20rpx;
-		background-image:url("@/static/images/exam/answer-btn.png");flex-shrink: 0;
+	}
+	.answer-stjx-box{
+		width: 96%;margin: 0 auto;
+		.answer-rich-text{
+			font-size: 32rpx;color: #333;line-height: 1.8;
 		}
 	}
+	.answer-video-box{
+		position: relative;margin-bottom:24rpx;
+		img{width: 100%;}
+	}
+	.answer-video-box::before{
+		content: '';display: block;position: absolute;
+		width: 90rpx;height: 90rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/video-play-btn.png");
+		top: 52%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20;
+		}
+	
 }
 
 // 得分页

pages/xinshuxue/components/unitAnswer.vue

@@ -4,9 +4,20 @@
 		<view class="ezy-result-page">
 			<view class="icon-title-navBar-box">
 				<view @click="handleBack" class="nav-bar-icon"></view>
-				<view class="nav-bar-title">成绩</view>
+				<view class="nav-bar-title">答案</view>
 			</view>
-			<view class="shiti-frame-box">
+			<view class="exam-body">
+				<view class="xx-jd-box">
+					<view class="xx-row">
+						<view>当前学习进度</view>
+						<view class="text-row">
+							<text class="dq-jd-text">{{current+1}}</text>
+							<text class="dq-jd-line">/</text>{{myList.length}}</view>
+					</view>
+					<progress :percent="(current+1)/myList.length * 100" class="exam-progress-box"
+					stroke-width="10" backgroundColor="#3c7dfd" activeColor="#ffd11c"/>
+				</view>
+				<view class="shiti-frame-box">
 				<w-swiper :list="myList" :positionIndex="current" class="result-exam-swiper" @change="onSwiperChange">
 					<template v-slot:default="{item,index}">
 						<view class="body" v-if="item.mta_show">
@@ -15,12 +26,8 @@
 							<tiankong :question="item" showError v-if="item.type == '3'"
 								:placeholders="item.placeholders"></tiankong>
 							<view class="answer-content-box">
-								<view class="answer-dtjx-row">
-									<view class="answer-title"></view>
-									<!-- 答案解析 -->
-									<view @click="showJiexiPopup(item)" class="answer-btn"></view>
-								</view>
-								<view class="answer-btn-box" v-if="item.type!=3">
+								<view class="answer-title">答案</view>
+								<view class="answer-content-border answer-btn-box" v-if="item.type!=3">
 									<!-- 你的答案 -->
 									<view class="answer-item-left">
 										<text class="answer-item-title">您的答案</text>
@@ -33,37 +40,39 @@
 										<text class="answer-item-correct">{{showAnswerResult(item)}}</text>
 									</view>
 								</view>
-								<view v-else>
-									<!-- 答案 -->
-									<view class="tiankong-answer-content-box">
-										<view v-for="(ict,cindex) in showAnswerResult(item)" :key="cindex"
-											class="tiankong-answer-row">
-											<text>{{cindex+1}}. </text>
-											<text v-for="(xItem,xindex) in ict" :key="xindex">
-												<text> {{xItem}} </text>
-												<text v-if="xindex != ict.length-1">/</text>
-											</text>
-										</view>
+								<!-- 填空题答案 -->
+								<view class="answer-content-border tiankong-answer-content-box" v-else>
+									<view class="tiankong-answer-title">正确答案</view>
+									<view v-for="(ict,cindex) in showAnswerResult(item)" :key="cindex"
+										class="tiankong-answer-row">
+										<text class="answer-index-box">{{cindex+1}}</text>
+										<text v-for="(xItem,xindex) in ict" :key="xindex">
+											<text> {{xItem}} </text>
+											<text v-if="xindex != ict.length-1">/</text>
+										</text>
 									</view>
 								</view>
 
 								<!-- 试题解析 -->
-								<view>
-									<view>试题解析：</view>
-									<rich-text :nodes="item.answer"></rich-text>
-								</view>
-
-								<!-- 试题视频 -->
-								<view>
-									<view>视频讲解：</view>
-									<view>
-										<image :src="item.cover"></image>
+								<view class="answer-stjx-box">
+									<view class="answer-text-title">试题解析：</view>
+									<rich-text :nodes="item.answer" class="answer-rich-text"></rich-text>
+
+									<!-- 试题视频 -->
+									<view class="answer-text-title">视频讲解：</view>
+									<view class="answer-video-box">
+										<img :src="item.cover"/>
 									</view>
 								</view>
 							</view>
 						</view>
 					</template>
 				</w-swiper>
+				<!--  左右滑动提示  -->
+					<view class="swiper-tip-box">
+						左右滑动查看更多题目
+					</view>
+				</view>
 			</view>
 		</view>
 		<!-- 解析浮层数据 -->
@@ -117,6 +126,7 @@
 	const jiexiRef = ref(null);
 
 	function onSwiperChange(index) {
+		current.value = index;
 		uni.$emit('swiper-change', index)
 	}