|
|
@@ -1,70 +1,140 @@
|
|
|
<template>
|
|
|
<div class="magazine-detail">
|
|
|
- <Header
|
|
|
- :LoginNavIndex="1"
|
|
|
- />
|
|
|
+ <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 class="navBar-left">
|
|
|
+ <a class="goback" @click="$router.go(-1)"
|
|
|
+ ><i class="el-icon-arrow-left"></i> 第 {{ iss_no }} 期</a
|
|
|
+ >
|
|
|
+ <div class="border"></div>
|
|
|
+ <p class="article-title">{{ iss_name }}</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 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
|
|
|
+ v-if="
|
|
|
+ magazineList[activePage] &&
|
|
|
+ magazineList[activePage].video &&
|
|
|
+ magazineList[activePage].video.id
|
|
|
+ "
|
|
|
+ round
|
|
|
+ class="explain-video"
|
|
|
+ @click="handleVideo"
|
|
|
+ ><svg-icon icon-class="video-line"></svg-icon>讲解视频</el-button
|
|
|
+ >
|
|
|
+ <el-button round class="btn-right" @click="handlePage('+')"
|
|
|
+ >下一页<svg-icon icon-class="arrow-right-s-line"></svg-icon
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="audio-box">
|
|
|
+ <div
|
|
|
+ class="aduioLine-content aduioLine-box"
|
|
|
+ v-if="
|
|
|
+ magazineList[activePage] &&
|
|
|
+ magazineList[activePage].sound &&
|
|
|
+ magazineList[activePage].sound.id
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="artMagazineAudio"
|
|
|
+ :mp3="magazineList[activePage].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>
|
|
|
+ <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"
|
|
|
+ :class="['magazine' + index]"
|
|
|
+ :style="{
|
|
|
+ top: 24 + (index - activePage) * 16 + 'px',
|
|
|
+ marginLeft: -554 + (index - activePage) * 16 + 'px',
|
|
|
+ zIndex: magazineList.length - index,
|
|
|
+ height: 783 - (index - activePage) * 16 + 'px',
|
|
|
+ }"
|
|
|
+ v-if="index >= activePage && index <= activePage + 3"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="img-box"
|
|
|
+ :style="{
|
|
|
+ background:
|
|
|
+ 'url(' + item.img.url + ') center / cover no-repeat',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(itemP, indexP) in item.hotspots"
|
|
|
+ :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>
|
|
|
+ </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>
|
|
|
+ :visible.sync="magazineVideoShow"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="800px"
|
|
|
+ class="login-dialog"
|
|
|
+ v-if="magazineVideoShow"
|
|
|
+ >
|
|
|
+ <magazine-video
|
|
|
+ :url="magazineList[activePage].video.url"
|
|
|
+ @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>
|
|
|
+ :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].hotspots"
|
|
|
+ :activeIndex="mageazineDetailIndex"
|
|
|
+ @closeWord="closeMagazineSentence"
|
|
|
+ @changeTheme="changeTheme"
|
|
|
+ :mp3Url="
|
|
|
+ magazineList[activePage].sound && magazineList[activePage].sound.url
|
|
|
+ ? magazineList[activePage].sound.url
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ ></magazine-sentence>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -73,251 +143,398 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具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"
|
|
|
+import MagazineVideo from "./components/MagazineVideo.vue";
|
|
|
+import MagazineSentence from "./components/MagazineSentence.vue";
|
|
|
+import AudioLine from "@/components/common/AudioLine.vue";
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header,MagazineVideo,MagazineSentence,AudioLine},
|
|
|
+ components: { Header, MagazineVideo, MagazineSentence, AudioLine },
|
|
|
props: [],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- magazineList:[
|
|
|
+ magazineList: [
|
|
|
+ {
|
|
|
+ img: require("../../assets/ed88685cd9fe892adb12382427d3c429.jpg"),
|
|
|
+ positionList: [
|
|
|
+ {
|
|
|
+ width: "270px",
|
|
|
+ height: "140px",
|
|
|
+ x: "390px",
|
|
|
+ y: "37px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: "288px",
|
|
|
+ height: "120px",
|
|
|
+ x: "500px",
|
|
|
+ y: "237px",
|
|
|
+ },
|
|
|
{
|
|
|
- img:require('../../assets/ed88685cd9fe892adb12382427d3c429.jpg'),
|
|
|
- positionList:[
|
|
|
+ width: "130px",
|
|
|
+ height: "100px",
|
|
|
+ x: "525px",
|
|
|
+ y: "587px",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sentenceList: [
|
|
|
+ {
|
|
|
+ sentence: "I have a super ‘mouth’",
|
|
|
+ wordList: ["I", "have", "a", "super", "‘mouth’"],
|
|
|
+ s: 21500,
|
|
|
+ e: 24000,
|
|
|
+ timeList: [
|
|
|
+ {
|
|
|
+ s: 21500,
|
|
|
+ e: 21800,
|
|
|
+ },
|
|
|
{
|
|
|
- width:'270px',
|
|
|
- height:'140px',
|
|
|
- x:'390px',
|
|
|
- y:'37px'
|
|
|
+ s: 21800,
|
|
|
+ e: 22200,
|
|
|
},
|
|
|
{
|
|
|
- width:'288px',
|
|
|
- height:'120px',
|
|
|
- x:'500px',
|
|
|
- y:'237px'
|
|
|
+ s: 22200,
|
|
|
+ e: 22400,
|
|
|
},
|
|
|
{
|
|
|
- width:'130px',
|
|
|
- height:'100px',
|
|
|
- x:'525px',
|
|
|
- y:'587px'
|
|
|
+ s: 22400,
|
|
|
+ e: 22900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 22900,
|
|
|
+ e: 24000,
|
|
|
},
|
|
|
],
|
|
|
- sentenceList:[
|
|
|
- {
|
|
|
- sentence:"I have a super ‘mouth’",
|
|
|
- wordList:['I','have','a','super','‘mouth’'],
|
|
|
- s: 21500,
|
|
|
- e: 24000,
|
|
|
- timeList:[
|
|
|
- {
|
|
|
- s:21500,
|
|
|
- e:21800
|
|
|
- },
|
|
|
- {
|
|
|
- s:21800,
|
|
|
- e:22200
|
|
|
- },
|
|
|
- {
|
|
|
- s:22200,
|
|
|
- e:22400
|
|
|
- },
|
|
|
- {
|
|
|
- s:22400,
|
|
|
- e:22900
|
|
|
- },
|
|
|
- {
|
|
|
- s:22900,
|
|
|
- e:24000
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- 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: 46300,
|
|
|
- timeList: [
|
|
|
- {
|
|
|
- s:35000,
|
|
|
- e:35400
|
|
|
- },
|
|
|
- {
|
|
|
- s:35400,
|
|
|
- e:35600
|
|
|
- },
|
|
|
- {
|
|
|
- s:35600,
|
|
|
- e:36000
|
|
|
- },
|
|
|
- {
|
|
|
- s:36000,
|
|
|
- e:37000
|
|
|
- },
|
|
|
- {
|
|
|
- s:37000,
|
|
|
- e:37300
|
|
|
- },
|
|
|
- {
|
|
|
- s:37300,
|
|
|
- e:37600
|
|
|
- },
|
|
|
- {
|
|
|
- s:37600,
|
|
|
- e:37900
|
|
|
- },
|
|
|
- {
|
|
|
- s:38000,
|
|
|
- e:38900
|
|
|
- },
|
|
|
- {
|
|
|
- s:39200,
|
|
|
- e:39400
|
|
|
- },
|
|
|
- {
|
|
|
- s:39400,
|
|
|
- e:39800
|
|
|
- },
|
|
|
- {
|
|
|
- s:39800,
|
|
|
- e:40400
|
|
|
- },
|
|
|
- {
|
|
|
- s:40400,
|
|
|
- e:40900
|
|
|
- },
|
|
|
- {
|
|
|
- s:40900,
|
|
|
- e:41700
|
|
|
- },
|
|
|
- {
|
|
|
- s:41700,
|
|
|
- e:41900
|
|
|
- },
|
|
|
- {
|
|
|
- s:41900,
|
|
|
- e:42500
|
|
|
- },
|
|
|
- {
|
|
|
- s:42500,
|
|
|
- e:42900
|
|
|
- },
|
|
|
- {
|
|
|
- s:42900,
|
|
|
- e:43800
|
|
|
- },
|
|
|
- {
|
|
|
- s:43800,
|
|
|
- e:44200
|
|
|
- },
|
|
|
- {
|
|
|
- s:44200,
|
|
|
- e:44500
|
|
|
- },
|
|
|
- {
|
|
|
- s:44500,
|
|
|
- e:44800
|
|
|
- },
|
|
|
- {
|
|
|
- s:44800,
|
|
|
- e:45000
|
|
|
- },
|
|
|
- {
|
|
|
- s:45000,
|
|
|
- e:45200
|
|
|
- },
|
|
|
- {
|
|
|
- s:45200,
|
|
|
- e:45600
|
|
|
- },
|
|
|
- {
|
|
|
- s:45600,
|
|
|
- e:46300
|
|
|
- },
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- 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:
|
|
|
+ "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: 46300,
|
|
|
+ timeList: [
|
|
|
+ {
|
|
|
+ s: 35000,
|
|
|
+ e: 35400,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 35400,
|
|
|
+ e: 35600,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 35600,
|
|
|
+ e: 36000,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 36000,
|
|
|
+ e: 37000,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 37000,
|
|
|
+ e: 37300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 37300,
|
|
|
+ e: 37600,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 37600,
|
|
|
+ e: 37900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 38000,
|
|
|
+ e: 38900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 39200,
|
|
|
+ e: 39400,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 39400,
|
|
|
+ e: 39800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 39800,
|
|
|
+ e: 40400,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 40400,
|
|
|
+ e: 40900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 40900,
|
|
|
+ e: 41700,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 41700,
|
|
|
+ e: 41900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 41900,
|
|
|
+ e: 42500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 42500,
|
|
|
+ e: 42900,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 42900,
|
|
|
+ e: 43800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 43800,
|
|
|
+ e: 44200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 44200,
|
|
|
+ e: 44500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 44500,
|
|
|
+ e: 44800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 44800,
|
|
|
+ e: 45000,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 45000,
|
|
|
+ e: 45200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 45200,
|
|
|
+ e: 45600,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ s: 45600,
|
|
|
+ e: 46300,
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
- 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: "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,
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- {
|
|
|
- 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
|
|
|
- }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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
|
|
|
+ iss_name: "",
|
|
|
+ iss_no: 0,
|
|
|
+ picObj: {}, // 存放图片地址
|
|
|
+ soundObj: {}, //存放音频地址
|
|
|
+ videoObj: {}, //存放视频地址
|
|
|
+ pageIds: [],
|
|
|
+ };
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
@@ -326,216 +543,263 @@ export default {
|
|
|
//方法集合
|
|
|
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('已经是最后一张')
|
|
|
- }
|
|
|
+ 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
|
|
|
+ handleVideo() {
|
|
|
+ this.magazineVideoShow = true;
|
|
|
},
|
|
|
// 关闭视频
|
|
|
- closeWord(){
|
|
|
- this.magazineVideoShow = false
|
|
|
+ closeWord() {
|
|
|
+ this.magazineVideoShow = false;
|
|
|
},
|
|
|
// 切换画刊里面的卡片
|
|
|
- handleChangePosition(index){
|
|
|
- if(this.$refs.audioLine.audio.playing){
|
|
|
- this.$refs.audioLine.PlayAudio()
|
|
|
- }
|
|
|
- this.mageazineDetailIndex = index
|
|
|
- this.mageazineDetailShow = true
|
|
|
+ handleChangePosition(index) {
|
|
|
+ if (this.$refs.audioLine.audio.playing) {
|
|
|
+ this.$refs.audioLine.PlayAudio();
|
|
|
+ }
|
|
|
+ this.mageazineDetailIndex = index;
|
|
|
+ this.mageazineDetailShow = true;
|
|
|
},
|
|
|
// 关闭画刊卡片
|
|
|
- closeMagazineSentence(){
|
|
|
- this.mageazineDetailShow = false
|
|
|
+ closeMagazineSentence() {
|
|
|
+ this.mageazineDetailShow = false;
|
|
|
},
|
|
|
// 切换主题色和文字大小
|
|
|
- changeTheme(theme,size){
|
|
|
- if(theme!=='') this.sentenceTheme = theme
|
|
|
- if(size) this.fontSize = size
|
|
|
-
|
|
|
+ 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
|
|
|
- }
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ for (
|
|
|
+ let i = 0;
|
|
|
+ i < this.magazineList[this.activePage].hotspots.length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ this.curTime >= this.magazineList[this.activePage].hotspots[i].s &&
|
|
|
+ this.curTime < this.magazineList[this.activePage].hotspots[i].e
|
|
|
+ ) {
|
|
|
+ this.mageazineDetailIndex = i;
|
|
|
+ break;
|
|
|
+ } else {
|
|
|
+ this.mageazineDetailIndex = null;
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
},
|
|
|
emptyEd(flag) {
|
|
|
this.ed = undefined;
|
|
|
- if(flag){
|
|
|
- this.showEd = false
|
|
|
+ if (flag) {
|
|
|
+ this.showEd = false;
|
|
|
}
|
|
|
},
|
|
|
+ // 画刊信息
|
|
|
+ getIssueDetail() {
|
|
|
+ let MethodName = "/PaperServer/Client/PicIssue/GetIssueBriefInfo";
|
|
|
+ let data = {
|
|
|
+ id: this.$route.query.iss_id,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.iss_no = res.data.iss_no;
|
|
|
+ this.iss_name = res.data.iss_name;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ getIssuePages() {
|
|
|
+ this.magazineList = [];
|
|
|
+ let MethodName = "/PaperServer/Client/PicIssue/GetPicIssueArticleContent";
|
|
|
+ let data = {
|
|
|
+ id: this.$route.query.iss_id,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.pageIds = res.data.pageIds;
|
|
|
+ res.data.pageIds.forEach((item) => {
|
|
|
+ this.magazineList.push(res.data.pages[item]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getIssueDetail();
|
|
|
+ this.getIssuePages();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
//生命周期-创建之前
|
|
|
- beforeCreated() { },
|
|
|
+ beforeCreated() {},
|
|
|
//生命周期-挂载之前
|
|
|
- beforeMount() { },
|
|
|
+ beforeMount() {},
|
|
|
//生命周期-更新之前
|
|
|
- beforUpdate() { },
|
|
|
+ beforUpdate() {},
|
|
|
//生命周期-更新之后
|
|
|
- updated() { },
|
|
|
+ updated() {},
|
|
|
//生命周期-销毁之前
|
|
|
- beforeDestory() { },
|
|
|
+ beforeDestory() {},
|
|
|
//生命周期-销毁完成
|
|
|
- destoryed() { },
|
|
|
+ destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() { }
|
|
|
-}
|
|
|
+ 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-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-box{
|
|
|
+ .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;
|
|
|
+ overflow: hidden;
|
|
|
+ .img-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;
|
|
|
+ width: 1075px;
|
|
|
+ height: 751px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .position-item {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ &.active {
|
|
|
+ border-color: #ff1616;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ border-color: #ff1616;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-.audio-box{
|
|
|
- width: 500px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+.audio-box {
|
|
|
+ width: 1108px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 16px auto 0 auto;
|
|
|
}
|
|
|
-.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;
|
|
|
- }
|
|
|
+.aduioLine-box {
|
|
|
+ width: 1108px;
|
|
|
+ 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;
|
|
|
- }
|
|
|
-
|
|
|
+.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>
|
|
|
+</style>
|
natasha