HM21St_Page_User/src/views/bookShelf/magazineDetail.vue

<template>
  <div class="magazine-detail">
    <Header
      :LoginNavIndex="1"
    />
    <div class="navBar">
        <div class="navBar-left">
            <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i> 第 856 期</a>
            <div class="border"></div>
            <p class="article-title">Making room for the pet boom</p>
        </div>
    </div>
    <div class="magazine-inner">
        <div class="btn-box">
            <el-button round class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-s-line"></svg-icon>上一页</el-button>
            <!-- <el-button round class="explain-video" @click="handleVideo"><svg-icon icon-class="video-line"></svg-icon>讲解视频</el-button> -->
            <div class="audio-box">
                <div
                    class="aduioLine-content aduioLine-box"
                    v-if="
                        art_sound_url
                    "
                >
                    <AudioLine
                        audioId="artMagazineAudio"
                        :mp3="art_sound_url"
                        :getCurTime="getCurTime"
                        ref="audioLine"
                        :mp3Source="'mp3'"
                        type="audioLine"
                        :ed="ed"
                        :showEd="showEd"
                        @emptyEd="emptyEd"
                    />
                    <!-- <svg-icon icon-class="icon-wrapper" class="wrapper" @click="fullScreen"></svg-icon> -->
                </div>
            </div>
            <el-button round class="btn-right" @click="handlePage('+')">下一页<svg-icon icon-class="arrow-right-s-line"></svg-icon></el-button>
        </div>
        <div class="magazine-box">
            <a class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-s-line"></svg-icon></a>
            <a class="btn-right" @click="handlePage('+')"><svg-icon icon-class="arrow-right-s-line"></svg-icon></a>
            <template v-for="(item,index) in magazineList">
                <div :key="index" class="magazine" :style="{top:24+(index-activePage)*16+'px',marginLeft:-554+(index-activePage)*16+'px',zIndex:(10-index),height:783-(index-activePage)*16+'px'}" v-if="index>=activePage&&index<=activePage+3">
                    <img :src="item.img"/>
                    <div v-for="(itemP,indexP) in item.positionList" :key="indexP" :class="['position-item',mageazineDetailIndex===indexP?'active':'']" :style="{width:itemP.width,height:itemP.height,left:itemP.x,top:itemP.y}" @click="handleChangePosition(indexP)"></div>
                </div>
            </template>
        </div>
    </div>
    <el-dialog
        :visible.sync="magazineVideoShow"
        :show-close="false"
        :close-on-click-modal="false"
        width="800px"
        class="login-dialog"
        v-if="magazineVideoShow">
        <magazine-video @closeWord="closeWord"></magazine-video>
    </el-dialog>
    <el-dialog
        :visible.sync="mageazineDetailShow"
        :show-close="false"
        :close-on-click-modal="false"
        width="500px"
        class="login-dialog magazine-detail-dialog"
        v-if="mageazineDetailShow">
        <magazine-sentence :fontSize="fontSize" :sentenceTheme="sentenceTheme" :data="magazineList[activePage].sentenceList" :activeIndex="mageazineDetailIndex" @closeWord="closeMagazineSentence" @changeTheme="changeTheme" :mp3Url="art_sound_url"></magazine-sentence>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import MagazineVideo from "./components/MagazineVideo.vue"
