Skip to content

H
h5-base
Commit 5527daaf authored by chenyishuai@singsingenglish.com's avatar chenyishuai@singsingenglish.com
Browse files
Options

718

parent 4fcbca59
Show whitespace changes
Inline Side-by-side
Showing with 1746 additions and 1194 deletions
dev/index.html
View file @ 5527daaf
......@@ -11,4 +11,4 @@
position: fixed;
background: #f4f4f4;
}
/* html{font-size: 1px;} */</style><link href=static/css/app.91d2eea1dfca80994de99748f577fac4.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.f602221ff40bce948557.js></script><script type=text/javascript src=static/js/vendor.79c3f4ae5c5bb7637f02.js></script><script type=text/javascript src=static/js/app.00137bea1c6b4f711984.js></script></body></html>
\ No newline at end of file
/* html{font-size: 1px;} */</style><link href=static/css/app.91d2eea1dfca80994de99748f577fac4.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.04fadc84be3bb14d4768.js></script><script type=text/javascript src=static/js/vendor.86cdf707c760a9063004.js></script><script type=text/javascript src=static/js/app.245df8b324d1a0ebe735.js></script></body></html>
\ No newline at end of file
dev/static/js/1.0d8027854a660c6f4813.js deleted 100644 → 0
View file @ 4fcbca59
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/1.ec9ec28ec5bc638097ce.js 0 → 100644
View file @ 5527daaf
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/app.00137bea1c6b4f711984.js → dev/static/js/app.245df8b324d1a0ebe735.js
View file @ 5527daaf
This source diff could not be displayed because it is too large. You can view the blob instead.
dev/static/js/manifest.f602221ff40bce948557.js → dev/static/js/manifest.04fadc84be3bb14d4768.js
View file @ 5527daaf
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var b,t,o,i=0,u=[];i<c.length;i++)t=c[i],d[t]&&u.push(d[t][0]),d[t]=0;for(b in n)Object.prototype.hasOwnProperty.call(n,b)&&(e[b]=n[b]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=f(f.s=r[i]);return o};var c={},d={52:0};function f(a){if(c[a])return c[a].exports;var d=c[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,f),d.l=!0,d.exports}f.e=function(e){var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,f.nc&&r.setAttribute("nonce",f.nc),r.src=f.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"97a62935bf96273f674d",1:"0d8027854a660c6f4813",2:"6a7a5c9644d9e62d7c6a",3:"42dd5125df8b4e1ab158",4:"4f923f4d1ed343ca21d2",5:"6f5c1eda479f43de9e43",6:"87758a2455e2e614db38",7:"3415bb9581f597883f1d",8:"c47ed60a95a155b52924",9:"a0ffed9841f8230da3c6",10:"8ea016903e2c67188be6",11:"ec0cd3c0e468bc5aef7c",12:"1a01474c8d22846d815f",13:"d7315f11bdf5c38ea845",14:"8d98d6c4f9546c3e71d4",15:"f467cbd0766276e7ca91",16:"76388e01e74ce7a9c973",17:"c03926a6706106f687bc",18:"f7aebcd26d1359e69d1f",19:"8ba1a9d7c2c892ecdd33",20:"109f646a7537bb65965f",21:"65d9e14392488225b5b6",22:"16a5b7f980750dfc4f9f",23:"c5ff43170e408661632c",24:"9c55ca54630ab63d64a8",25:"065f2f2a6379194b4abf",26:"a1fd8dde8232cac99baa",27:"0634a2e33af51ae44b71",28:"1a66dbd5dab7637da167",29:"8c79842a926bce1d6b5c",30:"11eb2528c67f17a30818",31:"2b5da0bd8a450e556ccc",32:"9b841956d12c3814693d",33:"a1e40d51f0a7bbe0f6bd",34:"66e93ce422847ebef528",35:"a9e8913aa163a0e9a33c",36:"1a53055db508f6e7f695",37:"08d4b1deef3759b4c612",38:"6366efb3e7fa6fbd8e45",39:"3de3bed341623adc0904",40:"895e4da3bab675b0a78e",41:"2a295886cae89b21b058",42:"deb672cc9852b611a242",43:"e2654995557db9d4a9ce",44:"79cfbe6fdaa351b5b9db",45:"0e45eff76c8d5942017a",46:"450fd1d07b1acf24ed4d",47:"478f35a2ebb043bc986a",48:"bdb31144e2254843ea32",49:"6f70a5e57ca051fcb52a"}[e]+".js";var b=setTimeout(t,12e4);function t(){r.onerror=r.onload=null,clearTimeout(b);var a=d[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}return r.onerror=r.onload=t,n.appendChild(r),c},f.m=e,f.c=c,f.d=function(e,a,c){f.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},f.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(a,"a",a),a},f.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},f.p="",f.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,n,r){for(var b,t,o,i=0,u=[];i<c.length;i++)t=c[i],d[t]&&u.push(d[t][0]),d[t]=0;for(b in n)Object.prototype.hasOwnProperty.call(n,b)&&(e[b]=n[b]);for(a&&a(c,n,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)o=f(f.s=r[i]);return o};var c={},d={52:0};function f(a){if(c[a])return c[a].exports;var d=c[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,f),d.l=!0,d.exports}f.e=function(e){var a=d[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,f){a=d[e]=[c,f]});a[2]=c;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,f.nc&&r.setAttribute("nonce",f.nc),r.src=f.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"97a62935bf96273f674d",1:"ec9ec28ec5bc638097ce",2:"6a7a5c9644d9e62d7c6a",3:"42dd5125df8b4e1ab158",4:"4f923f4d1ed343ca21d2",5:"6f5c1eda479f43de9e43",6:"87758a2455e2e614db38",7:"3415bb9581f597883f1d",8:"c47ed60a95a155b52924",9:"a0ffed9841f8230da3c6",10:"8ea016903e2c67188be6",11:"ec0cd3c0e468bc5aef7c",12:"1a01474c8d22846d815f",13:"d7315f11bdf5c38ea845",14:"8d98d6c4f9546c3e71d4",15:"f467cbd0766276e7ca91",16:"76388e01e74ce7a9c973",17:"c03926a6706106f687bc",18:"f7aebcd26d1359e69d1f",19:"8ba1a9d7c2c892ecdd33",20:"109f646a7537bb65965f",21:"65d9e14392488225b5b6",22:"16a5b7f980750dfc4f9f",23:"c5ff43170e408661632c",24:"9c55ca54630ab63d64a8",25:"065f2f2a6379194b4abf",26:"a1fd8dde8232cac99baa",27:"0634a2e33af51ae44b71",28:"1a66dbd5dab7637da167",29:"8c79842a926bce1d6b5c",30:"11eb2528c67f17a30818",31:"2b5da0bd8a450e556ccc",32:"9b841956d12c3814693d",33:"a1e40d51f0a7bbe0f6bd",34:"66e93ce422847ebef528",35:"a9e8913aa163a0e9a33c",36:"1a53055db508f6e7f695",37:"08d4b1deef3759b4c612",38:"6366efb3e7fa6fbd8e45",39:"3de3bed341623adc0904",40:"895e4da3bab675b0a78e",41:"2a295886cae89b21b058",42:"deb672cc9852b611a242",43:"e2654995557db9d4a9ce",44:"79cfbe6fdaa351b5b9db",45:"0e45eff76c8d5942017a",46:"450fd1d07b1acf24ed4d",47:"478f35a2ebb043bc986a",48:"bdb31144e2254843ea32",49:"6f70a5e57ca051fcb52a"}[e]+".js";var b=setTimeout(t,12e4);function t(){r.onerror=r.onload=null,clearTimeout(b);var a=d[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}return r.onerror=r.onload=t,n.appendChild(r),c},f.m=e,f.c=c,f.d=function(e,a,c){f.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},f.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(a,"a",a),a},f.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},f.p="",f.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
src/components/newLesson/audio.vue
View file @ 5527daaf
<template>
<div class="audio-page">
<div class="content" v-if="showObj.audio">
<audio ref="audio" @durationchange="canPlay" @play="playing()" :src="showObj.audio[index].url"></audio>
<audio
ref="audio"
@durationchange="canPlay"
@play="playing()"
:src="showObj.audio[index].url"
></audio>
<div class="hp-left">
<div class="btn-block">
<div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow">
<div v-if="contentData.age === 1">0-3岁<i class="playImage _154722344142123489"></i></div>
<div v-if="contentData.age === 2">4-6岁<i class="playImage _154722344142123489"></i></div>
<div v-if="contentData.age === 1">
0-3岁
<i class="playImage _154722344142123489"></i>
</div>
<div v-if="contentData.age === 2">
4-6岁
<i class="playImage _154722344142123489"></i>
</div>
</div>
<div class="age-change-block" v-show="ageShow" v-if="contentData.content.age">
<div @click="contentData.age = 1;sendConsole('选择分龄')">0-3岁<i class="playImage _282918034425091245" v-if="contentData.age === 1"></i></div>
<div @click="contentData.age = 2;sendConsole('选择分龄')">4-6岁<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i></div>
<div @click="contentData.age = 1;sendConsole('选择分龄')">
0-3岁
<i class="playImage _282918034425091245" v-if="contentData.age === 1"></i>
</div>
<div @click="contentData.age = 2;sendConsole('选择分龄')">
4-6岁
<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i>
</div>
<div v-if="showObj.change" class="change-block-HP" @click="contentData.type = 'video';sendConsole('切换视频教学')">
<div class="">
<img :src="tapToVideo"/>
</div>
<div
v-if="showObj.change"
class="change-block-HP"
@click="contentData.type = 'video';sendConsole('切换视频教学')"
>
<div class>
<img :src="tapToVideo" />
</div>
</div>
<div v-if="showObj.change" class="change-block">
<div @click="contentData.type = 'video';sendConsole('切换视频教学')">视频教学</div>
<div class="active" >音频教学</div>
<div class="active">音频教学</div>
</div>
</div>
<div class="hp-top">
<div class="title-block">
<div class="title">
{{showObj.audio[index].title}}
</div>
<div class="tips">
{{showObj.audio[index].tips}}
</div>
<div class="title">{{showObj.audio[index].title}}</div>
<div class="tips">{{showObj.audio[index].tips}}</div>
</div>
<div :class="{'image-block':true}" ref="imageBlock" @click="imgPop=true">
<img ref="imgItem" :src="showObj.audio[index].image">
<img ref="imgItem" :src="showObj.audio[index].image" />
</div>
<div class="btnBox">
<div class="title-block hp">
<div class="title">
{{showObj.audio[index].title}}
</div>
<div class="tips">
{{showObj.audio[index].tips}}
</div>
<div class="title">{{showObj.audio[index].title}}</div>
<div class="tips">{{showObj.audio[index].tips}}</div>
</div>
<div class="btn-group hp">
<i v-if="playType===0" class="iconfont icon-icon_change1 " @click="changeType()"></i>
<i v-if="playType===1" class="iconfont icon-icon_change " @click="changeType()"></i>
<i v-if="playType===2" class="iconfont icon-icon_changge " @click="changeType()"></i>
<i v-if="playType===0" class="iconfont icon-icon_change1" @click="changeType()"></i>
<i v-if="playType===1" class="iconfont icon-icon_change" @click="changeType()"></i>
<i v-if="playType===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
<i class="iconfont icon-icon_left" @click="lastOne()"></i>
<i class="iconfont icon-icon_stop" v-if="!playFlag" @click="onPlay(true)"></i>
<i class="iconfont icon-icon_begin" v-if="playFlag" @click="onStop(true)"></i>
<i class="iconfont icon-icon_right " @click="nextOne(true)"></i>
<i class="iconfont icon-icon_list" @click="popupVisible=!popupVisible;sendConsole('展开列表')"></i>
<i class="iconfont icon-icon_right" @click="nextOne(true)"></i>
<i
class="iconfont icon-icon_list"
@click="popupVisible=!popupVisible;sendConsole('展开列表')"
></i>
<!-- <i class="playImage list" @click="popupVisible=!popupVisible"></i>
<i class="playImage last" @click="lastOne()"></i>
<i class="playImage play" v-if="!playFlag" @click="onPlay"></i>
<i class="playImage stop" v-if="playFlag" @click="onStop"></i>
<i class="playImage next" @click="nextOne()"></i>
<i :class="{playImage:true,replay:playType===1,replayAll:playType===0,listPlay:playType==2}" @click="changeType()"></i> -->
<i :class="{playImage:true,replay:playType===1,replayAll:playType===0,listPlay:playType==2}" @click="changeType()"></i>-->
</div>
</div>
</div>
<i v-if="!hasCollect&&userCourse.periods_list" class="iconfont icon-icon_like collect" @click="changeCollect"></i>
<i v-if="hasCollect&&userCourse.periods_list" class="iconfont icon-icon_like1 collect" @click="changeCollect"></i>
<i
v-if="!hasCollect&&userCourse.periods_list"
class="iconfont icon-icon_like collect"
@click="changeCollect"
></i>
<i
v-if="hasCollect&&userCourse.periods_list"
class="iconfont icon-icon_like1 collect"
@click="changeCollect"
></i>
<div class="range-block">
<div class="time-block">
<div class="left-time">{{startTime}}</div>
<div class="right-time">{{overTime}}</div>
</div>
<input type="range" min="0" :max="offset" v-model="range" :style="{backgroundSize:`${offset?range/offset*100:0}% 100%`}"/>
<input
type="range"
min="0"
:max="offset"
v-model="range"
:style="{backgroundSize:`${offset?range/offset*100:0}% 100%`}"
/>
</div>
</div>
<div class="btn-group">
<i v-if="playType===0" class="iconfont icon-icon_change1 " @click="changeType()"></i>
<i v-if="playType===1" class="iconfont icon-icon_change " @click="changeType()"></i>
<i v-if="playType===2" class="iconfont icon-icon_changge " @click="changeType()"></i>
<i v-if="playType===0" class="iconfont icon-icon_change1" @click="changeType()"></i>
<i v-if="playType===1" class="iconfont icon-icon_change" @click="changeType()"></i>
<i v-if="playType===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
<i class="iconfont icon-icon_left" @click="lastOne()"></i>
<i class="iconfont icon-icon_stop" v-if="!playFlag" @click="onPlay(true)"></i>
<i class="iconfont icon-icon_begin" v-if="playFlag" @click="onStop(true)"></i>
<i class="iconfont icon-icon_right " @click="nextOne(true)"></i>
<i class="iconfont icon-icon_right" @click="nextOne(true)"></i>
<i class="iconfont icon-icon_list" @click="popupVisible=!popupVisible;sendConsole('展开列表')"></i>
</div>
<div class="parent-finish">
<div class="finish-block" v-if="contentData.title === 3">
<img :src="finishStuat" @click="finishStudy">
<img :src="finishStuat" @click="finishStudy" />
</div>
</div>
<star-block @showShare="share_show = true" @changeShow="changeStar" :contentData="contentData"/>
<star-block
@showShare="share_show = true"
@changeShow="changeStar"
:contentData="contentData"
/>
</div>
<mt-popup
v-model="popupVisible"
position="bottom" style="background: transparent">
<mt-popup v-model="popupVisible" position="bottom" style="background: transparent">
<div class="list-popup" v-if="showObj.audio">
<div :class="{'list-block':true,active:i=== index}" v-for="(data,i) in this.showObj.audio" @click="changeIndex(i);sendConsole('列表选择音频')">
<div
:class="{'list-block':true,active:i=== index}"
v-for="(data,i) in this.showObj.audio"
@click="changeIndex(i);sendConsole('列表选择音频')"
>
{{data.title}}
<i :class="{playImage:true,zDefaultIcon:i !== index,zIcon:i === index}"></i>
</div>
<div class="close-btn" @click="popupVisible=false">
关闭
</div>
<div class="close-btn" @click="popupVisible=false">关闭</div>
</div>
</mt-popup>
<mt-popup
v-model="imgPop"
style="background: transparent">
<mt-popup v-model="imgPop" style="background: transparent">
<div class="imgPop-block" v-if="showObj.audio">
<img :src="showObj.audio[index].image"/>
<img :src="showObj.audio[index].image" />
</div>
</mt-popup>
<mt-popup
v-model="popupVisible2" style="background: transparent">
<mt-popup v-model="popupVisible2" style="background: transparent">
<div @click="popupVisible2=false">
<no-finish-dia/>
<no-finish-dia />
</div>
</mt-popup>
<div v-if="share_show">
<share-page @backList="backList()" ref="sharePage" @closeShare="closeShare()" :contentData="contentData"/>
<share-page
@backList="backList()"
ref="sharePage"
@closeShare="closeShare()"
:contentData="contentData"
/>
</div>
<audio ref="audioDom" id='audioDom' class="audio" :src="audioPoint"></audio>
<audio ref="audioDom" id="audioDom" class="audio" :src="audioPoint"></audio>
</div>
</template>
<script>
import { Toast } from 'vant';
import {Popup} from 'mint-ui'
import tapToVideo from '../../assets/tapToVideo.png'
import {getUserCollectApi,addUserCollectApi,delUserCollectApi,subUserLessonApi,getUserWatchApi } from "../../service/api";
import finishStuat from '../../assets/newLesson/finishStudy.png'
import noFinishDia from './nofinishdia'
import sharePage from './share'
import starBlock from './star'
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
export default {
import { Toast } from "vant";
import { Popup } from "mint-ui";
import tapToVideo from "../../assets/tapToVideo.png";
import {
getUserCollectApi,
addUserCollectApi,
delUserCollectApi,
subUserLessonApi,
getUserWatchApi
} from "../../service/api";
import finishStuat from "../../assets/newLesson/finishStudy.png";
import noFinishDia from "./nofinishdia";
import sharePage from "./share";
import starBlock from "./star";
import audioGood from "../../assets/good.mp3";
import audioGreat from "../../assets/great.mp3";
import audioPerfect from "../../assets/perfect.mp3";
export default {
name: "fun",
props:[
'contentData',
],
components:{
props: ["contentData"],
components: {
noFinishDia,
starBlock,
sharePage,
[Popup.name]:Popup
[Popup.name]: Popup
},
data(){
return{
userCourse:{},
finishStuat:finishStuat,
popupVisible:false,
collectPop:false,
index:0,
star:false,
popupVisible2:false,
hasCollect:false,
ageShow:false,
imgPop:false,
startTime:'00:00',
overTime:'00:00',
range:0,
showObj:{
audio:null,
change:false
data() {
return {
userCourse: {},
finishStuat: finishStuat,
popupVisible: false,
collectPop: false,
index: 0,
star: false,
popupVisible2: false,
hasCollect: false,
ageShow: false,
imgPop: false,
startTime: "00:00",
overTime: "00:00",
range: 0,
showObj: {
audio: null,
change: false
},
share_show:false,
tapToVideo:tapToVideo,
playFlag:false,
offset:0,
timer:null,
playType:Number(localStorage.getItem('playType'))|0,
audioPoint:'' ,
}
share_show: false,
tapToVideo: tapToVideo,
playFlag: false,
offset: 0,
timer: null,
playType: Number(localStorage.getItem("playType")) | 0,
audioPoint: ""
};
},
mounted(){
mounted() {
this.changeAge(this.contentData.age);
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
if(this.userCourse.periods_list){
if (this.userCourse.periods_list) {
this.checkCollect();
}
},
methods:{
changeStar(data){
this.star = data
methods: {
changeStar(data) {
this.star = data;
},
backList(){
this.$emit('backList')
backList() {
this.$emit("backList");
},
closeShare(){
this.share_show=false
closeShare() {
this.share_show = false;
},
sendConsole(data){
this.$sa.track('watchClick',{
buttonName:data,
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
sendConsole(data) {
this.$sa.track("watchClick", {
buttonName: data,
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
// 改变收藏状态
changeCollect(){
if(this.hasCollect){
changeCollect() {
if (this.hasCollect) {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'取消收藏',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "取消收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
delUserCollectApi(this.hasCollect).then(res=>{
delUserCollectApi(this.hasCollect).then(res => {
this.hasCollect = false;
Toast('取消收藏');
this.checkCollect()
})
}else{
Toast("取消收藏");
this.checkCollect();
});
} else {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'添加收藏',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "添加收藏",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let json = {
category_id:lessonDetail.id,
type:1,
title:this.showObj.audio[this.index].title,
sub_title:'来自于 '+lessonDetail.title,
url:this.showObj.audio[this.index].url,
cover:this.showObj.audio[this.index].image
category_id: lessonDetail.id,
type: 1,
title: this.showObj.audio[this.index].title,
sub_title: "来自于 " + lessonDetail.title,
url: this.showObj.audio[this.index].url,
cover: this.showObj.audio[this.index].image
};
addUserCollectApi(json).then(res=>{
Toast('收藏成功,快去主页收藏夹看一看吧');
this.checkCollect()
}).catch(this.checkCollect())
addUserCollectApi(json)
.then(res => {
Toast("收藏成功,快去主页收藏夹看一看吧");
this.checkCollect();
})
.catch(this.checkCollect());
}
},
// 获取收藏状态
checkCollect(){
let json ={
url:this.showObj.audio[this.index].url
checkCollect() {
let json = {
url: this.showObj.audio[this.index].url
};
// debugger
getUserCollectApi(json).then(res=>{
this.hasCollect = res.list.length<1? false : res.list[0].id
})
getUserCollectApi(json).then(res => {
this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
});
},
// 播放音频
onPlay(flag){
if(flag){
onPlay(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'播放音频',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "播放音频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.$refs.audio.play();
},
// 播放暂停
onStop(flag){
if(flag){
onStop(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'暂停播放',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "暂停播放",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.$refs.audio.pause();
this.playFlag = false
this.playFlag = false;
// console.log(this.$refs.imgItem)
var iTransform = getComputedStyle(this.$refs.imgItem).transform;
var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
this.$refs.imageBlock.style.transform = cTransform === 'none'
? iTransform
: iTransform.concat(' ', cTransform);
this.$refs.imgItem.classList.remove('swin');
this.$refs.imageBlock.style.transform =
cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
this.$refs.imgItem.classList.remove("swin");
},
lastOne(){
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'上一首',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
lastOne() {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "上一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
if(this.index > 0){
this.index --;
this.keepPlay()
}else if(this.playType === 0 && this.showObj.audio.length > 1){
this.index = this.showObj.audio.length-1;
this.keepPlay()
}else{
Toast('已经是第一首');
if (this.index > 0) {
this.index--;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = this.showObj.audio.length - 1;
this.keepPlay();
} else {
Toast("已经是第一首");
}
},
changeIndex(i){
changeIndex(i) {
this.index = i;
this.popupVisible = false;
this.keepPlay()
this.keepPlay();
},
keepPlay(){
if(this.playFlag){
this.$nextTick(()=>{
this.onPlay()
})
}else{
this.$nextTick(()=>{
this.onStop()
})
keepPlay() {
if (this.playFlag) {
this.$nextTick(() => {
this.onPlay();
});
} else {
this.$nextTick(() => {
this.onStop();
});
}
},
nextOne(flag){
if(flag){
nextOne(flag) {
if (flag) {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'下一首',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "下一首",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
if(this.index < this.showObj.audio.length-1){
this.index ++;
this.keepPlay()
}else if(this.playType === 0 && this.showObj.audio.length > 1){
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.keepPlay();
} else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = 0;
this.keepPlay()
}else{
Toast('已经是最后一首');
this.keepPlay();
} else {
Toast("已经是最后一首");
}
},
// 音频准备就绪
canPlay(){
canPlay() {
let audio = this.$refs.audio;
this.offset = Math.ceil(parseInt(audio.duration)|0);
this.$nextTick(()=>{
this.getDuration()
})
this.offset = Math.ceil(parseInt(audio.duration) | 0);
this.$nextTick(() => {
this.getDuration();
});
},
// 播放中方法
playing(){
playing() {
let audio = this.$refs.audio;
this.playFlag = true;
this.$refs.imgItem.classList.add('swin')
this.$refs.imgItem.classList.add("swin");
this.timer = setInterval(() => {
let min = null;
if(parseInt(audio.currentTime / 60)<10){
min = '0' + parseInt(audio.currentTime / 60)
}else{
min = parseInt(audio.currentTime / 60)
if (parseInt(audio.currentTime / 60) < 10) {
min = "0" + parseInt(audio.currentTime / 60);
} else {
min = parseInt(audio.currentTime / 60);
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.startTime = min + ':' + sec; /* 00:00 */
this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime);
if(this.range === this.offset && this.offset !== 0) {
this.range=0;/*播放结束后进度条归零*/
this.startTime='00:00'; /*播放结束后时间归零*/
if (this.range === this.offset && this.offset !== 0) {
this.range = 0; /*播放结束后进度条归零*/
this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver();
clearInterval(this.timer)
clearInterval(this.timer);
}
}, 1000)
}, 1000);
},
// 暂停计时器
stopTime(){
stopTime() {
clearInterval(this.timer);
},
// 获取音频总长度
getDuration(){
getDuration() {
let min = null;
if(this.offset === 0 ){
this.overTime = '正在加载中...'
}else{
if(parseInt(this.offset / 60)<10){
min = '0' + parseInt(this.offset / 60)
}else{
min = parseInt(this.offset / 60)
if (this.offset === 0) {
this.overTime = "正在加载中...";
} else {
if (parseInt(this.offset / 60) < 10) {
min = "0" + parseInt(this.offset / 60);
} else {
min = parseInt(this.offset / 60);
}
let sec = parseInt(this.offset % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.overTime = min + ':' + sec; /* 00:00 */
this.overTime = min + ":" + sec; /* 00:00 */
}
},
// 播放完毕
onOver(){
onOver() {
switch (this.playType) {
case 0:
if(this.index < this.showObj.audio.length-1){
this.index++
}else{
this.index=0
if (this.index < this.showObj.audio.length - 1) {
this.index++;
} else {
this.index = 0;
}
this.$nextTick(()=>{
this.onPlay()
this.$nextTick(() => {
this.onPlay();
});
break;
case 1:
this.range = 0;
this.$nextTick(()=>{
this.onPlay()
this.$nextTick(() => {
this.onPlay();
});
break;
case 2:
if(this.index < this.showObj.audio.length-1){
if (this.index < this.showObj.audio.length - 1) {
this.index++;
this.$nextTick(()=>{
this.onPlay()
this.$nextTick(() => {
this.onPlay();
});
}else{
this.index=0;
this.$nextTick(()=>{
this.onStop()
} else {
this.index = 0;
this.$nextTick(() => {
this.onStop();
});
}
}
},
// 改变循环状态
changeType(){
this.playType < 2 ? this.playType++ :this.playType =0;
window.localStorage.setItem('playType',this.playType);
changeType() {
this.playType < 2 ? this.playType++ : (this.playType = 0);
window.localStorage.setItem("playType", this.playType);
switch (this.playType) {
case 1:
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'单曲循环',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "单曲循环",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast('单曲循环');
Toast("单曲循环");
break;
case 2:
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'顺序播放',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "顺序播放",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast('顺序播放');
Toast("顺序播放");
break;
case 0:
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'列表循环',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail"))
.themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "列表循环",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
Toast('列表循环');
break
Toast("列表循环");
break;
}
},
changeAge(value){
if(this.contentData.content.age && value === 2){
changeAge(value) {
if (this.contentData.content.age && value === 2) {
this.showObj = {
audio:this.contentData.content.audio2,
change:this.contentData.content.change2
}
}else{
audio: this.contentData.content.audio2,
change: this.contentData.content.change2
};
} else {
this.showObj = {
audio:this.contentData.content.audio,
change:this.contentData.content.change
}
audio: this.contentData.content.audio,
change: this.contentData.content.change
};
}
this.playFlag = false;
this.startTime='00:00';
this.overTime='00:00'
this.startTime = "00:00";
this.overTime = "00:00";
},
finishStudy(){
this.sendConsole('完成今日学习');
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let query = JSON.parse(sessionStorage.getItem('classQuery'))
finishStudy() {
this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let query = JSON.parse(sessionStorage.getItem("classQuery"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type:0,
page_id:5,
stay_time:lookTime,
page_type: 0,
page_id: 5,
stay_time: lookTime
};
getUserWatchApi().then(res=>{
this.$store.dispatch('setWatchDetail',res)
subUserLessonApi(query.elementId,query.category_id,query.periods_id,json).then(res=>{
getUserWatchApi().then(res => {
this.$store.dispatch("setWatchDetail", res);
subUserLessonApi(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
if((Number(lookTime) + Number(lessonDetail.total_watch_time))/60 < 7){
this.popupVisible2 = true
}else{
this.share_show = true
if (
(Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
7
) {
this.popupVisible2 = true;
} else {
this.share_show = true;
}
})
});
// this.$refs.sharePage.playAudio()
setTimeout(() => {
if(this.$store.state.lookStatus==0){
this.audioPoint = audioGood
}else if(this.$store.state.lookStatus==1){
this.audioPoint = audioGreat
}else{
this.audioPoint = audioPerfect
if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood;
// console.log('good')
} else if (this.$store.state.lookStatus == 1) {
this.audioPoint = audioGreat;
// console.log('good2')
} else {
this.audioPoint = audioPerfect;
// console.log('good3')
}
setTimeout(()=>{
this.$refs.audioDom.load()
setTimeout(()=>{
this.$refs.audioDom.play()
},200)
}, 700);
}, 1000);
// this.$refs.sharePage.initPage()
}
},
},
watch:{
'contentData':{
handler:function() { //特别注意，不能用箭头函数，箭头函数，this指向全局
watch: {
contentData: {
handler: function() {
//特别注意，不能用箭头函数，箭头函数，this指向全局
this.changeAge(this.contentData.age);
this.index = 0;
this.checkCollect()
this.checkCollect();
},
deep: true
},
'index'(value){
index(value) {
this.checkCollect();
},
'range'(value,value2){
range(value, value2) {
let audio = this.$refs.audio;
if(Math.abs(value - value2) > 2){
if (Math.abs(value - value2) > 2) {
this.timer = setInterval(() => {
let min = null;
if(parseInt(audio.currentTime / 60)<10){
min = '0' + parseInt(audio.currentTime / 60)
}else{
min = parseInt(audio.currentTime / 60)
if (parseInt(audio.currentTime / 60) < 10) {
min = "0" + parseInt(audio.currentTime / 60);
} else {
min = parseInt(audio.currentTime / 60);
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.startTime = min + ':' + sec; /* 00:00 */
this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime);
if(this.range == this.offset && this.offset !== 0) {
this.range=0;/*播放结束后进度条归零*/
this.startTime='00:00'; /*播放结束后时间归零*/
if (this.range == this.offset && this.offset !== 0) {
this.range = 0; /*播放结束后进度条归零*/
this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver();
clearInterval(this.timer)
clearInterval(this.timer);
}
}, 1000);
audio.currentTime = value;
}
}
},
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.playImage{background-size:40*@toVw 290*@toVw;display: inline-block}
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 0;}
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 -8*@toVw;vertical-align: bottom}
.next{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
.toBig{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
.collectDefault{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
.collect{height:16*@toVw;width:16*@toVw;background-position:0 -109*@toVw;}
.last{height:16*@toVw;width:16*@toVw;background-position:0 -125*@toVw;}
.list{height:16*@toVw;width:16*@toVw;background-position:0 -141*@toVw;}
.close{height:17*@toVw;width:17*@toVw;background-position:0 -157*@toVw;}
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -174*@toVw;float: right}
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -192*@toVw;float: right;}
.play{height:40*@toVw;width:40*@toVw;background-position:0 -210*@toVw;}
.stop{height:40*@toVw;width:40*@toVw;background-position:0 -250*@toVw;}
.iconfont{color: #CCCCCC;}
.icon-icon_stop{font-size: 50*@toVw;color: #69c0ff;}
.icon-icon_begin{font-size: 50*@toVw;color: #69c0ff;}
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_list{font-size: 20*@toVw;}
.icon-icon_change1{font-size: 21*@toVw;width: 20*@toVw;}
.icon-icon_change{font-size: 20*@toVw;width: 20*@toVw;}
.icon-icon_changge{font-size: 19*@toVw;width: 20*@toVw;}
.hp-left{position: relative;
.collect{position: absolute;right: 38*@toVw;bottom:48*@toVw ;}
}
.icon-icon_like1{color: #ff7d77;}
.collect-block{
padding: 10*@toVw;
border-radius: 4*@toVw;
@import "../../util/public";
.playImage {
background-size: 40 * @toVw 290 * @toVw;
display: inline-block;
}
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 -8 * @toVw;
vertical-align: bottom;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.toBig {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.collectDefault {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.collect {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -109 * @toVw;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -125 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -141 * @toVw;
}
.close {
height: 17 * @toVw;
width: 17 * @toVw;
background-position: 0 -157 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -174 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -192 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -210 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -250 * @toVw;
}
.iconfont {
color: #cccccc;
}
.icon-icon_stop {
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
font-size: 50 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 21 * @toVw;
width: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
width: 20 * @toVw;
}
.icon-icon_changge {
font-size: 19 * @toVw;
width: 20 * @toVw;
}
.hp-left {
position: relative;
.collect {
position: absolute;
right: 38 * @toVw;
bottom: 48 * @toVw;
}
}
.icon-icon_like1 {
color: #ff7d77;
}
.collect-block {
padding: 10 * @toVw;
border-radius: 4 * @toVw;
background: white;
}
@-webkit-keyframes spin {
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.swin{-webkit-animation: spin 8s linear 1s 5 alternate;animation: spin 8s linear infinite;}
.pause{animation-play-state: paused;-webkit-animation-play-state:paused;}
.noanimation {
-webkit-animation:none !important;animation:none !important;
}
.content{
}
.swin {
-webkit-animation: spin 8s linear 1s 5 alternate;
animation: spin 8s linear infinite;
}
.pause {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.noanimation {
-webkit-animation: none !important;
animation: none !important;
}
.content {
background: white;
width: 315*@toVw;
width: 315 * @toVw;
position: absolute;
top: 70*@toVw;
left: 20*@toVw;
right: 20*@toVw;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8*@toVw;
border-radius: 8 * @toVw;
text-align: center;
padding: 10*@toVw;
.image-block{
width: 188*@toVw;
height: 188*@toVw;
margin-top: 5*@toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
padding: 10 * @toVw;
.image-block {
width: 188 * @toVw;
height: 188 * @toVw;
margin-top: 5 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
border-radius: 999*@toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1);
border:4px solid rgba(255,255,255,1);
img{
width: 188*@toVw;
height: 188*@toVw;
border-radius: 999 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 188 * @toVw;
height: 188 * @toVw;
border-radius: 999 * @toVw;
}
}
.title-block{
margin-top: 20*@toVw;
margin-bottom: 20*@toVw;
&.hp{
.title-block {
margin-top: 20 * @toVw;
margin-bottom: 20 * @toVw;
&.hp {
display: none;
}
.title{
font-size:16*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.tips{
font-size:14*@toVw;
margin-top: 6*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block{
.range-block {
width: 250 * @toVw;
margin-top: 10*@toVw;
.time-block{
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
margin-top: 10 * @toVw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after{
content: '';
&:after {
content: "";
display: block;
clear: both;
}
.left-time{
.left-time {
float: left;
}
.right-time{
.right-time {
float: right;
}
}
input[type=range] {
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
border: none;
outline: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 4*@toVw;
border-radius: 2*@toVw ;
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type=range]:focus {
input[type="range"]:focus {
-webkit-appearance: none;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
border: none;
outline: none;
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw;
width: 16*@toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group{
margin-top: 15*@toVw;
width: 280*@toVw;
.btn-group {
margin-top: 15 * @toVw;
width: 280 * @toVw;
display: -webkit-flex;
&.hp{
&.hp {
display: none;
}
}
}
.list-popup{
width: 375*@toVw;
max-height: 345*@toVw;
}
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20*@toVw;
.list-block{
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20*@toVw;
padding:12*@toVw 36*@toVw;
border-bottom: 1*@toVw solid #dddddd;
&.active{
color: #49E2A5;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn{
.close-btn {
text-align: center;
padding: 20*@toVw;
}
padding: 20 * @toVw;
}
.imgPop-block{
max-height: 500*@toVw;
}
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img{
max-width: 300*@toVw;
}
img {
max-width: 300 * @toVw;
}
.btn-block{
}
.btn-block {
position: relative;
// margin-top: 15*@toVw;
text-align: center;
.age-block{
height: 28*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
.age-block {
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
position: absolute;
padding: 0 13*@toVw;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
}
.age-change-block{
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: absolute;
top: 37*@toVw;
top: 37 * @toVw;
left: 0;
width: 66*@toVw;
border-radius: 8*@toVw;
border: 1*@toVw solid #666666;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
padding: 6*@toVw 11*@toVw;
width: 66 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child{
border-bottom: 1*@toVw solid #eee;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.change-block{
border-radius: 1000*@toVw;
width: 144*@toVw;
border:1*@toVw solid #40A9FF;
&:after{
content: '';
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
display: block;
clear: both;
}
div{
div {
float: left;
width: 50%;
border-radius: 100*@toVw;
font-size:12*@toVw;
height: 28*@toVw;
line-height: 28*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(204,204,204,1);
&.active{
background: #40A9FF;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
background: #40a9ff;
color: white;
}
}
}
}
.change-block-HP{
}
.change-block-HP {
display: none;
}
.parent-finish{
}
.parent-finish {
// position: absolute;
// bottom: 0 * @toVw;
width: 100%;
left: 0;
top: 430*@toVw;
.finish-block{
top: 430 * @toVw;
.finish-block {
// position: absolute;
width: 100%;
left: 0;
padding: 0;
margin:20*@toVw 0 0;
margin: 20 * @toVw 0 0;
text-align: center;
bottom: 0;
img{
width: 202*@toVw;
}
}
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.finish-block{display: none}
.playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2') no-repeat;background-size:40*@toVw 225*@toVw;display: inline-block}
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;}
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom}
.last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
.next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
.list{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -109*@toVw; float: right}
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right}
.play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;}
.stop{height:40*@toVw;width:40*@toVw;background-position:0 -185*@toVw;}
.icon-icon_stop{height:50*@toVw;width:50*@toVw;font-size: 48*@toVw;color: #69c0ff;}
.icon-icon_begin{height:50*@toVw;width:50*@toVw;font-size: 48*@toVw;color: #69c0ff;}
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_list{font-size: 20*@toVw;}
.icon-icon_change1{font-size: 20*@toVw;}
.icon-icon_change{font-size: 20*@toVw;}
.icon-icon_changge{font-size: 20*@toVw;}
img {
width: 202 * @toVw;
}
}
}
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.finish-block {
display: none;
}
.playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
no-repeat;
background-size: 40 * @toVw 225 * @toVw;
display: inline-block;
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
vertical-align: bottom;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
float: right;
}
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
}
.hp-left{position: relative;
.hp-left {
position: relative;
margin-top: 8vh;
// margin-bottom: 1vh;
// margin-left: 0;
.collect{display: none;}
.collect {
display: none;
}
.audio-page{
}
.audio-page {
position: absolute;
top: 5*@toVw;
bottom: 5*@toVw;
left: 5*@toVw;
right: 5*@toVw;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
overflow: auto;
border-radius:8*@toVw;
.content{
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8*@toVw;
border-radius: 8 * @toVw;
padding: 0;
.hp-left{
.hp-left {
flex: 1;
margin-right: 80*@toVw;
.hp-top{
margin-right: 80 * @toVw;
.hp-top {
display: -webkit-flex;
display: flex;
width: 100%;
}
}
.image-block{
.image-block {
flex: 1;
width: 150*@toVw;
height: 150*@toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 99*@toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1);
border:4px solid rgba(255,255,255,1);
img{
border-radius: 99 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 100%;
border-radius: 999 * @toVw;
}
}
.btnBox{
.btnBox {
flex: 1;
}
.title-block{
margin-top: 24*@toVw;
.title-block {
margin-top: 24 * @toVw;
display: none;
&.hp{
&.hp {
display: -webkit-flex;
// display: block;
width: 300*@toVw;
width: 300 * @toVw;
}
.title{
font-size:16*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
// width: 100*@toVw;
color:rgba(102,102,102,1);
color: rgba(102, 102, 102, 1);
}
.tips{
font-size:14*@toVw;
margin-top: 6*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block{
width: 422*@toVw;
margin-top: 16*@toVw;
.range-block {
width: 422 * @toVw;
margin-top: 16 * @toVw;
// margin-left: 1vw;
.time-block{
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after{
content: '';
&:after {
content: "";
display: block;
clear: both;
}
.left-time{
.left-time {
float: left;
}
.right-time{
.right-time {
float: right;
}
}
input[type=range] {
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-runnable-track {
height: 4*@toVw;
border-radius: 2*@toVw ;
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
input[type="range"]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw;
width: 16*@toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group{
.btn-group {
margin-top: 15vh;
display: none;
width: 200*@toVw;
&.hp{
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
}
}
}
.list-popup{
width: 375*@toVw;
max-height: 345*@toVw;
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20*@toVw;
.list-block{
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20*@toVw;
padding:12*@toVw 36*@toVw;
border-bottom: 1*@toVw solid #dddddd;
&.active{
color: #49E2A5;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn{
.close-btn {
text-align: center;
padding: 20*@toVw;
padding: 20 * @toVw;
}
}
.imgPop-block{
max-height: 500*@toVw;
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img{
max-width: 300*@toVw;
img {
max-width: 300 * @toVw;
}
}
.btn-block{
position:relative;
min-width:90*@toVw ;
.btn-block {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block{
.age-block {
display: block;
position: static;
padding: 0;
height: 28*@toVw;
width: 88*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
}
.age-change-block{
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: static;
width: 80*@toVw;
margin-top: 10*@toVw;
border-radius: 8*@toVw;
border: 1*@toVw solid #666666;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
padding: 6*@toVw 11*@toVw;
width: 80 * @toVw;
margin-top: 10 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child{
border-bottom: 1*@toVw solid #eee;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.change-block-HP{
.change-block-HP {
position: fixed;
top:~'calc(82vh)' ;
right: 40*@toVw;
top: ~"calc(82vh)";
right: 40 * @toVw;
display: block;
width: 78*@toVw;
img{
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block{
.change-block {
display: none;
}
}
}
}
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.playImage {
background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
no-repeat;
background-size: 40 * @toVw 225 * @toVw;
display: inline-block;
}
._154722344142123489 {
height: 5 * @toVw;
width: 9 * @toVw;
background-position: 0 0;
}
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
vertical-align: bottom;
}
.last {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -13 * @toVw;
}
.listPlay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -29 * @toVw;
}
.replay {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -45 * @toVw;
}
.next {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -61 * @toVw;
}
.replayAll {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -77 * @toVw;
}
.list {
height: 16 * @toVw;
width: 16 * @toVw;
background-position: 0 -93 * @toVw;
}
.zDefaultIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -109 * @toVw;
float: right;
}
@media screen and (min-aspect-ratio: ~"20/8"){
@toVw:100/900vw;
.playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2') no-repeat;background-size:40*@toVw 225*@toVw;display: inline-block}
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;}
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom}
.last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
.next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
.list{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -109*@toVw; float: right}
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right}
.play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;}
.stop{height:40*@toVw;width:40*@toVw;background-position:0 -185*@toVw;}
.icon-icon_stop{height:50*@toVw;width:50*@toVw;font-size: 48*@toVw;color: #69c0ff;}
.icon-icon_begin{height:50*@toVw;width:50*@toVw;font-size: 48*@toVw;color: #69c0ff;}
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;}
.icon-icon_list{font-size: 20*@toVw;}
.icon-icon_change1{font-size: 20*@toVw;}
.icon-icon_change{font-size: 20*@toVw;}
.icon-icon_changge{font-size: 20*@toVw;}
.audio-page{
.zIcon {
height: 18 * @toVw;
width: 18 * @toVw;
background-position: 0 -127 * @toVw;
float: right;
}
.play {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -145 * @toVw;
}
.stop {
height: 40 * @toVw;
width: 40 * @toVw;
background-position: 0 -185 * @toVw;
}
.icon-icon_stop {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_begin {
height: 50 * @toVw;
width: 50 * @toVw;
font-size: 48 * @toVw;
color: #69c0ff;
}
.icon-icon_left {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_right {
height: 37 * @toVw;
width: 37 * @toVw;
font-size: 32 * @toVw;
color: #69c0ff;
}
.icon-icon_list {
font-size: 20 * @toVw;
}
.icon-icon_change1 {
font-size: 20 * @toVw;
}
.icon-icon_change {
font-size: 20 * @toVw;
}
.icon-icon_changge {
font-size: 20 * @toVw;
}
.audio-page {
position: absolute;
top: 5*@toVw;
bottom: 5*@toVw;
left: 5*@toVw;
right: 5*@toVw;
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
overflow: auto;
border-radius:8*@toVw;
.content{
position:static;
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: -webkit-flex;
border-radius: 8*@toVw;
border-radius: 8 * @toVw;
padding: 0;
.hp-left{
.hp-left {
flex: 1;
margin-right: 20*@toVw;
.hp-top{
margin-right: 20 * @toVw;
.hp-top {
display: -webkit-flex;
width: 100%;
}
}
.image-block{
width: 150*@toVw;
height: 150*@toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
.image-block {
width: 150 * @toVw;
height: 150 * @toVw;
box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden;
display: block;
margin: auto;
border-radius: 75*@toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1);
border:4px solid rgba(255,255,255,1);
img{
border-radius: 75 * @toVw;
box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border: 4px solid rgba(255, 255, 255, 1);
img {
width: 100%;
}
}
.title-block{
margin-top: 24*@toVw;
.title{
font-size:16*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
.title-block {
margin-top: 24 * @toVw;
.title {
font-size: 16 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.tips{
font-size:14*@toVw;
margin-top: 6*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
.tips {
font-size: 14 * @toVw;
margin-top: 6 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
}
.range-block{
.range-block {
width: auto;
margin-top: 16*@toVw;
.time-block{
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
margin-top: 16 * @toVw;
.time-block {
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
text-align: left;
&:after{
content: '';
&:after {
content: "";
display: block;
clear: both;
}
.left-time{
.left-time {
float: left;
}
.right-time{
.right-time {
float: right;
}
}
input[type=range] {
input[type="range"] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
#d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%;
border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4*@toVw;
border-radius: 2*@toVw ;
input[type="range"]::-webkit-slider-runnable-track {
height: 4 * @toVw;
border-radius: 2 * @toVw;
}
input[type=range]:focus {
input[type="range"]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw;
width: 16*@toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
height: 16 * @toVw;
width: 16 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff;
}
}
.btn-group{
.btn-group {
margin-top: 15vh;
display: none;
width: 200*@toVw;
&.hp{
width: 200 * @toVw;
&.hp {
display: -webkit-flex;
}
}
}
.list-popup{
width: 375*@toVw;
max-height: 345*@toVw;
.list-popup {
width: 375 * @toVw;
max-height: 345 * @toVw;
overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0;
border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white;
padding-top: 20*@toVw;
.list-block{
padding-top: 20 * @toVw;
.list-block {
display: block;
width: auto;
margin: 0 20*@toVw;
padding:12*@toVw 36*@toVw;
border-bottom: 1*@toVw solid #dddddd;
&.active{
color: #49E2A5;
margin: 0 20 * @toVw;
padding: 12 * @toVw 36 * @toVw;
border-bottom: 1 * @toVw solid #dddddd;
&.active {
color: #49e2a5;
}
}
.close-btn{
.close-btn {
text-align: center;
padding: 20*@toVw;
padding: 20 * @toVw;
}
}
.imgPop-block{
max-height: 500*@toVw;
.imgPop-block {
max-height: 500 * @toVw;
overflow: auto;
img{
max-width: 300*@toVw;
img {
max-width: 300 * @toVw;
}
}
.btn-block{
position:relative;
min-width:90*@toVw ;
.btn-block {
position: relative;
min-width: 90 * @toVw;
margin-top: 0;
display: block;
height: 100%;
.age-block{
.age-block {
display: block;
position: static;
padding: 0;
height: 28*@toVw;
width: 88*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
}
.age-change-block{
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
}
.age-change-block {
position: static;
width: 80*@toVw;
margin-top: 10*@toVw;
border-radius: 8*@toVw;
border: 1*@toVw solid #666666;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
padding: 6*@toVw 11*@toVw;
width: 80 * @toVw;
margin-top: 10 * @toVw;
border-radius: 8 * @toVw;
border: 1 * @toVw solid #666666;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
padding: 6 * @toVw 11 * @toVw;
text-align: left;
&:first-child{
border-bottom: 1*@toVw solid #eee;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
.change-block-HP{
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78*@toVw;
img{
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block{
.change-block {
display: none;
}
}
}
}
}
</style>
src/main.js
View file @ 5527daaf
......@@ -40,9 +40,9 @@ Vue.component('scroll', scroll);
// Vue.prototype.$throw = (error)=> errorHandler(error,this);
/* eslint-disable no-new */
// if (process.env.NODE_ENV != 'production') {
// new VConsole();
// }
if (process.env.NODE_ENV != 'production') {
new VConsole();
}
router.beforeEach((to, from, next) => {
next()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment