|
@@ -0,0 +1,258 @@
|
|
|
+<template>
|
|
|
+ <div class="c_box">
|
|
|
+ <!-- <div class="mask"></div> -->
|
|
|
+ <div v-if="!checkJson">暂未设置题目</div>
|
|
|
+ <div v-else class="choice_box">
|
|
|
+ <!-- <div class="title"><div>{{ `(${option[checkJson.type].name})` }}</div><div v-html="checkJson.title"></div></div> -->
|
|
|
+ <div class="c_title">
|
|
|
+ <div class="title">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <!-- + `(${option[checkJson.type].name})` -->
|
|
|
+ <span class="g_t_index" style="min-width: fit-content;">{{ tindex + 1}}</span>
|
|
|
+ <span>{{ checkJson.title }}</span>
|
|
|
+ <!-- <span style="min-width: fit-content;color: #efa030;">{{ checkJson.score ? '(分值:'+checkJson.score+'分)' : '' }}</span> -->
|
|
|
+ </div>
|
|
|
+ <!-- <span style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;">
|
|
|
+ <span style="min-width: fit-content;" v-if="!checkJson.answer && see">暂无参考答案</span>
|
|
|
+ <span style="min-width: fit-content;display: flex;" v-else-if="see">
|
|
|
+ <span style="min-width: fit-content;">参考答案:</span>
|
|
|
+ <span>{{ checkJson.answer }}</span>
|
|
|
+ </span>
|
|
|
+ </span> -->
|
|
|
+ <!-- </div><div v-html="checkJson.title"></div> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="p_box" v-if="isTeacher == 1 && checkJson.score">
|
|
|
+ <el-input v-model="checkJson.score2" class="c_input" @change="numberPan" placeholder="请输入得分"></el-input><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
|
|
|
+ </div>
|
|
|
+ <div class="p_box" v-if="isTeacher == 2 && checkJson.score2">
|
|
|
+ <span>{{ checkJson.score2 }}分</span><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
|
|
|
+ style="color: #00000066;margin-top: 5px;"></div>
|
|
|
+ <div class="choices">
|
|
|
+ <el-input-number :controls="false" v-model="checkJson.answer2" :precision="numberTypePrecision" :placeholder="numberTypePlaceholder[checkJson.type]"></el-input-number>
|
|
|
+ <span v-if="checkJson.type=='4'">%</span>
|
|
|
+ <!-- <textarea :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer"
|
|
|
+ placeholder=""></textarea> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ tindex:{
|
|
|
+ type: Number
|
|
|
+ },
|
|
|
+ cJson: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ checktype: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ see:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ isTeacher: {
|
|
|
+ type: Number,
|
|
|
+ default: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: {
|
|
|
+ 1: { name: '字数' },
|
|
|
+ },
|
|
|
+ userid:this.$route.query.userid,
|
|
|
+ checkJson: undefined,
|
|
|
+ numberTypePlaceholder:{
|
|
|
+ "1":"请输入整数",
|
|
|
+ "2":"请输入数字并保留一位小数",
|
|
|
+ "3":"请输入数字并保留两位小数",
|
|
|
+ "4":"请输入百分比"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ checkJson: {
|
|
|
+ handler(newValue) {
|
|
|
+ this.$emit('update:cJson', newValue)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ cJson: {
|
|
|
+ handler(newValue) {
|
|
|
+ if(newValue.answer2 !== this.checkJson.answer2){
|
|
|
+ this.checkJson = this.depthCopy(newValue)
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ numberTypePrecision(){
|
|
|
+ let _result = 0;
|
|
|
+ if(this.checkJson.type=='1'){
|
|
|
+ _result = 0
|
|
|
+ }else if(this.checkJson.type=='2'){
|
|
|
+ _result = 1
|
|
|
+ }else if(this.checkJson.type=='3'){
|
|
|
+ _result = 2
|
|
|
+ }else if(this.checkJson.type=='4'){
|
|
|
+ _result = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ return _result
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ depthCopy(s) {
|
|
|
+ return JSON.parse(JSON.stringify(s));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
|
|
|
+ if(this.checkJson.answer2){
|
|
|
+ setTimeout(() => {
|
|
|
+ this.checkJson.answer2 += "*0*%*";
|
|
|
+ setTimeout(() => {
|
|
|
+ this.checkJson.answer2 = this.checkJson.answer2.replaceAll("*0*%*", "");
|
|
|
+ }, 0);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.c_box {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.mask {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.choice_box {
|
|
|
+ white-space: pre-line;
|
|
|
+}
|
|
|
+
|
|
|
+.choice_box> .c_title .title {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.choice_box> .c_title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.choice_box> .c_title .p_box{
|
|
|
+ margin-left: 5px;
|
|
|
+ min-width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.choice_box>.choices {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.choices>span{
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 12px 14px;
|
|
|
+ display: block;
|
|
|
+ min-width: 0;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ resize: none;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ min-height: 48px;
|
|
|
+ /* border: 1px solid #3682fc00; */
|
|
|
+ border: 1.5px solid #CAD1DC;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_textarea {
|
|
|
+ border: 1.5px solid #CAD1DC;
|
|
|
+ font-size: 16px;
|
|
|
+ resize: none;
|
|
|
+ /* background: #f6f6f6; */
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input:focus-visible {
|
|
|
+ border: 1.5px solid #3681FC !important;
|
|
|
+}
|
|
|
+
|
|
|
+.c_input {
|
|
|
+ width: 90px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_input >>> .el-input__inner{
|
|
|
+ padding: 0 5px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.g_t_index{
|
|
|
+color: #3681FC;
|
|
|
+font-size: 28px;
|
|
|
+font-weight: bold;
|
|
|
+position: relative;
|
|
|
+margin-right: 30px;
|
|
|
+margin-left: -40px;
|
|
|
+}
|
|
|
+
|
|
|
+.g_t_index+span{
|
|
|
+font-weight: bold;
|
|
|
+font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.g_t_index::after{
|
|
|
+content: "";
|
|
|
+width: 18px;
|
|
|
+height: 2px;
|
|
|
+position: absolute;
|
|
|
+right: -18px;
|
|
|
+top: 50%;
|
|
|
+transform: translateY(-50%);
|
|
|
+background: #3681FC;
|
|
|
+}
|
|
|
+
|
|
|
+.g_t_index::before{
|
|
|
+content: "";
|
|
|
+width: 6px;
|
|
|
+height: 6px;
|
|
|
+border-right: 2px solid #3681FC;
|
|
|
+border-top: 2px solid #3681FC;
|
|
|
+position: absolute;
|
|
|
+right: -15px;
|
|
|
+top: 50%;
|
|
|
+transform: rotate(45deg) translateY(-5px);
|
|
|
+}
|
|
|
+
|
|
|
+.choices>textarea{
|
|
|
+border-color: #E7E7E7;
|
|
|
+border-radius: 8px;
|
|
|
+}
|
|
|
+</style>
|