pbl-teacher-table/src/components/pages/test/add/edit/check/eva.vue

<template>
    <div class="c_box">
        <div class="choice_box">
            <div class="title" style="display: flex;">
                <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
                <span>{{ checkJson.title }}</span>
            </div>
            <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
                style="color: #00000099;margin-top: 5px;">
            </div>
            <div class="choices">
                <div class="score" :class="{active: (checkJson.answer2 || checkJson.answer2 === 0) && (checkJson.answer2 > index || checkJson.answer2 === index)}" @click="score(index)" v-for="(item, index) in (parseInt(checkJson.big) - parseInt(checkJson.small) + 1)" :key="index">{{ parseInt(checkJson.small) + index }}</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        tindex: {
            type: Number
        },
        cJson: {
            type: Object,
        },
        checktype: {
            type: Number,
            default: 1
        },
        see: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            option: {
                1: { name: '附件' },
            },
            userid: this.$route.query.userid,
            checkJson: undefined,
            progress: 0,
            isFinishSize: 0,
            proVisible: false,
            isAllSize: 0,
            wurl: "",
            isTong: false
        }
    },
    watch: {
        checkJson: {
            handler(newValue) {
                this.$emit('update:cJson', newValue)
            },
            deep: true
        },
    },
    methods: {
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        openFileBox() {
            this.dialogVisiblefile = true
        },
        score(index){
            if(this.checktype == '2'){
                return
            }
            this.checkJson.answer2 = index
        }
    },
    mounted() {
        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined

    }
}
</script>

<style scoped>
.c_box {
    width: 100%;
    position: relative;
}

/* .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
} */

.choice_box {
    white-space: pre-line;
}

.choice_box>.title {
    font-weight: bold;
    width: 100%;
    word-break: break-all;
}

.choice_box>.choices {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin: 10px auto 0;
}

.choices > .score{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px 10px 0;
    border-radius: 5px;
    background: #dee0e3;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.choices > .score.active{
    background: #65b1ff;
}

</style>