bigDataStudent/src/views/targetImprove/practice/practiceResults/studentAnswerDetail.vue

<template>
    <div class="stu_answer_detail">
        <div class="title">【作 答】</div>
        <div class="desc">
            <!-- v-model="rightAnswerValue"  -->
            <el-radio-group 
                v-if="answerType == 'online'"
                @change="rightAnswerValue = defaultRightAnswerValue"
            >
              <el-radio 
                v-for="radioItem in questionOption" 
                    :key="radioItem.value" 
                    :label="radioItem.value"
                    :class="{ 
                         'is-correct-radio is-checked':  rightAnswerValue  === radioItem.value, 
                        'is-wrong-radio is-checked': studentAnswerVal===radioItem.value && rightAnswerValue !== studentAnswerVal
                    }"
                >{{ radioItem.label }}</el-radio>
            </el-radio-group>


            <ImageJumpPreview 
                :fileMessage="fileMessage" height="400px"
                :filePadding="{padding:`0 ${imgPreviewPadding}`}"
                :navBarWidth="{width:`calc(100% - ${imgPreviewPadding} + 20px)`}"
                :navBarLeft="{left: `calc(${imgPreviewPadding} / 2 - 10px)`}"
                :navTotalPage="5"
                v-model:currentNavPage="currentNavPage"
            ></ImageJumpPreview>


        </div>
    </div>
</template>   


<script>
import ImageJumpPreview from '../../components/ImageJumpPreview.vue'

export default ({
    name:'StudentAnswerDetail',
    components: {
        ImageJumpPreview,
    },
    data(){
        return {
            answerType:'photo',  //答题方式  //线上答题和上传图片 online \ photo
            studentAnswerVal:'D',
            rightAnswerValue:'B',
            defaultRightAnswerValue:'B',
            questionOption:[
                {
                    label:'A',
                    value:'A'
                },
                {
                    label:'B',
                    value:'B'
                },
                {
                    label:'C',
                    value:'C'
                },
                {
                    label:'D',
                    value:'D'
                },
            ],
            fileMessage:{
                name:'24-b5fa-0ddc8797a6c0.png',
                url:'https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260805_50007/05171802_60fcf6dd-4276-4d24-b5fa-0ddc8797a6c0.png'
            },
            imgPreviewPadding:'70px',
            currentNavPage:1

        }
    },
    methods: {},
    computed:{},
    mounted() {
    },
    
})

</script>


<style lang="scss" scoped>
 .stu_answer_detail{
    padding: 16px;
    display: flex;
    gap:10px;
    .title {
        text-align: right;
        width: 70px;
        flex-shrink: 0;
        font-weight: 600;
    }
    .desc{
        flex: 1 1;
        line-height: 24px;
    }

    
    // 2. 错误选项样式（红色）
    ::v-deep .is-wrong-radio {
            position: relative !important;
        // 圆圈边框
        .el-radio__inner {
            border-color: #F56C6C !important;
        }
        // 选中状态（圆点填充）
        &.is-checked .el-radio__inner {
            position: relative !important;
            background-color: none;
            &::after{
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    background-color: #F56C6C !important;
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) scale(1) !important;
                    transition: transform 0.15s ease-in;
            }
        }
    }

    // 正确选项样式 蓝色
    ::v-deep .is-correct-radio {
            position: relative !important;
        // 圆圈边框
        .el-radio__inner {
            border-color: #2E64FA !important;
        }
        // 选中状态（圆点填充）
        &.is-checked .el-radio__inner {
            position: relative !important;
            background-color: none;

            &::after{
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    background-color: #2E64FA!important;
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) scale(1) !important;
                    transition: transform 0.15s ease-in;
            }
        }
    }
}
</style>