单选题样式修改

common/styles/global/components.scss

@@ -24,9 +24,22 @@ view{box-sizing: border-box;}
   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%;}
+}
+
+/***** 按钮  *****/
+// 按钮
+.phone-green-btn[type='default']{background-color: #3fd2a1;color: #fff;}
+.phone-white-btn[type='default']{background-color: #fff;color: #3fd2a1;border: 1rpx solid #3fd2a1;}
+.phone-white-btn[type='default']:after{display: none;}
+.phone-green-btn[type='default']:hover{background-color: #34c595;color: #fff;}
+
 /***** 标题栏  *****/
 // 三个元素
-.ezy-navBar-box{
+.phone-navBar-box{
 	display: flex;align-items: center;justify-content: space-between;background-color: #fff;
 	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
 	.nav-bar-icon{
@@ -43,7 +56,7 @@ view{box-sizing: border-box;}
 	.text-btn{font-size: 26rpx;color: #666;padding-top: 4rpx;box-sizing: border-box;}
 }
 // 两个元素
-.icon-title-navBar-box{
+.icon-title-navBar-box,.icon-title-bjcolor-navBar-box{
 	display: flex;align-items: center;justify-content: center;background-color: #fff;
 	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
 	.nav-bar-title{
@@ -54,8 +67,14 @@ view{box-sizing: border-box;}
 		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
 	}
 }
+// 带背景色
+.icon-title-bjcolor-navBar-box{
+background-color: #3fd2a1;
+	.nav-bar-title{color: #fff;}
+	.nav-bar-icon{background-image: url("@/static/images/common/nav-white-bar-jt.svg");}
+}
 // 仅一个返回按钮
-.ezy-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
+.phone-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
 		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
 	}
 	
@@ -77,6 +96,32 @@ view{box-sizing: border-box;}
 		border-radius: 40rpx;
 	}
 }
+/***** 试题---题干 *****/
+.phone-shiti-question{
+	font-size: 32rpx;color: #333;line-height: 1.6;margin-bottom: 24rpx;
+	text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text;
+	    display: flex;flex-direction: row;justify-content: flex-start;
+}
+
+/***** 单选题 *****/
+.phone-danxuan-box{
+	margin: 0 10rpx;overflow: auto;height: calc(100vh - 420rpx - var(--status-bar-height));
+	.danxuan-option-box{
+		width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
+		font-size: 32rpx;color: #666;box-sizing: border-box;padding: 10rpx 24rpx;
+		display: flex;
+		.option-change{
+			width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box;
+			flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx;
+			    display: flex;align-items: center;justify-content: center;
+			}
+		.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 .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
+	.danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
+	.danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
+}
 
 /***** 考试须知  *****/
 .phone-ksxz-dialog{

common/styles/global/pages.scss

@@ -10,39 +10,91 @@
 	}
 	
 		// 列表区域
-		.item-kaoshi-row {
-			width: 100%;
-			.ks-item-top {
-				display: flex;justify-content: space-between;margin-bottom: 20rpx;
-				.ks-name {font-size: 34rpx;color: #000;}
-				.ks-zyLevelName {font-size: 26rpx;padding: 2px 12px;border-radius: 4px;border: 1px solid #3fd2a1;color:#3fd2a1;}
+	.item-kaoshi-row {
+		width: 100%;
+		.ks-item-top {
+			display: flex;justify-content: space-between;margin-bottom: 20rpx;
+			.ks-name {font-size: 34rpx;color: #000;}
+			.ks-zyLevelName {font-size: 26rpx;padding: 4rpx 24rpx;border-radius: 4px;border: 1px solid #3fd2a1;color:#3fd2a1;}
+		}
+		.ks-totalTm {font-size: 26rpx;color: #333;margin-bottom: 20rpx;line-height: 1;margin-left: 40rpx;}
+		.phone-time-icon,.phone-cishu-icon,.phone-zongfen-icon,.phone-jigefen-icon{width: 24rpx;height: 24rpx;@include ezy-no-repeat-cover();
+		vertical-align: middle;margin-right: 10rpx;}
+		.phone-time-icon{background-image: url("@/static/images/common/time-icon.png");}
+		.phone-cishu-icon{background-image: url("@/static/images/common/cishu-icon.png");}
+		.phone-zongfen-icon{background-image: url("@/static/images/common/zongfen-icon.png");vertical-align: unset;}
+		.phone-jigefen-icon{background-image: url("@/static/images/common/jigefen-icon.png");vertical-align: unset;}
+		.ks-score-content{
+			font-size: 26rpx;background-color: #f4f6fa;width: 500rpx;line-height: 1;border-radius: 8rpx;
+			margin-bottom: 20rpx;display: flex;padding: 16rpx 30rpx;box-sizing: border-box;
+			.ks-score {
+				padding-right: 60rpx;
+				text{color: #ff7023;}
 			}
-
-			.ks-totalTm {font-size: 26rpx;color: #333;margin-bottom: 20rpx;line-height: 1;margin-left: 40rpx;}
-			.phone-time-icon,.phone-cishu-icon,.phone-zongfen-icon,.phone-jigefen-icon{width: 24rpx;height: 24rpx;@include ezy-no-repeat-cover();
-			vertical-align: middle;margin-right: 10rpx;}
-			.phone-time-icon{background-image: url("@/static/images/common/time-icon.png");}
-			.phone-cishu-icon{background-image: url("@/static/images/common/cishu-icon.png");}
-			.phone-zongfen-icon{background-image: url("@/static/images/common/zongfen-icon.png");vertical-align: unset;}
-			.phone-jigefen-icon{background-image: url("@/static/images/common/jigefen-icon.png");vertical-align: unset;}
-			.ks-score-content{
-				font-size: 26rpx;background-color: #f4f6fa;width: 500rpx;line-height: 1;border-radius: 8rpx;
-				margin-bottom: 20rpx;display: flex;padding: 16rpx 30rpx;box-sizing: border-box;
-				.ks-score {
-					padding-right: 60rpx;
-					text{color: #ff7023;}
-				}
-				.ks-okScore {
-					text{color: #3fd2a1;}
-				}
+			.ks-okScore {
+				text{color: #3fd2a1;}
 			}
+		}
+		.kaoshi-btn {width:220rpx;font-size: 26rpx;background-color: #3fd2a1;}
+	}
+}
+	
+/*** 进入考试页面***/
+.phone-kaoshi-page {
+		height: 100vh;display: flex;flex-direction: column;background-color: #f4f6fa;position: relative;
 
-			.row-item {margin-bottom: 10px;}
-			.kaoshi-btn {width:220rpx;font-size: 26rpx;background-color: #3fd2a1;}
+		.kaoshi-page-title {
+			height: 80rpx;line-height: 80rpx;background-color: #fff;margin-top: 20rpx;font-size: 26rpx;color: #333;
+			display: flex;justify-content: space-between;padding: 0 24rpx;border-bottom: 1rpx solid #ebebeb;
+			.title-types{font-size: 32rpx;color: #000;}
+		}
+
+		.kaoshi-shiti-content {padding: 24rpx 24rpx 0 24rpx;background-color: #fff;flex: 1;}
 
+		.kaoshi-bottom-box {
+			width: 100%;height: 100rpx;background-color: #f0f0f0;
+			display: flex;align-items: center;justify-content: space-between;
+			padding: 0 24rpx;box-sizing: border-box;
+			.bj-btn{margin-left: unset;}
+			.jx-btn{margin-right: unset;}
+			.shiti-num-icon{
+				width: 27px;height: 24px;vertical-align: middle;
+				background-image: url("@/static/images/exam/shiti-num-icon.png");@include ezy-no-repeat-cover();
+			}
+			.active-num{color: #30c190;}
 		}
-}
+
+		.ks-btn-prev {position: absolute;bottom: 130rpx;left:24rpx;}
+		.ks-btn-next {position: absolute;bottom: 130rpx;right: 24rpx;}
+
+	
+	}
 	
+/*** 答题卡 ***/
+.answer-card-popup{
+	height: 100vh;
+	.answer-card-content{
+		display: flex;flex-wrap: wrap;box-sizing: border-box;padding: 20rpx 16rpx;
+	}
+	.paragraph-title{width: 100%;font-size: 30rpx;margin:0 0 10rpx 24rpx;}
+	.paragraph-qa {
+		width: 80rpx;height: 80rpx;line-height: 78rpx;margin: 20rpx 30rpx;border: 1rpx solid transparent;
+		border-radius: 50%;text-align: center;overflow: hidden;
+	}
+	// 答题卡 答完样式
+	.paragraph-qa-block-done {
+		background-color: #cbcbcb;color: #fff;border: 1rpx solid transparent;
+	}
+	// 答题卡 未答完样式
+	.paragraph-qa-block-init {
+		background-color: #fff;color: #000;border: 1rpx solid #ccc;
+	}
+	// 答题卡 标记样式
+	.paragraph-qa-block-mark {
+		background-color: #3fd2a1;color: #fff;border: 1rpx solid #3fd2a1;
+	}
+}
+
 /*** 家政页面***/
 .jiazheng-search-box{
 	width: 100%;box-sizing: border-box;padding: 20rpx 20rpx;position: relative;

components/questions/danxuan.vue

@@ -1,8 +1,11 @@
 <template>
 	<view v-if="question" class="phone-danxuan-box">
-		<view>{{question.onlyNum}}、</view>
-		<!-- 题干区域 -->
-		<rich-text :nodes="data.name" class="phone-shiti-question"></rich-text>
+		<view class="phone-shiti-question">
+			<view>{{question.onlyNum}}、</view>
+			<!-- 题干区域 -->
+			<rich-text :nodes="data.name"></rich-text>
+		</view>
+		
 		<!-- 选项区域 -->
 		<view v-for="(item,index) in data.contents" class="danxuan-option-box" :class="formatClass(index)" :key="index">
 			<text class="option-change"  @click="onSelect(index)">{{item.number}}</text>
@@ -75,9 +78,3 @@
 		props.question.reply = index;
 	}
 </script>
-
-<style lang="scss" scoped>
-	.active {
-		background-color: yellowgreen;
-	}
-</style>

pages/admin/Kaoshi/exam.vue

@@ -1,13 +1,13 @@
 <template>
 	<view class="phone-kaoshi-page">
 		<!-- 导航区域 -->
-		<view class="phone-navBar-box">
-			<view @click="handleBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons></view>
+		<view class="icon-title-navBar-box">
+			<view @click="handleBack" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">{{data.ksName}}</text>
 		</view>
 		<!-- 第一行 -->
 		<view class="kaoshi-page-title">
-			<view v-if="activeSt">{{stTypes[activeSt.stTypeId]}}</view>
+			<view v-if="activeSt" class="title-types">{{stTypes[activeSt.stTypeId]}}</view>
 			<view>100分钟</view>
 		</view>
 
@@ -36,46 +36,32 @@
 
 		</view>
 
-		<view class="kaoshi-bottom-card">
-			<view style="margin:0 10px">
-				<button class="biaoji-btn" type="primary" size="mini" @click="handleBiaoji">标记</button>
-			</view>
-			<view @click="showAnswerCard">
-				<text style="color: green;">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
-			</view>
-			<view style="flex:1;text-align: right;">
-				<button type="primary" size="mini" @click="handleCheckJiexi" style="margin-right: 10px">解析</button>
-				<button type="primary" size="mini" @click="handleBack">完成</button>
+		<view class="kaoshi-bottom-box">
+			<button class="phone-green-btn bj-btn" hover-class="none" type="default" size="mini" @click="handleBiaoji">标记</button>
+			<view @click="showAnswerCard" class="shiti-num-box">
+				<icon class="shiti-num-icon"></icon>
+				<text class="active-num">{{activeSt ? activeSt.onlyNum: 0}}</text>/<text>{{data.StListForSearch.length}}</text>
 			</view>
+			<button class="phone-white-btn jx-btn" hover-class="none" type="default" size="mini" @click="handleCheckJiexi">解析</button>
 		</view>
 		<template v-if="activeSt">
-			<button type="primary" size="mini" class="ks-btn-prev" @click="handlePrev" v-if="!isFistStId">上一题</button>
-			<button type="primary" size="mini" class="ks-btn-next" @click="handleNext" v-if="!isLastStId">下一题</button>
+			<button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-prev" @click="handlePrev" v-if="!isFistStId">上一题</button>
+			<button type="default" size="mini" hover-class="none"class="phone-green-btn ks-btn-next" @click="handleNext" v-if="!isLastStId">下一题</button>
 		</template>
 
 		<!-- 答题卡 -->
 		<uni-popup ref="popupRef" background-color="#fff" :is-mask-click="false" :mask-click="false">
-			<view class="popup-content" style="height: 100vh">
-				<view class="popup-phone-navBar-box">
-					<view @click="handlePopupBack" class="nav-bar-icon"><uni-icons type="left" size="20"></uni-icons>
-					</view>
+			<view class="answer-card-popup">
+				<view class="icon-title-bjcolor-navBar-box">
+					<view @click="handlePopupBack" class="nav-bar-icon"> </view>
 					<text class="nav-bar-title">答题卡</text>
 				</view>
-				<view class="main-container">
-					<view class="paragraph" v-for="(paragraph,paragraphIndex) in questionData" :key="paragraphIndex">
-						<view class="paragraph-title">
-							{{paragraph.name}}
-						</view>
-						<view class="paragraph-qa-content">
-							<view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex">
-								<view class="paragraph-qa-block">
-									<view :class="getQaClass(qa)" @click="answerCardItemClick(qa)">
-										{{qa.onlyNum}}
-									</view>
-								</view>
-							</view>
-						</view>
-
+				<view class="answer-card-content" v-for="(paragraph,paragraphIndex) in questionData" :key="paragraphIndex">
+					<view class="paragraph-title">
+						{{paragraph.name}}
+					</view>
+					<view class="paragraph-qa" v-for="(qa,qaIndex) in paragraph.qas" :key="qaIndex" 
+					:class="getQaClass(qa)" @click="answerCardItemClick(qa)">{{qa.onlyNum}}
 					</view>
 				</view>
 			</view>
@@ -471,110 +457,3 @@
 		})
 	}
 </script>
-
-<style lang="scss">
-	.phone-kaoshi-page {
-		background-color: #ccc;
-		position: relative;
-
-		.phone-navBar-box {
-			width: 100%;
-			height: 60px;
-			background-color: #fff;
-			text-align: center;
-			position: relative;
-			line-height: 60px;
-
-			.nav-bar-icon {
-				position: absolute;
-				left: 0;
-				top: 0
-			}
-		}
-
-		.kaoshi-page-title {
-			margin-top: 10px;
-			background-color: #fff;
-			height: 60px;
-			line-height: 60px;
-			display: flex;
-			justify-content: space-between;
-			padding: 0 10px;
-			border-bottom: 1px solid #333;
-		}
-
-		.kaoshi-shiti-content {
-			padding: 20px 20px 0 20px;
-			height: calc(100vh - 211px);
-			background-color: #fff;
-		}
-
-		.kaoshi-bottom-card {
-			height: 60px;
-			width: 100%;
-			background-color: #ccc;
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			text-align: left;
-			padding: 0 10px;
-			box-sizing: border-box;
-		}
-
-		.ks-btn-prev {
-			position: absolute;
-			bottom: 150px;
-			left: 0;
-		}
-
-		.ks-btn-next {
-			position: absolute;
-			bottom: 150px;
-			right: 0;
-		}
-
-		.popup-phone-navBar-box {
-			width: 100%;
-			height: 60px;
-			background-color: #fff;
-			text-align: center;
-			position: relative;
-			line-height: 60px;
-
-			.nav-bar-icon {
-				position: absolute;
-				left: 0;
-				top: 0
-			}
-		}
-
-		.paragraph-qa-content {
-			display: flex;
-			flex-wrap: wrap;
-
-			.paragraph-qa {
-				margin: 10px;
-				width: 40px;
-				height: 40px;
-				text-align: center;
-				line-height: 40px;
-				border: 1px solid #ccc;
-				border-radius: 50%;
-				overflow: hidden;
-			}
-			// 答题卡 答完样式
-			.paragraph-qa-block-done {
-				background-color: skyblue;
-			}
-			// 答题卡 未答完样式
-			.paragraph-qa-block-init {
-				background-color: #ccc;
-			}
-			// 答题卡 标记样式
-			.paragraph-qa-block-mark {
-				background-color: orange;
-			}
-		}
-	
-	}
-</style>