提交 c5f4f375 authored 作者: lihuihui's avatar lihuihui

update

上级 37a60736
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -73,6 +73,7 @@
},
"dependencies": {
"axios": "^0.20.0",
"better-scroll": "^2.4.1",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"element-ui": "^2.13.2",
......
<template>
<div>
<div class="info">
<div class="shape">
<img :src="info.id_photo ? info.id_photo : 'https://zws-imgs-pub.ezijing.com/static/public/e0c63e4d4554f0852e1558426aad20d1.png'" alt="">
</div>
<div class="right">
<div class="name">{{ info.name }}</div>
<div class="code">{{ info.examinee_number }}</div>
</div>
</div>
<div class="order-num">
<template v-for="(item, index) in questionParams.question.question_items">
<div :key="index" v-if="item.question_item_type != 5">
<div class="tit">{{ item.question_item_title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.question_list">
<!-- stu1已答 stu2当前 stu3标记 -->
<li
:key="cItem.q_order + '-' + cIndex"
@click="goQuestion(cItem.q_order)"
:class="questionParams.questionIndex + 1 === cItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu2 stu3'
: 'stu2'
: 'stu2'
: 'stu2'
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu3'
: 'stu1'
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu3'
: ''
: ''
: ''
"
>{{ cItem.q_order }}</li>
</template>
</ul>
<div ref="wrapper">
<div class="info">
<div class="shape">
<img
:src="
info.id_photo
? info.id_photo
: 'https://zws-imgs-pub.ezijing.com/static/public/e0c63e4d4554f0852e1558426aad20d1.png'
"
alt=""
/>
</div>
<div class="right">
<div class="name">{{ info.name }}</div>
<div class="code">{{ info.examinee_number }}</div>
</div>
<div :key="index" v-else>
<div class="tit">{{ item.question_item_title }}</div>
<ul>
<template v-for="cItem in item.question_list">
<template v-for="(lItem, lIndex) in cItem.list">
</div>
<div class="order-num">
<template v-for="(item, index) in questionParams.question.question_items">
<div :key="index" v-if="item.question_item_type != 5">
<div class="tit">{{ item.question_item_title }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.question_list">
<!-- stu1已答 stu2当前 stu3标记 -->
<li
:key="lItem.q_order +'-'+ lIndex"
@click="goQuestion(lItem.q_order)"
:class="questionParams.questionIndex + 1 === lItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
:key="cItem.q_order + '-' + cIndex"
@click="goQuestion(cItem.q_order)"
:class="
questionParams.questionIndex + 1 === cItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu2 stu3'
: 'stu2'
: 'stu2'
: 'stu2'
: 'stu2'
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][cItem.id]
? questionParams.answerRecord[item.question_item_id][cItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu1 stu3'
: 'stu1'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
: questionParams.answerRecord[item.question_item_id][cItem.id].sign
? 'stu3'
: ''
: ''
: ''
"
>
{{ cItem.q_order }}
</li>
</template>
</ul>
</div>
<div :key="index" v-else>
<div class="tit">{{ item.question_item_title }}</div>
<ul>
<template v-for="cItem in item.question_list">
<template v-for="(lItem, lIndex) in cItem.list">
<li
:key="lItem.q_order + '-' + lIndex"
@click="goQuestion(lItem.q_order)"
:class="
questionParams.questionIndex + 1 === lItem.q_order
? questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu1 stu2 stu3'
: 'stu1 stu2'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu2 stu3'
: 'stu2'
: 'stu2'
: 'stu2'
: questionParams.answerRecord[item.question_item_id]
? questionParams.answerRecord[item.question_item_id][lItem.id]
? questionParams.answerRecord[item.question_item_id][lItem.id].answer.length !== 0
? questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu1 stu3'
: 'stu1'
: questionParams.answerRecord[item.question_item_id][lItem.id].sign
? 'stu3'
: ''
: ''
: ''
: ''
"
>{{ lItem.q_order }}</li>
>
{{ lItem.q_order }}
</li>
</template>
</template>
</template>
</ul>
</div>
</template>
</ul>
</div>
</template>
</div>
</div>
<ul class="flag-tips">
<!-- <ul class="flag-tips">
<li>
<div class="circle1"></div>
<div class="txt">已答</div>
......@@ -103,11 +118,12 @@
<div class="circle4"></div>
<div class="txt">标记</div>
</li>
</ul>
</ul> -->
</div>
</template>
<script>
import Bus from '../../components/common/bus.js'
import BScroll from 'better-scroll'
export default {
props: {
questionParams: { type: Object, default: () => {} },
......@@ -117,6 +133,8 @@ export default {
Bus.$on('monitoringChanges', target => {
this.$forceUpdate()
})
const wrapper = this.$refs.wrapper
new BScroll(wrapper)
},
methods: {
goQuestion(n) {
......@@ -126,29 +144,29 @@ export default {
}
</script>
<style lang="scss" scoped>
.info{
.info {
display: flex;
align-items: center;
height: 100px;
.shape{
.shape {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
img{
img {
width: 100%;
// transform: scale(1);
display: block;
}
.right{
.right {
margin-left: 22px;
.name{
.name {
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
.code {
font-size: 14px;
color: #222222;
line-height: 20px;
......@@ -156,115 +174,115 @@ export default {
}
}
}
.order-num{
.order-num {
padding-bottom: 90px;
.tit{
.tit {
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
li {
cursor: pointer;
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
font-size: 14px;
color: #666666;
line-height: 24px;
margin-right: 20px;
margin-bottom: 10px;
text-align: center;
&:nth-child(5n+5){
&:nth-child(5n + 5) {
margin-right: 0;
}
&.stu1{
&.stu1 {
background: #999;
border: 1px solid #999;
}
&.stu2{
&.stu2 {
width: 22px;
height: 22px;
line-height: 22px;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
background: rgba(15, 193, 24, 0.1);
}
&.stu3{
&::after{
&.stu3 {
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
.flag-tips {
width: 260px;
position: fixed;
bottom: 60px;
right:0;
right: 0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
li {
.circle1 {
width: 24px;
height: 24px;
background: #999;
border: 1px solid #999;
border-radius: 50%;
}
.circle2{
.circle2 {
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle3{
.circle3 {
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
background: rgba(15, 193, 24, 0.1);
border-radius: 50%;
}
.circle4{
.circle4 {
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
&::after{
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
.txt{
.txt {
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
color: #cccccc;
line-height: 17px;
}
}
......
<template>
<div>
<div @touchmove.prevent>
<div class="answer-box">
<div class="head" id="head-h">
<div class="title">{{ examInfo.name }}</div>
......@@ -12,7 +12,7 @@
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="left">
<div class="left scroll" ref="wrapper">
<question
v-if="Object.keys(questionParams.question).length"
:contentHeight="contentHeight"
......@@ -21,9 +21,27 @@
@isSign="isSign"
></question>
</div>
<div class="right">
<div class="right scroll" ref="wrapper">
<answer-card :questionParams="questionParams" :changeTime="changeTime" :info="sInfo.info"></answer-card>
</div>
<ul class="flag-tips">
<li>
<div class="circle1"></div>
<div class="txt">已答</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">未答</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">当前</div>
</li>
<li>
<div class="circle4"></div>
<div class="txt">标记</div>
</li>
</ul>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
......@@ -61,6 +79,7 @@ import action from '@action'
import answerCard from '../../components/exam/answerCard.vue'
import question from '../../components/exam/question.vue'
import dialogComponent from '../../components/exam/dialogComponent.vue'
import BScroll from 'better-scroll'
export default {
metaInfo() {
return {
......@@ -105,11 +124,8 @@ export default {
window.onresize = () => {
this.countHeight()
}
document.body.addEventListener('touchmove', function (evt) {
if (!evt._isScroller) {
evt.preventDefault()
}
})
const wrapper = this.$refs.wrapper
new BScroll(wrapper)
},
methods: {
sendExamInfo(status) {
......@@ -383,11 +399,11 @@ export default {
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
overflow-y: hidden;
// scrollbar-width: none;
// &::-webkit-scrollbar {
// display: none;
// }
}
}
.foot {
......@@ -465,4 +481,61 @@ export default {
}
}
}
.flag-tips {
width: 260px;
position: fixed;
bottom: 60px;
right: 0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li {
.circle1 {
width: 24px;
height: 24px;
background: #999;
border: 1px solid #999;
border-radius: 50%;
}
.circle2 {
width: 24px;
height: 24px;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle3 {
width: 24px;
height: 24px;
border: 2px solid #0fc118;
background: rgba(15, 193, 24, 0.1);
border-radius: 50%;
}
.circle4 {
position: relative;
width: 24px;
height: 24px;
border: 1px solid #cccccc;
border-radius: 50%;
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #c01540;
border-radius: 50%;
}
}
.txt {
margin-top: 5px;
font-size: 12px;
color: #cccccc;
line-height: 17px;
}
}
}
</style>
......@@ -22,7 +22,6 @@
/>
<input
type="text"
@click="fullScreen"
placeholder="请输入准考证号"
readonly="readonly"
class="prohibit"
......
......@@ -11,7 +11,6 @@ body {
* {
font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
touch-action: pan-y;
}
/* Extra small devices (portrait phones, less than 576px) */
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论