修复错题重做多选题,新增错题的弹窗

src/components/m-wrong-preview/components/bottomBar.vue

@@ -1,212 +1,280 @@
-<script lang="tsx">
-import { defineComponent } from "vue";
-import store from "@/store";
-import { Dialog } from "vant";
-import { useRouter } from "vue-router";
-import { json } from "stream/consumers";
-import { Console } from "console";
-import { RouterBus } from "@/hooks";
-export default defineComponent({
-	props: {
-		listType:{
-			type:String,
-			default:""
-		},
-		subjectList:{
-			type:Array,
-			default:[]
-		},
-		currentSubjectIndex: {
-			type: Number,
-			default: 0,
-		},
-		subjectTotal: {
-			type: Number,
-			default: 0,
-		},
-		trueNum: {
-			type: Number,
-			default: 0,
-		},
-		falseNum: {
-			type: Number,
-			default: 0,
-		},
-		officialShow: Boolean,
-		showSubjectChangePopup: Boolean,
-	},
-	emits: {
-		"update:officialShow": (value: boolean) => {
-			return value;
-		},
-		"update:showSubjectChangePopup": (value: boolean) => {
-			return value;
-		},
-		nextSubject: () => {},
-		lastSubject: () => {},
-	},
-	setup(props, { emit }) {
-		console.log(props.subjectList,"props")
-		const router = useRouter();
-		const vehicle = useRouter().currentRoute.value.query.vehicle as string; //路由qvehicle参数
-		const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
-		const isVip = store.getters.getIsVip;
-			const { goWrongReview } = new RouterBus();
-		console.log(router.currentRoute.value);
-		// const vipClick = () => {
-		// 	if (store.getters.getIsVip || router.currentRoute.value.path == "/exerciseFree") {
-		// 		emit("update:officialShow", true);
-		// 	} else {
-		// 		Dialog.confirm({
-		// 			title: "温馨提示",
-		// 			message: "请购买会员后使用",
-		// 			confirmButtonText: "购买",
-		// 		}).then(() => {
-		// 			router.push("/buyVip");
-		// 		});
-		// 	}
-		// };
-		const goWrongPreviewScore = () => {
-			switch(props.listType){
-				//本地的错误保存
-				case "localWrong":
-					
-			Dialog.confirm({
-				message: "确认交卷吗?",
-			})
-				.then(() => {
-			
-				
-				let wrongSet =	props.subjectList.filter((item:any,index)=>{
-						
-						return item.answer !== item.userAnswer
-					})
-					wrongSet.forEach((item:any)=>{
-						item.userAnswer = ""
-					})
-					window.localStorage.setItem(vehicle+subject,JSON.stringify(wrongSet))
-					router.push({
-						path:"/wrongPreviewRes",
-						query:{
-							title:"错题重做",
-							...router.currentRoute.value.query
-						}
-					})
-			
-
-					
-
-
-				})
-				.catch(() => {
-					console.log(props.subjectList,"props")
-				});
-
-				break;
-				//本地的错误保存
-
-				//线上错题本的保存
-				case "wrong":
-
-						Dialog.confirm({
-				message: "确认交卷吗?",
-			})
-				.then(() => {
-					router.push({
-						path:"/wrongExerciseRes",
-						query:{
-							title:"错题重做",
-							...router.currentRoute.value.query
-						}
-					})
-				})
-				.catch(() => {
-					
-				});
-
-
-				break;
-				//线上错题本的保存
-				case "collection":
-								Dialog.confirm({
-				message: "确认交卷吗?",
-			})
-				.then(() => {
-								
-					router.push({
-						path:"/collectionExerciseRes",
-						query:{
-							title:"收集题目",
-							...router.currentRoute.value.query
-						}
-					})
-				})
-			
-
-				break;
-			}
-
-
-
-
-
-		};
-
-		return () => {
-			return (
-				<van-tabbar placeholder route>
-					<van-tabbar-item
-						onClick={() => {
-							emit("lastSubject");
-						}}
-						v-slots={{
-							icon: () => <m-icon type="shangyiti" />,
-						}}>
-						上一题
-					</van-tabbar-item>
-					<van-tabbar-item
-						v-slots={{
-							icon: () => <m-icon type="dui" />,
-						}}>
-						{0}
-					</van-tabbar-item>
-					<van-tabbar-item
-						v-slots={{
-							icon: () => <m-icon type="cuo" />,
-						}}>
-						{0}
-					</van-tabbar-item>
-					<van-tabbar-item
-						onClick={() => {
-							emit("update:showSubjectChangePopup", true);
-						}}
-						v-slots={{
-							icon: () => <m-icon type="zongtishu" />,
-						}}>
-						{props.currentSubjectIndex + 1}/{props.subjectTotal}
-					</van-tabbar-item>
-
-					<van-tabbar-item
-						onClick={() => {
-							goWrongPreviewScore();
-						}}
-						v-slots={{
-							icon: () => <m-icon type="jiaojuan" />,
-						}}>
-						交卷
-					</van-tabbar-item>
-					<van-tabbar-item
-						onClick={() => {
-							emit("nextSubject");
-						}}
-						v-slots={{
-							icon: () => <m-icon type="xiayiti" />,
-						}}>
-						下一题
-					</van-tabbar-item>
-				</van-tabbar>
-			);
-		};
-	},
-});
-</script>
+<script lang="tsx">
+import { defineComponent,ref } from "vue";
+import store from "@/store";
+import { Dialog, Toast } from "vant";
+import { useRouter } from "vue-router";
+import { json } from "stream/consumers";
+import { Console } from "console";
+import { RouterBus } from "@/hooks";
+export default defineComponent({
+	props: {
+		listType:{
+			type:String,
+			default:""
+		},
+		subjectList:{
+			type:Array,
+			default:[]
+		},
+		currentSubjectIndex: {
+			type: Number,
+			default: 0,
+		},
+		subjectTotal: {
+			type: Number,
+			default: 0,
+		},
+
+		officialShow: Boolean,
+		showSubjectChangePopup: Boolean,
+	},
+	emits: {
+		"update:officialShow": (value: boolean) => {
+			return value;
+		},
+		"redo":()=>{
+
+		},
+		"update:showSubjectChangePopup": (value: boolean) => {
+			return value;
+		},
+		nextSubject: () => {},
+		lastSubject: () => {},
+		
+	},
+	setup(props, { emit }) {
+		const router = useRouter();
+		const vehicle = useRouter().currentRoute.value.query.vehicle as string; //路由qvehicle参数
+		const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
+		const isVip = store.getters.getIsVip;
+			const { goWrongReview } = new RouterBus();
+			const submitResVisible = ref(false)
+			const trueNum = ref(0)
+			const falseNum = ref(0)
+		console.log(router.currentRoute.value);
+		// const vipClick = () => {
+		// 	if (store.getters.getIsVip || router.currentRoute.value.path == "/exerciseFree") {
+		// 		emit("update:officialShow", true);
+		// 	} else {
+		// 		Dialog.confirm({
+		// 			title: "温馨提示",
+		// 			message: "请购买会员后使用",
+		// 			confirmButtonText: "购买",
+		// 		}).then(() => {
+		// 			router.push("/buyVip");
+		// 		});
+		// 	}
+		// };
+		const goWrongPreviewScore = () => {
+			switch(props.listType){
+				//本地的错误保存
+				case "localWrong":
+					
+			Dialog.confirm({
+				message: "确认交卷吗?",
+			})
+				.then(() => {
+				let wrongSet =	props.subjectList.filter((item:any,index)=>{
+					let answers = item.answer.split("-")
+						return JSON.stringify(answers.sort()) == JSON.stringify(typeof item.userAnswer === 'string' ? [item.userAnswer] : item.userAnswer.sort())
+
+					})
+					window.localStorage.setItem(vehicle+subject,JSON.stringify(wrongSet))
+					
+					
+					
+
+
+				})
+				.catch(() => {
+					console.log(props.subjectList,"props")
+				});
+
+				break;
+				//本地的错误保存
+
+				//线上错题本的保存
+				case "wrong":
+
+						Dialog.confirm({
+				message: "确认交卷吗?",
+			})
+				.then(() => {
+					router.push({
+						path:"/wrongExerciseRes",
+						query:{
+							title:"错题重做",
+							...router.currentRoute.value.query
+						}
+					})
+				})
+				.catch(() => {
+					
+				});
+
+
+				break;
+				//线上错题本的保存
+				case "collection":
+								Dialog.confirm({
+				message: "确认交卷吗?",
+			})
+				.then(() => {
+								
+					router.push({
+						path:"/collectionExerciseRes",
+						query:{
+							title:"收集题目",
+							...router.currentRoute.value.query
+						}
+					})
+				})
+			
+
+				break;
+			}
+
+
+
+
+
+		};
+		const showSubmitResVisible = ()=>{
+			submitResVisible.value = true
+			trueNum.value =0 
+			falseNum.value =0
+			props.subjectList.forEach((item:any,index)=>{
+				let answers = item.answer.split("-")
+				if(JSON.stringify(answers.sort()) == JSON.stringify(typeof item.userAnswer === 'string' ? [item.userAnswer] : item.userAnswer.sort())){
+						++trueNum.value 
+				}
+				else if(item.userAnswer.length==0){
+					 
+				}
+				else{
+					++falseNum.value
+				}
+				
+			})
+
+
+		}
+		const wrongReDo = ()=>{
+
+			let wrongSet =	props.subjectList.filter((item:any,index)=>{
+						if(item.userAnswer.length==0){
+							return true
+						}
+						else{
+							let answers = item.answer.split("-")
+							let isTrue = JSON.stringify(answers.sort()) == JSON.stringify(typeof item.userAnswer === 'string' ? [item.userAnswer] : item.userAnswer.sort())
+						
+						return !isTrue
+						}
+					})
+					//将题目重置
+					wrongSet.forEach((item:any)=>{
+						item.userAnswer = item.questionType !==3?'':[]
+							item.optsBack.forEach((_item: any)=>{
+								_item.status =0	
+							})
+
+					})	
+					window.localStorage.setItem(vehicle+subject,JSON.stringify(wrongSet))
+					if(wrongSet.length){
+						emit('redo')
+					}
+					else{
+						Toast('没有错题了')
+					}
+					
+				
+	// 				router.push({
+    //     path:"/wrongReviewRes",
+    //     query:router.currentRoute.value.query
+    // })
+					
+					
+					
+				
+
+		}
+
+		return () => {
+			return (
+				<view>
+					<van-dialog confirmButtonText="错题重做"  onConfirm={()=>{
+						wrongReDo()
+						}
+						
+
+					} closeOnPopstate cancelButtonText="关闭" v-model:show={submitResVisible.value} title="答题结果" show-cancel-button>
+						
+						<div style={'width:100%;padding:0 15px;text-align:center;font-size:30px'}>
+							<m-icon size="30px" type="dui" /><span style={'padding:0 10px'}>{trueNum.value}</span>
+						</div>
+						<div style={'width:100%;padding:0 15px;text-align:center;font-size:30px'}>
+							<m-icon size="30px" type="cuo" /><span style={'padding:0 10px'}>{falseNum.value}</span>
+						</div>
+						
+					
+					
+</van-dialog>
+					<van-tabbar placeholder route>
+					<van-tabbar-item
+						onClick={() => {
+							emit("lastSubject");
+						}}
+						v-slots={{
+							icon: () => <m-icon type="shangyiti" />,
+						}}>
+						上一题
+					</van-tabbar-item>
+					<van-tabbar-item
+						v-slots={{
+							icon: () => <m-icon type="dui" />,
+						}}>
+						{0}
+					</van-tabbar-item>
+					<van-tabbar-item
+						v-slots={{
+							icon: () => <m-icon type="cuo" />,
+						}}>
+						{0}
+					</van-tabbar-item>
+					<van-tabbar-item
+						onClick={() => {
+							emit("update:showSubjectChangePopup", true);
+						}}
+						v-slots={{
+							icon: () => <m-icon type="zongtishu" />,
+						}}>
+						{props.currentSubjectIndex + 1}/{props.subjectTotal}
+					</van-tabbar-item>
+
+					<van-tabbar-item
+						onClick={() => {
+							showSubmitResVisible()
+						}}
+						v-slots={{
+							icon: () => <m-icon type="jiaojuan" />,
+						}}>
+						交卷
+					</van-tabbar-item>
+					<van-tabbar-item
+						onClick={() => {
+							emit("nextSubject");
+						}}
+						v-slots={{
+							icon: () => <m-icon type="xiayiti" />,
+						}}>
+						下一题
+					</van-tabbar-item>
+				</van-tabbar>
+				</view>
+				
+			);
+		};
+	},
+});
+</script>

