pbl-teacher-table/src/components/pages/test/add/components/file/file.vue

<template>
    <div class="c_box">
        <div class="mask"></div>
        <!-- <div v-if="!cJson">暂未设置题目</div> -->
        <div class="choices" v-if="!cJson">
            <div class="binfo_input">
                <div><span>填写者上传区</span></div>
            </div>
        </div>
        <div v-else class="choice_box">
            <!-- <div class="title"><div>{{ `（${option[cJson.type].name}）` }}</div><div v-html="cJson.title"></div></div> -->
            <div class="title" style="display: flex;">
                <span style="min-width:fit-content">{{  `（${option[cJson.type].name}）` }}</span>
                <span>{{cJson.title }}</span>
                <span style="color: #efa030;min-width:fit-content" v-if="cJson.score">（{{ cJson.score ? '分值：' + cJson.score + '分' : '' }}）</span>
                <!-- </div><div v-html="cJson.title"></div> -->
            </div>
            <div class="detail" v-if="cJson.detail">{{ cJson.detail }}</div>
            <div class="choices">
                <div class="binfo_input">
                    <div><span>填写者上传区</span></div>
                </div>
                <!-- <textarea readonly rows="2" class="binfo_input binfo_textarea" cols
                    placeholder=""></textarea> -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        cJson: {
            type: Object,
        },
    },
    data() {
        return {
            option: {
                1: { name: '附件' },
                // 2: { name: '多选题' }
            }
        }
    },
}
</script>

<style scoped>
@import '../../global_styles.css';



.choice_box>.detail {
    width: 100%;
    word-break: break-all;
    color: rgb(136, 139, 146);
    margin: 10px 0 0;
}

.choice_box>.choices {
    margin-top: 10px;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 10px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 5px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: 'Microsoft YaHei';
    min-height: 120px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #e0e0e0;
}

.binfo_input>div {
    border: 1.5px dashed #dfdfdf;
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(249, 250, 251);
    color: rgb(124, 124, 124);
    border-radius: 5px;
}</style>