pbl-student-table/src/components/checkEnglishVoice/component/testRole.vue

<template>
    <div class="d_box" v-loading="isloading">
        <div class="dialog" v-for="(item, index) in answerArray" :key="index" :class="{ dialog_right: item.isY }">
            <div class="d_img">
                <img :src="item.img ? item.img : require('../../../assets/icon/englishVoice/icon_portal.png')" alt="">
            </div>
            <div class="d_content">
                <div class="d_name" v-if="item.name">{{ item.name }}</div>
                <div class="d_voice" v-if="item.voice">
                    <mini-audio :audio-source="item.voice" class="audio_class"></mini-audio>
                </div>
                <div :class="{d_log: !item.isY, d_log2: item.isY}" v-if="item.content">{{ item.content }}</div>
            </div>
        </div>
        <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
                src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
    </div>
</template>
    
<script>
export default {
    components: {
    },
    props: {
        checkJson: {
            type: Object,
        }
    },
    data() {
        return {
            json: [],
            answerArray: [],
            isRecord: false,
            isPlayerRecord: false,
            isloading: false,
        };
    },
    methods: {
        setVoiceJson(val) {
            let a = JSON.parse(JSON.stringify(val));
            // this.json = a;
            this.answerArray = a
            // this.answerArray.push(
            //     {
            //         isY: false,
            //         content: a.content3,
            //         name: a.content,
            //         img: a.img
            //     }
            // )

        },
    },
    watch: {
        checkJson: {
            handler: function (newVal, oldVal) {
                if (newVal) {
                    this.setVoiceJson(this.checkJson);
                }
            },
            deep: true
        }
    },

    mounted() {
        this.setVoiceJson(this.checkJson);
    }
};
</script>
    
<style scoped>
.d_box {
    width: 100%;
    height: 100%;
    /* background: #000; */
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.dialog_answer>img {
    height: 100%;
    margin-left: auto;
    cursor: pointer;
}


.dialog {
    display: flex;
}

.dialog+.dialog {
    margin-top: 15px;
}

.dialog_right {
    flex-direction: row-reverse;
}

.dialog>.d_img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}

.dialog>.d_img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dialog_right>.d_img {
    margin-right: 0;
    margin-left: 5px;
}

.dialog>.d_content {
    width: 100%;
}
.dialog_right>.d_content{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.dialog>.d_content>.d_name {
    color: #7C7C7C;
    font-size: 12px;
    margin-bottom: 5px;
}

.dialog_right>.d_content>.d_name {
    text-align: right;
}

.dialog>.d_content>.d_log {
    color: #000;
    font-size: 16px;
    background: #fff;
    width: 100%;
    max-width: 800px;
    border: 2px solid #e05d63;
    border-radius: 40px;
    line-height: 26px;
    padding: 20px 35px;
    box-sizing: border-box;
    position: relative;
}

.dialog>.d_content>.d_log::before{
    content: '';
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: absolute;
    border: 1px dashed #e05d63;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    border-radius: 30px;
    transform: translate(-50%, -50%);
}

.dialog>.d_content>.d_log2 {
    color: #000;
    font-size: 14px;
    background: #fff;
    width: 100%;
    max-width: 800px;
    border: 1px dashed #0f94ce;
    border-radius: 5px;
    line-height: 26px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    margin-top:10px;
}

.dialog>.d_content>.d_voice {
    width: 100%;
    max-width: 600px;
}

.audio_class {
    background: #3680fb !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.d_voice>>>.vueAudioBetter span:before {
    color: #fff;
}

.audio_class>>>.slider .process {
    background: #000;
}

.d_voice>>>.vueAudioBetter .iconfont:active {
    position: unset !important;
}
</style>