src/components/m-wrong-preview/index.vue

@@ -43,7 +43,7 @@
 			</van-radio-group>
 			<!-- 多选 -->
 			<div v-else>
-				<!-- <van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
+				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
 					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
 						>{{ item }}
 						<template #icon="props">
@@ -52,8 +52,7 @@
 							</div>
 						</template>
 					</van-checkbox>
-				</van-checkbox-group> -->
-				<van-button round type="primary" class="checkbox-btn" :disabled="currentSubject.userAnswer&&currentSubject.userAnswer.length == 0" @click="userAnswerChange">确定</van-button>
+				</van-checkbox-group>
 			</div>
 		</div>
 		<!-- 展示答题后选择内容 -->
@@ -70,7 +69,7 @@
 					</span>
 				</div>
 			</div>
-			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
+			<div class="checkbox-answer">答案: {{ currentSubject.answer }}</div>
 		</div>
 		<!-- 展示答题后选择内容end -->
 	</div>
@@ -102,15 +101,15 @@
 		<subjectChangePopup :trueNum="trueNum" :falseNum="falseNum" v-model:currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" />
 	</van-popup>
 	<!-- 底部操作栏 -->
-	<bottomBar :listType="listType"  :currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" :subjectTotal="subjectTotal" :trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup" v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
+	<bottomBar @redo="resetLocalWrong" :listType="listType" :currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" :subjectTotal="subjectTotal" :trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup" v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps,computed } from "vue";
+import { ref, defineProps, computed } from "vue";
 import subjectChangePopup from "./components/subjectChangePopup.vue";
 import { useTopicMode, useAudioSet, useSubjectShowLogic } from "@/hooks/exercise";
 import { RouterBus } from "@/hooks";
