Skip to content

C
center-exam-show
提交 c5f4f375 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

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