GCLS_Page_Book/src/components/dialogue/ReadArticle.vue

<template>
    <!-- 听录音 学生字 -->

    <div style="text-align:center;margin-top:48px;">
        <Audio :mp3="cur.stem[0].mp3_url"/>
        <div class="SelectCorrect" v-if="cur.stem[0].con||cur.stem[0].img_url">
            <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 class="dialog-maxHeight">
                    <div class="left-box">
                        <!-- <img
                            :src="cur.stem[0].img_url"
                            @click="handleChildSrcList(cur.stem[0].img_url)"
                            class="article-img"
                            v-if="cur.stem[0].img_url"
                        > -->
                        <el-image
                            :src="cur.stem[0].img_url"
                            class="article-img"
                            fit="scale-down"
                            :preview-src-list="[cur.stem[0].img_url]"
                            v-if="cur.stem[0].img_url && cur.stem[0].img_url.indexOf('http') > -1"
                        >
                            <div slot="placeholder" class="image-slot">
                                <img src="../../assets/common/icon-imgloading.png" />
                            </div>
                        </el-image>
                    </div>
                    <div class="right-box">
                        <div class="inner" v-if="cur.stem[0].con||cur.stem[0].english">
                            <template v-if="cur.stem[0].pinyin">
                                <div
                                    :key="indexs"
                                    style="padding-bottom:5px;"
                                    v-for="(items,indexs) in cur.stem[0].con"
                                >
                                    <p
                                        :class="bd.indexOf(cur.stem[0].pinyin.split(' ')[indexs]) != -1 ? 'pinyin_hidden' : 'spell'"
                                    >{{cur.stem[0].pinyin.split(" ")[indexs]}}</p>
                                    <p class="chinese">{{items}}</p>
                                </div>
                                <p class="english">{{cur.stem[0].english}}</p>
                            </template>
                            <template v-else>
                                <div
                                    style="padding-bottom:5px;"
                                >
                                    <p class="chinese" v-html="cur.stem[0].con"></p>
                                </div>
                                <p class="english" v-html="cur.stem[0].english"></p>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="learn-box">
            <li :key="index" v-for="(item,index) in cur.annotationChinese">
                <div v-if="item.con!==''||item.english!==''">
                    <!-- <span>
                        <Audio :mp3="item.mp3_url"/>
                    </span>
                    <div class="inner">
                        <div :key="indexs" v-for="(items,indexs) in item.con">
                            <p class="spell">{{item.pinyin.split(" ")[indexs]}}</p>
                            <p class="chinese">{{items}}</p>
                        </div>
                    </div>
                    <b>{{item.english}}</b>
                    <div @click="handlePrashow(item)" class="bg-box">
                        <img class="practice-icon" src="../../assets/common/dict-icon.png">
                    </div>-->
                    <p>{{item.pinyin}}</p>
                    <b>{{item.con}}</b>
                    <span>{{item.english}}</span>
                    <div class="operate-box">
                        <a v-if="item.mp3_url">
                            <AudioRed :mp3="item.mp3_url"/>
                        </a>
                        <a>
                            <img src="../../assets/common/icon-collect-red.png">
                        </a>
                        <a @click="handlePrashow(item)">
                            <img src="../../assets/common/icon-write-red.png">
                        </a>
                    </div>
                </div>
            </li>
        </ul>
        <div class="practiceBox" v-if="isPraShow">
            <Practice :changePraShow="changePraShow" :cur="practiceCon"/>
        </div>
        <div class="practiceBox" v-if="isPraShows">
            <Practicewords :changePraShow="changePraShow" :cur="practiceCon"/>
        </div>
    </div>
</template>

