Browse Source

试题样式改版

tanxue 1 month ago
parent
commit
31d8d2c6bc

+ 14 - 9
common/styles/global/components.scss

@@ -118,17 +118,24 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx auto;
 	background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 }
-/***** 试题---题干 *****/
+/***** 试题 *****/
+// 标题
+.ezy-shiti-title{
+	width: 216rpx;height: 96rpx;line-height: 96rpx;text-align: center;color: #fff;font-size: 32rpx;
+	background-image: url("@/static/images/exam/shiti-title.png");@include ezy-no-repeat-cover();
+}
+
+// 题干
 .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;
 	.danxuan-title{
 		width: 231rpx;height: 63rpx;
-		background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover();
 	}
 	.danxuan-option-box{
 		width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx;
@@ -179,6 +186,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 }
 /***** 填空题 *****/
 .ezy-tiankong-box{
+	margin: 0 10rpx;
 	.tiankongn-title{
 		width: 231rpx;height: 63rpx;
 		background-image: url("@/static/images/exam/tiankong-title.png");@include ezy-no-repeat-cover;
@@ -230,14 +238,11 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 
 /***** 试题白色的框 *****/
 .shiti-frame-box{
-	flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
-	margin: 12rpx auto 32rpx;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column;
-}
-.shiti-frame-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;
+	width: 95%;height: auto;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
+	flex: 1;position: relative;display: flex;flex-direction: column;
+	border-radius: 16rpx;box-sizing: border-box;padding:32rpx 24rpx 24rpx;margin: 20rpx 2.5% 36rpx;
 }
-	
+
 /***** 模拟标题栏 *****/
 .ezy-title-bar {
 	height: calc(44px + env(safe-area-inset-top));

+ 28 - 9
common/styles/global/pages.scss

@@ -687,11 +687,22 @@
 
 // 考试页
 .ezy-exam-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);
+	width: 100%;height: 100vh;background-color: #f9f9fb;position: relative;
+	display: flex;flex-direction: column;
+	.exam-body{
+		z-index: 1;position: relative;flex: 1;display: flex;flex-direction: column;
+	}
+	.xx-jd-box{
+		width: 95%;background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
+		border-radius: 16rpx;box-sizing: border-box;padding:36rpx 36rpx 42rpx;margin: 20rpx auto 0;
+		.xx-row{display: flex;justify-content: space-between;align-items: center;margin-bottom: 24rpx;}
+		.text-row{color: #5d5e61;}
+		.dq-jd-text{color: #5693f5;font-size: 52rpx;}
+		.dq-jd-line{margin: 0 6rpx;}
+	}
+	.exam-progress-box{border-radius: 20rpx;overflow: hidden;}
 	.ezy-exam-swiper{
-		width: 615rpx;flex: 1;z-index: 2;margin: 0 auto;
+		width: 100%;flex: 1;z-index: 2;margin: 0 auto;
 		uni-swiper-item{overflow: auto;}
 	}
 	.exam-submit-btn{
@@ -701,11 +712,19 @@
 	.tip-mask-box{
 		width: 100%;height: 100vh;position: relative;position: absolute;top: 0;left: 0;z-index: 3;
 	}
-	.exam-tip-box{
-		width: 750rpx;height: 355.77rpx;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/exam/exam-tip-bj.png");
-		color: #036f6f;font-size: 32rpx;z-index: 3;padding: 180rpx 0 0 100rpx;
-		position: absolute;left: 0;right: 0;bottom: var(--window-bottom);
+	.swiper-tip-box{
+		font-size: 30rpx;color: #5989e2;justify-content: center;margin-top: 20rpx;
+		display: flex;flex-direction: row;align-items: center;
+	}
+	.swiper-tip-box::before,.swiper-tip-box::after{
+		content: '';width: 12rpx;height: 26rpx;display: block;
+		background-image: url("@/static/images/common/h-jt-icon.png");@include ezy-no-repeat-cover;
+	}
+	.swiper-tip-box::before{transform: rotate(180deg);margin-right: 32rpx;}
+	.swiper-tip-box::after{margin-left: 32rpx;}
+	.shiti-jj-btn{
+		width: 630rpx;height: 88rpx;@include ezy-no-repeat-cover;margin: 10rpx auto;
+		background-image: url("@/static/images/exam/shiti-jj-btn.png");
 	}
 }
 

+ 1 - 1
components/question/danxuan.vue

@@ -1,7 +1,7 @@
 <template>
 	<view v-if="question" class="ezy-danxuan-box">
 		<!-- 标题区域 -->
-		<view class="danxuan-title"></view>
+		<view class="ezy-shiti-title">单选题</view>
 		<!-- 题干区域 -->
 		<rich-text :nodes="data.name" class="ezy-shiti-question"></rich-text>
 		<!-- 选项区域 -->

+ 1 - 1
components/question/panduan.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="ezy-panduan-box">
 		<!-- 标题区域 -->
-		<view class="panduan-title"></view>
+		<view class="ezy-shiti-title">判断题</view>
 		<!-- 题干区域 -->
 		<rich-text :nodes="question.name" class="ezy-shiti-question"></rich-text>
 		<!-- 选项区域 -->

+ 1 - 1
components/question/tiankong.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="ezy-tiankong-box">
 		<!-- 标题区域 -->
-		<view class="tiankongn-title"></view>
+		<view class="ezy-shiti-title">填空题</view>
 		<!-- 显示填空后的文本 -->
 		<view class="ezy-shiti-question" v-html="formattedText" :question="question" :myflag="myflag"
 			:change:myflag="TK.updateFlag" :change:question="TK.watchQuestionChange"></view>

+ 31 - 27
pages/xinshuxue/unitTest.vue

@@ -1,41 +1,45 @@
 <template>
 	<view class="ezy-exam-page">
-
 		<view class="icon-title-navBar-box">
 			<view @click="handleBack" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">单元测试</text>
 		</view>
 
-		<view>
-			<view>
-				<view>当前学习进度</view>
-				<view>{{data.current+1}}/{{data.total}}</view>
+		<view class="exam-body">
+			<view class="xx-jd-box">
+				<view class="xx-row">
+					<view>当前学习进度</view>
+					<view class="text-row">
+						<text class="dq-jd-text">{{data.current+1}}</text>
+						<text class="dq-jd-line">/</text>{{data.total}}</view>
+				</view>
+				<progress :percent="(data.current+1)/data.total * 100" class="exam-progress-box"
+				stroke-width="10" backgroundColor="#3c7dfd" activeColor="#ffd11c"/>
+			</view>
+		
+
+			<view class="shiti-frame-box">
+				<w-swiper :list="data.list" :current="data.current" class="ezy-exam-swiper" @change="onSwiperChange">
+					<template v-slot:default="{item}">
+						<view class="body" v-if="item.mta_show">
+							<danxuan :question="item" v-if="item.type == '1'"></danxuan>
+							<panduan :question="item" v-if="item.type == '2'"></panduan>
+							<tiankong :question="item" v-if="item.type == '3'" :placeholders="item.placeholders"></tiankong>
+							<!-- 交卷按钮 -->
+							<view class="shiti-jj-btn" v-if="item.stId == data.list[data.total-1].stId"
+								@click="handleSubmit"></view>
+						</view>
+					</template>
+				</w-swiper>
+				<!--  左右滑动提示  -->
+				<view class="swiper-tip-box">
+					左右滑动查看更多题目
+				</view>
 			</view>
-			<progress :percent="data.current/data.total * 100" :border-radius="30" stroke-width="10" />
-		</view>
-
-		<view class="shiti-frame-box">
-			<w-swiper :list="data.list" :current="data.current" class="ezy-exam-swiper" @change="onSwiperChange">
-				<template v-slot:default="{item}">
-					<view class="body" v-if="item.mta_show">
-						<danxuan :question="item" v-if="item.type == '1'"></danxuan>
-						<panduan :question="item" v-if="item.type == '2'"></panduan>
-						<tiankong :question="item" v-if="item.type == '3'" :placeholders="item.placeholders"></tiankong>
-						<button type="primary" v-if="item.stId == data.list[data.total-1].stId"
-							@click="handleSubmit">交卷</button>
-					</view>
-				</template>
-			</w-swiper>
 		</view>
 
 
-
-		<!--  左右滑动提示  -->
-		<view>
-			<view>
-				< <text>左右滑动查看更多题目 1</text>>
-			</view>
-		</view>
+		
 
 		<!-- 填空 -->
 		<FillItem :value="result" ref="popupRef" @blur="onBlur"></FillItem>