pbl-teacher-table/src/components/pages/testStudent/view/component/time.vue

<template>
    <div class="c_box">
        <div class="choice_box">
            <div class="title" style="display: flex;align-items: center;">
                <span class="g_t_index" 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: #00000066;margin-top: 5px;">
            </div>
            <div style="margin-top: 10px;" class="datePicker">
                <el-date-picker
                    :readonly="checktype == 2"
                    v-model="checkJson.answer2"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy年MM月dd日"
                    placeholder="年/月/日 （请选择日期）">
                </el-date-picker>
            </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));
        },

    },
    mounted() {
        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined

    }
}
</script>

<style scoped>
.c_box {
    width: 100%;
    position: relative;
    overflow: unset;
		padding-left: 45px;
}

/* .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;
}

.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);
}

.datePicker>>>.el-date-editor{
	width: 100%;
}

.datePicker>>>.el-input__inner{
	border: none;
	outline: none;
	font-size: 16px;
	border-bottom: solid 1px #E7E7E7;
}


</style>