<template>
	<view>
		<view class="nav-bar"></view>
		<view class="upper-sec">
			<view
				:class="[{ active: upperSecStatus == 1 }]"
				@click="switchSec(1)"
			>
				单选题
			</view>
			<view
				:class="[{ active: upperSecStatus == 2 }]"
				@click="switchSec(2)"
			>
				多选题
			</view>
			<view
				:class="[{ active: upperSecStatus == 3 }]"
				@click="switchSec(3)"
			>
				判断题
			</view>
		</view>
		<view class="single" v-show="upperSecStatus == 1">
			<view class="single-cont">
				<view
					v-for="(singleCount, index) in singleContIndex"
					:key="index"
					@click="singleInitCount = singleCount"
					:class="[{ active: singleInitCount == singleCount }, { isAnswer: singleAnswerCount.includes(singleCount) }]"
				>
					{{ singleCount }}
				</view>
			</view>
			<view class="single-sec-count">
				<view
					v-for="(single, index) in singleArr"
					:key="index"
					v-show="(singleInitCount - 1) == index"
					class="ques"
				>
					<span style="font-size: 22px;">{{ single.content }}</span>
					<view class="check-box">
						<uni-data-checkbox
							:disabled="true"
							:localdata="single.addOp" 
							v-model="single.trueNumAnsCount"
							@change="singleAnswer"
							:wrap="true"
							mode="list"
							style="transform: scale(1.3);"
						>
						</uni-data-checkbox>
					</view>
				</view>
				<view class="switch-btn">
					<button @click="singleDec('-', singleContIndex.length)" v-show="singlePreBtnShow">上一题</button>
					<button @click="singleDec('+', singleContIndex.length)" v-show="singleNextBtnShow">下一题</button>
				</view>
			</view>
		</view>
		<view class="multi" v-show="upperSecStatus == 2">
			<view class="multi-cont">
				<view
					v-for="(multiCount, index) in multiContIndex"
					:key="index"
					@click="multiInitCount = multiCount"
					:class="[{ active: multiInitCount == multiCount }, { isAnswer: multiAnswerCount.includes(multiCount) }]"
				>
					{{ multiCount }}
				</view>
			</view>
			<view class="multi-sec-count">
				<view
					v-for="(multi, index) in multiArr"
					:key="index"
					v-show="(multiInitCount - 1) == index"
					class="ques"
				>
					<span style="font-size: 22px;">{{ multi.content }}</span>
					<view class="check-box">
						<uni-data-checkbox
							:disabled="true"
							:localdata="multi.addOp" 
							v-model="multi.trueNumAns"
							@change="multiAnswer"
							multiple
							:wrap="true"
							mode="list"
							style="transform: scale(1.3);"
						>
						</uni-data-checkbox>
					</view>
				</view>
				<view class="switch-btn">
					<button @click="multiDec('-', multiContIndex.length)" v-show="multiPreBtnShow">上一题</button>
					<button @click="multiDec('+', multiContIndex.length)" v-show="multiNextBtnShow">下一题</button>
				</view>
			</view>
		</view>
		<view class="ans" v-show="upperSecStatus == 3">
			<view class="judge-cont">
				<view
					v-for="(judgeCount, index) in judgeContIndex"
					:key="index"
					@click="judgeInitCount = judgeCount"
					:class="[{ active: judgeInitCount == judgeCount }, { isAnswer: judgeAnswerCount.includes(judgeCount) }]"
				>
					{{ judgeCount }}
				</view>
			</view>
			<view class="judge-sec-count">
				<view
					v-for="(judge, index) in judgeArr"
					:key="index"
					v-show="(judgeInitCount - 1) == index"
					class="ques"
				>
					<span style="font-size: 22px;">{{ judge.content }}</span>
					<view class="check-box">
						<uni-data-checkbox
							:disabled="true"
							:localdata="judge.addOp" 
							v-model="judge.trueNumAnsCount"
							@change="judgeAnswer"
							:wrap="true"
							mode="list"
							style="transform: scale(1.3);"
						>
						</uni-data-checkbox>
					</view>
				</view>
				<view class="switch-btn">
					<button @click="judgeDec('-', judgeContIndex.length)" v-show="judgePreBtnShow">上一题</button>
					<button @click="judgeDec('+', judgeContIndex.length)" v-show="judgeNextBtnShow">下一题</button>
				</view>
			</view>
		</view>
		<!-- <button v-show="upperSecStatus == 3" class="sub-btn" @click="subJudgeAndJump()">考试提交</button> -->
		<!-- <u-loading-page :loading="showLoading" color="#000" loading-text="获取题目中,请稍后..."></u-loading-page> -->
		<!-- <u-loading-page :loading="showSubLoading" color="#000" loading-text="保存题目中,请稍后..."></u-loading-page> -->
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				showLoading: false,
				showSubLoading: false,
				upperSecStatus: 1,
				examId: '',
				singleArr: [],
				multiArr: [],
				judgeArr: [],
				singleContIndex: [],
				multiContIndex: [],
				judgeContIndex: [],
				singleInitCount: 1,
				multiInitCount: 1,
				judgeInitCount: 1,
				singleAnswerCount: [],
				multiAnswerCount: [],
				judgeAnswerCount: [],
				singleListArr: [],
				multiListArr: [],
				judgeListArr: [],
				singleNumAns: [],
				multiNumAns: [],
				judgeNumAns: [],
				singleIdArr: [],
				multiIdArr: [],
				judgeIdArr: [],
				singleStatusArr: [],
				multiStatusArr: [],
				judgeStatusArr: [],
				singlePreBtnShow: true,
				singleNextBtnShow: true,
				multiPreBtnShow: true,
				multiNextBtnShow: true,
				judgePreBtnShow: true,
				judgeNextBtnShow: true
			}
		},
		methods: {
			switchSec (count) {
				/* switch (this.upperSecStatus){
					case 1:
						this.subSingle(count)
						break;
					case 2:
						this.subMulti(count)
						break;
					case 3:
						this.subJudge(count)
						break;
				} */
				this.upperSecStatus = count
			},
			singleDec (mark, total) {
				if (mark == '-' && this.singleInitCount > 1) {
					this.singleInitCount--
				} else if (mark == '+' && this.singleInitCount < total) {
					this.singleInitCount++
				}
				if (this.singleInitCount == 1) {
					this.singlePreBtnShow = false
				} else {
					this.singlePreBtnShow = true
				}
				if (this.singleInitCount == total) {
					this.singleNextBtnShow = false
				} else {
					this.singleNextBtnShow = true
				}
			},
			multiDec (mark, total) {
				if (mark == '-' && this.multiInitCount > 1) {
					this.multiInitCount--
				} else if (mark == '+' && this.multiInitCount < total) {
					this.multiInitCount++
				}
				if (this.multiInitCount == 1) {
					this.multiPreBtnShow = false
				} else {
					this.multiPreBtnShow = true
				}
				if (this.multiInitCount == total) {
					this.multiNextBtnShow = false
				} else {
					this.multiNextBtnShow = true
				}
			},
			judgeDec (mark, total) {
				if (mark == '-' && this.judgeInitCount > 1) {
					this.judgeInitCount--
				} else if (mark == '+' && this.judgeInitCount < total) {
					this.judgeInitCount++
				}
				if (this.judgeInitCount == 1) {
					this.judgePreBtnShow = false
				} else {
					this.judgePreBtnShow = true
				}
				if (this.judgeInitCount == total) {
					this.judgeNextBtnShow = false
				} else {
					this.judgeNextBtnShow = true
				}
			},
			// 获取各类题型 1 单选 2 多选 3 判断
			fetchQuestions (type) {
				let that = this
				that.showLoading = true
				that.singleArr = []
				that.multiArr = []
				that.judgeArr = []
				that.singleContIndex = []
				that.multiContIndex = []
				that.judgeContIndex = []
				// that.singleAnswerCount = []
				// that.multiAnswerCount = []
				// that.judgeAnswerCount = []
				that.singleNumAns = []
				that.multiNumAns = []
				that.judgeNumAns = []
				that.singleIdArr = []
				that.multiIdArr = []
				that.judgeIdArr = []
				uni.request({
					url: publicPath + '/backstage/grade/findExamSelfContentPage',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						selectValue: type,
						examId: that.examId,
						fabuUserid: uni.getStorageSync('id'),
						fabuIdCard: uni.getStorageSync('idCard')
					},
					success: (quesRes) => {
						console.log(quesRes);
						if (quesRes.data.msg == 'success') {
							that.showLoading = false
							if (type == 1) {
								for (let p = 0; p < quesRes.data.data.length; p++) {
									quesRes.data.data[p].xxx = null
									switch (quesRes.data.data[p].trueAnswer) {
										case 'A':
											quesRes.data.data[p].trueNumAns = 1
											quesRes.data.data[p].trueNumAnsCount = '1'
											break;
										case 'B':
											quesRes.data.data[p].trueNumAns = 2
											quesRes.data.data[p].trueNumAnsCount = '2'
											break;
										case 'C':
											quesRes.data.data[p].trueNumAns = 3
											quesRes.data.data[p].trueNumAnsCount = '3'
											break;
										case 'D':
											quesRes.data.data[p].trueNumAns = 4
											quesRes.data.data[p].trueNumAnsCount = '4'
											break;
									}
									quesRes.data.data[p].operation = quesRes.data.data[p].operation.split(';').slice(0, quesRes.data.data[p].operation.split(';').length - 1)
									quesRes.data.data[p].addOp = quesRes.data.data[p].operation.map((item) => {
										return {
											text: item.substring(1),
											value: item.charAt(0)
										}
									})
									that.singleNumAns.push(quesRes.data.data[p].trueNumAns)
									that.singleIdArr.push(quesRes.data.data[p].questionId)
								}
								that.singleArr = quesRes.data.data
								for (let i = 1; i < quesRes.data.count + 1; i++) {
									that.singleContIndex.push(i)
								}
								console.log(that.singleArr);
							} else if (type == 2) {
								for (let p = 0; p < quesRes.data.data.length; p++) {
									quesRes.data.data[p].xxx = []
									quesRes.data.data[p].trueNumAns = quesRes.data.data[p].answer.split(',').map((num) => {
										switch (num) {
											case 'A':
												num = '1'
												break;
											case 'B':
												num = '2'
												break;
											case 'C':
												num = '3'
												break;
											case 'D':
												num = '4'
												break;
										}
										return num
									})
									quesRes.data.data[p].operation = quesRes.data.data[p].operation.split(';').slice(0, quesRes.data.data[p].operation.split(';').length - 1)
									quesRes.data.data[p].addOp = quesRes.data.data[p].operation.map((item) => {
										return {
											text: item.substring(1),
											value: item.charAt(0)
										}
									})
									that.multiNumAns.push(quesRes.data.data[p].trueNumAns.join(','))
									that.multiIdArr.push(quesRes.data.data[p].questionId)
								}
								that.multiArr = quesRes.data.data
								for (let i = 1; i < quesRes.data.count + 1; i++) {
									that.multiContIndex.push(i)
								}
								console.log(that.multiArr[0].addOp);
								console.log(that.multiArr);
							} else if (type == 3) {
								for (let p = 0; p < quesRes.data.data.length; p++) {
									quesRes.data.data[p].xxx = null
									switch (quesRes.data.data[p].trueAnswer) {
										case 'A':
											quesRes.data.data[p].trueNumAns = 1
											quesRes.data.data[p].trueNumAnsCount = '1'
											break;
										case 'B':
											quesRes.data.data[p].trueNumAns = 2
											quesRes.data.data[p].trueNumAnsCount = '2'
											break;
									}
									quesRes.data.data[p].operation = quesRes.data.data[p].operation.split(';').slice(0, quesRes.data.data[p].operation.split(';').length - 1)
									quesRes.data.data[p].addOp = quesRes.data.data[p].operation.map((item) => {
										return {
											text: item.substring(1),
											value: item.charAt(0)
										}
									})
									that.judgeNumAns.push(quesRes.data.data[p].trueNumAns)
									that.judgeIdArr.push(quesRes.data.data[p].questionId)
								}
								that.judgeArr = quesRes.data.data
								for (let i = 1; i < quesRes.data.count + 1; i++) {
									that.judgeContIndex.push(i)
								}
								console.log(that.judgeArr);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取题目失败，请稍后再试！'
							})
						}
					}
				})
			},
			singleAnswer (e) {
				console.log(e);
				if (e.detail.value) {
					this.singleAnswerCount.push(this.singleInitCount)
				}
			},
			multiAnswer (e) {
				console.log(e);
				if (e.detail.value) {
					this.multiAnswerCount.push(this.multiInitCount)
				}
			},
			judgeAnswer (e) {
				console.log(e);
				if (e.detail.value) {
					this.judgeAnswerCount.push(this.judgeInitCount)
				}
			},
			subSingle (num) {
				let that = this
				this.showSubLoading = true
				this.singleListArr = []
				this.singleStatusArr = []
				for (let i = 0; i < this.singleArr.length; i++) {
					this.singleListArr.push(this.singleArr[i].xxx)
				}
				console.log(this.singleListArr);
				console.log(this.singleNumAns);
				let isFilled = this.singleListArr.filter((ans) => {
					return ans != null
				})
				let notFilled = this.singleListArr.filter((ans) => {
					return ans == null
				})
				// uni.showModal({
				// 	title: '保存单选题',
				// 	content: `有${isFilled.length}题已答，${notFilled.length}题未答，是否提交？`,
				// 	confirmText: '保存',
				// 	cancelText: '再想想',
				// 	success: (res) => {
				// 		if (res.confirm) {
							let yesNum = 0
							let wrongNum = 0
							for (let i = 0; i < that.singleNumAns.length; i++) {
								if (that.singleListArr[i] == that.singleNumAns[i]) {
									yesNum++
									that.singleStatusArr.push('1')
								} else {
									wrongNum++
									that.singleStatusArr.push('0')
								}
							}
							console.log(yesNum, wrongNum);
							for (let k = 0; k < that.singleListArr.length; k++) {
								if (that.singleListArr[k] != null) {
									that.singleListArr[k] = that.singleIdArr[k] + '-' + that.singleListArr[k] + '-' + that.singleStatusArr[k]
								}
							}
							
							that.singleListArr = that.singleListArr.join(';')
							console.log(that.singleListArr);
							
							// 单选题保存
							uni.request({
								url: publicPath + '/backstage/app/selfTest/temporarySelfUpdate',
								method: 'POST',
								header: {
									'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
								},
								data: {
									singleAnswer: that.singleListArr,
									singleTrue: that.singleNumAns,
									singleGrade: yesNum * 2,
									examId: that.examId,
									typeNum: '1',
									loginName: uni.getStorageSync('idCard')
								},
								success: (singleRes) => {
									console.log(singleRes);
									if (singleRes.data.res == 1) {
										that.showSubLoading = false
										that.upperSecStatus = num
									}
								}
							})
				// 		}
				// 	}
				// })
			},
			subMulti (num) {
				let that = this
				this.showSubLoading = true
				this.multiListArr = []
				this.multiStatusArr = []
				for (let i = 0; i < this.multiArr.length; i++) {
					this.multiListArr.push(this.multiArr[i].xxx)
				}
				console.log(this.multiListArr);
				console.log(this.multiNumAns);
				let isFilled = 0
				let notFilled = 0
				for (let k = 0; k < that.multiListArr.length; k++) {
					that.multiListArr[k].sort((a, b) => {
						return a - b
					})
					if (that.multiListArr[k].length == 0) {
						notFilled++
					} else {
						isFilled++
					}
				}
				// uni.showModal({
				// 	title: '保存单选题',
				// 	content: `有${isFilled}题已答，${notFilled}题未答，是否提交？`,
				// 	confirmText: '保存',
				// 	cancelText: '再想想',
				// 	success: (res) => {
				// 		if (res.confirm) {
							let yesNum = 0
							let wrongNum = 0
							for (let i = 0; i < that.multiNumAns.length; i++) {
								if (that.multiListArr[i] == that.multiNumAns[i]) {
									yesNum++
									that.multiStatusArr.push('1')
								} else {
									wrongNum++
									that.multiStatusArr.push('0')
								}
							}
							console.log(yesNum, wrongNum);
							
							for (let k = 0; k < that.multiListArr.length; k++) {
								if (that.multiListArr[k].length != 0) {
									that.multiListArr[k] = that.multiIdArr[k] + '=' + that.multiListArr[k] + '=' + (that.multiStatusArr[k] * 2)
								}
							}
							
							that.multiListArr = that.multiListArr.join(';')
							console.log(that.multiListArr);
							
							// 多选题保存
							uni.request({
								url: publicPath + '/backstage/app/selfTest/temporarySelfUpdate',
								method: 'POST',
								header: {
									'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
								},
								data: {
									multiAnswer: that.multiListArr,
									multiTrue: that.multiNumAns,
									multiGrade: yesNum,
									examId: that.examId,
									typeNum: '2',
									loginName: uni.getStorageSync('idCard')
								},
								success: (multiRes) => {
									console.log(multiRes);
									if (multiRes.data.res == 1) {
										this.showSubLoading = false
										that.upperSecStatus = num
									}
								}
							})
				// 		}
				// 	}
				// })
			},
			subJudge (num) {
				let that = this
				this.showSubLoading = true
				this.judgeListArr = []
				this.judgeStatusArr = []
				for (let i = 0; i < this.judgeArr.length; i++) {
					this.judgeListArr.push(this.judgeArr[i].xxx)
				}
				
				console.log(this.judgeNumAns);
				let isFilled = this.judgeListArr.filter((ans) => {
					return ans != null
				})
				let notFilled = this.judgeListArr.filter((ans) => {
					return ans == null
				})
				// uni.showModal({
				// 	title: '保存判断题',
				// 	content: `有${isFilled.length}题已答，${notFilled.length}题未答，是否提交？`,
				// 	confirmText: '保存',
				// 	cancelText: '再想想',
				// 	success: (res) => {
				// 		if (res.confirm) {
							let yesNum = 0
							let wrongNum = 0
							for (let i = 0; i < that.judgeNumAns.length; i++) {
								if (that.judgeListArr[i] == that.judgeNumAns[i]) {
									yesNum++
									that.judgeStatusArr.push('1')
								} else {
									wrongNum++
									that.judgeStatusArr.push('0')
								}
							}
							console.log(yesNum, wrongNum);
							for (let k = 0; k < that.judgeListArr.length; k++) {
								if (that.judgeListArr[k] != null) {
									that.judgeListArr[k] = that.judgeIdArr[k] + '-' + that.judgeListArr[k] + '-' + that.judgeStatusArr[k]
								}
							}
							
							that.judgeListArr = that.judgeListArr.join(';')
							console.log(that.judgeListArr);
							
							// 判断题保存
							uni.request({
								url: publicPath + '/backstage/app/selfTest/temporarySelfUpdate',
								method: 'POST',
								header: {
									'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
								},
								data: {
									judgeAnswer: that.judgeListArr,
									judgeTrue: that.judgeNumAns,
									judgeGrade: yesNum,
									examId: that.examId,
									typeNum: '3',
									loginName: uni.getStorageSync('idCard')
								},
								success: (judgeRes) => {
									console.log(judgeRes);
									if (judgeRes.data.res == 1) {
										this.showSubLoading = false
										that.upperSecStatus = num
									}
								}
							})
				// 		}
				// 	}
				// })
			},
			subJudgeAndJump () {
				let that = this
				this.judgeListArr = []
				this.judgeStatusArr = []
				for (let i = 0; i < this.judgeArr.length; i++) {
					this.judgeListArr.push(this.judgeArr[i].xxx)
				}
				
				console.log(this.judgeNumAns);
				let isFilled = this.judgeListArr.filter((ans) => {
					return ans != null
				})
				let notFilled = this.judgeListArr.filter((ans) => {
					return ans == null
				})
				uni.showModal({
					title: '提交练习',
					content: '是否确定提交练习？',
					confirmText: '提交',
					cancelText: '再想想',
					success: (res) => {
						if (res.confirm) {
							
							// 此处应添加判断考试是否结束的请求
							
							let yesNum = 0
							let wrongNum = 0
							for (let i = 0; i < that.judgeNumAns.length; i++) {
								if (that.judgeListArr[i] == that.judgeNumAns[i]) {
									yesNum++
									that.judgeStatusArr.push('1')
								} else {
									wrongNum++
									that.judgeStatusArr.push('0')
								}
							}
							console.log(yesNum, wrongNum);
							for (let k = 0; k < that.judgeListArr.length; k++) {
								if (that.judgeListArr[k] != null) {
									that.judgeListArr[k] = that.judgeIdArr[k] + '-' + that.judgeListArr[k] + '-' + that.judgeStatusArr[k]
								}
							}
							
							that.judgeListArr = that.judgeListArr.join(';')
							console.log(that.judgeListArr);
							
							// 判断题保存
							uni.request({
								url: publicPath + '/backstage/app/selfTest/temporarySelfUpdate',
								method: 'POST',
								header: {
									'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
								},
								data: {
									judgeAnswer: that.judgeListArr,
									judgeTrue: that.judgeNumAns,
									judgeGrade: yesNum,
									examId: that.examId,
									typeNum: '3',
									loginName: uni.getStorageSync('idCard')
								},
								success: (judgeRes) => {
									console.log(judgeRes);
									if (judgeRes.data.res == 1) {
										uni.showToast({
											icon: 'none',
											title: '练习提交成功！',
											success: () => {
												uni.redirectTo({
													url: '/pages/pracScore/pracScore'
												})
											}
										})
									}
								}
							})
						}
					}
				})
			}
		},
		onLoad(params) {
			console.log(params);
			this.examId = params.examId
		},
		onShow() {
			this.fetchQuestions(1)
			this.fetchQuestions(2)
			this.fetchQuestions(3)
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.upper-sec{
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		view{
			width: 20%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.active{
			border-bottom: 2px solid #219ef8;
			color: #219ef8;
		}
	}
	.single, .multi, .ans{
		width: 95%;
		margin: 20rpx auto;
	}
	.single{
		.single-cont{
			width: 100%;
			height: 4.5vh;
			display: -webkit-box;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			view{
				width: 4vh;
				height: 4vh;
				border-radius: 50%;
				margin-right: 20rpx;
				display: inline-block;
				border: 1px solid #e5e5e5;
				background-color: #fff;
				text-align: center;
				line-height: 4vh;
			}
			.active{
				background-color: #219ef8;
				color: #fff;
			}
			.isAnswer{
				background-color: #219ef8;
				color: #fff;
			}
		}
		.single-sec-count{
			width: 90%;
			margin: 60rpx auto;
			.ques{
				.check-box{
					margin: 100rpx auto;
					width: 80%;
				}
			}
			.switch-btn{
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 20rpx auto;
				button{
					width: 45%;
					background-color: #219ef8;
					color: #fff;
				}
			}
		}
	}
	.multi{
		.multi-cont{
			width: 100%;
			height: 4.5vh;
			display: -webkit-box;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			view{
				width: 4vh;
				height: 4vh;
				border-radius: 50%;
				margin-right: 20rpx;
				display: inline-block;
				border: 1px solid #e5e5e5;
				background-color: #fff;
				text-align: center;
				line-height: 4vh;
			}
			.active{
				background-color: #219ef8;
				color: #fff;
			}
			.isAnswer{
				background-color: #219ef8;
				color: #fff;
			}
		}
		.multi-sec-count{
			width: 90%;
			margin: 60rpx auto;
			.ques{
				.check-box{
					margin: 100rpx auto;
					width: 80%;
				}
			}
			.switch-btn{
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 20rpx auto;
				button{
					width: 45%;
					background-color: #219ef8;
					color: #fff;
				}
			}
		}
	}
	.ans{
		.judge-cont{
			width: 100%;
			height: 4.5vh;
			display: -webkit-box;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			view{
				width: 4vh;
				height: 4vh;
				border-radius: 50%;
				margin-right: 20rpx;
				display: inline-block;
				border: 1px solid #e5e5e5;
				background-color: #fff;
				text-align: center;
				line-height: 4vh;
			}
			.active{
				background-color: #219ef8;
				color: #fff;
			}
			.isAnswer{
				background-color: #219ef8;
				color: #fff;
			}
		}
		.judge-sec-count{
			width: 90%;
			margin: 60rpx auto;
			.ques{
				.check-box{
					margin: 100rpx auto;
					width: 80%;
				}
			}
			.switch-btn{
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 20rpx auto;
				button{
					width: 45%;
					background-color: #219ef8;
					color: #fff;
				}
			}
		}
	}
	.sub-btn{
		width: 95%;
		position: fixed;
		bottom: 20rpx;
		left: 2.5%;
		background-color: #219ef8;
		color: #fff;
	}
</style>
