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 @@ ...@@ -11,4 +11,4 @@
position: fixed; position: fixed;
background: #f4f4f4; 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> /* 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 \ 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}}([]); !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 \ No newline at end of file
src/components/newLesson/audio.vue
View file @ 5527daaf
<template> <template>
<div class="audio-page"> <div class="audio-page">
<div class="content" v-if="showObj.audio"> <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="hp-left">
<div class="btn-block"> <div class="btn-block">
<div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow"> <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 === 1">
<div v-if="contentData.age === 2">4-6岁<i class="playImage _154722344142123489"></i></div> 0-3岁
<i class="playImage _154722344142123489"></i>
</div>
<div v-if="contentData.age === 2">
4-6岁
<i class="playImage _154722344142123489"></i>
</div>
</div> </div>
<div class="age-change-block" v-show="ageShow" v-if="contentData.content.age"> <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 = 1;sendConsole('选择分龄')">
<div @click="contentData.age = 2;sendConsole('选择分龄')">4-6岁<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i></div> 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>
<div v-if="showObj.change" class="change-block-HP" @click="contentData.type = 'video';sendConsole('切换视频教学')"> </div>
<div class=""> <div
<img :src="tapToVideo"/> v-if="showObj.change"
class="change-block-HP"
@click="contentData.type = 'video';sendConsole('切换视频教学')"
>
<div class>
<img :src="tapToVideo" />
</div> </div>
</div> </div>
<div v-if="showObj.change" class="change-block"> <div v-if="showObj.change" class="change-block">
<div @click="contentData.type = 'video';sendConsole('切换视频教学')">视频教学</div> <div @click="contentData.type = 'video';sendConsole('切换视频教学')">视频教学</div>
<div class="active" >音频教学</div> <div class="active">音频教学</div>
</div> </div>
</div> </div>
<div class="hp-top"> <div class="hp-top">
<div class="title-block"> <div class="title-block">
<div class="title"> <div class="title">{{showObj.audio[index].title}}</div>
{{showObj.audio[index].title}} <div class="tips">{{showObj.audio[index].tips}}</div>
</div>
<div class="tips">
{{showObj.audio[index].tips}}
</div>
</div> </div>
<div :class="{'image-block':true}" ref="imageBlock" @click="imgPop=true"> <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>
<div class="btnBox"> <div class="btnBox">
<div class="title-block hp"> <div class="title-block hp">
<div class="title"> <div class="title">{{showObj.audio[index].title}}</div>
{{showObj.audio[index].title}} <div class="tips">{{showObj.audio[index].tips}}</div>
</div>
<div class="tips">
{{showObj.audio[index].tips}}
</div>
</div> </div>
<div class="btn-group hp"> <div class="btn-group hp">
<i v-if="playType===0" class="iconfont icon-icon_change1 " @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===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===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
<i class="iconfont icon-icon_left" @click="lastOne()"></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_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_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> <i
class="iconfont icon-icon_list"
@click="popupVisible=!popupVisible;sendConsole('展开列表')"
></i>
<!-- <i class="playImage list" @click="popupVisible=!popupVisible"></i> <!-- <i class="playImage list" @click="popupVisible=!popupVisible"></i>
<i class="playImage last" @click="lastOne()"></i> <i class="playImage last" @click="lastOne()"></i>
<i class="playImage play" v-if="!playFlag" @click="onPlay"></i> <i class="playImage play" v-if="!playFlag" @click="onPlay"></i>
<i class="playImage stop" v-if="playFlag" @click="onStop"></i> <i class="playImage stop" v-if="playFlag" @click="onStop"></i>
<i class="playImage next" @click="nextOne()"></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> </div>
</div> </div>
<i v-if="!hasCollect&&userCourse.periods_list" class="iconfont icon-icon_like collect" @click="changeCollect"></i> <i
<i v-if="hasCollect&&userCourse.periods_list" class="iconfont icon-icon_like1 collect" @click="changeCollect"></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="range-block">
<div class="time-block"> <div class="time-block">
<div class="left-time">{{startTime}}</div> <div class="left-time">{{startTime}}</div>
<div class="right-time">{{overTime}}</div> <div class="right-time">{{overTime}}</div>
</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> </div>
<div class="btn-group"> <div class="btn-group">
<i v-if="playType===0" class="iconfont icon-icon_change1 " @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===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===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
<i class="iconfont icon-icon_left" @click="lastOne()"></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_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_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> <i class="iconfont icon-icon_list" @click="popupVisible=!popupVisible;sendConsole('展开列表')"></i>
</div> </div>
<div class="parent-finish"> <div class="parent-finish">
<div class="finish-block" v-if="contentData.title === 3"> <div class="finish-block" v-if="contentData.title === 3">
<img :src="finishStuat" @click="finishStudy"> <img :src="finishStuat" @click="finishStudy" />
</div> </div>
</div> </div>
<star-block @showShare="share_show = true" @changeShow="changeStar" :contentData="contentData"/> <star-block
@showShare="share_show = true"
@changeShow="changeStar"
:contentData="contentData"
/>
</div> </div>
<mt-popup <mt-popup v-model="popupVisible" position="bottom" style="background: transparent">
v-model="popupVisible"
position="bottom" style="background: transparent">
<div class="list-popup" v-if="showObj.audio"> <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}} {{data.title}}
<i :class="{playImage:true,zDefaultIcon:i !== index,zIcon:i === index}"></i> <i :class="{playImage:true,zDefaultIcon:i !== index,zIcon:i === index}"></i>
</div> </div>
<div class="close-btn" @click="popupVisible=false"> <div class="close-btn" @click="popupVisible=false">关闭</div>
关闭
</div>
</div> </div>
</mt-popup> </mt-popup>
<mt-popup <mt-popup v-model="imgPop" style="background: transparent">
v-model="imgPop"
style="background: transparent">
<div class="imgPop-block" v-if="showObj.audio"> <div class="imgPop-block" v-if="showObj.audio">
<img :src="showObj.audio[index].image"/> <img :src="showObj.audio[index].image" />
</div> </div>
</mt-popup> </mt-popup>
<mt-popup <mt-popup v-model="popupVisible2" style="background: transparent">
v-model="popupVisible2" style="background: transparent">
<div @click="popupVisible2=false"> <div @click="popupVisible2=false">
<no-finish-dia/> <no-finish-dia />
</div> </div>
</mt-popup> </mt-popup>
<div v-if="share_show"> <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> </div>
<audio ref="audioDom" id='audioDom' class="audio" :src="audioPoint"></audio> <audio ref="audioDom" id="audioDom" class="audio" :src="audioPoint"></audio>
</div> </div>
</template> </template>
<script> <script>
import { Toast } from 'vant'; import { Toast } from "vant";
import {Popup} from 'mint-ui' import { Popup } from "mint-ui";
import tapToVideo from '../../assets/tapToVideo.png' import tapToVideo from "../../assets/tapToVideo.png";
import {getUserCollectApi,addUserCollectApi,delUserCollectApi,subUserLessonApi,getUserWatchApi } from "../../service/api"; import {
import finishStuat from '../../assets/newLesson/finishStudy.png' getUserCollectApi,
import noFinishDia from './nofinishdia' addUserCollectApi,
import sharePage from './share' delUserCollectApi,
import starBlock from './star' subUserLessonApi,
import audioGood from "../../assets/good.mp3"; getUserWatchApi
import audioGreat from "../../assets/great.mp3"; } from "../../service/api";
import audioPerfect from "../../assets/perfect.mp3"; import finishStuat from "../../assets/newLesson/finishStudy.png";
export default { 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", name: "fun",
props:[ props: ["contentData"],
'contentData', components: {
],
components:{
noFinishDia, noFinishDia,
starBlock, starBlock,
sharePage, sharePage,
[Popup.name]:Popup [Popup.name]: Popup
}, },
data(){ data() {
return{ return {
userCourse:{}, userCourse: {},
finishStuat:finishStuat, finishStuat: finishStuat,
popupVisible:false, popupVisible: false,
collectPop:false, collectPop: false,
index:0, index: 0,
star:false, star: false,
popupVisible2:false, popupVisible2: false,
hasCollect:false, hasCollect: false,
ageShow:false, ageShow: false,
imgPop:false, imgPop: false,
startTime:'00:00', startTime: "00:00",
overTime:'00:00', overTime: "00:00",
range:0, range: 0,
showObj:{ showObj: {
audio:null, audio: null,
change:false change: false
}, },
share_show:false, share_show: false,
tapToVideo:tapToVideo, tapToVideo: tapToVideo,
playFlag:false, playFlag: false,
offset:0, offset: 0,
timer:null, timer: null,
playType:Number(localStorage.getItem('playType'))|0, playType: Number(localStorage.getItem("playType")) | 0,
audioPoint:'' , audioPoint: ""
} };
}, },
mounted(){ mounted() {
this.changeAge(this.contentData.age); this.changeAge(this.contentData.age);
this.userCourse = JSON.parse(localStorage.getItem("userCourse")); this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
if(this.userCourse.periods_list){ if (this.userCourse.periods_list) {
this.checkCollect(); this.checkCollect();
} }
}, },
methods:{ methods: {
changeStar(data){ changeStar(data) {
this.star = data this.star = data;
}, },
backList(){ backList() {
this.$emit('backList') this.$emit("backList");
}, },
closeShare(){ closeShare() {
this.share_show=false this.share_show = false;
}, },
sendConsole(data){ sendConsole(data) {
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
buttonName:data, buttonName: data,
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
partName:this.contentData.partName, JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
elementID:this.$route.query.elementId.toString(), ),
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(){ changeCollect() {
if(this.hasCollect){ if (this.hasCollect) {
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'取消收藏', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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; this.hasCollect = false;
Toast('取消收藏'); Toast("取消收藏");
this.checkCollect() this.checkCollect();
}) });
}else{ } else {
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'添加收藏', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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 = { let json = {
category_id:lessonDetail.id, category_id: lessonDetail.id,
type:1, type: 1,
title:this.showObj.audio[this.index].title, title: this.showObj.audio[this.index].title,
sub_title:'来自于 '+lessonDetail.title, sub_title: "来自于 " + lessonDetail.title,
url:this.showObj.audio[this.index].url, url: this.showObj.audio[this.index].url,
cover:this.showObj.audio[this.index].image cover: this.showObj.audio[this.index].image
}; };
addUserCollectApi(json).then(res=>{ addUserCollectApi(json)
Toast('收藏成功,快去主页收藏夹看一看吧'); .then(res => {
this.checkCollect() Toast("收藏成功,快去主页收藏夹看一看吧");
}).catch(this.checkCollect()) this.checkCollect();
})
.catch(this.checkCollect());
} }
}, },
// 获取收藏状态 // 获取收藏状态
checkCollect(){ checkCollect() {
let json ={ let json = {
url:this.showObj.audio[this.index].url url: this.showObj.audio[this.index].url
}; };
// debugger // debugger
getUserCollectApi(json).then(res=>{ getUserCollectApi(json).then(res => {
this.hasCollect = res.list.length<1? false : res.list[0].id this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
}) });
}, },
// 播放音频 // 播放音频
onPlay(flag){ onPlay(flag) {
if(flag){ if (flag) {
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'播放音频', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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(); this.$refs.audio.play();
}, },
// 播放暂停 // 播放暂停
onStop(flag){ onStop(flag) {
if(flag){ if (flag) {
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'暂停播放', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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.$refs.audio.pause();
this.playFlag = false this.playFlag = false;
// console.log(this.$refs.imgItem) // console.log(this.$refs.imgItem)
var iTransform = getComputedStyle(this.$refs.imgItem).transform; var iTransform = getComputedStyle(this.$refs.imgItem).transform;
var cTransform = getComputedStyle(this.$refs.imageBlock).transform; var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
this.$refs.imageBlock.style.transform = cTransform === 'none' this.$refs.imageBlock.style.transform =
? iTransform cTransform === "none" ? iTransform : iTransform.concat(" ", cTransform);
: iTransform.concat(' ', cTransform); this.$refs.imgItem.classList.remove("swin");
this.$refs.imgItem.classList.remove('swin');
}, },
lastOne(){ lastOne() {
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'上一首', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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){ if (this.index > 0) {
this.index --; this.index--;
this.keepPlay() this.keepPlay();
}else if(this.playType === 0 && this.showObj.audio.length > 1){ } else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = this.showObj.audio.length-1; this.index = this.showObj.audio.length - 1;
this.keepPlay() this.keepPlay();
}else{ } else {
Toast('已经是第一首'); Toast("已经是第一首");
} }
}, },
changeIndex(i){ changeIndex(i) {
this.index = i; this.index = i;
this.popupVisible = false; this.popupVisible = false;
this.keepPlay() this.keepPlay();
}, },
keepPlay(){ keepPlay() {
if(this.playFlag){ if (this.playFlag) {
this.$nextTick(()=>{ this.$nextTick(() => {
this.onPlay() this.onPlay();
}) });
}else{ } else {
this.$nextTick(()=>{ this.$nextTick(() => {
this.onStop() this.onStop();
}) });
} }
}, },
nextOne(flag){ nextOne(flag) {
if(flag){ if (flag) {
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'下一首', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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){ if (this.index < this.showObj.audio.length - 1) {
this.index ++; this.index++;
this.keepPlay() this.keepPlay();
}else if(this.playType === 0 && this.showObj.audio.length > 1){ } else if (this.playType === 0 && this.showObj.audio.length > 1) {
this.index = 0; this.index = 0;
this.keepPlay() this.keepPlay();
}else{ } else {
Toast('已经是最后一首'); Toast("已经是最后一首");
} }
}, },
// 音频准备就绪 // 音频准备就绪
canPlay(){ canPlay() {
let audio = this.$refs.audio; let audio = this.$refs.audio;
this.offset = Math.ceil(parseInt(audio.duration)|0); this.offset = Math.ceil(parseInt(audio.duration) | 0);
this.$nextTick(()=>{ this.$nextTick(() => {
this.getDuration() this.getDuration();
}) });
}, },
// 播放中方法 // 播放中方法
playing(){ playing() {
let audio = this.$refs.audio; let audio = this.$refs.audio;
this.playFlag = true; this.playFlag = true;
this.$refs.imgItem.classList.add('swin') this.$refs.imgItem.classList.add("swin");
this.timer = setInterval(() => { this.timer = setInterval(() => {
let min = null; let min = null;
if(parseInt(audio.currentTime / 60)<10){ if (parseInt(audio.currentTime / 60) < 10) {
min = '0' + parseInt(audio.currentTime / 60) min = "0" + parseInt(audio.currentTime / 60);
}else{ } else {
min = parseInt(audio.currentTime / 60) min = parseInt(audio.currentTime / 60);
} }
let sec = parseInt(audio.currentTime % 60); let sec = parseInt(audio.currentTime % 60);
if (sec < 10) { if (sec < 10) {
sec = "0" + sec; sec = "0" + sec;
} }
this.startTime = min + ':' + sec; /* 00:00 */ this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime); this.range = parseInt(audio.currentTime);
if(this.range === this.offset && this.offset !== 0) { if (this.range === this.offset && this.offset !== 0) {
this.range=0;/*播放结束后进度条归零*/ this.range = 0; /*播放结束后进度条归零*/
this.startTime='00:00'; /*播放结束后时间归零*/ this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver(); this.onOver();
clearInterval(this.timer) clearInterval(this.timer);
} }
}, 1000) }, 1000);
}, },
// 暂停计时器 // 暂停计时器
stopTime(){ stopTime() {
clearInterval(this.timer); clearInterval(this.timer);
}, },
// 获取音频总长度 // 获取音频总长度
getDuration(){ getDuration() {
let min = null; let min = null;
if(this.offset === 0 ){ if (this.offset === 0) {
this.overTime = '正在加载中...' this.overTime = "正在加载中...";
}else{ } else {
if(parseInt(this.offset / 60)<10){ if (parseInt(this.offset / 60) < 10) {
min = '0' + parseInt(this.offset / 60) min = "0" + parseInt(this.offset / 60);
}else{ } else {
min = parseInt(this.offset / 60) min = parseInt(this.offset / 60);
} }
let sec = parseInt(this.offset % 60); let sec = parseInt(this.offset % 60);
if (sec < 10) { if (sec < 10) {
sec = "0" + sec; sec = "0" + sec;
} }
this.overTime = min + ':' + sec; /* 00:00 */ this.overTime = min + ":" + sec; /* 00:00 */
} }
}, },
// 播放完毕 // 播放完毕
onOver(){ onOver() {
switch (this.playType) { switch (this.playType) {
case 0: case 0:
if(this.index < this.showObj.audio.length-1){ if (this.index < this.showObj.audio.length - 1) {
this.index++ this.index++;
}else{ } else {
this.index=0 this.index = 0;
} }
this.$nextTick(()=>{ this.$nextTick(() => {
this.onPlay() this.onPlay();
}); });
break; break;
case 1: case 1:
this.range = 0; this.range = 0;
this.$nextTick(()=>{ this.$nextTick(() => {
this.onPlay() this.onPlay();
}); });
break; break;
case 2: case 2:
if(this.index < this.showObj.audio.length-1){ if (this.index < this.showObj.audio.length - 1) {
this.index++; this.index++;
this.$nextTick(()=>{ this.$nextTick(() => {
this.onPlay() this.onPlay();
}); });
}else{ } else {
this.index=0; this.index = 0;
this.$nextTick(()=>{ this.$nextTick(() => {
this.onStop() this.onStop();
}); });
} }
} }
}, },
// 改变循环状态 // 改变循环状态
changeType(){ changeType() {
this.playType < 2 ? this.playType++ :this.playType =0; this.playType < 2 ? this.playType++ : (this.playType = 0);
window.localStorage.setItem('playType',this.playType); window.localStorage.setItem("playType", this.playType);
switch (this.playType) { switch (this.playType) {
case 1: case 1:
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'单曲循环', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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; break;
case 2: case 2:
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'顺序播放', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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; break;
case 0: case 0:
// 神策埋点 点击操作 // 神策埋点 点击操作
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9), dayModule: JSON.parse(
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length), localStorage.getItem("lessonDetail")
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), ).domTitle.slice(0, 9),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID, weekName: JSON.parse(
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName, localStorage.getItem("lessonDetail")
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID, ).domTitle.slice(
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID, 10,
buttonName:'列表循环', JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
partName:this.contentData.partName, ),
elementID:this.$route.query.elementId.toString(), 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 break;
} }
}, },
changeAge(value){ changeAge(value) {
if(this.contentData.content.age && value === 2){ if (this.contentData.content.age && value === 2) {
this.showObj = { this.showObj = {
audio:this.contentData.content.audio2, audio: this.contentData.content.audio2,
change:this.contentData.content.change2 change: this.contentData.content.change2
} };
}else{ } else {
this.showObj = { this.showObj = {
audio:this.contentData.content.audio, audio: this.contentData.content.audio,
change:this.contentData.content.change change: this.contentData.content.change
} };
} }
this.playFlag = false; this.playFlag = false;
this.startTime='00:00'; this.startTime = "00:00";
this.overTime='00:00' this.overTime = "00:00";
}, },
finishStudy(){ finishStudy() {
this.sendConsole('完成今日学习'); this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let query = JSON.parse(sessionStorage.getItem('classQuery')) let query = JSON.parse(sessionStorage.getItem("classQuery"));
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000; let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = { let json = {
page_type:0, page_type: 0,
page_id:5, page_id: 5,
stay_time:lookTime, stay_time: lookTime
}; };
getUserWatchApi().then(res=>{ getUserWatchApi().then(res => {
this.$store.dispatch('setWatchDetail',res) this.$store.dispatch("setWatchDetail", res);
subUserLessonApi(query.elementId,query.category_id,query.periods_id,json).then(res=>{ subUserLessonApi(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time; lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime; lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num; 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){ if (
this.popupVisible2 = true (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
}else{ 7
this.share_show = true ) {
this.popupVisible2 = true;
} else {
this.share_show = true;
} }
}) });
// this.$refs.sharePage.playAudio() // this.$refs.sharePage.playAudio()
setTimeout(() => { setTimeout(() => {
if(this.$store.state.lookStatus==0){ if (this.$store.state.lookStatus == 0) {
this.audioPoint = audioGood this.audioPoint = audioGood;
}else if(this.$store.state.lookStatus==1){ // console.log('good')
this.audioPoint = audioGreat } else if (this.$store.state.lookStatus == 1) {
}else{ this.audioPoint = audioGreat;
this.audioPoint = audioPerfect // console.log('good2')
} else {
this.audioPoint = audioPerfect;
// console.log('good3')
} }
setTimeout(()=>{
this.$refs.audioDom.load() this.$refs.audioDom.load()
setTimeout(()=>{
this.$refs.audioDom.play() this.$refs.audioDom.play()
},200) },200)
}, 700); }, 1000);
// this.$refs.sharePage.initPage() // this.$refs.sharePage.initPage()
}
}, },
}, watch: {
watch:{ contentData: {
'contentData':{ handler: function() {
handler:function() { //特别注意，不能用箭头函数，箭头函数，this指向全局 //特别注意，不能用箭头函数，箭头函数，this指向全局
this.changeAge(this.contentData.age); this.changeAge(this.contentData.age);
this.index = 0; this.index = 0;
this.checkCollect() this.checkCollect();
}, },
deep: true deep: true
}, },
'index'(value){ index(value) {
this.checkCollect(); this.checkCollect();
}, },
'range'(value,value2){ range(value, value2) {
let audio = this.$refs.audio; let audio = this.$refs.audio;
if(Math.abs(value - value2) > 2){ if (Math.abs(value - value2) > 2) {
this.timer = setInterval(() => { this.timer = setInterval(() => {
let min = null; let min = null;
if(parseInt(audio.currentTime / 60)<10){ if (parseInt(audio.currentTime / 60) < 10) {
min = '0' + parseInt(audio.currentTime / 60) min = "0" + parseInt(audio.currentTime / 60);
}else{ } else {
min = parseInt(audio.currentTime / 60) min = parseInt(audio.currentTime / 60);
} }
let sec = parseInt(audio.currentTime % 60); let sec = parseInt(audio.currentTime % 60);
if (sec < 10) { if (sec < 10) {
sec = "0" + sec; sec = "0" + sec;
} }
this.startTime = min + ':' + sec; /* 00:00 */ this.startTime = min + ":" + sec; /* 00:00 */
this.range = parseInt(audio.currentTime); this.range = parseInt(audio.currentTime);
if(this.range == this.offset && this.offset !== 0) { if (this.range == this.offset && this.offset !== 0) {
this.range=0;/*播放结束后进度条归零*/ this.range = 0; /*播放结束后进度条归零*/
this.startTime='00:00'; /*播放结束后时间归零*/ this.startTime = "00:00"; /*播放结束后时间归零*/
this.onOver(); this.onOver();
clearInterval(this.timer) clearInterval(this.timer);
} }
}, 1000); }, 1000);
audio.currentTime = value; audio.currentTime = value;
} }
} }
},
} }
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.playImage{background-size:40*@toVw 290*@toVw;display: inline-block} .playImage {
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 0;} background-size: 40 * @toVw 290 * @toVw;
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 -8*@toVw;vertical-align: bottom} display: inline-block;
.next{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;} }
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;} ._282918034425091245 {
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;} height: 8 * @toVw;
.toBig{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;} width: 9 * @toVw;
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;} background-position: 0 0;
.collectDefault{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;} }
.collect{height:16*@toVw;width:16*@toVw;background-position:0 -109*@toVw;} ._154722344142123489 {
.last{height:16*@toVw;width:16*@toVw;background-position:0 -125*@toVw;} height: 5 * @toVw;
.list{height:16*@toVw;width:16*@toVw;background-position:0 -141*@toVw;} width: 9 * @toVw;
.close{height:17*@toVw;width:17*@toVw;background-position:0 -157*@toVw;} background-position: 0 -8 * @toVw;
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -174*@toVw;float: right} vertical-align: bottom;
.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;} .next {
.stop{height:40*@toVw;width:40*@toVw;background-position:0 -250*@toVw;} height: 16 * @toVw;
.iconfont{color: #CCCCCC;} width: 16 * @toVw;
.icon-icon_stop{font-size: 50*@toVw;color: #69c0ff;} background-position: 0 -13 * @toVw;
.icon-icon_begin{font-size: 50*@toVw;color: #69c0ff;} }
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} .listPlay {
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} height: 16 * @toVw;
.icon-icon_list{font-size: 20*@toVw;} width: 16 * @toVw;
.icon-icon_change1{font-size: 21*@toVw;width: 20*@toVw;} background-position: 0 -29 * @toVw;
.icon-icon_change{font-size: 20*@toVw;width: 20*@toVw;} }
.icon-icon_changge{font-size: 19*@toVw;width: 20*@toVw;} .replay {
.hp-left{position: relative; height: 16 * @toVw;
.collect{position: absolute;right: 38*@toVw;bottom:48*@toVw ;} width: 16 * @toVw;
} background-position: 0 -45 * @toVw;
.icon-icon_like1{color: #ff7d77;} }
.collect-block{ .toBig {
padding: 10*@toVw; height: 16 * @toVw;
border-radius: 4*@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; background: white;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
from { from {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
} }
to { to {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
} }
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.swin{-webkit-animation: spin 8s linear 1s 5 alternate;animation: spin 8s linear infinite;} .swin {
.pause{animation-play-state: paused;-webkit-animation-play-state:paused;} -webkit-animation: spin 8s linear 1s 5 alternate;
.noanimation { animation: spin 8s linear infinite;
-webkit-animation:none !important;animation:none !important; }
} .pause {
.content{ animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.noanimation {
-webkit-animation: none !important;
animation: none !important;
}
.content {
background: white; background: white;
width: 315*@toVw; width: 315 * @toVw;
position: absolute; position: absolute;
top: 70*@toVw; top: 70 * @toVw;
left: 20*@toVw; left: 20 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
margin: auto; margin: auto;
display: block; display: block;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
text-align: center; text-align: center;
padding: 10*@toVw; padding: 10 * @toVw;
.image-block{ .image-block {
width: 188*@toVw; width: 188 * @toVw;
height: 188*@toVw; height: 188 * @toVw;
margin-top: 5*@toVw; margin-top: 5 * @toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd; box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden; overflow: hidden;
border-radius: 999*@toVw; border-radius: 999 * @toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1); box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border:4px solid rgba(255,255,255,1); border: 4px solid rgba(255, 255, 255, 1);
img{ img {
width: 188*@toVw; width: 188 * @toVw;
height: 188*@toVw; height: 188 * @toVw;
border-radius: 999 * @toVw; border-radius: 999 * @toVw;
} }
} }
.title-block{ .title-block {
margin-top: 20*@toVw; margin-top: 20 * @toVw;
margin-bottom: 20*@toVw; margin-bottom: 20 * @toVw;
&.hp{ &.hp {
display: none; display: none;
} }
.title{ .title {
font-size:16*@toVw; font-size: 16 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.tips{ .tips {
font-size:14*@toVw; font-size: 14 * @toVw;
margin-top: 6*@toVw; margin-top: 6 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(153,153,153,1); color: rgba(153, 153, 153, 1);
} }
} }
.range-block{ .range-block {
width: 250 * @toVw; width: 250 * @toVw;
margin-top: 10*@toVw; margin-top: 10 * @toVw;
.time-block{ .time-block {
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
text-align: left; text-align: left;
&:after{ &:after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.left-time{ .left-time {
float: left; float: left;
} }
.right-time{ .right-time {
float: right; float: right;
} }
} }
input[type=range] { input[type="range"] {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-appearance: none; -webkit-appearance: none;
border: none; border: none;
outline: none; outline: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8; background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat, #d8d8d8;
background-size: 75% 100%;/*设置左右宽度比例*/ background-size: 75% 100%; /*设置左右宽度比例*/
width: 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; -webkit-appearance: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
height: 4*@toVw; height: 4 * @toVw;
border-radius: 2*@toVw ; border-radius: 2 * @toVw;
} }
input[type=range]:focus { input[type="range"]:focus {
-webkit-appearance: none; -webkit-appearance: none;
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
border: none; border: none;
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/ border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw; height: 16 * @toVw;
width: 16*@toVw; width: 16 * @toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/ margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff; background: #69c0ff;
} }
} }
.btn-group{ .btn-group {
margin-top: 15*@toVw; margin-top: 15 * @toVw;
width: 280*@toVw; width: 280 * @toVw;
display: -webkit-flex; display: -webkit-flex;
&.hp{ &.hp {
display: none; display: none;
} }
} }
} }
.list-popup{ .list-popup {
width: 375*@toVw; width: 375 * @toVw;
max-height: 345*@toVw; max-height: 345 * @toVw;
overflow: auto; overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0; border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white; background: white;
padding-top: 20*@toVw; padding-top: 20 * @toVw;
.list-block{ .list-block {
display: block; display: block;
width: auto; width: auto;
margin: 0 20*@toVw; margin: 0 20 * @toVw;
padding:12*@toVw 36*@toVw; padding: 12 * @toVw 36 * @toVw;
border-bottom: 1*@toVw solid #dddddd; border-bottom: 1 * @toVw solid #dddddd;
&.active{ &.active {
color: #49E2A5; color: #49e2a5;
} }
} }
.close-btn{ .close-btn {
text-align: center; text-align: center;
padding: 20*@toVw; padding: 20 * @toVw;
}
} }
.imgPop-block{ }
max-height: 500*@toVw; .imgPop-block {
max-height: 500 * @toVw;
overflow: auto; overflow: auto;
img{ img {
max-width: 300*@toVw; max-width: 300 * @toVw;
}
} }
.btn-block{ }
.btn-block {
position: relative; position: relative;
// margin-top: 15*@toVw; // margin-top: 15*@toVw;
text-align: center; text-align: center;
.age-block{ .age-block {
height: 28*@toVw; height: 28 * @toVw;
line-height: 28*@toVw; line-height: 28 * @toVw;
border: 1*@toVw solid #666; border: 1 * @toVw solid #666;
position: absolute; position: absolute;
padding: 0 13*@toVw; padding: 0 13 * @toVw;
border-radius: 100*@toVw; border-radius: 100 * @toVw;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.age-change-block{ .age-change-block {
position: absolute; position: absolute;
top: 37*@toVw; top: 37 * @toVw;
left: 0; left: 0;
width: 66*@toVw; width: 66 * @toVw;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
border: 1*@toVw solid #666666; border: 1 * @toVw solid #666666;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
&>div{ & > div {
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
} }
} }
} }
.change-block{ .change-block {
border-radius: 1000*@toVw; border-radius: 1000 * @toVw;
width: 144*@toVw; width: 144 * @toVw;
border:1*@toVw solid #40A9FF; border: 1 * @toVw solid #40a9ff;
&:after{ &:after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
div{ div {
float: left; float: left;
width: 50%; width: 50%;
border-radius: 100*@toVw; border-radius: 100 * @toVw;
font-size:12*@toVw; font-size: 12 * @toVw;
height: 28*@toVw; height: 28 * @toVw;
line-height: 28*@toVw; line-height: 28 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(204,204,204,1); color: rgba(204, 204, 204, 1);
&.active{ &.active {
background: #40A9FF; background: #40a9ff;
color: white; color: white;
} }
} }
} }
} }
.change-block-HP{ .change-block-HP {
display: none; display: none;
} }
.parent-finish{ .parent-finish {
// position: absolute; // position: absolute;
// bottom: 0 * @toVw; // bottom: 0 * @toVw;
width: 100%; width: 100%;
left: 0; left: 0;
top: 430*@toVw; top: 430 * @toVw;
.finish-block{ .finish-block {
// position: absolute; // position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
padding: 0; padding: 0;
margin:20*@toVw 0 0; margin: 20 * @toVw 0 0;
text-align: center; text-align: center;
bottom: 0; bottom: 0;
img{ img {
width: 202*@toVw; width: 202 * @toVw;
} }
} }
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw:100/667vw; @toVw: 100/667vw;
.finish-block{display: none} .finish-block {
.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} display: none;
._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} .playImage {
.last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;} background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2")
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;} no-repeat;
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;} background-size: 40 * @toVw 225 * @toVw;
.next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;} display: inline-block;
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;} }
.list{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;} ._154722344142123489 {
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -109*@toVw; float: right} height: 5 * @toVw;
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right} width: 9 * @toVw;
.play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;} background-position: 0 0;
.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;} ._282918034425091245 {
.icon-icon_begin{height:50*@toVw;width:50*@toVw;font-size: 48*@toVw;color: #69c0ff;} height: 8 * @toVw;
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} width: 9 * @toVw;
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} background-position: 0 -4 * @toVw;
.icon-icon_list{font-size: 20*@toVw;} vertical-align: bottom;
.icon-icon_change1{font-size: 20*@toVw;} }
.icon-icon_change{font-size: 20*@toVw;} .last {
.icon-icon_changge{font-size: 20*@toVw;} 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-top: 8vh;
// margin-bottom: 1vh; // margin-bottom: 1vh;
// margin-left: 0; // margin-left: 0;
.collect{display: none;} .collect {
display: none;
} }
.audio-page{ }
.audio-page {
position: absolute; position: absolute;
top: 5*@toVw; top: 5 * @toVw;
bottom: 5*@toVw; bottom: 5 * @toVw;
left: 5*@toVw; left: 5 * @toVw;
right: 5*@toVw; right: 5 * @toVw;
overflow: auto; overflow: auto;
border-radius:8*@toVw; border-radius: 8 * @toVw;
.content{ .content {
position: static; position: static;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: -webkit-flex; display: -webkit-flex;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
padding: 0; padding: 0;
.hp-left{ .hp-left {
flex: 1; flex: 1;
margin-right: 80*@toVw; margin-right: 80 * @toVw;
.hp-top{ .hp-top {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
width: 100%; width: 100%;
} }
} }
.image-block{ .image-block {
flex: 1; flex: 1;
width: 150*@toVw; width: 150 * @toVw;
height: 150*@toVw; height: 150 * @toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd; box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin: auto; margin: auto;
border-radius: 99*@toVw; border-radius: 99 * @toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1); box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border:4px solid rgba(255,255,255,1); border: 4px solid rgba(255, 255, 255, 1);
img{ img {
width: 100%; width: 100%;
border-radius: 999 * @toVw; border-radius: 999 * @toVw;
} }
} }
.btnBox{ .btnBox {
flex: 1; flex: 1;
} }
.title-block{ .title-block {
margin-top: 24*@toVw; margin-top: 24 * @toVw;
display: none; display: none;
&.hp{ &.hp {
display: -webkit-flex; display: -webkit-flex;
// display: block; // display: block;
width: 300*@toVw; width: 300 * @toVw;
} }
.title{ .title {
font-size:16*@toVw; font-size: 16 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
// width: 100*@toVw; // width: 100*@toVw;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.tips{ .tips {
font-size:14*@toVw; font-size: 14 * @toVw;
margin-top: 6*@toVw; margin-top: 6 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(153,153,153,1); color: rgba(153, 153, 153, 1);
} }
} }
.range-block{ .range-block {
width: 422*@toVw; width: 422 * @toVw;
margin-top: 16*@toVw; margin-top: 16 * @toVw;
// margin-left: 1vw; // margin-left: 1vw;
.time-block{ .time-block {
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
text-align: left; text-align: left;
&:after{ &:after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.left-time{ .left-time {
float: left; float: left;
} }
.right-time{ .right-time {
float: right; float: right;
} }
} }
input[type=range] { input[type="range"] {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-appearance: none; -webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8; background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
background-size: 75% 100%;/*设置左右宽度比例*/ #d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 100%; width: 100%;
border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/ border-radius: 10 * @toVw; /*这个属性设置使填充进度条时的图形为圆角*/
} }
input[type=range]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
height: 4*@toVw; height: 4 * @toVw;
border-radius: 2*@toVw ; border-radius: 2 * @toVw;
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type=range]:focus { input[type="range"]:focus {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/ border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw; height: 16 * @toVw;
width: 16*@toVw; width: 16 * @toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/ margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff; background: #69c0ff;
} }
} }
.btn-group{ .btn-group {
margin-top: 15vh; margin-top: 15vh;
display: none; display: none;
width: 200*@toVw; width: 200 * @toVw;
&.hp{ &.hp {
display: -webkit-flex; display: -webkit-flex;
} }
} }
} }
.list-popup{ .list-popup {
width: 375*@toVw; width: 375 * @toVw;
max-height: 345*@toVw; max-height: 345 * @toVw;
overflow: auto; overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0; border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white; background: white;
padding-top: 20*@toVw; padding-top: 20 * @toVw;
.list-block{ .list-block {
display: block; display: block;
width: auto; width: auto;
margin: 0 20*@toVw; margin: 0 20 * @toVw;
padding:12*@toVw 36*@toVw; padding: 12 * @toVw 36 * @toVw;
border-bottom: 1*@toVw solid #dddddd; border-bottom: 1 * @toVw solid #dddddd;
&.active{ &.active {
color: #49E2A5; color: #49e2a5;
} }
} }
.close-btn{ .close-btn {
text-align: center; text-align: center;
padding: 20*@toVw; padding: 20 * @toVw;
} }
} }
.imgPop-block{ .imgPop-block {
max-height: 500*@toVw; max-height: 500 * @toVw;
overflow: auto; overflow: auto;
img{ img {
max-width: 300*@toVw; max-width: 300 * @toVw;
} }
} }
.btn-block{ .btn-block {
position:relative; position: relative;
min-width:90*@toVw ; min-width: 90 * @toVw;
margin-top: 0; margin-top: 0;
display: block; display: block;
height: 100%; height: 100%;
.age-block{ .age-block {
display: block; display: block;
position: static; position: static;
padding: 0; padding: 0;
height: 28*@toVw; height: 28 * @toVw;
width: 88*@toVw; width: 88 * @toVw;
line-height: 28*@toVw; line-height: 28 * @toVw;
border: 1*@toVw solid #666; border: 1 * @toVw solid #666;
border-radius: 100*@toVw; border-radius: 100 * @toVw;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.age-change-block{ .age-change-block {
position: static; position: static;
width: 80*@toVw; width: 80 * @toVw;
margin-top: 10*@toVw; margin-top: 10 * @toVw;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
border: 1*@toVw solid #666666; border: 1 * @toVw solid #666666;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
&>div{ & > div {
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
} }
} }
} }
.change-block-HP{ .change-block-HP {
position: fixed; position: fixed;
top:~'calc(82vh)' ; top: ~"calc(82vh)";
right: 40*@toVw; right: 40 * @toVw;
display: block; display: block;
width: 78*@toVw; width: 78 * @toVw;
img{ img {
width: 100%; width: 100%;
} }
} }
.change-block{ .change-block {
display: none; 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"){ .zIcon {
@toVw:100/900vw; height: 18 * @toVw;
.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} width: 18 * @toVw;
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;} background-position: 0 -127 * @toVw;
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom} float: right;
.last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;} }
.listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;} .play {
.replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;} height: 40 * @toVw;
.next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;} width: 40 * @toVw;
.replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;} background-position: 0 -145 * @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} .stop {
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right} height: 40 * @toVw;
.play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;} width: 40 * @toVw;
.stop{height:40*@toVw;width:40*@toVw;background-position:0 -185*@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_stop {
.icon-icon_left{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} height: 50 * @toVw;
.icon-icon_right{height:37*@toVw;width:37*@toVw;font-size: 32*@toVw;color: #69c0ff;} width: 50 * @toVw;
.icon-icon_list{font-size: 20*@toVw;} font-size: 48 * @toVw;
.icon-icon_change1{font-size: 20*@toVw;} color: #69c0ff;
.icon-icon_change{font-size: 20*@toVw;} }
.icon-icon_changge{font-size: 20*@toVw;} .icon-icon_begin {
.audio-page{ 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; position: absolute;
top: 5*@toVw; top: 5 * @toVw;
bottom: 5*@toVw; bottom: 5 * @toVw;
left: 5*@toVw; left: 5 * @toVw;
right: 5*@toVw; right: 5 * @toVw;
overflow: auto; overflow: auto;
border-radius:8*@toVw; border-radius: 8 * @toVw;
.content{ .content {
position:static; position: static;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: -webkit-flex; display: -webkit-flex;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
padding: 0; padding: 0;
.hp-left{ .hp-left {
flex: 1; flex: 1;
margin-right: 20*@toVw; margin-right: 20 * @toVw;
.hp-top{ .hp-top {
display: -webkit-flex; display: -webkit-flex;
width: 100%; width: 100%;
} }
} }
.image-block{ .image-block {
width: 150*@toVw; width: 150 * @toVw;
height: 150*@toVw; height: 150 * @toVw;
box-shadow: 0 0 30*@toVw 5*@toVw #ddd; box-shadow: 0 0 30 * @toVw 5 * @toVw #ddd;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin: auto; margin: auto;
border-radius: 75*@toVw; border-radius: 75 * @toVw;
box-shadow:0px 0px 4px 0px rgba(96,173,240,1); box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
border:4px solid rgba(255,255,255,1); border: 4px solid rgba(255, 255, 255, 1);
img{ img {
width: 100%; width: 100%;
} }
} }
.title-block{ .title-block {
margin-top: 24*@toVw; margin-top: 24 * @toVw;
.title{ .title {
font-size:16*@toVw; font-size: 16 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.tips{ .tips {
font-size:14*@toVw; font-size: 14 * @toVw;
margin-top: 6*@toVw; margin-top: 6 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(153,153,153,1); color: rgba(153, 153, 153, 1);
} }
} }
.range-block{ .range-block {
width: auto; width: auto;
margin-top: 16*@toVw; margin-top: 16 * @toVw;
.time-block{ .time-block {
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
text-align: left; text-align: left;
&:after{ &:after {
content: ''; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.left-time{ .left-time {
float: left; float: left;
} }
.right-time{ .right-time {
float: right; float: right;
} }
} }
input[type=range] { input[type="range"] {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-appearance: none; -webkit-appearance: none;
background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,#D8D8D8; background: -webkit-linear-gradient(#69c0ff, #69c0ff) no-repeat,
background-size: 75% 100%;/*设置左右宽度比例*/ #d8d8d8;
background-size: 75% 100%; /*设置左右宽度比例*/
width: 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; -webkit-appearance: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
height: 4*@toVw; height: 4 * @toVw;
border-radius: 2*@toVw ; border-radius: 2 * @toVw;
} }
input[type=range]:focus { input[type="range"]:focus {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/ border-radius: 50%; /*外观设置为圆形*/
height: 16*@toVw; height: 16 * @toVw;
width: 16*@toVw; width: 16 * @toVw;
margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/ margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #69c0ff; background: #69c0ff;
} }
} }
.btn-group{ .btn-group {
margin-top: 15vh; margin-top: 15vh;
display: none; display: none;
width: 200*@toVw; width: 200 * @toVw;
&.hp{ &.hp {
display: -webkit-flex; display: -webkit-flex;
} }
} }
} }
.list-popup{ .list-popup {
width: 375*@toVw; width: 375 * @toVw;
max-height: 345*@toVw; max-height: 345 * @toVw;
overflow: auto; overflow: auto;
border-radius: 8*@toVw 8*@toVw 0 0; border-radius: 8 * @toVw 8 * @toVw 0 0;
background: white; background: white;
padding-top: 20*@toVw; padding-top: 20 * @toVw;
.list-block{ .list-block {
display: block; display: block;
width: auto; width: auto;
margin: 0 20*@toVw; margin: 0 20 * @toVw;
padding:12*@toVw 36*@toVw; padding: 12 * @toVw 36 * @toVw;
border-bottom: 1*@toVw solid #dddddd; border-bottom: 1 * @toVw solid #dddddd;
&.active{ &.active {
color: #49E2A5; color: #49e2a5;
} }
} }
.close-btn{ .close-btn {
text-align: center; text-align: center;
padding: 20*@toVw; padding: 20 * @toVw;
} }
} }
.imgPop-block{ .imgPop-block {
max-height: 500*@toVw; max-height: 500 * @toVw;
overflow: auto; overflow: auto;
img{ img {
max-width: 300*@toVw; max-width: 300 * @toVw;
} }
} }
.btn-block{ .btn-block {
position:relative; position: relative;
min-width:90*@toVw ; min-width: 90 * @toVw;
margin-top: 0; margin-top: 0;
display: block; display: block;
height: 100%; height: 100%;
.age-block{ .age-block {
display: block; display: block;
position: static; position: static;
padding: 0; padding: 0;
height: 28*@toVw; height: 28 * @toVw;
width: 88*@toVw; width: 88 * @toVw;
line-height: 28*@toVw; line-height: 28 * @toVw;
border: 1*@toVw solid #666; border: 1 * @toVw solid #666;
border-radius: 100*@toVw; border-radius: 100 * @toVw;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
} }
.age-change-block{ .age-change-block {
position: static; position: static;
width: 80*@toVw; width: 80 * @toVw;
margin-top: 10*@toVw; margin-top: 10 * @toVw;
border-radius: 8*@toVw; border-radius: 8 * @toVw;
border: 1*@toVw solid #666666; border: 1 * @toVw solid #666666;
font-size:12*@toVw; font-size: 12 * @toVw;
font-family:PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-weight:500; font-weight: 500;
color:rgba(102,102,102,1); color: rgba(102, 102, 102, 1);
&>div{ & > div {
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
} }
} }
} }
.change-block-HP{ .change-block-HP {
position: absolute; position: absolute;
top: ~"calc(100vh - 12.5vw)"; top: ~"calc(100vh - 12.5vw)";
display: block; display: block;
width: 78*@toVw; width: 78 * @toVw;
img{ img {
width: 100%; width: 100%;
} }
} }
.change-block{ .change-block {
display: none; display: none;
} }
} }
} }
} }
</style> </style>
src/main.js
View file @ 5527daaf
...@@ -40,9 +40,9 @@ Vue.component('scroll', scroll); ...@@ -40,9 +40,9 @@ Vue.component('scroll', scroll);
// Vue.prototype.$throw = (error)=> errorHandler(error,this); // Vue.prototype.$throw = (error)=> errorHandler(error,this);
/* eslint-disable no-new */ /* eslint-disable no-new */
// if (process.env.NODE_ENV != 'production') { if (process.env.NODE_ENV != 'production') {
// new VConsole(); new VConsole();
// } }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
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