GCLS_Page_Book/src/components/dialogue/ImageRecordSenten.vue

<template>
    <!-- 根据短语和图片造句录音 -->
    <div>
        <div class="SelectCorrect">
            <div class="SelectCorrect-top">
                <img alt src="../../assets/qp/Ellipse 27.png">
                <img alt src="../../assets/qp/Ellipse 28.png">
                <img alt src="../../assets/qp/Ellipse 29.png">
            </div>
            <div class="SelectCorrect-main">
                <div :key="index" class="translate" v-for="(item,index) in option">
                    <div v-if="item.stemCn.length>0">
                        <div :key="indexs" v-for="(items,indexs) in item.stemCn">
                            <p
                                :class="bd.indexOf(item.stemPy[indexs]) != -1 ? 'pinyin_hidden' : 'spell'"
                            >{{item.stemPy[indexs]}}</p>
                            <p class="chinese">{{items}}</p>
                        </div>
                    </div>
                    <div class="img-box" v-else>
                        <!-- <img :src="item.img_url" @click="handleChildSrcList(item.img_url)"
                            class="img_url"
                            v-if="item.img_url && item.img_url.indexOf('http') > -1" /> -->
                        <el-image
                            :src="item.img_url"
                            fit="scale-down"
		                    :preview-src-list="[item.img_url]"
                            class="img_url"
                            v-if="item.img_url && item.img_url.indexOf('http') > -1"
                        >
                            <div slot="placeholder" class="image-slot">
                                <img src="../../assets/common/icon-imgloading.png" />
                            </div>
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
        <Soundrecord :queIndex="queIndex" :wavData="wavData" @handle-Wav="handleWav"/>
    </div>
</template>

<script>
import Soundrecord from "../../components/common/Soundrecord";
export default {
    name: 'listenAndLearn',
    components: {
        Soundrecord
    },
    props: [
        "cur",
        "getAnswer",
        "queIndex",
        "answer",
        "uiType",
        "watchIndex",
        "handleChildSrcList"
    ],
    data () {
        return {
            wavData: null,
            option: [],
            bd: [
                "，",
                ",",
                "。",
                ".",
                "！",
                "？",
                "：",
                "；",
                "（",
                "）",
                "【",
                "】",
                "｛",
                "｝",
                "‘",
                "“",
                "’",
                "”",
                "、",
                "、",
                "《",
                "》",
                "…",
                "·",
                "—",
                "~"
            ],
            previewSrcList: []
        };
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                if (val) {
                    this.handleData()
                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    mounted () {

    },
    methods: {
        handleWav (data) {
            this.userAnswer = []
            this.userAnswer.push(data)
            this.cur.Bookanswer = this.userAnswer
        },
        // 初始化数据
        handleData () {
            this.previewSrcList = []
            this.option = this.cur.stem
            this.option.forEach((item) => {
                item.stemCn = item.con.split("")
                item.stemPy = item.pinyin.split(" ")
                if (item.img_url) this.previewSrcList.push(item.img_url)
            })
            if (this.cur.Bookanswer) {
                this.wavData = this.cur.Bookanswer[0]
            } else {
                this.wavData = null
            }
        },
        // 判断对错
        practiceJudge () {
            if(this.cur.Bookanswer){
                return true
            }else{
               return false 
            }
        }
    },
    created () {
        this.handleData()

    },

};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.SelectCorrect {
    width: 1200px;
    height: 564px;
    margin: 52px auto 0 auto;
    background: #fff;
    box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
    border-radius: 24px;
    .SelectCorrect-top {
        width: 100%;
        height: 60px;
        background: rgba(255, 214, 107, 0.3);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        display: flex;
        align-items: center;
        > img {
            margin-left: 20px;
            width: 24px;
        }
    }
    .SelectCorrect-main {
        height: 504px;
        overflow: auto;
        background: #fff;
        padding: 72px 48px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: wrap;
        &::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .translate {
            padding: 12px;
            > div {
                margin-left: 5px;
                align-items: center;
                justify-content: center;
                display: flex;
                padding: 7px 16px 0 16px;
                background: #fff8ed;
                border-radius: 24px;
                min-width: 252px;
                min-height: 156px;
            }
            .img-box {
                height: 156px;
                width: 252px;
                .img_url {
                    width: 100%;
                    height: 100%;
                    font-size: 0;
                    .image-slot {
                        width: 100%;
                        height: 100%;
                        > img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .spell {
                font-family: GB-PINYINOK-B;
                font-style: normal;
                font-weight: normal;
                font-size: 24px;
                line-height: 1.5;
                color: #000;
                margin: 0 2px;
                text-align: center;
            }
            .chinese {
                font-family: 'FZJCGFKTK';
                font-style: normal;
                font-weight: normal;
                font-size: 48px;
                line-height: 1.5;
                color: #000;
                text-align: center;
            }
            // img {
            //     width: 150px;
            // }
        }
    }
}

.Book-record {
    width: 444px;
    margin: 72px auto 0 auto;
}
.questionMiddle {
    .SelectCorrect {
        width: 800px;
        height: 376px;
        margin: 28px auto 0 auto;
        box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
        border-radius: 16px;
        .SelectCorrect-top {
            height: 40px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            > img {
                margin-left: 13px;
                width: 16px;
            }
        }
        .SelectCorrect-main {
            height: 336px;
            padding: 48px 32px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            .translate {
                padding: 8px;
                > div {
                    margin-left: 4px;
                    padding: 5px 10px 0 10px;
                    border-radius: 16px;
                    min-width: 168px;
                    min-height: 104px;
                }
                .img-box {
                    height: 104px;
                    width: 168px;
                }
                .spell {
                    font-size: 16px;
                    margin: 0 2px;
                }
                .chinese {
                    font-size: 32px;
                }
                // img {
                //     width: 100px;
                // }
            }
        }
    }

    .Book-record {
        width: 296px;
        margin: 48px auto 0 auto;
    }
}
.questionSmall {
    .SelectCorrect {
        width: 600px;
        height: 282px;
        margin: 16px auto 0 auto;
        box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
        border-radius: 12px;
        .SelectCorrect-top {
            height: 30px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            > img {
                margin-left: 10px;
                width: 12px;
            }
        }
        .SelectCorrect-main {
            height: 252px;
            padding: 36px 24px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            .translate {
                padding: 6px;
                > div {
                    margin-left: 2px;
                    padding: 3px 8px 0 8px;
                    border-radius: 12px;
                    min-width: 126px;
                    min-height: 78px;
                }
                .img-box {
                    height: 78px;
                    width: 126px;
                }
                .spell {
                    font-size: 12px;
                    margin: 0 1px;
                }
                .chinese {
                    font-size: 24px;
                }
                // img {
                //     width: 75px;
                // }
            }
        }
    }

    .Book-record {
        width: 222px;
        margin: 36px auto 0 auto;
    }
}
</style>