<script>
import Practice from "../../components/common/Practice";
import Practicewords from "../../components/common/Practicewords";
import AudioRed from "../../components/common/AudioRed";
import Audio from "../../components/common/Audio";
import VoicePlay from "../../components/common/VoicePlay";
export default {
    name: 'listenAndLearn',
    components: {
        Practice,
        Practicewords,
        AudioRed,
        VoicePlay,
        Audio
    },
    props: [
        "cur",
        "getAnswer",
        "queIndex",
        "answer",
        "uiType",
        "watchIndex",
        "handleChildSrcList"
    ],
    data () {
        return {
            isPraShow: false,
            isPraShows: false,
            option: [

            ], // 选项
            stemCn: [], // 题干 中文
            stemPy: [], // 题干 拼音
            languageArr: [
                '简单',
                '困难'
            ],
            lanactiveArr: [
                '简单'
            ],
            lanShow: false, // 语言分类按钮是否显示
            voiceSrc: require("../../assets/single/icon-voice.png"),
            voicePauseSrc: require("../../assets/single/icon-voice.png"),
            voicePlaySrc: require("../../assets/common/icon-voice-play.png"),
            practiceValue: null,
            practiceCon: null, // 练一练内容
            isShowCorrect: false, //上面对话内容是否显示
            bd: [
                "，",
                ",",
                "。",
                ".",
                "！",
                "？",
                "：",
                "；",
                "（",
                "）",
                "【",
                "】",
                "｛",
                "｝",
                "‘",
                "“",
                "’",
                "”",
                "、",
                "、",
                "《",
                "》",
                "…",
                "·",
                "—",
                "~"
            ],
            previewSrcList: []
        };
    },
    watch: {
        watchIndex: {
            handler: function (val, oldVal) {
                let _this = this;
                if (val) {
                    _this.handleData()

                }
            },
            // 深度观察监听
            deep: true,
        },
    },
    mounted () {

    },
    methods: {
        handleData () {
            if (this.cur.stem[0].img_url) this.previewSrcList = [this.cur.stem[0].img_url]
        },
        // 切换语言
        changeLan (item, index) {
            this.lanactiveArr = item
        },
        changePraShow () {
            this.isPraShow = false;
            this.isPraShows = false;
        },
        handlePrashow (item) {
            let obj = {
                stem: [
                    {
                        mp3_url: item.mp3_url,
                        pinyin: item.pinyin,
                        con: item.con
                    }
                ],
                playStorkes: true,
                learn_mode: '1'
            }
            this.practiceCon = obj
            if (item.con.length > 1) {
                this.isPraShows = true;
            } else {
                this.isPraShow = true;
            }

        },
        // 判断对错
        practiceJudge () {
            return true
        }
    },
    created () {
        this.handleData()
    },

};
</script>

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

