试题优化

common/styles/global/components.scss

@@ -47,6 +47,13 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 @mixin ezy-no-repeat-contain($position: center) {
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
+
+/***** 富文本处理  *****/
+@mixin ezy-rich-text() {
+	div,p,span{margin: 0;padding: 0;}
+	img{max-width: 100%;}
+}
+
 // 全屏的popup弹窗
 .ezy-popup-width-all{
 	width: 100%;
@@ -97,6 +104,11 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	}
 }
 
+/***** 试题---题干 *****/
+.ezy-shiti-question{
+	margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box;
+	text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
+}
 /***** 单选题 *****/
 .ezy-danxuan-box{
 	margin: 0 10rpx;
@@ -104,25 +116,34 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		width: 231rpx;height: 63rpx;
 		background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover();
 	}
-	.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;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;
-		font-size: 32rpx;color: #333;box-sizing: border-box;padding: 0 24rpx;@include ezy-no-repeat-cover();
-	}
-	.danxuan-option.active{
-		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-active.png");
-	}
-	.danxuan-option.showError{
-		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-error.png");
+	.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;
+		display: flex;
+		.option-change{flex-shrink: 0;line-height: 1.6;}
+		.option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text;
+		text-align: justify;word-wrap: break-word;word-break: break-all;display: block;}
+	}
+	.danxuan-option-box.active{color: #0589e9;}
+	.danxuan-option-box.showError{color: #ff5757;}
+	.danxuan-option-box.active_right{color: #1ac136;}
+}
+/***** 判断题 *****/
+.ezy-panduan-box{
+	margin: 0 10rpx;
+	.panduan-title{
+		width: 231rpx;height: 63rpx;
+		background-image: url("@/static/images/exam/panduan-title.png");@include ezy-no-repeat-cover();
 	}
-	.danxuan-option.active_right{
-		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-right.png");
+	.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;
 	}
+	.option-question{display: flex;}
+	.option-question.active .uni-radio-input{background-color: #0589e9!important;border-color: #0589e9!important;}
+	.option-question.showError .uni-radio-input{background-color: #ff5757!important;border-color: #ff5757!important;}
+	.option-question.active_right .uni-radio-input{background-color: #1ac136!important;border-color: #1ac136!important;}
 }
-
 /***** 试题白色的框 *****/
 .shiti-frame-box{
 	flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;

common/styles/global/pages.scss

@@ -423,7 +423,8 @@
 	}
 	.answer-content-box{
 		margin-top: 24rpx;
-		.answer-title{width: 150rpx;height: 62rpx;flex-shrink: 0;
+		.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;
 		}
 		.answer-btn-box{
@@ -431,17 +432,16 @@
 			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);
+			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;}
-			.answer-item-correct{font-size: 32rpx;color: #15ab2e;}
+			.answer-item-error{font-size: 32rpx;color: #ef1417;min-height: 36rpx;}
+			.answer-item-correct{font-size: 32rpx;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: 144rpx;height: 135rpx;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/exam/answer-btn.png");
-		margin: 0 32rpx;flex-shrink: 0;
+		.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;
 		}
 	}
 }

components/chengji/chengji.vue

@@ -14,7 +14,11 @@
 							<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-dtjx-row">
+									<view class="answer-title"></view>
+									<!-- 答案解析 -->
+									<view @click="showJiexiPopup(item)" class="answer-btn"></view>
+								</view>
 								<view class="answer-btn-box">
 									<!-- 你的答案 -->
 									<view class="answer-item-left">
@@ -27,8 +31,6 @@
 										<text class="answer-item-title">正确答案</text>
 										<text class="answer-item-correct">{{showAnswerResult(item)}}</text>
 									</view>
-									<!-- 答案解析 -->
-									<view @click="showJiexiPopup(item)" class="answer-btn"></view>
 								</view>
 									
 								

components/question/danxuan.vue

@@ -3,11 +3,11 @@
 		<!-- 标题区域 -->
 		<view class="danxuan-title"></view>
 		<!-- 题干区域 -->
-		<rich-text :nodes="data.name" class="danxuan-question"></rich-text>
+		<rich-text :nodes="data.name" class="ezy-shiti-question"></rich-text>
 		<!-- 选项区域 -->
-		<view v-for="(item,index) in data.contents" class="danxuan-option" :class="formatClass(index)" :key="index" @click="onSelect(index)">
-			<text>{{item.number}}.</text>
-			<rich-text :nodes="item.label" class="danxuan-question"></rich-text>
+		<view v-for="(item,index) in data.contents" class="danxuan-option-box" :class="formatClass(index)" :key="index" @click="onSelect(index)">
+			<text class="option-change">{{item.number}}.</text>
+			<rich-text :nodes="item.label" class="option-question"></rich-text>
 		</view>
 	</view>
 </template>

components/question/panduan.vue

@@ -1,26 +1,20 @@
 <template>
-	<view>
+	<view class="ezy-panduan-box">
 		<!-- 标题区域 -->
-		<view>判断题:</view>
+		<view class="panduan-title"></view>
 		<!-- 题干区域 -->
-		<rich-text :nodes="question.name"></rich-text>
+		<rich-text :nodes="question.name" class="ezy-shiti-question"></rich-text>
 		<!-- 选项区域 -->
-		<view>
-			<radio-group @change="radioChange">
-				<label :class="formatClass('1')">
-					<view>
-						<radio value="1" :checked="question.reply == '1'" />
-					</view>
-					<view>正确</view>
-				</label>
-				<label :class="formatClass('0')">
-					<view>
-						<radio value="0" :checked="question.reply == '0'" />
-					</view>
-					<view>错误</view>
-				</label>
-			</radio-group>
-		</view>
+		<radio-group @change="radioChange" class="danxuan-option-box">
+			<label class="option-question" :class="formatClass('1')">
+				<radio value="1" :checked="question.reply == '1'"/>
+				<view>正确</view>
+			</label>
+			<label class="option-question" :class="formatClass('0')"> 
+				<radio value="0" :checked="question.reply == '0'"/>
+				<view>错误</view>
+			</label>
+		</radio-group>
 	</view>
 </template>
 
@@ -55,16 +49,3 @@
 		}
 	}
 </script>
-
-<style lang="scss" scoped>
-	
-	.active {
-		background-color: blue; // 判断题选中的颜色
-	}
-	.showError {
-		background-color: red; // 判断错误选中颜色
-	}
-	.active_right {
-		background-color: green; // 答案解析：单选正确颜色
-	}
-</style>