//页面分为左右两部分，下面是主要的代码
<div class="container"> <el-container style="height: calc(100vh - 90px); border: 1px solid #eee"> <el-aside width="300px" style="background-color: #EBEBEB" > <el-image :src="src" class="showImg" > <div slot="error" class="image-slot" > <i class="el-icon-picture-outline"></i> </div> </el-image> <el-form ref="form" v-model="form" size="mini" style=" 270px;margin-left: 30px" label-position="left" > <el-form-item label="姓名：" label-width="60px" > <span>{{ form.userTitle }}</span> </el-form-item> <el-form-item label="身份证号：" label-width="90px" > <span>{{ form.userIdcard }}</span> </el-form-item> <el-form-item label="单位：" label-width="60px" > <span>{{ form.corpName }}</span> </el-form-item> </el-form> <div style="height: 50px;line-height: 50px;background-color:#DDDDDD; margin-left: 10px; 280px"> <span style="font-size: 18px;font-weight:700;color: rgb(96, 98, 102);margin-left: 100px">试题导航</span> </div> <div class="note"> <div style="background-color: #7D7D7D;margin-left: 30px" class="all" ></div> <span class="textStyle">全部</span> <div style="background-color: #05C826;" class="all" ></div> <span class="textStyle">正确</span> <div style="background-color: #E70012" class="all" ></div> <span class="textStyle">错误</span> </div> <ul class="sole"> <li v-for="(item,index) in list" :key="index" :class="item.title" :style="{background:item.color}" @click="toTegional(index)" > {{ index+1 }} </li> </ul> </el-aside> <el-container> <el-header style="text-align: left; font-size: 14px;height: 60px"> <div style="margin: 20px 20px 0"> <span v-if="isReady" style=" font-family: Arial;" >共计试题{{ count }}道，已做{{ finished }}道，完成率{{ rate }}%，答对{{ successCount }}道，正确率{{ unRate }}%，总分：{{ allScore }}，得分：{{ trueScore }}</span> <span v-else style=" font-family: Arial;" >共计试题{{ count }}道，已做{{ finished }}道，完成率{{ rate }}%</span> <span class="timeruning" style="margin-left: 20px" >考试时间共1小时30分钟，距离考试结束还有{{ hr }}:{{ min }}:{{ sec }}</span> <el-button type="text" style="color:#1e8cfb;float:right;padding: 0 0 0" :disabled="isSubmit" @click="handleClick()" > 提交 </el-button> </div> </el-header> <el-main> <div ref="rightContent" style="height: calc(100vh - 160px);" > <div v-for="(item,index) in list" :key="index" > <el-card :id="'a'+index" class="box-card" > <div style="background-color: #EEEEEE; 100%; height: 80px"> <div style="padding-top: 20px"> <p style="display: inline;margin-left: 20px"> {{ index + 1 }}.{{ item.title }} </p> <p v-if="item.type=='1'" style="display: inline;margin-left: 10px" > (单选题) </p> <p v-else-if="item.type==='2'" style="display: inline;margin-left: 10px" > (多选题) </p> <p v-else-if="item.type==='3'" style="display: inline;margin-left: 10px" > (判断题) </p> <p v-if="item.type!=='3'&&isReady" style="display: inline;margin-left: 10px" > 正确答案：{{ item.answer }} </p> <p v-else-if="item.type==='3'&&item.answer==='1'&&isReady" style="display: inline;margin-left: 10px" > 正确答案：对 </p> <p v-else-if="item.type==='3'&&item.answer==='0'&&isReady" style="display: inline;margin-left: 10px" > 正确答案：错 </p> <p style="display: inline;float: right;margin-right: 20px"> 本题{{ item.score }}分 </p> </div> </div> <el-radio-group v-if="item.type==='1'" v-model="item.examValue" @change="onChange(item)" > <ul> <li v-for="(item1,index1) in item.examQBankDetailsList" :key="index1" style="margin:10px 0 10px 20px" > <el-radio :value="item1.options" :label="order[index1]" :disabled="isReady" > {{ order[index1] }}.{{ item1.options }} </el-radio> </li> </ul> </el-radio-group> <el-checkbox-group v-else-if="item.type==='2'" v-model="item.examValue" @change="onChange(item)" > <ul> <li v-for="(item1,index1) in item.examQBankDetailsList" :key="index1" style="margin:10px 0 10px 20px" > <el-checkbox :value="item1.options" :label="order[index1]" :disabled="isReady" > {{ order[index1] }}.{{ item1.options }} </el-checkbox> </li> </ul> </el-checkbox-group> <el-radio-group v-else-if="item.type==='3'" v-model="item.examValue" @change="onChange(item)" > <ul> <li style="margin:10px 0 10px 20px"> <el-radio label="1" :disabled="isReady" > 对 </el-radio> </li> <li style="margin:10px 0 10px 20px"> <el-radio label="0" :disabled="isReady" > 错 </el-radio> </li> </ul> </el-radio-group> </el-card> </div> </div> </el-main> </el-container> </el-container> </div>
下面的截图是实现后哦的样式
下面是使用的样式
<style scoped lang="scss"> .container { height: calc(100vh - 90px); background-color: #f9f9f9; } .showImg { 125px; height: 150px; display: block; margin-left: 87px; margin-top: 20px; background-color: #dadcdc; } .sole { 280px; height: auto; list-style-type: none; margin-left: 10px; } .sole li { 40px; height: 40px; float: left; border: solid 1px #dddddd; text-align: center; line-height: 40px; background-color: #fcfcfc; } .note { 280px; height: 40px; list-style-type: none; margin-left: 10px; background-color: #f6f6f6; } .note .all { 20px; height: 20px; float: left; border: solid 1px; margin-top: 10px; } .textStyle { 50px; float: left; margin-left: 5px; margin-top: 10px; } /deep/ .el-card__body { padding: 0 0 0 !important; } .box-card { margin-top: 10px; } p { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner { background-color: #409eff !important; border-color: #409eff !important; } /deep/ .el-checkbox__input.is-disabled.is-checked + span.el-checkbox__label { color: #409eff !important; } </style>
js可以参考这进行动态交互，这个是一次提交完成的，你们也可以做一道题提交一次，这样退出后进来还可以接着考试
return { form: '', isReady: false, isSubmit: false, src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', examValue: '', count: 0, successCount: 0, finished: 0, order: ['A', 'B', 'C', 'D', 'E', 'F'], list: [], chengeList: [], hr: 0, min: 0, sec: 0, allScore: 0, trueScore: 0, countTime: "", // 测评时间 }; }, computed: { unRate: function() { if (this.successCount === 0) { return 0 } return Math.round(this.successCount / this.count * 100) }, rate: function() { if (this.finished === 0) { return 0 } return Math.round(this.finished / this.count * 100) }, }, created() { this.getMenus(); this.getStyle(); this.timer(); }, mounted() { if (window.sessionStorage.getItem('finished') !== null) { this.finished = window.sessionStorage.getItem('finished'); } if (window.sessionStorage.getItem('isReady') !== null) { this.isReady = true; this.isSubmit = true; } }, destroyed() { clearTimeout(this.setTime); clearTimeout(this.setTimer); window.sessionStorage.removeItem('finished'); window.sessionStorage.removeItem('timed'); window.sessionStorage.removeItem('chengeList'); window.sessionStorage.removeItem('isReady'); }, methods: { getStyle() { var api = ' ' this.axios .get(api, {}) .then(res => { if (res.data.success) { let bankStyle = res.data.data.id; this.countTime = res.data.data.strExt2; this.getAll(bankStyle); // 定义结束时间戳 if (window.sessionStorage.getItem('timed') !== null) { this.end = Date.parse(new Date()) + parseInt(window.sessionStorage.getItem('timed'), 10); } else { // eslint-disable-next-line radix this.end = Date.parse(new Date()) + parseInt(this.countTime); } this.countdown(); } else { this.$message.error('查询信息错误'); } }) .catch(error => { console.log(error); }); }, timer() { const that = this; let api = ""; this.axios .get(api, {}) .then(res => { if (res.data.success) { that.setTimer = setTimeout(function() { that.timer(); }, 300000); } else { console.log("请求数据失败"); } }) .catch(error => { console.log(error); }); }, countdown() { // 定义当前时间戳 const now = Date.parse(new Date()); if (now >= this.end) { this.hr = 0; this.min = 0; this.sec = 0; this.$message.warning('测评结束'); clearTimeout(this.setTimer); this.isReady = true; return; } // 用结束时间减去当前时间获得倒计时时间戳 const msec = this.end - now; window.sessionStorage.setItem('timed', msec); let hr = parseInt((msec / 1000 / 60 / 60) % 24, 10); // 算出小时数 let min = parseInt((msec / 1000 / 60) % 60, 10); // 算出分钟数 let sec = parseInt((msec / 1000) % 60, 10); // 算出秒数 // 给数据赋值 this.hr = hr > 9 ? hr : '0' + hr; this.min = min > 9 ? min : '0' + min; this.sec = sec > 9 ? sec : '0' + sec; // 定义this指向 const that = this; // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果 this.setTime = setTimeout(function() { that.countdown(); }, 1000); }, getAll(val) { let that = this; let api = ; this.axios .get(api, {}) .then(res => { if (res.data.success) { if ( window.sessionStorage.getItem('chengeList') !== null ) { that.list = JSON.parse( window.sessionStorage.getItem('chengeList'), ); that.chengeList = that.list; that.count = that.list.length; } else { that.count = res.data.data.length; that.list = res.data.data.map(v => { v.examValue = []; v.color = ''; v.chooseAnswer = ''; v.typeName = ""; if(v.type !== '3') { v.answers = []; for(let i in v.examQBankDetailsList) { if(v.type === '1') { if (v.examQBankDetailsList[i].isRight === 1) { v.answers = this.order[i]; } v.typeName = "(单选题)" }else if(v.type === '2') { if (v.examQBankDetailsList[i].isRight === 1) { v.answers.push(this.order[i]); } v.typeName = "(多选题)" } } }else if (v.type === '3') { v.typeName = "(判断题)" v.answers = v.answer; } if (v.type === '2') { v.answers.sort(); v.answer = v.answers.join(','); } else { v.answer = v.answers; } return v; }); that.chengeList = that.list; } } else { this.$message.error('查询信息错误'); } }) .catch(error => { console.log(error); }); }, // 获取信息 getMenus() { var params = { id: sessionStorage.getItem('p_id'), }; var api = ''; this.axios .post(api, params, {}) .then(res => { if (res.data.success) { this.form = res.data.data[0]; this.form.corpName = sessionStorage.getItem('corpName'); } else { this.$message.error('查询信息错误'); } }) .catch(error => { console.log(error); }); }, onChange(e) { window.sessionStorage.removeItem('chengeList'); window.sessionStorage.removeItem('finished'); if (e.type === '2') { if (e.examValue.length > 0) { e.color = '#7D7D7D'; } else { e.color = ''; } } else { e.color = '#7D7D7D'; } for (let i in this.chengeList) { if (this.chengeList[i].id === e.id) { if ( this.chengeList[i].type === '1' || this.chengeList[i].type === '3' ) { if ( this.chengeList[i].chooseAnswer === '' && e.examValue !== '' ) { this.finished++; } else if ( this.chengeList[i].chooseAnswer !== '' && e.examValue === '' ) { this.finished--; } this.chengeList[i].chooseAnswer = this.chengeList[ i ].examValue; } else if (this.chengeList[i].type === '2') { if ( this.chengeList[i].chooseAnswer === '' && e.examValue.length !== 0 ) { this.finished++; } else if ( this.chengeList[i].chooseAnswer !== '' && e.examValue.length === 0 ) { this.finished--; } e.examValue.sort(); this.chengeList[i].chooseAnswer = e.examValue.join(','); } this.chengeList[i] = e; window.sessionStorage.setItem('finished', this.finished); window.sessionStorage.setItem( 'chengeList', JSON.stringify(this.chengeList), ); return; } } }, toTegional(val) { let id = '#a' + val; document.querySelector(id).scrollIntoView(true); }, handleClick() { this.$confirm('是否确定提交?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(() => { this.commitClick(); }) .catch(() => { this.$message({ showClose: true, duration: 1000, type: 'info', message: '已取消提交', }); }); }, commitClick() { if (this.hr === 0 && this.min === 0 && this.sec === 0) { // task } else { for (let i in this.chengeList) { if (this.chengeList[i].chooseAnswer === '') { this.$message.warning('还有试题未作答'); return; } } } const loading = this.$loading({ lock: true, text: '提交中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)', }); let times = parseInt(this.countTime) - parseInt(window.sessionStorage.getItem('timed'), 10); const api = ""; this.axios .post(api, this.chengeList, {}) .then(res => { if (res.data.success) { loading.close(); this.$message.success('提交成功'); this.allScore = res.data.data[1]; this.trueScore = res.data.data[0]; let Recordid = res.data.data[3]; window.sessionStorage.removeItem('isReady'); this.isReady = true; this.isSubmit = true; window.sessionStorage.setItem('isReady', this.isReady); clearTimeout(this.setTime); clearTimeout(this.setTimer); let scores = this.trueScore / this.allScore; this.$confirm('测评结束正确率为' + scores.toFixed(2) * 100 + '%是否退出', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { }).catch(() => { }); }else{ loading.close(); this.$message.error('提交失败'); return; } }) .catch(error => { loading.close(); console.log(error); this.$message.error('提交失败'); return; }); for (let i in this.chengeList) { if ( this.chengeList[i].type === '1' || this.chengeList[i].type === '3' ) { if ( this.chengeList[i].chooseAnswer === this.chengeList[i].answer ) { this.chengeList[i].color = '#05C826'; this.successCount++; } else { this.chengeList[i].color = '#E70012'; } } else if (this.chengeList[i].type === '2') { if ( this.chengeList[i].chooseAnswer === this.chengeList[i].answer ) { this.chengeList[i].color = '#05C826'; this.successCount++; } else { this.chengeList[i].color = '#E70012'; } } } window.sessionStorage.removeItem('chengeList'); window.sessionStorage.setItem( 'chengeList', JSON.stringify(this.chengeList), ); }, },