.SelectCorrect {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    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 {
        background: #fff;
        height: 580px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        &::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    }
    .dialog-maxHeight {
        display: flex;
        justify-content: flex-start;
        max-height: 580px;
        .right-box {
            max-height: 560px;
            overflow: auto;
        }
        .inner {
            padding: 36px 48px;
            display: flex;
            align-items: center;
            flex-flow: wrap;
        }
    }
    .english {
        color: #2c2c2c;
        font-size: 24px;
        line-height: 24px;
        font-family: sourceR;
        margin-left: 5px;
        text-align: left;
        width: 100%;
    }
    .spell {
        font-family: 'GB-PINYINOK-B';
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        height: 24px;
        color: #000;
    }
    .chinese {
        font-family: 'FZJCGFKTK';
        font-style: normal;
        font-weight: normal;
        font-size: 36px;
        color: #000;
    }
    .pinyin_hidden {
        visibility: hidden;
    }
}
.learn-box {
    list-style: none;
    width: 1200px;
    max-height: 800px;
    overflow: auto;
    margin: 20px auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: wrap;
    li {
        margin: 12px;
        > div {
            width: 360px;
            height: 360px;
            background: #ffffff;
            box-shadow: 0px 6px 0px rgba(239, 167, 28, 0.4);
            border-radius: 24px;
            color: #2c2c2c;
            padding-top: 12px;
            > p {
                height: 60px;
                width: 100%;
                text-align: center;
                padding: 12px 30px;
                font-size: 24px;
                line-height: 1.5;
                font-family: 'GB-PINYINOK-B';
            }
            b {
                height: 108px;
                background: #fff2d1;
                font-size: 48px;
                line-height: 100%;
                text-align: center;
                display: block;
                font-weight: normal;
                padding: 30px 0;
                font-family: FZJCGFKTK;
            }
            span {
                height: 102px;
                display: flex;
                flex-flow: wrap;
                justify-content: center;
                padding: 24px 30px 6px 30px;
                font-size: 24px;
                line-height: 150%;
                word-break: keep-all;
            }
            .operate-box {
                display: flex;
                align-items: center;
                padding: 0 18px;
            }
            a {
                width: 84px;
                height: 48px;
                background: rgba(255, 87, 87, 0.1);
                border-radius: 24px;
                display: flex;
                margin: 0 12px;
                align-items: center;
                justify-content: center;
                &:hover {
                    background: rgba(255, 137, 133, 0.1);
                }
                &:active {
                    background: rgba(255, 87, 87, 0.15);
                }
                img {
                    width: 24px;
                }
            }
        }
    }
}
.practiceBox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.19);
    padding-top: 32px;
    box-sizing: border-box;
}
.questionMiddle {
    .SelectCorrect {
        width: 800px;
        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: 386px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
        }
        .dialog-maxHeight {
            max-height: 386px;
            .right-box {
                max-height: 373px;
            }
            .inner {
                padding: 24px 32px;
            }
        }
        .english {
            font-size: 16px;
            line-height: 16px;
            margin-left: 4px;
        }
        .spell {
            font-size: 12px;
            height: 16px;
        }
        .chinese {
            font-size: 24px;
        }
        .pinyin_hidden {
            visibility: hidden;
        }
    }
    .learn-box {
        list-style: none;
        width: 800px;
        max-height: 533px;
        margin: 13px auto;
        li {
            margin: 8px;
            > div {
                width: 240px;
                height: 240px;
                box-shadow: 0px 4px 0px rgba(239, 167, 28, 0.4);
                border-radius: 16px;
                padding-top: 8px;
                > p {
                    height: 40px;
                    padding: 8px 20px;
                    font-size: 16px;
                }
                b {
                    height: 72px;
                    font-size: 32px;
                    padding: 20px 0;
                }
                span {
                    height: 68px;
                    padding: 16px 20px 4px 20px;
                    font-size: 16px;
                }
                .operate-box {
                    padding: 0 12px;
                }
                a {
                    width: 58px;
                    height: 32px;
                    background: rgba(255, 87, 87, 0.1);
                    border-radius: 16px;
                    margin: 0 8px;
                    &:hover {
                        background: rgba(255, 137, 133, 0.1);
                    }
                    &:active {
                        background: rgba(255, 87, 87, 0.15);
                    }
                    img {
                        width: 16px;
                    }
                }
            }
        }
    }
}
.questionSmall {
    .SelectCorrect {
        width: 600px;
        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: 290px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        .dialog-maxHeight {
            max-height: 290px;
            .right-box {
                max-height: 280px;
            }
            .inner {
                padding: 18px 24px;
            }
        }
        .english {
            font-size: 12px;
            line-height: 12px;
            margin-left: 2px;
        }
        .spell {
            font-size: 12px;
            height: 18px;
        }
        .chinese {
            font-size: 18px;
        }
        .pinyin_hidden {
            visibility: hidden;
            height: 18px;
        }
    }
    .learn-box {
        list-style: none;
        width: 600px;
        max-height: 400px;
        overflow: auto;
        margin: 10px auto;
        li {
            margin: 6px;
            > div {
                width: 180px;
                height: 180px;
                box-shadow: 0px 3px 0px rgba(239, 167, 28, 0.4);
                border-radius: 12px;
                padding-top: 6px;
                > p {
                    height: 30px;
                    padding: 6px 15px;
                    font-size: 12px;
                }
                b {
                    height: 54px;
                    font-size: 24px;
                    padding: 15px 0;
                }
                span {
                    height: 51px;
                    padding: 12px 15px 3px 15px;
                    font-size: 12px;
                }
                .operate-box {
                    padding: 0 9px;
                }
                a {
                    width: 44px;
                    height: 24px;
                    border-radius: 12px;
                    margin: 0 6px;
                    &:hover {
                        background: rgba(255, 137, 133, 0.1);
                    }
                    &:active {
                        background: rgba(255, 87, 87, 0.15);
                    }
                    img {
                        width: 12px;
                    }
                }
            }
        }
    }
    .practiceBox {
        padding-top: 16px;
    }
}
</style>
<style lang="scss">
.left-box .article-img {
    max-width: 444px;
    max-height: 560px;
    display: block;
    text-align: center;
    img {
        width: 100%;
        height: 560px;
    }
}
.el-image {
    max-width: 100%;
    max-height: 100%;
}
.questionMiddle {
    .left-box .article-img {
        max-width: 296px;
        max-height: 373px;
        img {
            max-width: 100%;
            max-height: 373px;
        }
    }
}
.questionSmall {
    .left-box .article-img {
        max-width: 222px;
        max-height: 280px;
        img {
            max-width: 100%;
            max-height: 280px;
        }
    }
}
</style>