样式开发

components/custom-navbar/custom-navbar.vue

@@ -5,7 +5,7 @@
 	  <view class="icon-title-box">
 		  <view class="nav-bar-icon" v-if="showBackBtn" @click="handleBack"></view>
 		  <!-- 标题区域 -->
-		  <view class="nav-bar-title" :style="{fontSize: titleSize + 'px', color: titleColor}">
+		  <view class="nav-bar-title" :style="{fontSize: titleSize + 'rpx', color: titleColor}">
 			{{ title }}
 		  </view>
 	  </view>
@@ -16,8 +16,8 @@
 export default {
   props: {
     title: String,
-    titleSize: { type: Number, default: 18 }, // 默认字号
-    titleColor: { type: String, default: '#000000' },
+    titleSize: { type: Number, default: 32 }, // 默认字号
+    titleColor: { type: String, default: '#333' },
 	showBackBtn:{type:Boolean, default: false}
   },
   data() {

components/questions/jianda.vue

@@ -6,9 +6,7 @@
 			<rich-text :nodes="question.name"></rich-text>
 		</view>
 		<!-- 选项区域 -->
-		<view  class="jianda-option-box">
-			<textarea placeholder="请输入内容" v-model="question.reply" />
-		</view>
+		<textarea class="jianda-textarea-box" placeholder="请输入内容" v-model="question.reply" />
 	</view>
 </template>
 

components/questions/yuedu.vue

@@ -3,38 +3,33 @@
 		<view class="phone-shiti-question">
 			<view class="question-num">{{question.onlyNum}}、</view>
 			<!-- 题干区域 -->
-			<!-- <rich-text :nodes="question.name"></rich-text> -->
+			<rich-text :nodes="question.name"></rich-text>
 		</view>
 		<!-- 选项区域 -->
-		<view class="yuedu-option-box">
-			<swiper class="swiper-box" @change="onSwitchChange" :current="swiperDotIndex">
-				<swiper-item v-for="(item,index) in data.content" :key="index" class="swiper-item-content">
-					<view class="swiper-item" :class="'swiper-item' + index" style="background-color: #ccc;">
-						<template v-if="item.type == 'danxuan'">
-							<!-- 单选 -->
-              <danxuan :question="item" :key="item.stId"></danxuan>
-						</template>
-						<template v-if="item.type == 'duoxuan'">
-
-							<!-- 多选 -->
-							<duoxuan :question="item" :key="item.stId"></duoxuan>
-						</template>
-						<template v-if="item.type == 'panduan'">
-							<!-- 判断 -->
-							<panduan :question="item" :key="item.stId"></panduan>
-						</template>
-						<template v-if="item.type == 'tiankong'">
-							<!-- 填空 -->
-							<tiankong :question="item" :key="item.stId"></tiankong>
-						</template>
-						<template v-if="item.type == 'jianda'">
-							<!-- 简答 -->
-							<jianda :question="item" :key="item.stId"></jianda>
-						</template>
-					</view>
-				</swiper-item>
-			</swiper>
-		</view>
+		<swiper class="yuedu-swiper-box" @change="onSwitchChange" :current="swiperDotIndex">
+			<swiper-item v-for="(item,index) in data.content" :key="index" class="yuedu-swiper-content">
+				<template v-if="item.type == 'danxuan'">
+					<!-- 单选 -->
+				<danxuan :question="item" :key="item.stId"></danxuan>
+				</template>
+				<template v-if="item.type == 'duoxuan'">
+					<!-- 多选 -->
+					<duoxuan :question="item" :key="item.stId"></duoxuan>
+				</template>
+				<template v-if="item.type == 'panduan'">
+					<!-- 判断 -->
+					<panduan :question="item" :key="item.stId"></panduan>
+				</template>
+				<template v-if="item.type == 'tiankong'">
+					<!-- 填空 -->
+					<tiankong :question="item" :key="item.stId"></tiankong>
+				</template>
+				<template v-if="item.type == 'jianda'">
+					<!-- 简答 -->
+					<jianda :question="item" :key="item.stId"></jianda>
+				</template>
+			</swiper-item>
+		</swiper>
 	</view>
 </template>
 
@@ -90,11 +85,3 @@
 		Emits('yudu-change', data.content[e.detail.current])
 	}
 </script>
-
-<style lang="scss">
-	.yuedu-option-box{
-		height: calc(100vh - 500rpx);display: flex;flex-direction: column;
-		.swiper-box{flex: 1;}
-		.swiper-item-content{overflow-y: auto;}
-		}
-</style>

pages/exam/exam.vue

@@ -6,7 +6,7 @@
 			<view v-if="activeSt" class="title-types">{{dlName}}</view>
 			<!--  倒计时 -->
 			<view v-if="!!data.endSecond">
-				<uni-countdown :show-day="false" :showHour="true" :showMinute="true" :second="data.endSecond"
+				<uni-countdown class="exam-countdown" :show-day="false" :showHour="true" :showMinute="true" :second="data.endSecond"
 					@timeup="onTimeUp" :start="startCountDown"></uni-countdown>
 			</view>
 		</view>
@@ -51,6 +51,8 @@
 			</view>
 			<button class="phone-green-btn save-btn" hover-class="none" type="default" size="mini"
 				@click="handleSave(true)">保存</button>
+			<button class="phone-green-btn save-btn" hover-class="none" type="default" size="mini">
+				交卷并查看成绩</button>
 		</view>
 		<template v-if="activeSt">
 			<button type="default" size="mini" hover-class="none" class="phone-green-btn ks-btn-prev"
@@ -980,90 +982,3 @@
 		})
 	}
 </script>
-
-<style lang="scss">
-	.phone-kaoshi-page {
-		display: flex;
-		flex-direction: column;
-		background-color: #f4f6fa;
-		position: relative;
-
-		.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;
-			position: fixed;
-			bottom: var(--window-bottom);
-
-			.bj-btn,
-			.jx-btn,
-			.save-btn {
-				height: 60rpx;
-				line-height: 58rpx;
-				box-sizing: border-box;
-			}
-
-			.bj-btn {
-				margin-left: unset;
-			}
-
-			.jx-btn,
-			.save-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: fixed;
-			bottom: 130rpx;
-			left: 24rpx;
-		}
-
-		.ks-btn-next {
-			position: fixed;
-			bottom: 130rpx;
-			right: 24rpx;
-		}
-	}
-</style>