|
|
@@ -13,7 +13,28 @@
|
|
|
<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>
|
|
|
+ <!-- <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="artNormalAudio"
|
|
|
+ :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">
|
|
|
@@ -54,102 +75,221 @@
|
|
|
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},
|
|
|
+ components: { Header,MagazineVideo,MagazineSentence,AudioLine},
|
|
|
props: [],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
magazineList:[
|
|
|
{
|
|
|
- img:require('../../assets/huakan1.png'),
|
|
|
+ img:require('../../assets/ed88685cd9fe892adb12382427d3c429.jpg'),
|
|
|
positionList:[
|
|
|
{
|
|
|
- width:'228px',
|
|
|
- height:'80px',
|
|
|
- x:'47px',
|
|
|
- y:'47px'
|
|
|
- },
|
|
|
- {
|
|
|
width:'270px',
|
|
|
- height:'80px',
|
|
|
- x:'625px',
|
|
|
- y:'107px'
|
|
|
+ height:'140px',
|
|
|
+ x:'390px',
|
|
|
+ y:'37px'
|
|
|
},
|
|
|
{
|
|
|
- width:'180px',
|
|
|
- height:'290px',
|
|
|
- x:'570px',
|
|
|
- y:'197px'
|
|
|
+ width:'288px',
|
|
|
+ height:'120px',
|
|
|
+ x:'500px',
|
|
|
+ y:'237px'
|
|
|
},
|
|
|
{
|
|
|
- width:'250px',
|
|
|
+ width:'130px',
|
|
|
height:'100px',
|
|
|
- x:'290px',
|
|
|
- y:'327px'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- img:require('../../assets/huakan1.png'),
|
|
|
- positionList:[
|
|
|
- {
|
|
|
- width:'228px',
|
|
|
- height:'80px',
|
|
|
- x:'47px',
|
|
|
- y:'47px'
|
|
|
- },
|
|
|
- {
|
|
|
- width:'270px',
|
|
|
- height:'80px',
|
|
|
- x:'625px',
|
|
|
- y:'107px'
|
|
|
- },
|
|
|
- {
|
|
|
- width:'180px',
|
|
|
- height:'290px',
|
|
|
- x:'570px',
|
|
|
- y:'197px'
|
|
|
+ x:'525px',
|
|
|
+ y:'587px'
|
|
|
},
|
|
|
- {
|
|
|
- width:'250px',
|
|
|
- height:'100px',
|
|
|
- x:'290px',
|
|
|
- y:'327px'
|
|
|
- }
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ 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/huakan1.png'),
|
|
|
- positionList:[
|
|
|
- {
|
|
|
- width:'228px',
|
|
|
- height:'80px',
|
|
|
- x:'47px',
|
|
|
- y:'47px'
|
|
|
- },
|
|
|
- {
|
|
|
- width:'270px',
|
|
|
- height:'80px',
|
|
|
- x:'625px',
|
|
|
- y:'107px'
|
|
|
- },
|
|
|
- {
|
|
|
- width:'180px',
|
|
|
- height:'290px',
|
|
|
- x:'570px',
|
|
|
- y:'197px'
|
|
|
- },
|
|
|
- {
|
|
|
- width:'250px',
|
|
|
- height:'100px',
|
|
|
- x:'290px',
|
|
|
- y:'327px'
|
|
|
- }
|
|
|
- ]
|
|
|
+ img:require('../../assets/f70b022cce193716cc091e5c8c54d6e5.jpg'),
|
|
|
}
|
|
|
],
|
|
|
+ art_sound_url:require('../../assets/21hk_99_165420_1.mp3'),
|
|
|
activePage:0, // 当前显示第几页
|
|
|
magazineVideoShow:false, // 讲解视频是否显示
|
|
|
mageazineDetailIndex:null, // 当前画刊高亮第几个
|
|
|
@@ -173,7 +313,10 @@ export default {
|
|
|
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概念
|
|
|
@@ -222,7 +365,25 @@ export default {
|
|
|
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() {
|
|
|
@@ -257,6 +418,7 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
.el-button{
|
|
|
width: 96px;
|
|
|
height: 32px;
|
|
|
@@ -317,8 +479,9 @@ export default {
|
|
|
top: 24px;
|
|
|
left: 50%;
|
|
|
margin-left: -554px;
|
|
|
+ text-align: center;
|
|
|
img{
|
|
|
- width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.position-item{
|
|
|
@@ -336,6 +499,32 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.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{
|
natasha
