|
|
@@ -10,72 +10,70 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <img class="cq_image" v-if="work.testJson[showIndex] && work.testJson[showIndex].timuList && work.testJson[showIndex].timuList.length>0" :src="work.testJson[showIndex].timuList[0].src" @click="$hevueImgPreview(work.testJson[showIndex].timuList[0].src)">
|
|
|
+ <img class="cq_image"
|
|
|
+ v-if="work.testJson[showIndex] && work.testJson[showIndex].timuList && work.testJson[showIndex].timuList.length > 0"
|
|
|
+ :src="work.testJson[showIndex].timuList[0].src"
|
|
|
+ @click="$hevueImgPreview(work.testJson[showIndex].timuList[0].src)">
|
|
|
|
|
|
<div class="cq_type" v-if="work.testJson[showIndex]">
|
|
|
- {{lang.ssChoice}}
|
|
|
+ {{ lang.ssChoice }}
|
|
|
<!-- {{ work.testJson[showIndex].type == '1' ? lang.SingleChoice : lang.MultipleChoice }} -->
|
|
|
<!-- <span v-if="work.testJson.length>1">（{{showIndex+1}}/{{work.testJson.length}}）</span> -->
|
|
|
|
|
|
</div>
|
|
|
<div class="cq_checkListArea">
|
|
|
- <div
|
|
|
- class="cq_ca_type1"
|
|
|
- v-if="
|
|
|
- work.testJson[showIndex] && work.testJson[showIndex].showType == '1'
|
|
|
- "
|
|
|
- >
|
|
|
- <div
|
|
|
- class="cq_ca_t1_item"
|
|
|
- :class="{
|
|
|
- cq_ca_t1_item_active:
|
|
|
- work.testJson[showIndex].type == '1'
|
|
|
- ? work.testJson[showIndex].userAnswer === index
|
|
|
- : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
- }"
|
|
|
- v-for="(item, index) in work.testJson[showIndex].checkList"
|
|
|
- :key="showIndex + '_' + index"
|
|
|
- @click="choiceAnswer(index)"
|
|
|
- >
|
|
|
+ <div class="cq_ca_type1" v-if="
|
|
|
+ work.testJson[showIndex] && work.testJson[showIndex].showType == '1'
|
|
|
+ ">
|
|
|
+ <div class="cq_ca_t1_item" :class="{
|
|
|
+ cq_ca_t1_item_active:
|
|
|
+ work.testJson[showIndex].type == '1'
|
|
|
+ ? work.testJson[showIndex].userAnswer === index
|
|
|
+ : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
+ }" v-for="(item, index) in work.testJson[showIndex].checkList" :key="showIndex + '_' + index"
|
|
|
+ @click="choiceAnswer(index)">
|
|
|
<div>
|
|
|
<span>{{ options[index] }}</span>
|
|
|
</div>
|
|
|
- <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
+ <img v-if="item.imgType && item.imgType == '1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
<span v-else>{{ item }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="cq_ca_type2" v-if="
|
|
|
- work.testJson[showIndex] && work.testJson[showIndex].showType == '2'
|
|
|
- ">
|
|
|
- <div
|
|
|
- class="cq_ca_t2_item"
|
|
|
- :class="{
|
|
|
- cq_ca_t2_item_active:
|
|
|
- work.testJson[showIndex].type == '1'
|
|
|
- ? work.testJson[showIndex].userAnswer === index
|
|
|
- : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
- }"
|
|
|
- v-for="(item, index) in work.testJson[showIndex].checkList"
|
|
|
- :key="showIndex + '_' + index"
|
|
|
- @click="choiceAnswer(index)"
|
|
|
- >
|
|
|
+ work.testJson[showIndex] && work.testJson[showIndex].showType == '2'
|
|
|
+ ">
|
|
|
+ <div class="cq_ca_t2_item" :class="{
|
|
|
+ cq_ca_t2_item_active:
|
|
|
+ work.testJson[showIndex].type == '1'
|
|
|
+ ? work.testJson[showIndex].userAnswer === index
|
|
|
+ : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
+ }" v-for="(item, index) in work.testJson[showIndex].checkList" :key="showIndex + '_' + index"
|
|
|
+ @click="choiceAnswer(index)">
|
|
|
<div>
|
|
|
<span>{{ options[index] }}</span>
|
|
|
</div>
|
|
|
- <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
+ <img v-if="item.imgType && item.imgType == '1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
<span v-else>{{ item }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="cq_changeBtn" v-if="work.testJson.length>1">
|
|
|
- <div :class="{cq_cb_disabled: showIndex == 0}" @click="changeQuestion('prev')">
|
|
|
- <svg style="transform: rotate(-90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200"><path d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z" fill=""></path></svg>
|
|
|
+ <div class="cq_changeBtn" v-if="work.testJson.length > 1">
|
|
|
+ <div :class="{ cq_cb_disabled: showIndex == 0 }" @click="changeQuestion('prev')">
|
|
|
+ <svg style="transform: rotate(-90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
|
|
|
+ <path
|
|
|
+ d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z"
|
|
|
+ fill=""></path>
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
- <span>{{ showIndex+1 }}/{{work.testJson.length}}</span>
|
|
|
- <div :class="{cq_cb_disabled: showIndex == work.testJson.length - 1}" @click="changeQuestion('next')">
|
|
|
- <svg style="transform: rotate(90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200"><path d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z" fill=""></path></svg>
|
|
|
+ <span>{{ showIndex + 1 }}/{{ work.testJson.length }}</span>
|
|
|
+ <div :class="{ cq_cb_disabled: showIndex == work.testJson.length - 1 }" @click="changeQuestion('next')">
|
|
|
+ <svg style="transform: rotate(90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
|
|
|
+ <path
|
|
|
+ d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z"
|
|
|
+ fill=""></path>
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
<!-- <span :class="{cq_cba_disabled: showIndex == 0}" @click="changeQuestion('prev')">{{ lang.ssPrevQ }}</span>
|
|
|
<span :class="{cq_cba_disabled: showIndex == work.testJson.length - 1}" @click="changeQuestion('next')">{{ lang.ssNextQ }}</span> -->
|
|
|
@@ -138,6 +136,25 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
deep: true
|
|
|
+ },
|
|
|
+ workData: {
|
|
|
+ handler(newValue) {
|
|
|
+ this.work = JSON.parse(JSON.stringify(newValue.json));
|
|
|
+ this.work.testJson.forEach(i => {
|
|
|
+ let maxLength = i.checkList.reduce((pre, cur) => {
|
|
|
+ if (pre < cur.length) return cur.length;
|
|
|
+ return pre;
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ if (maxLength <= 6 && i.checkList.length <= 4) {
|
|
|
+ i.showType = "1";
|
|
|
+ } else {
|
|
|
+ i.showType = "2";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -149,7 +166,7 @@ export default {
|
|
|
if (this.work.testJson[this.showIndex].type == "1") {
|
|
|
this.work.testJson[this.showIndex].userAnswer = index;
|
|
|
} else {
|
|
|
- if(typeof this.work.testJson[this.showIndex].userAnswer !== 'object') this.work.testJson[this.showIndex].userAnswer = [];
|
|
|
+ if (typeof this.work.testJson[this.showIndex].userAnswer !== 'object') this.work.testJson[this.showIndex].userAnswer = [];
|
|
|
if (this.work.testJson[this.showIndex].userAnswer.includes(index)) {
|
|
|
this.work.testJson[this.showIndex].userAnswer = this.work.testJson[
|
|
|
this.showIndex
|
|
|
@@ -160,38 +177,24 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//切换题目
|
|
|
- changeQuestion(type){
|
|
|
- if(type == 'prev'){
|
|
|
- if(this.showIndex == 0) return;
|
|
|
+ changeQuestion(type) {
|
|
|
+ if (type == 'prev') {
|
|
|
+ if (this.showIndex == 0) return;
|
|
|
this.showIndex--;
|
|
|
- }else{
|
|
|
- if(this.showIndex == this.work.testJson.length - 1) return;
|
|
|
+ } else {
|
|
|
+ if (this.showIndex == this.work.testJson.length - 1) return;
|
|
|
this.showIndex++;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.work = JSON.parse(JSON.stringify(this.workData.json));
|
|
|
- this.work.testJson.forEach(i => {
|
|
|
- let maxLength = i.checkList.reduce((pre, cur) => {
|
|
|
- if (pre < cur.length) return cur.length;
|
|
|
- return pre;
|
|
|
- }, 0);
|
|
|
-
|
|
|
- if (maxLength <= 6 && i.checkList.length <= 4) {
|
|
|
- i.showType = "1";
|
|
|
- } else {
|
|
|
- i.showType = "2";
|
|
|
- }
|
|
|
- });
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
-
|
|
|
.choiceQuestion {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -200,7 +203,7 @@ export default {
|
|
|
/* justify-content: center; */
|
|
|
flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 70px 10%;
|
|
|
+ padding: 70px 5%;
|
|
|
overflow: auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
@@ -209,11 +212,11 @@ export default {
|
|
|
font-size: 2rem;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
- width: 70%;
|
|
|
+ max-width: 95%;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
-.cq_image{
|
|
|
+.cq_image {
|
|
|
width: auto;
|
|
|
height: 300px;
|
|
|
object-fit: cover;
|
|
|
@@ -232,7 +235,7 @@ export default {
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtnArea > span{
|
|
|
+.cq_changeBtnArea>span {
|
|
|
padding: .5rem 1rem;
|
|
|
background: #3681FC;
|
|
|
border-radius: 8px;
|
|
|
@@ -249,11 +252,11 @@ export default {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtnArea > span:hover{
|
|
|
+.cq_changeBtnArea>span:hover {
|
|
|
background: #5893FF;
|
|
|
}
|
|
|
|
|
|
-.cq_cba_disabled{
|
|
|
+.cq_cba_disabled {
|
|
|
background: #D9D9D9 !important;
|
|
|
cursor: not-allowed !important;
|
|
|
}
|
|
|
@@ -279,7 +282,8 @@ export default {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
grid-template-rows: repeat(2, 1fr);
|
|
|
- gap: 30px; /* 可根据需要调整间距 */
|
|
|
+ gap: 30px;
|
|
|
+ /* 可根据需要调整间距 */
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin: 40px 20px;
|
|
|
@@ -312,27 +316,27 @@ export default {
|
|
|
box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t1_item > div {
|
|
|
+.cq_ca_t1_item>div {
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t1_item>img{
|
|
|
+.cq_ca_t1_item>img {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
cursor: pointer;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t1_item > div > span {
|
|
|
+.cq_ca_t1_item>div>span {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
color: #fff;
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t1_item > div::after {
|
|
|
+.cq_ca_t1_item>div::after {
|
|
|
content: "";
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
@@ -342,11 +346,12 @@ export default {
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- z-index: 1; /* after在内容下方 */
|
|
|
+ z-index: 1;
|
|
|
+ /* after在内容下方 */
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_type2{
|
|
|
+.cq_ca_type2 {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
display: flex;
|
|
|
@@ -355,7 +360,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item{
|
|
|
+.cq_ca_t2_item {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
min-height: 55px;
|
|
|
@@ -377,18 +382,18 @@ export default {
|
|
|
overflow-y: hidden;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item>div{
|
|
|
+.cq_ca_t2_item>div {
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item>span{
|
|
|
+.cq_ca_t2_item>span {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item>img{
|
|
|
+.cq_ca_t2_item>img {
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
cursor: pointer;
|
|
|
@@ -400,19 +405,20 @@ export default {
|
|
|
box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item > div {
|
|
|
+.cq_ca_t2_item>div {
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
-.cq_ca_t2_item > div > span {
|
|
|
+
|
|
|
+.cq_ca_t2_item>div>span {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
color: #fff;
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
-.cq_ca_t2_item > div::after {
|
|
|
+.cq_ca_t2_item>div::after {
|
|
|
content: "";
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
@@ -422,18 +428,19 @@ export default {
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- z-index: 1; /* after在内容下方 */
|
|
|
+ z-index: 1;
|
|
|
+ /* after在内容下方 */
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtn{
|
|
|
+.cq_changeBtn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 1.5rem;
|
|
|
margin-top: 2rem;
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtn>div{
|
|
|
+.cq_changeBtn>div {
|
|
|
padding: .6rem;
|
|
|
border-radius: .5rem;
|
|
|
border: solid 2px #F6C82B;
|
|
|
@@ -444,22 +451,22 @@ export default {
|
|
|
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtn>span{
|
|
|
+.cq_changeBtn>span {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
-.cq_changeBtn>div>svg{
|
|
|
+.cq_changeBtn>div>svg {
|
|
|
fill: #F6C82D;
|
|
|
width: 1rem;
|
|
|
height: 1rem;
|
|
|
}
|
|
|
|
|
|
-.cq_cb_disabled{
|
|
|
+.cq_cb_disabled {
|
|
|
cursor: not-allowed !important;
|
|
|
border-color: #FEF8E9 !important;
|
|
|
}
|
|
|
|
|
|
-.cq_cb_disabled>svg{
|
|
|
+.cq_cb_disabled>svg {
|
|
|
fill: #A3A3A3 !important;
|
|
|
}
|
|
|
</style>
|
SanHQin