-import {exerciseTitle} from "@/hooks/text/title"
+import { exerciseTitle } from "@/hooks/text/title";
 import subjectContext from "./components/subjectContext.vue";
 import functionList from "./components/functionList.vue";
 import explainJq from "./components/explainJq.vue";
@@ -118,6 +117,7 @@ import explainJs from "./components/explainJs.vue";
 import reciteMode from "./components/reciteMode.vue";
 import bottomBar from "./components/bottomBar.vue";
 import store from "@/store";
+import { useRouter } from "vue-router";
 const {
 	router: { back },
 	route: { query },
@@ -131,7 +131,8 @@ const isVip = store.getters.getIsVip;
 
 //答题模式选择逻辑
 const { answerTypeList, currentType, typeParams } = useTopicMode();
-
+const vehicle = useRouter().currentRoute.value.query.vehicle as string; //路由qvehicle参数
+const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
 //设置操作栏
 /**显示设置栏 */
 const setShow = ref(false);
@@ -140,19 +141,23 @@ const isSoundEffect = ref(true);
 // 显示题目选择栏
 const showSubjectChangePopup = ref(false);
 
-
 //题目展示逻辑
 const { subjectList, currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectShowLogic(props.listType);
+const resetLocalWrong = () => {
+	currentSubjectIndex.value = 0
+	subjectList.value = JSON.parse(window.localStorage.getItem(vehicle+subject))  as any[];
+	subjectTotal.value = subjectList.value.length
+
+};
 //本地的数据
-console.log(currentSubject,'currentSubject')
+console.log("本地的currentSubject", currentSubject);
 //音频模块
 const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet } = useAudioSet(currentSubject);
 </script>
 
 <style lang="scss" scoped>
-.visibility-hidden{
+.visibility-hidden {
 	visibility: hidden;
-
 }
 .parsing-img {
 	width: 100%;

src/hooks/exercise/index.ts

@@ -1,41 +1,46 @@
-import { ref } from "vue";
-export { useTopicMode } from "./mode";
-export { useAudioSet } from "./audio";
-import { useSubjectList } from "./list";
-import { useSubjectCheck } from "./wrong";
-
-export const useSubjectShowLogic = (type: ExerciseType.ListType) => {
-	const { subjectList, subjectTotal, currentSubject, currentSubjectIndex } = useSubjectList(type); //获取题目列表
-
-	/**下一题数据请求锁 */
-	const nextBtnState = ref(true);
-
-	/** 展示下一题 */
-	const nextSubject = async () => {
-		if (currentSubjectIndex.value < subjectList.value.length - 1) {
-			currentSubjectIndex.value++;
-		}
-	};
-
-	/** 展示上一题  */
-	const lastSubject = () => {
-		currentSubjectIndex.value > 0 && currentSubjectIndex.value--;
-	};
-	const { trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectCheck(currentSubject, nextSubject,type);
-
-	return {
-		currentSubject,
-		currentSubjectIndex,
-		subjectTotal,
-		nextSubject,
-		lastSubject,
-		trueNum,
-		falseNum,
-		isJumpNext,
-		userAnswerChange,
-		addCurrentQuestion,
-		skillsShow,
-		officialShow,
-		subjectList,
-	};
-};
+import { ref } from "vue";
+export { useTopicMode } from "./mode";
+export { useAudioSet } from "./audio";
+import { useSubjectList } from "./list";
+import { useSubjectCheck } from "./wrong";
+
+export const useSubjectShowLogic = (type: ExerciseType.ListType) => {
+	const { subjectList, subjectTotal, currentSubject, currentSubjectIndex } = useSubjectList(type); //获取题目列表
+
+	/**下一题数据请求锁 */
+	const nextBtnState = ref(true);
+
+	/** 展示下一题 */
+	const nextSubject = async () => {
+		if (currentSubjectIndex.value < subjectList.value.length - 1) {
+			currentSubjectIndex.value++;
+		}
+	};
+
+	/** 展示上一题  */
+	const lastSubject = () => {
+		currentSubjectIndex.value > 0 && currentSubjectIndex.value--;
+	};
+	const initSubject = ()=>{
+		currentSubjectIndex.value =0
+	}
+	const { trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectCheck(currentSubject, nextSubject,type);
+
+	return {
+		currentSubject,
+		currentSubjectIndex,
+		subjectTotal,
+		nextSubject,
+		lastSubject,
+		initSubject,
+		trueNum,
+		falseNum,
+		isJumpNext,
+		userAnswerChange,
+		addCurrentQuestion,
+		skillsShow,
+		officialShow,
+		subjectList
+	
+	};
+};

src/hooks/exercise/list.ts

@@ -9,9 +9,10 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 	const subjectList = ref<TestModelListResType["list"]>([]); //题目列表
 	const subjectTotal = ref(0); //题目总数
 	const query = useRoute().query; //路由query参数
-
+	const currentSubjectIndex = ref(0); //当前题目下标
 	const vehicle = useRouter().currentRoute.value.query.vehicle as string; //路由qvehicle参数
 	const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
+
 	onBeforeMount(async () => {
 		let res: TestModelListResType;
 		if (type == "normal" || type == "test") {
@@ -22,7 +23,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 		else if (type == "localWrong") {
 			let wrongSet: [any] = JSON.parse(window.localStorage.getItem(vehicle + subject) || "[]")
 			wrongSet.forEach(item => {
-				item.userAnswer = null
+				item.userAnswer = item.questionType !== 3 ? "" : []
 				item.isTrue = null
 			})
 			res = {
@@ -38,7 +39,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 				pageNum: 1,
 				pageSize: 50
 			});
-			if(result.rows.length==0){
+			if (result.rows.length == 0) {
 				return
 			}
 			result.rows.forEach(item => {
@@ -47,7 +48,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 					item.opts = item.opts.split("-")
 				}
 			})
-			let questionItem: Test.QuestionInfo =result.rows[0]
+			let questionItem: Test.QuestionInfo = result.rows[0]
 			let questionIndex = 0
 			//排序
 			if (query.questionId) {
@@ -57,7 +58,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 						questionItem = item
 					}
 				})
-				result.rows.splice(questionIndex,1)
+				result.rows.splice(questionIndex, 1)
 				result.rows.unshift(questionItem)
 
 			}
@@ -70,7 +71,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 			// const collectionList.value.push(...result.collectionList)
 			// const questionList.value.push(...result.rows)
 		}
-		else if(type=="collection"){
+		else if (type == "collection") {
 			const collectionModel = new CollectionModel(type);
 			const result = await collectionModel.getList({
 				carType: query.vehicle as CollectionAndWrongType.CarType,
@@ -79,7 +80,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 				pageSize: 50
 			});
 			console.log(result.collectionList)
-			if(result.rows.length==0){
+			if (result.rows.length == 0) {
 				return
 			}
 			result.rows.forEach(item => {
@@ -88,7 +89,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 					item.opts = item.opts.split("-")
 				}
 			})
-			let questionItem: Test.QuestionInfo =result.rows[0]
+			let questionItem: Test.QuestionInfo = result.rows[0]
 			let questionIndex = 0
 			//排序
 			if (query.questionId) {
@@ -98,7 +99,7 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 						questionItem = item
 					}
 				})
-				result.rows.splice(questionIndex,1)
+				result.rows.splice(questionIndex, 1)
 				result.rows.unshift(questionItem)
 
 			}
@@ -116,10 +117,10 @@ export const useSubjectList = (type: ExerciseType.ListType) => {
 
 		subjectList.value = res.list;
 		subjectTotal.value = res.total;
-		console.log(subjectList)
+		
 	});
 
-	const currentSubjectIndex = ref(0); //当前题目下标
+	
 	//当前题目内容
 	const currentSubject = computed(() => {
 		console.log(subjectList.value[currentSubjectIndex.value])

src/views/mockTest/components/startTest.vue

@@ -1,434 +1,434 @@
-<template>
-	<!-- 导航栏 -->
-	<van-nav-bar :title="exerciseTitle" left-arrow @click-left="back" fixed placeholder>
-		<template #right>
-			<m-icon type="shezhi" @click="setShow = true" />
-		</template>
-	</van-nav-bar>
-	<!-- 导航栏end -->
-	<!-- 考试倒计时 -->
-	<div class="dowm-box">
-		<van-count-down :time="45 * 60 * 1000" format="剩余答题时间: mm分ss秒" @change="useTimeChange" />
-	</div>
-	<!-- 考试倒计时end -->
-	<!-- 分割线 -->
-	<div class="divider" />
-	<!-- 题目模块 -->
-	<!-- 题目预加载 -->
-	<m-empty v-if="!currentSubject" />
-	<!-- 题目预加载end -->
-	<div class="problem-box" v-else>
-		<!-- 题目内容 -->
-		<div class="problem">
-			<span class="type">{{ currentSubject.type }}</span>
-			<span class="text">{{ currentSubject.explain }}</span>
-			<van-image v-if="currentSubject.image" :src="currentSubject.image" class="img">
-				<template v-slot:loading>
-					<van-loading type="spinner" size="20" />
-				</template>
-			</van-image>
-		</div>
-		<!-- 选择内容 -->
-		<div v-if="true">
-			<!-- 单选 -->
-			<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.questionType !== 3" icon-size="35px">
-				<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
-					>{{ item }}
-					<template #icon="props">
-						<div class="choose-icon" :class="{ selected: props.checked }">
-							{{ String.fromCharCode(65 + Number(index)) }}
-						</div>
-					</template>
-				</van-radio>
-			</van-radio-group>
-			<!-- 多选 -->
-			<div v-else>
-				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
-					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
-						>{{ item }}
-						<template #icon="props">
-							<div class="choose-icon" :class="{ selected: props.checked }">
-								{{ String.fromCharCode(65 + Number(index)) }}
-							</div>
-						</template>
-					</van-checkbox>
-				</van-checkbox-group>
-			</div>
-		</div>
-		<!-- 展示答题后选择内容 -->
-		<div v-else-if="false">
-			<div>
-				<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
-					<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
-						{{ String.fromCharCode(65 + Number(index)) }}
-					</div>
-					<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
-					<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
-					<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
-						{{ item.opt }}
-					</span>
-				</div>
-			</div>
-			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
-		</div>
-		<!-- 展示答题后选择内容end -->
-	</div>
-	<!-- 选择内容End -->
-	<!-- 分割线 -->
-	<van-divider />
-	<!-- 功能选择列表 -->
-	<div class="function-list">
-		<div class="function-item">
-			<m-icon type="shoucanghui" size="25px" />
-			<span>收藏</span>
-		</div>
-		<!-- <div class="function-item" @click="answerAudioPlay">
-      <m-icon type="a-dtda" size="25px" />
-      <span>读题+答案</span>
-    </div> -->
-		<div class="function-item" @click="subjectAudioPlay('读题')">
-			<m-icon type="duti" size="25px" />
-			<span>读题</span>
-		</div>
-		<!-- <div class="function-item" @click="currentAnswerIndexBack">
-      <m-icon type="shangyiti" size="25px" />
-      <span>上一题</span>
-    </div>
-    <div class="function-item" @click="skillsShow = true">
-      <m-icon type="zongtishu" size="25px" />
-      <span>1/100</span>
-    </div>
-    <div class="function-item" @click="currentAnswerIndexGo">
-      <m-icon type="xiayiti" size="25px" />
-      <span>下一题</span>
-    </div> -->
-	</div>
-	<!-- 功能选择列表End -->
-	<!-- 题目模块end -->
-	<!-- 设置操作栏 -->
-	<van-popup v-model:show="setShow" position="bottom">
-		<van-cell center title="答题音效提示">
-			<template #right-icon>
-				<van-switch v-model="isSoundEffect" size="24" />
-			</template>
-		</van-cell>
-	</van-popup>
-	<!-- 设置操作栏end -->
-	<!-- 底部操作栏 -->
-	<!-- <div style="height: 40px"></div> -->
-	<!-- <m-button class="submitButton" text="交卷" /> -->
-	<van-tabbar placeholder route>
-		<van-tabbar-item @click="lastSubject"
-			>上一题
-			<template #icon>
-				<m-icon type="shangyiti" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item
-			>{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
-			<template #icon>
-				<m-icon type="zongtishu" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item @click="gotoTest"
-			>交卷
-			<template #icon>
-				<m-icon type="jiaojuan" />
-			</template>
-		</van-tabbar-item>
-		<van-tabbar-item @click="nextSubject"
-			>下一题
-			<template #icon>
-				<m-icon type="xiayiti" />
-			</template>
-		</van-tabbar-item>
-	</van-tabbar>
-	<!-- 底部操作栏end -->
-</template>
-
-<script lang="ts" setup>
-import { ref, defineEmits, computed } from "vue";
-import { Dialog } from "vant";
-import { useSubjectShowLogic, useTopicMode, useAudioSet } from "./hooks";
-import { RouterBus } from "@/hooks";
-import { exerciseTitle} from "@/hooks/text/title"
-const {
-	route: { query },
-	router: { back },
-} = new RouterBus();
-
-// const title = computed(() => {
-// 	return `(${query.cert})/${query.name}/${query.title}/${query.placeIssueName || query.classIssueName || query.excellIssueName || query.sequeIssueName || ""}`;
-// });
-
-//父级传参
-const props = defineProps<{
-	userTestData: {
-		testScores: number;
-		useTime: number;
-	};
-}>();
-const emits = defineEmits(["next", "update:userTestData"]);
-
-const useTime = ref(0);
-const useTimeChange = (e: any) => {
-	useTime.value = 45 * 60 * 1000 - e.total;
-};
-
-//计算分数
-const scoreCalc = () => {
-	subjectList.value.forEach((item) => {
-		userAnswerChange(item);
-	});
-	emits("update:userTestData", {
-		useTime: useTime.value,
-		testScores: (trueNum.value / subjectTotal.value) * 100,
-	});
-	emits("next");
-};
-
-const gotoTest = () => {
-	Dialog.confirm({
-		message: "确认交卷吗?",
-	})
-		.then(() => {
-			scoreCalc();
-		})
-		.catch(() => {});
-};
-
-//题目展示逻辑
-const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, subjectList, userAnswerChange } = useSubjectShowLogic();
-
-//设置操作栏
-const setShow = ref(false); //显示设置栏
-const isSoundEffect = ref(true); //答题音效
-//设置操作栏end
-
-//音频模块
-const { subjectAudioPlay } = useAudioSet(currentSubject);
-//音频模块end
-</script>
-
-<style lang="scss" scoped>
-.dowm-box {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 10px;
-	position: sticky;
-	top: 45px;
-	font-size: 30px;
-	background-color: #ffffff;
-}
-.parsing-img {
-	width: 100%;
-	margin-top: 10px;
-}
-.function-list {
-	width: 100%;
-	font-size: 13px;
-	display: flex;
-	justify-content: space-around;
-	flex-wrap: wrap;
-	padding: 15px;
-	box-sizing: border-box;
-	.function-item {
-		margin-bottom: 20px;
-		width: 30%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		font-size: 13px;
-		font-weight: 400;
-		color: #8a9099;
-		span {
-			margin-top: 5px;
-		}
-	}
-}
-.answerType {
-	width: 100%;
-	font-size: 13px;
-	display: flex;
-	justify-content: space-around;
-	padding: 15px;
-	box-sizing: border-box;
-	span {
-		border-radius: 20px;
-		padding: 3px 10px;
-		background-color: #b8c0cc;
-		color: #ffffff;
-	}
-	.selected {
-		background-color: #498ef5;
-	}
-}
-.divider {
-	width: 100%;
-	height: 10px;
-	background-color: #f2f3f5;
-}
-.problem-box {
-	font-size: 17px;
-	padding: 15px;
-	.problem {
-		.type {
-			width: 47px;
-			height: 24px;
-			background: #498ef5;
-			border-radius: 10px 10px 0px 10px;
-			font-size: 11px;
-			padding: 2px 7px;
-			margin-right: 5px;
-			color: #fff;
-			font-size: 14px;
-		}
-		.text {
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: #0a1a33;
-			letter-spacing: 0.3px;
-			font-size: 18px;
-		}
-		.img {
-			width: 100%;
-			margin-top: 10px;
-		}
-	}
-	.answer {
-		margin-top: 25px;
-	}
-	.answer-box {
-		display: flex;
-		margin-top: 25px;
-		align-items: center;
-		.iconTrue {
-			background-color: #01c18d;
-		}
-		.answer-text {
-			margin-left: 10px;
-		}
-		.true {
-			color: #01c18d;
-		}
-		.false {
-			color: #ff4d53;
-		}
-	}
-
-	.choose-icon {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 17px;
-		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
-		box-sizing: border-box;
-		margin-left: 5px;
-		margin-top: 1px;
-	}
-	.selected {
-		background-color: #498ef5;
-	}
-	.checkbox-btn {
-		width: 266px;
-		height: 40px;
-		margin: auto;
-		margin-top: 25px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-	.checkbox-answer {
-		padding: 8px 10px;
-		background-color: #f2f3f5;
-		margin-top: 25px;
-	}
-}
-.skills-box {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	.skills {
-		width: 290px;
-		background: #ffffff;
-		box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.16);
-		border-radius: 10px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 20px 16px;
-		box-sizing: border-box;
-		.title {
-			font-size: 15px;
-			font-family: PingFang SC;
-			font-weight: bold;
-			line-height: 21px;
-			color: #0a1a33;
-		}
-		.img {
-			width: 258px;
-			height: 129px;
-			border: 1px solid #e8e8e8;
-			margin-top: 16px;
-		}
-		.divider {
-			margin-top: 20px;
-			color: #0a1a33;
-			background: #ffffff;
-		}
-		.text {
-			font-size: 13px;
-			font-family: PingFang SC;
-			font-weight: 400;
-			line-height: 19px;
-			color: #5c6066;
-			margin-top: 10px;
-		}
-		.btn {
-			width: 100%;
-			display: flex;
-			justify-content: space-between;
-			padding: 0 40px;
-			box-sizing: border-box;
-			margin-top: 20px;
-			span {
-				width: 76px;
-				height: 30px;
-				border-radius: 15px;
-				font-size: 13px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				&:active {
-					background-color: #afaaaa;
-					filter: brightness(50%);
-				}
-				&:nth-of-type(1) {
-					border: 1px solid #707070;
-					color: #5c6066;
-				}
-				&:nth-of-type(2) {
-					background: #498ef5;
-					border: 1px solid #498ef5;
-					color: #ffffff;
-				}
-			}
-		}
-	}
-}
-
-.submitButton {
-	background-color: #498ef5;
-	position: fixed;
-	left: 50%;
-	transform: translateX(-50%);
-	bottom: 0;
-	width: 80%;
-	color: #ffffff;
-	font-size: 16px;
-}
-</style>
+<template>
+	<!-- 导航栏 -->
+	<van-nav-bar :title="exerciseTitle" left-arrow @click-left="back" fixed placeholder>
+		<template #right>
+			<m-icon type="shezhi" @click="setShow = true" />
+		</template>
+	</van-nav-bar>
+	<!-- 导航栏end -->
+	<!-- 考试倒计时 -->
+	<div class="dowm-box">
+		<van-count-down :time="45 * 60 * 1000" format="剩余答题时间: mm分ss秒" @change="useTimeChange" />
+	</div>
+	<!-- 考试倒计时end -->
+	<!-- 分割线 -->
+	<div class="divider" />
+	<!-- 题目模块 -->
+	<!-- 题目预加载 -->
+	<m-empty v-if="!currentSubject" />
+	<!-- 题目预加载end -->
+	<div class="problem-box" v-else>
+		<!-- 题目内容 -->
+		<div class="problem">
+			<span class="type">{{ currentSubject.type }}</span>
+			<span class="text">{{ currentSubject.explain }}</span>
+			<van-image v-if="currentSubject.image" :src="currentSubject.image" class="img">
+				<template v-slot:loading>
+					<van-loading type="spinner" size="20" />
+				</template>
+			</van-image>
+		</div>
+		<!-- 选择内容 -->
+		<div v-if="true">
+			<!-- 单选 -->
+			<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.questionType !== 3" icon-size="35px">
+				<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
+					>{{ item }}
+					<template #icon="props">
+						<div class="choose-icon" :class="{ selected: props.checked }">
+							{{ String.fromCharCode(65 + Number(index)) }}
+						</div>
+					</template>
+				</van-radio>
+			</van-radio-group>
+			<!-- 多选 -->
+			<div v-else>
+				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
+					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
+						>{{ item }}
+						<template #icon="props">
+							<div class="choose-icon" :class="{ selected: props.checked }">
+								{{ String.fromCharCode(65 + Number(index)) }}
+							</div>
+						</template>
+					</van-checkbox>
+				</van-checkbox-group>
+			</div>
+		</div>
+		<!-- 展示答题后选择内容 -->
+		<div v-else-if="false">
+			<div>
+				<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
+					<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
+						{{ String.fromCharCode(65 + Number(index)) }}
+					</div>
+					<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
+					<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
+					<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
+						{{ item.opt }}
+					</span>
+				</div>
+			</div>
+			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
+		</div>
+		<!-- 展示答题后选择内容end -->
+	</div>
+	<!-- 选择内容End -->
+	<!-- 分割线 -->
+	<van-divider />
+	<!-- 功能选择列表 -->
+	<div class="function-list">
+		<div class="function-item">
+			<m-icon type="shoucanghui" size="25px" />
+			<span>收藏</span>
+		</div>
+		<!-- <div class="function-item" @click="answerAudioPlay">
+      <m-icon type="a-dtda" size="25px" />
+      <span>读题+答案</span>
+    </div> -->
+		<div class="function-item" @click="subjectAudioPlay('读题')">
+			<m-icon type="duti" size="25px" />
+			<span>读题</span>
+		</div>
+		<!-- <div class="function-item" @click="currentAnswerIndexBack">
+      <m-icon type="shangyiti" size="25px" />
+      <span>上一题</span>
+    </div>
+    <div class="function-item" @click="skillsShow = true">
+      <m-icon type="zongtishu" size="25px" />
+      <span>1/100</span>
+    </div>
+    <div class="function-item" @click="currentAnswerIndexGo">
+      <m-icon type="xiayiti" size="25px" />
+      <span>下一题</span>
+    </div> -->
+	</div>
+	<!-- 功能选择列表End -->
+	<!-- 题目模块end -->
+	<!-- 设置操作栏 -->
+	<van-popup v-model:show="setShow" position="bottom">
+		<van-cell center title="答题音效提示">
+			<template #right-icon>
+				<van-switch v-model="isSoundEffect" size="24" />
+			</template>
+		</van-cell>
+	</van-popup>
+	<!-- 设置操作栏end -->
+	<!-- 底部操作栏 -->
+	<!-- <div style="height: 40px"></div> -->
+	<!-- <m-button class="submitButton" text="交卷" /> -->
+	<van-tabbar placeholder route>
+		<van-tabbar-item @click="lastSubject"
+			>上一题
+			<template #icon>
+				<m-icon type="shangyiti" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item
+			>{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
+			<template #icon>
+				<m-icon type="zongtishu" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item @click="gotoTest"
+			>交卷
+			<template #icon>
+				<m-icon type="jiaojuan" />
+			</template>
+		</van-tabbar-item>
+		<van-tabbar-item @click="nextSubject"
+			>下一题
+			<template #icon>
+				<m-icon type="xiayiti" />
+			</template>
+		</van-tabbar-item>
+	</van-tabbar>
+	<!-- 底部操作栏end -->
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits, computed } from "vue";
+import { Dialog } from "vant";
+import { useSubjectShowLogic, useTopicMode, useAudioSet } from "./hooks";
+import { RouterBus } from "@/hooks";
+import { exerciseTitle} from "@/hooks/text/title"
+const {
+	route: { query },
+	router: { back },
+} = new RouterBus();
+
+// const title = computed(() => {
+// 	return `(${query.cert})/${query.name}/${query.title}/${query.placeIssueName || query.classIssueName || query.excellIssueName || query.sequeIssueName || ""}`;
+// });
+
+//父级传参
+const props = defineProps<{
+	userTestData: {
+		testScores: number;
+		useTime: number;
+	};
+}>();
+const emits = defineEmits(["next", "update:userTestData"]);
+
+const useTime = ref(0);
+const useTimeChange = (e: any) => {
+	useTime.value = 45 * 60 * 1000 - e.total;
+};
+
+//计算分数
+const scoreCalc = () => {
+	subjectList.value.forEach((item) => {
+		userAnswerChange(item);
+	});
+	emits("update:userTestData", {
+		useTime: useTime.value,
+		testScores: (trueNum.value / subjectTotal.value) * 100,
+	});
+	emits("next");
+};
+
+const gotoTest = () => {
+	Dialog.confirm({
+		message: "确认交卷吗?",
+	})
+		.then(() => {
+			scoreCalc();
+		})
+		.catch(() => {});
+};
+
+//题目展示逻辑
+const { currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, subjectList, userAnswerChange } = useSubjectShowLogic();
+console.log('......',currentSubject)
+//设置操作栏
+const setShow = ref(false); //显示设置栏
+const isSoundEffect = ref(true); //答题音效
+//设置操作栏end
+
+//音频模块
+const { subjectAudioPlay } = useAudioSet(currentSubject);
+//音频模块end
+</script>
+
+<style lang="scss" scoped>
+.dowm-box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px;
+	position: sticky;
+	top: 45px;
+	font-size: 30px;
+	background-color: #ffffff;
+}
+.parsing-img {
+	width: 100%;
+	margin-top: 10px;
+}
+.function-list {
+	width: 100%;
+	font-size: 13px;
+	display: flex;
+	justify-content: space-around;
+	flex-wrap: wrap;
+	padding: 15px;
+	box-sizing: border-box;
+	.function-item {
+		margin-bottom: 20px;
+		width: 30%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 13px;
+		font-weight: 400;
+		color: #8a9099;
+		span {
+			margin-top: 5px;
+		}
+	}
+}
+.answerType {
+	width: 100%;
+	font-size: 13px;
+	display: flex;
+	justify-content: space-around;
+	padding: 15px;
+	box-sizing: border-box;
+	span {
+		border-radius: 20px;
+		padding: 3px 10px;
+		background-color: #b8c0cc;
+		color: #ffffff;
+	}
+	.selected {
+		background-color: #498ef5;
+	}
+}
+.divider {
+	width: 100%;
+	height: 10px;
+	background-color: #f2f3f5;
+}
+.problem-box {
+	font-size: 17px;
+	padding: 15px;
+	.problem {
+		.type {
+			width: 47px;
+			height: 24px;
+			background: #498ef5;
+			border-radius: 10px 10px 0px 10px;
+			font-size: 11px;
+			padding: 2px 7px;
+			margin-right: 5px;
+			color: #fff;
+			font-size: 14px;
+		}
+		.text {
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #0a1a33;
+			letter-spacing: 0.3px;
+			font-size: 18px;
+		}
+		.img {
+			width: 100%;
+			margin-top: 10px;
+		}
+	}
+	.answer {
+		margin-top: 25px;
+	}
+	.answer-box {
+		display: flex;
+		margin-top: 25px;
+		align-items: center;
+		.iconTrue {
+			background-color: #01c18d;
+		}
+		.answer-text {
+			margin-left: 10px;
+		}
+		.true {
+			color: #01c18d;
+		}
+		.false {
+			color: #ff4d53;
+		}
+	}
+
+	.choose-icon {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 17px;
+		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
+		box-sizing: border-box;
+		margin-left: 5px;
+		margin-top: 1px;
+	}
+	.selected {
+		background-color: #498ef5;
+	}
+	.checkbox-btn {
+		width: 266px;
+		height: 40px;
+		margin: auto;
+		margin-top: 25px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.checkbox-answer {
+		padding: 8px 10px;
+		background-color: #f2f3f5;
+		margin-top: 25px;
+	}
+}
+.skills-box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	.skills {
+		width: 290px;
+		background: #ffffff;
+		box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.16);
+		border-radius: 10px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 20px 16px;
+		box-sizing: border-box;
+		.title {
+			font-size: 15px;
+			font-family: PingFang SC;
+			font-weight: bold;
+			line-height: 21px;
+			color: #0a1a33;
+		}
+		.img {
+			width: 258px;
+			height: 129px;
+			border: 1px solid #e8e8e8;
+			margin-top: 16px;
+		}
+		.divider {
+			margin-top: 20px;
+			color: #0a1a33;
+			background: #ffffff;
+		}
+		.text {
+			font-size: 13px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			line-height: 19px;
+			color: #5c6066;
+			margin-top: 10px;
+		}
+		.btn {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			padding: 0 40px;
+			box-sizing: border-box;
+			margin-top: 20px;
+			span {
+				width: 76px;
+				height: 30px;
+				border-radius: 15px;
+				font-size: 13px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				&:active {
+					background-color: #afaaaa;
+					filter: brightness(50%);
+				}
+				&:nth-of-type(1) {
+					border: 1px solid #707070;
+					color: #5c6066;
+				}
+				&:nth-of-type(2) {
+					background: #498ef5;
+					border: 1px solid #498ef5;
+					color: #ffffff;
+				}
+			}
+		}
+	}
+}
+
+.submitButton {
+	background-color: #498ef5;
+	position: fixed;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 0;
+	width: 80%;
+	color: #ffffff;
+	font-size: 16px;
+}
+</style>