成绩页面开发

common/styles/global/components.scss

@@ -71,9 +71,22 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		.key-note{color: #ffff01;}
 	}
 }
+// 两个元素
+.icon-title-navBar-box{
+	display: flex;align-items: center;justify-content: center;
+	padding: 0 20rpx;box-sizing: border-box;position: relative;
+	.nav-bar-title{
+		font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #fff;max-width: 70%;
+	}
+	.nav-bar-icon{
+		width: 63rpx;height: 63rpx;position: absolute;left: 20rpx;top: 0;
+		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
+	}
+}
 
 /***** 单选题 *****/
 .ezy-danxuan-box{
+	margin: 0 10rpx;
 	.danxuan-title{
 		width: 231rpx;height: 63rpx;
 		background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover();
@@ -83,7 +96,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		text-align: justify;
 	}
 	.danxuan-option{
-		width: 615rpx;height: 96rpx;line-height:96rpx;background-color:#fff;border-radius: 8px;margin-bottom: 20rpx;
+		width: 596rpx;height: 93rpx;line-height:96rpx;background-color:#fff;border-radius: 8px;margin-bottom: 20rpx;
 		font-size: 32rpx;color: #333;box-sizing: border-box;padding: 0 24rpx;@include ezy-no-repeat-cover();
 	}
 	.danxuan-option.active{

common/styles/global/pages.scss

@@ -271,6 +271,53 @@
 	}
 }
 
+// 成绩页
+.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;}
+		.flex-center{
+			height: 100%;
+			.body{height: 100%;display: flex;flex-direction: column;}
+			.ezy-danxuan-box{flex: 1;}
+		}
+	}
+	.answer-content-box{
+		.answer-title{width: 150rpx;height: 62rpx;flex-shrink: 0;
+		background-image: url("@/static/images/exam/answer-title.png");@include ezy-no-repeat-cover;
+		}
+		.answer-btn-box{
+			display: flex;height: 135rpx;
+			margin: 20rpx 0 20rpx 10rpx;}
+		.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.3);
+			.answer-item-title{font-size: 32rpx;color: #333;margin-bottom: 4rpx;}
+			.answer-item-error{font-size: 32rpx;color: #ef1417;}
+			.answer-item-correct{font-size: 32rpx;color: #15ab2e;}
+		}
+		.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: 144rpx;height: 135rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/exam/answer-btn.png");
+		margin: 0 32rpx;flex-shrink: 0;
+		}
+	}
+	
+	
+}
+
 // 得分页
 .exam-score-dialog{
 	width: 750rpx;height: 1250rpx;margin-bottom: 24%;position: relative;

components/chengji/chengji.vue

@@ -1,26 +1,42 @@
 <template>
 	<uni-popup ref="popupRef" background-color="#fff" type="left" class="popup-container">
-		<view>
-			<uni-icons type="left" size="30" @click="handleBack"></uni-icons>
-			<text>成绩</text>
-		</view>
-		<w-swiper :list="list" :swiperHeight="300" :positionIndex="current">
-			<template v-slot:default="{item,index}">
-				<view class="body" v-if="item.mta_show">
-					<danxuan :question="item" showError v-if="item.type == '1'"></danxuan>
-					<panduan :question="item" showError v-if="item.type == '2'"></panduan>
-					<tiankong :question="item" showError v-if="item.type == '3'"></tiankong>
-					<!-- 答案解析 -->
-					<button @click="showJiexiPopup(item)">show</button>
-					
-					<!-- 答案 -->
-					<view>答案{{showAnswerResult(item)}}</view>
-					<!-- 你的答案 -->
-					<view>您的答案:{{showAnswerReply(item)}}</view>
-				</view>
-			</template>
-		</w-swiper>
-
+		<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>
+			<view class="result-body-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">
+							<danxuan :question="item" showError v-if="item.type == '1'"></danxuan>
+							<panduan :question="item" showError v-if="item.type == '2'"></panduan>
+							<tiankong :question="item" showError v-if="item.type == '3'"></tiankong>
+							<view class="answer-content-box">
+								<view class="answer-title"></view>
+								<view class="answer-btn-box">
+									<!-- 你的答案 -->
+									<view class="answer-item-left">
+										<text class="answer-item-title">您的答案</text>
+										<text class="answer-item-error">{{showAnswerReply(item)}}</text>
+										<view class="answer-line"></view>
+									</view>
+									<!-- 答案 -->
+									<view class="answer-item-right">
+										<text class="answer-item-title">正确答案</text>
+										<text class="answer-item-correct">{{showAnswerResult(item)}}</text>
+									</view>
+									<!-- 答案解析 -->
+									<view @click="showJiexiPopup(item)" class="answer-btn"></view>
+								</view>
+									
+								
+							</view>
+						</view>
+					</template>
+				</w-swiper>
+			</view>
+			</view>
 		<!-- 解析浮层数据 -->
 		<questionJiexi ref="jiexiRef"></questionJiexi>
 	</uni-popup>