import MagazineSentence from "./components/MagazineSentence.vue"
import AudioLine from "@/components/common/AudioLine.vue"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header,MagazineVideo,MagazineSentence,AudioLine},
  props: [],
  data() {
    //这里存放数据
    return {
        magazineList:[
            {
              img:require('../../assets/ed88685cd9fe892adb12382427d3c429.jpg'),
              positionList:[
                {
                    width:'270px',
                    height:'140px',
                    x:'390px',
                    y:'37px'
                },
                {
                    width:'288px',
                    height:'120px',
                    x:'500px',
                    y:'237px'
                },
                {
                    width:'130px',
                    height:'100px',
                    x:'525px',
                    y:'587px'
                },
              ],
              sentenceList:[
                    {
                        sentence:"I have a super ‘mouth’",
                        wordList:['I','have','a','super','‘mouth’'],
                        s: 22500,
                        e: 25000,
                        timeList:[
                            {
                                s:22500,
                                e:22800
                            },
                            {
                                s:22800,
                                e:23200
                            },
                            {
                                s:23200,
                                e:23400
                            },
                            {
                                s:23400,
                                e:23900
                            },
                            {
                                s:23900,
                                e:24900
                            }
                        ]
                    },
                    {
                        sentence:"I am a shoebill (鲸头鹳). I live in Africa (非洲). I get my name because of my big bill (鸟喙). Does it look like a Dutch clog (荷兰木屐)?",
                        wordList:['I','am','a','shoebill (鲸头鹳).','I','live',"in","Africa (非洲).","I","get","my","name","because","of","my","big","bill (鸟喙).","Does","it","look","like","a","Dutch","clog (荷兰木屐)?"],
                        s: 35000,
                        e: 47300,
                        timeList: [
                            {
                                s:35000,
                                e:35400
                            },
                            {
                                s:35400,
                                e:35600
                            },
                            {
                                s:35600,
                                e:36000
                            },
                            {
                                s:36000,
                                e:37000
                            },
                            {
                                s:38000,
                                e:38300
                            },
                            {
                                s:38300,
                                e:38600
                            },
                            {
                                s:38600,
                                e:38900
                            },
                            {
                                s:38900,
                                e:39900
                            },
                            {
                                s:39900,
                                e:40300
                            },
                            {
                                s:40300,
                                e:40800
                            },
                            {
                                s:40800,
                                e:41400
                            },
                            {
                                s:41400,
                                e:41900
                            },
                            {
                                s:41900,
                                e:42700
                            },
                            {
                                s:42700,
                                e:42900
                            },
                            {
                                s:42900,
                                e:43500
                            },
                            {
                                s:43500,
                                e:43900
                            },
                            {
                                s:43900,
                                e:44800
                            },
                            {
                                s:45000,
                                e:45200
                            },
                            {
                                s:45200,
                                e:45500
                            },
                            {
                                s:45500,
                                e:45800
                            },
                            {
                                s:45800,
                                e:46000
                            },
                            {
                                s:46000,
                                e:46200
                            },
                            {
                                s:46200,
                                e:46600
                            },
                            {
                                s:46600,
                                e:47300
                            },
                        ]
                    },
                    {
                        sentence:"My bill is important. It helps me a lot.",
                        wordList:['My','bill','is','important.','It','helps','me',"a","lot."],
                        s: 48000,
                        e: 52000,
                        timeList:[
                            {
                                s:48000,
                                e:48400
                            },
                            {
                                s:48400,
                                e:48700
                            },
                            {
                                s:48700,
                                e:48900
                            },
                            {
                                s:48900,
                                e:49900
                            },
                            {
                                s:49900,
                                e:50200
                            },
                            {
                                s:50200,
                                e:50800
                            },
                            {
                                s:50800,
                                e:51100
                            },
                            {
                                s:51100,
                                e:51400
                            },
                            {
                                s:51400,
                                e:52000
                            },
                        ]
                    }
                ]
            },
            {
              img:require('../../assets/f70b022cce193716cc091e5c8c54d6e5.jpg'),
            }
        ],
        art_sound_url:require('../../assets/21hk_99_165420_1.mp3'),
        activePage:0, // 当前显示第几页 
        magazineVideoShow:false, // 讲解视频是否显示
        mageazineDetailIndex:null, // 当前画刊高亮第几个
        mageazineDetailShow:false,
        fontSize:32,
        sentenceTheme:0,
        sentenceList:[
            {
                sentence:"With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
                wordList:['With','a','lot','of','water','in','a',"cactus'","body,","a","grown-up","plant","may","weigh","6","tons","or","more.","That's","as","heavy","as","an","elephant!"]
            },
            {
                sentence:"With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
                wordList:['With','a','lot','of','water','in','a',"cactus'","body,","a","grown-up","plant","may","weigh","6","tons","or","more.","That's","as","heavy","as","an","elephant!"]
            },
            {
                sentence:"With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
                wordList:['With','a','lot','of','water','in','a',"cactus'","body,","a","grown-up","plant","may","weigh","6","tons","or","more.","That's","as","heavy","as","an","elephant!"]
            },
            {
                sentence:"With a lot of water in a cactus' body, a grown-up plant may weigh 6 tons or more. That's as heavy as an elephant!",
                wordList:['With','a','lot','of','water','in','a',"cactus'","body,","a","grown-up","plant","may","weigh","6","tons","or","more.","That's","as","heavy","as","an","elephant!"]
            }
        ],
        ed: undefined,
        showEd: false, //是否看ed的值
        curTime: 0, //单位s
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 翻页
    handlePage(type){
        if(type==='-'){
            if(this.activePage>0){
                this.activePage--
                this.mageazineDetailIndex = null
            }else{
                this.$message.warning('已经是第一张')
            }
        }else{
            if(this.activePage<this.magazineList.length-1){
                this.activePage++
                this.mageazineDetailIndex = null
            }else{
                this.$message.warning('已经是最后一张')
            }
        }
    },
    // 讲解视频
    handleVideo(){
        this.magazineVideoShow = true
    },
    // 关闭视频
    closeWord(){
        this.magazineVideoShow = false
    },
    // 切换画刊里面的卡片
    handleChangePosition(index){
        if(this.$refs.audioLine.audio.playing){
            this.$refs.audioLine.PlayAudio()
        }
        this.mageazineDetailIndex = index
        this.mageazineDetailShow = true
    },
    // 关闭画刊卡片
    closeMagazineSentence(){
        this.mageazineDetailShow = false
    },
    // 切换主题色和文字大小
    changeTheme(theme,size){
        if(theme!=='') this.sentenceTheme = theme
        if(size) this.fontSize = size
        
    },
    getCurTime(curTime) {
        this.curTime = curTime * 1000;  
        for(let i=0; i<this.magazineList[this.activePage].sentenceList.length;i++){
            if(this.curTime>=this.magazineList[this.activePage].sentenceList[i].s&&this.curTime<this.magazineList[this.activePage].sentenceList[i].e){
                this.mageazineDetailIndex = i
                break
            }else{
                this.mageazineDetailIndex = null
            }
        }
      
    },
    emptyEd(flag) {
      this.ed = undefined;
      if(flag){
        this.showEd = false
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.magazine-inner{
    padding-top: 96px;
    .btn-box{
        width: 1108px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-button{
            width: 96px;
            height: 32px;
            padding: 0;
            background: transparent;
            border-color: #165DFF;
            color: #165DFF;
            font-weight: 400;
            font-size: 14px;
        }
        .btn-left,.explain-video{
            .svg-icon{
                margin-right: 8px;
            }
        }
        .btn-right{
            .svg-icon{
                margin-left: 8px;
            }
        }
        .explain-video{
            background: #FFB224;
            border-color: #FFB224;
            color: #FFFFFF;
            width: 110px;
        }
    }
    .magazine-box{
        position: relative;
        padding-top: 24px;
        min-height: 820px;
        width: 1108px;
        margin: 0 auto;
        .btn-left,.btn-right{
            position: absolute;
            color: #175DFF;
            top: 50%;
            margin-top: 24px;
            left: -57px;
            .svg-icon{
                width: 48px;
                height: 48px;
            }
        }
        .btn-right{
            left: auto;
            right: -100px;
        }
        .magazine{
            background: #FFFFFF;
            padding: 16px;
            border: 1px solid #E5E6EB;
            border-radius: 16px;
            width: 1108px;
            height: 783px;
            position: absolute;
            margin: 0 auto;
            top: 24px;
            left: 50%;
            margin-left: -554px;
            text-align: center;
            img{
                max-width: 100%;
                height: 100%;
            }
            .position-item{
                position: absolute;
                z-index: 1;
                cursor: pointer;
                border: 3px solid transparent;
                &.active{
                    border-color: #FF1616;
                }
                &:hover{
                    border-color: #FF1616;
                }
            }
        }
    }
}
.audio-box{
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aduioLine-box{
    width: 516px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    .wrapper{
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: #175DFF;
        margin-left: 8px;
    }
    .Audio{
        // width: 430px;
    }
}
</style>
<style lang="scss">
.magazine-detail-dialog{
    .el-dialog{
        box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        border: none;
    }
    
}
</style>