Skip to content

H
h5-base
Commit f3020e57 authored by liwei's avatar liwei
Browse files
Options

liwei

parent 49e5949f
Show whitespace changes
Inline Side-by-side
Showing with 1395 additions and 1415 deletions
src/components/newLesson/index.vue
View file @ f3020e57
...@@ -10,87 +10,97 @@ ...@@ -10,87 +10,97 @@
<!--横屏导航--> <!--横屏导航-->
<div class="header-h" v-if="!nowLesson.old"> <div class="header-h" v-if="!nowLesson.old">
<i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="type=1"> <i :class="{headerHP:true, defaultLook:nowShow !== 1,lookHP:nowShow===1}" @click="type=1">
<img :src="HP.look2" alt=""> <img :src="HP.look2" alt />
</i> </i>
<i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="type=2"> <i :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="type=2">
<img :src="HP.play2" alt=""> <img :src="HP.play2" alt />
</i> </i>
<i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3"> <i :class="{headerHP:true, defaultFun:nowShow !== 3,funHP:nowShow===3}" @click="type=3">
<img :src="HP.listen1" alt=""> <img :src="HP.listen1" alt />
</i> </i>
<i class="headerHP home" @click="backList"> <i class="headerHP home" @click="backList">
<img :src="HP.back" alt=""> <img :src="HP.back" alt />
</i> </i>
</div> </div>
<!--老课包返回按钮--> <!--老课包返回按钮-->
<img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg"> <img :src="backUrl" v-if="nowLesson.old" @click="backList" class="backImg" />
<!--内容--> <!--内容-->
<div :class="{'index-content-block':true,radius:nowShow !== 1 || nowLesson.old}"> <div :class="{'index-content-block':true,radius:nowShow !== 1 || nowLesson.old}">
<look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson" @backList="backList" /> <look-block v-if="nowLesson.type === 'text'" :contentData="nowLesson" @backList="backList" />
<video-block v-if="nowLesson.type === 'video'" :contentData="nowLesson" :nowShow="nowShow" @backList="backList"/> <video-block
v-if="nowLesson.type === 'video'"
:contentData="nowLesson"
:nowShow="nowShow"
@backList="backList"
/>
<audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson" @backList="backList" /> <audio-block v-if="nowLesson.type === 'audio'" :contentData="nowLesson" @backList="backList" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {subUserLessonApi,getUserWatchApi,getwechatParam} from "../../service/api"; import {
import {Toast} from 'vant' subUserLessonApi,
import lookBlock from './look' getUserWatchApi,
import videoBlock from './video' getwechatParam
import backUrl from '../../assets/newLesson/back.png' } from "../../service/api";
import {HP} from '../../util/imgUrl.js' import { Toast } from "vant";
import audioBlock from './audio' import lookBlock from "./look";
export default { import videoBlock from "./video";
import backUrl from "../../assets/newLesson/back.png";
import { HP } from "../../util/imgUrl.js";
import audioBlock from "./audio";
export default {
name: "index", name: "index",
data(){ data() {
let query let query;
console.log(this.$store.state.classQuery.periods_id) console.log(this.$store.state.classQuery.periods_id);
if(this.$store.state.classQuery.periods_id){ if (this.$store.state.classQuery.periods_id) {
query = this.$store.state.classQuery query = this.$store.state.classQuery;
}else{ } else {
// debugger // debugger
query = JSON.parse(sessionStorage.getItem('classQuery')) query = JSON.parse(sessionStorage.getItem("classQuery"));
} }
// debugger // debugger
return { return {
backUrl:backUrl, backUrl: backUrl,
periods_id:query.periods_id, periods_id: query.periods_id,
category_id:query.category_id, category_id: query.category_id,
elementId:query.elementId, elementId: query.elementId,
lesson:null, lesson: null,
nowShow:0, nowShow: 0,
page_id :1, page_id: 1,
stillTime:0, stillTime: 0,
watchDetail:null, watchDetail: null,
timeInterval:null, timeInterval: null,
nowLesson:{ nowLesson: {
type:'', type: "",
content:null, content: null,
age:1, age: 1
}, },
HP:HP, HP: HP,
type:1 type: 1
} };
}, },
watch: { watch: {
type() { type() {
this.changeTitle(this.type) this.changeTitle(this.type);
} }
}, },
components:{ components: {
lookBlock, lookBlock,
videoBlock, videoBlock,
audioBlock audioBlock
}, },
mounted(){ mounted() {
// this.changeTitle(this.type);
this.initPage(); this.initPage();
}, },
methods:{ methods: {
enableShare: function(option) { enableShare: function(option) {
let that = this; let that = this;
getwechatParam({ getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline', api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url:window.location.href.split('#')[0] url: window.location.href.split("#")[0]
}).then(wechatRes => { }).then(wechatRes => {
wx.config({ wx.config({
debug: false, debug: false,
...@@ -103,428 +113,618 @@ ...@@ -103,428 +113,618 @@
wx.ready(function() { wx.ready(function() {
wx.onMenuShareTimeline({ wx.onMenuShareTimeline({
title: option.product_title, // 分享标题 title: option.product_title, // 分享标题
desc: option.desc,// 分享描述 desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
// debugger // debugger
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
let json = { let json = {
page_type:0, page_type: 0,
page_id:6, page_id: 6,
stay_time:0, stay_time: 0
}; };
subUserLessonApi(that.elementId,that.category_id,that.periods_id,json).then(res=>{ subUserLessonApi(
that.elementId,
that.category_id,
that.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)
);
}); });
}, },
cancel: function() { cancel: function() {}
}
}); });
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: option.product_title, // 分享标题 title: option.product_title, // 分享标题
desc: option.desc,// 分享描述 desc: option.desc, // 分享描述
link: option.shareUrl, // 分享链接 link: option.shareUrl, // 分享链接
imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标 imgUrl:
option.shareIcon ||
"https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
success: function() { success: function() {
console.log(that.elementId) let lessonDetail = JSON.parse(
// debugger localStorage.getItem("lessonDetail")
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); );
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
let json = { let json = {
page_type:0, page_type: 0,
page_id:6, page_id: 6,
stay_time:0, stay_time: 0
}; };
subUserLessonApi(that.elementId,that.category_id,that.periods_id,json).then(res=>{ subUserLessonApi(
that.elementId,
that.category_id,
that.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)
);
}); });
}, },
cancel: function() { cancel: function() {}
} });
});
}); });
})
})
}, },
onShare(URL) { onShare(URL) {
this.enableShare({ this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题 product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc: JSON.parse(localStorage.getItem('userDesc')).nickname+`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`,// desc:
shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg', JSON.parse(localStorage.getItem("userDesc")).nickname +
shareUrl:URL `赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
}) shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
shareUrl: URL
});
}, },
backList(){ backList() {
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000; let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
console.log(this.lesson) console.log(this.lesson);
this.$sa.track('watchClick',{ this.$sa.track("watchClick", {
buttonName:'返回课程列表', buttonName: "返回课程列表",
partName:this.nowShow == 1 ? '爸妈看一看' : this.nowShow == 2 ? '宝贝玩一玩' : this.nowShow == 3 ? '磨磨小耳朵' : '', partName:
elementID:this.lesson.id.toString(), this.nowShow == 1
dayModule:this.lesson.domTitle.slice(0,9), ? "爸妈看一看"
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length), : this.nowShow == 2
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length), ? "宝贝玩一玩"
themeID:this.lesson.themeID, : this.nowShow == 3
themeName:this.lesson.themeName, ? "磨磨小耳朵"
goodsID:this.lesson.goodsID, : "",
classID:this.lesson.classID elementID: this.lesson.id.toString(),
dayModule: this.lesson.domTitle.slice(0, 9),
weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:
this.lesson.domTitle.slice(0, 9) +
"-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID
}); });
let json = { let json = {
page_type:0, page_type: 0,
page_id:this.page_id, page_id: this.page_id,
stay_time:lookTime, stay_time: lookTime
}; };
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{ subUserLessonApi(
this.elementId,
this.category_id,
this.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));
let query={ let query = {
periods_id:this.periods_id, periods_id: this.periods_id,
course_type:this.course_type, course_type: this.course_type,
parent_category_id:this.parent_category_id, parent_category_id: this.parent_category_id,
back_id:this.category_id back_id: this.category_id
}; };
console.log(query) console.log(query);
// debugger // debugger
this.$router.push({name:'map',query:query}) this.$router.push({ name: "map", query: query });
}); });
}, },
changeTitle(type){ changeTitle(type) {
// if(type==type) // if(type==type)
Toast.loading({ Toast.loading({
mask: true, mask: true,
message: '' message: ""
}); });
this.nowShow = type; this.nowShow = type;
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
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:this.page_id, page_id: this.page_id,
stay_time:lookTime, stay_time: lookTime
}; };
console.log(lookTime) console.log(lookTime);
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{ subUserLessonApi(
Toast.clear() this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
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));
}); });
switch (type) { switch (type) {
case 1: case 1:
// 神策埋点 板块切换 // 神策埋点 板块切换
this.$sa.track('learnPart',{ this.$sa.track("learnPart", {
partName:'爸妈看一看', partName: "爸妈看一看",
elementID:this.lesson.id.toString(), elementID: this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9), dayModule: this.lesson.domTitle.slice(0, 9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length), weekName: this.lesson.domTitle.slice(
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length), 10,
themeID:this.lesson.themeID, this.lesson.domTitle.length
themeName:this.lesson.themeName, ),
goodsID:this.lesson.goodsID, elementName:
classID:this.lesson.classID, this.lesson.domTitle.slice(0, 9) +
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0) "-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
}); });
this.page_id = 1; this.page_id = 1;
this.nowLesson = { this.nowLesson = {
type:'text', type: "text",
title:1, title: 1,
partName:'爸妈看一看', partName: "爸妈看一看",
content:this.lesson.content.look, content: this.lesson.content.look,
age:this.nowLesson.age age: this.nowLesson.age
}; };
// debugger // debugger
break; break;
case 2: case 2:
// 神策埋点 板块切换 // 神策埋点 板块切换
this.$sa.track('learnPart',{ this.$sa.track("learnPart", {
partName:'宝贝玩一玩', partName: "宝贝玩一玩",
elementID:this.lesson.id.toString(), elementID: this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9), dayModule: this.lesson.domTitle.slice(0, 9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length), weekName: this.lesson.domTitle.slice(
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length), 10,
themeID:this.lesson.themeID, this.lesson.domTitle.length
themeName:this.lesson.themeName, ),
goodsID:this.lesson.goodsID, elementName:
classID:this.lesson.classID, this.lesson.domTitle.slice(0, 9) +
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0) "-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
}); });
this.page_id = 2; this.page_id = 2;
if(this.lesson.content.play.type){ if (this.lesson.content.play.type) {
this.nowLesson = { this.nowLesson = {
type:'audio', type: "audio",
title:2, title: 2,
partName:'宝贝玩一玩', partName: "宝贝玩一玩",
content:this.lesson.content.play, content: this.lesson.content.play,
age:this.nowLesson.age age: this.nowLesson.age
}; };
}else{ } else {
this.nowLesson = { this.nowLesson = {
type:'video', type: "video",
title:2, title: 2,
partName:'宝贝玩一玩', partName: "宝贝玩一玩",
content:this.lesson.content.play, content: this.lesson.content.play,
age:this.nowLesson.age age: this.nowLesson.age
}; };
} }
break; break;
case 3: case 3:
this.$sa.track('learnPart',{ this.$sa.track("learnPart", {
partName:'磨磨小耳朵', partName: "磨磨小耳朵",
elementID:this.lesson.id.toString(), elementID: this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9), dayModule: this.lesson.domTitle.slice(0, 9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length), weekName: this.lesson.domTitle.slice(
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length), 10,
themeID:this.lesson.themeID, this.lesson.domTitle.length
themeName:this.lesson.themeName, ),
goodsID:this.lesson.goodsID, elementName:
classID:this.lesson.classID, this.lesson.domTitle.slice(0, 9) +
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0) "-" +
this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
themeID: this.lesson.themeID,
themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
}); });
this.page_id = 5; this.page_id = 5;
if(this.lesson.content.fun.type){ if (this.lesson.content.fun.type) {
this.nowLesson = { this.nowLesson = {
type:'audio', type: "audio",
title:3, title: 3,
partName:'磨磨小耳朵', partName: "磨磨小耳朵",
content:this.lesson.content.fun, content: this.lesson.content.fun,
age:this.nowLesson.age age: this.nowLesson.age
}; };
}else{ } else {
this.nowLesson = { this.nowLesson = {
type:'video', type: "video",
partName:'磨磨小耳朵', partName: "磨磨小耳朵",
title:3, title: 3,
content:this.lesson.content.fun, content: this.lesson.content.fun,
age:this.nowLesson.age age: this.nowLesson.age
}; };
} }
break; break;
} }
}, },
initPage(){ initPage() {
Toast.loading({ Toast.loading({
mask: true, mask: true,
message: '' message: ""
}); });
console.log(this.$store.state.classQuery) console.log(this.$store.state.classQuery);
this.parent_category_id = this.$route.query.parent_category_id this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type this.course_type = this.$route.query.course_type;
// debugger // debugger
getUserWatchApi().then(res=>{ getUserWatchApi().then(res => {
this.watchDetail = res; this.watchDetail = res;
this.$store.dispatch('setWatchDetail',this.watchDetail) this.$store.dispatch("setWatchDetail", this.watchDetail);
let URL = process.env.API_URL+'#/shareGoods?userID='+ JSON.parse(localStorage.getItem('userDesc')).user_id; let URL =
process.env.API_URL +
"#/shareGoods?userID=" +
JSON.parse(localStorage.getItem("userDesc")).user_id;
this.onShare(URL); this.onShare(URL);
this.lesson = JSON.parse(localStorage.getItem('lessonDetail')); this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
console.log(this.lesson);
this.nowShow = 1; this.nowShow = 1;
document.title =`${this.lesson.domTitle}`; document.title = `${this.lesson.domTitle}`;
this.nowLesson = { this.nowLesson = {
type:'text', type: "text",
partName:'爸妈看一看', partName: "爸妈看一看",
title:1, title: 1,
content:this.lesson.content.look, content: this.lesson.content.look,
age:this.nowLesson.age age: this.nowLesson.age
}; };
let json = { let json = {
page_type:0, page_type: 0,
page_id:1, page_id: 1,
stay_time:1, stay_time: 1
}; };
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date()); let nowTime = Date.parse(new Date());
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{ subUserLessonApi(
this.elementId,
this.category_id,
this.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));
Toast.clear() Toast.clear();
}); });
this.$sa.track('learnPart',{ this.$sa.track("learnPart", {
partName:'爸妈看一看', partName: "爸妈看一看",
elementID:this.lesson.id.toString(), elementID: this.lesson.id.toString(),
dayModule:this.lesson.domTitle.slice(0,9), dayModule: this.lesson.domTitle.slice(0, 9),
weekName:this.lesson.domTitle.slice(10,this.lesson.domTitle.length), weekName: this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
elementName:this.lesson.domTitle.slice(0,9) + '-'+ this.lesson.domTitle.slice(10,this.lesson.domTitle.length), elementName:
themeID:this.lesson.themeID, this.lesson.domTitle.slice(0, 9) +
themeName:this.lesson.themeName, "-" +
goodsID:this.lesson.goodsID, this.lesson.domTitle.slice(10, this.lesson.domTitle.length),
classID:this.lesson.classID, themeID: this.lesson.themeID,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0) themeName: this.lesson.themeName,
goodsID: this.lesson.goodsID,
classID: this.lesson.classID,
is_view_today:
!!new Date().setHours(0, 0, 0, 0) ===
new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
}); });
if(this.lesson.content.play.video.length < 1 && this.lesson.content.play.audio.length < 1 ){ if (
this.nowLesson.old=true this.lesson.content.play.video.length < 1 &&
this.lesson.content.play.audio.length < 1
) {
this.nowLesson.old = true;
} }
}) });
} }
},
} }
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.lessonHeader{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2') no-repeat;background-size:102*@toVw 334*@toVw;display: inline-block} .lessonHeader {
.header-h{display: none} background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/lessonHeader3.png?v=2")
.home{height:46*@toVw;width:46*@toVw;background-position:0 0;} no-repeat;
.play{height:48*@toVw;width:102*@toVw;background-position:0 -46*@toVw;} background-size: 102 * @toVw 334 * @toVw;
.look{height:48*@toVw;width:102*@toVw;background-position:0 -94*@toVw;} display: inline-block;
.fun{height:48*@toVw;width:102*@toVw;background-position:0 -142*@toVw;} }
.defaultFun{height:48*@toVw;width:102*@toVw;background-position:0 -190*@toVw;} .header-h {
.defaultLook{height:48*@toVw;width:102*@toVw;background-position:0 -238*@toVw;} display: none;
.defaultPlay{height:48*@toVw;width:102*@toVw;background-position:0 -286*@toVw;} }
.header{ .home {
height: 46 * @toVw;
width: 46 * @toVw;
background-position: 0 0;
}
.play {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -46 * @toVw;
}
.look {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -94 * @toVw;
}
.fun {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -142 * @toVw;
}
.defaultFun {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -190 * @toVw;
}
.defaultLook {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -238 * @toVw;
}
.defaultPlay {
height: 48 * @toVw;
width: 102 * @toVw;
background-position: 0 -286 * @toVw;
}
.header {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding: 5*@toVw 0; padding: 5 * @toVw 0;
z-index: 2; z-index: 2;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1); box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
} }
.newLesson{ .newLesson {
background: #f8f8f8; background: #f8f8f8;
} }
.backImg{ .backImg {
position: fixed; position: fixed;
bottom: 40*@toVw; bottom: 40 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
z-index: 99999999; z-index: 99999999;
width: 60*@toVw; width: 60 * @toVw;
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw:100/667vw; @toVw: 100/667vw;
.backImg{ .backImg {
position: fixed; position: fixed;
bottom: 40*@toVw; bottom: 40 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
z-index: 99999999; z-index: 99999999;
width: 60*@toVw; width: 60 * @toVw;
} }
.lessonHeader{ .lessonHeader {
display: none; display: none;
} }
.header{ .header {
display: none; display: none;
} }
.actBanKuai{ .actBanKuai {
background-color: white; background-color: white;
border: 1*@toVw solid transparent; border: 1 * @toVw solid transparent;
border-left-color: black; border-left-color: black;
border-top-color: black; border-top-color: black;
border-bottom-color: black; border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw; border-radius: 8 * @toVw 0 0 8 * @toVw;
} }
.headerHP{background-size:62*@toVw 434*@toVw;display: inline-block} .headerHP {
.home{height:62*@toVw;width:62*@toVw;background-position:0 0;} background-size: 62 * @toVw 434 * @toVw;
.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;.actBanKuai} display: inline-block;
.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai} }
.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;.actBanKuai} .home {
.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;} height: 62 * @toVw;
.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;} width: 62 * @toVw;
.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;} background-position: 0 0;
.header-h{ }
.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
.actBanKuai;
}
.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
.actBanKuai;
}
.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
}
.header-h {
display: block; display: block;
width: 62*@toVw; width: 62 * @toVw;
position: absolute; position: absolute;
left: 17.5*@toVw; left: 17.5 * @toVw;
top: 20*@toVw; top: 20 * @toVw;
z-index: 2; z-index: 2;
.headerHP{ .headerHP {
display: block; display: block;
img{width:42*@toVw;margin-left: 10*@toVw;margin-top: 5*@toVw; } img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
} }
} }
.index-content-block{ .index-content-block {
position: absolute; position: absolute;
top: 20*@toVw; top: 20 * @toVw;
left: 80*@toVw; left: 80 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
bottom: 20*@toVw; bottom: 20 * @toVw;
background: white; background: white;
border: 1*@toVw solid #000; border: 1 * @toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw; border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius{ &.radius {
border-radius: 8*@toVw; border-radius: 8 * @toVw;
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8"){ @media screen and (min-aspect-ratio: ~"20/8") {
@toVw:100/900vw; @toVw: 100/900vw;
.backImg{ .backImg {
position: fixed; position: fixed;
bottom: 40*@toVw; bottom: 40 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
z-index: 99999999; z-index: 99999999;
width: 60*@toVw; width: 60 * @toVw;
} }
.lessonHeader{ .lessonHeader {
display: none; display: none;
} }
.header{ .header {
display: none; display: none;
} }
.actBanKuai{ .actBanKuai {
background-color: white; background-color: white;
border: 1*@toVw solid transparent; border: 1 * @toVw solid transparent;
border-left-color: black; border-left-color: black;
border-top-color: black; border-top-color: black;
border-bottom-color: black; border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw; border-radius: 8 * @toVw 0 0 8 * @toVw;
} }
.headerHP{ .headerHP {
// background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2') no-repeat; // background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/index-h.png?v=2') no-repeat;
background-size:62*@toVw 434*@toVw; background-size: 62 * @toVw 434 * @toVw;
display: inline-block; display: inline-block;
&.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.actBanKuai} &.lookHP {
&.defaultPlay{height:62*@toVw;width:62*@toVw;background-position:0 -62*@toVw;} height: 62 * @toVw;
&.playHP{height:62*@toVw;width:62*@toVw;background-position:0 -124*@toVw;.actBanKuai} width: 62 * @toVw;
&.defaultLook{height:62*@toVw;width:62*@toVw;background-position:0 -186*@toVw;} background-position: 0 0;
&.home{height:62*@toVw;width:62*@toVw;background-position:0 -248*@toVw;} .actBanKuai;
&.defaultFun{height:62*@toVw;width:62*@toVw;background-position:0 -310*@toVw;} }
&.funHP{height:62*@toVw;width:62*@toVw;background-position:0 -372*@toVw;.actBanKuai} &.defaultPlay {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -62 * @toVw;
}
&.playHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -124 * @toVw;
.actBanKuai;
}
&.defaultLook {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -186 * @toVw;
}
&.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -248 * @toVw;
}
&.defaultFun {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -310 * @toVw;
}
&.funHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 -372 * @toVw;
.actBanKuai;
}
} }
.header-h{ .header-h {
display: block; display: block;
width: 62*@toVw; width: 62 * @toVw;
position: absolute; position: absolute;
left: 17.5*@toVw; left: 17.5 * @toVw;
top: 20*@toVw; top: 20 * @toVw;
z-index: 2; z-index: 2;
.headerHP{ .headerHP {
display: block; display: block;
img{width:42*@toVw;margin-left: 10*@toVw;margin-top: 5*@toVw; } img {
width: 42 * @toVw;
margin-left: 10 * @toVw;
margin-top: 5 * @toVw;
}
} }
} }
.index-content-block{ .index-content-block {
position: absolute; position: absolute;
top: 20*@toVw; top: 20 * @toVw;
left: 80*@toVw; left: 80 * @toVw;
right: 20*@toVw; right: 20 * @toVw;
bottom: 20*@toVw; bottom: 20 * @toVw;
background: white; background: white;
border: 1*@toVw solid #000; border: 1 * @toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw; border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius{ &.radius {
border-radius: 8*@toVw; border-radius: 8 * @toVw;
} }
} }
} }
......
src/components/newLesson/shareGoods - 副本.vue deleted 100644 → 0
View file @ 49e5949f
<template>
<div>
<div class="share-good-page" ref="share_page">
<div class="share-good-head" v-if="userDetail" >
<img :src="shareGoodsBg" alt="">
<img class="head" :src="userDetail.user_info.avatar">
<div class="tip2"><p v-if="nickname">{{userDetail.user_info.nickname}}家宝宝</p><p>在「唱唱启蒙英语」累计学习</p></div>
<!-- <div class="title" :style="{backgroundImage:`url('${title_share_goods}')`}" >
{{userDetail.user_info.nickname}}
</div> -->
<div class="day">
{{userDetail.total_day}}
<p>
Days
</p>
</div>
<div class="textBox">
<!-- <p class="top">继续坚持</p> -->
<p class="btn">学无涯 行必知</p>
</div>
<!-- <div class="iknow" v-if="goodsDetail.current_price!=0" @click="toBuy(1)">
<img :src="btncoin" alt="">
</div>
<div class="iknow" v-if="goodsDetail.current_price==0" @click="toBuy(3)">
<img :src="btnfree" alt="">
</div> -->
<div class="Fml"><p>邀您一起带宝宝学习</p> <div>「<span>100万+</span>家庭推荐的哈佛英语启蒙课」</div>
<div class="line"></div>
</div>
<div class="nav" @click="move" v-if="goodsDetail">
<img class="move" :src="icon_point" alt="">
课程详情
<img class="move" :src="icon_point" alt="">
</div>
</div>
<div class="good-content" v-if="goodsDetail&&goodsDetail.desc&&goodsDetail.desc.detail">
<div class="content" v-html="goodsDetail.desc.detail">
</div>
<div class="btn-block" ref="btn_block">
<div class="lastTime">
距优惠结束仅剩 {{lastTime.day}} 天 {{lastTime.hour}} 时 {{lastTime.min}} 分 {{lastTime.second}} 秒
</div>
<div class="btn" @click="toBuy(2)" v-if="goodsDetail.current_price>100">
正在疯抢 · 超值VIP课程
</div>
<div class="btn" @click="toBuy(2)" v-if="goodsDetail.current_price==100">
1元领取 · 超值VIP课程
</div>
</div>
</div>
<!-- <div class="good-content" v-if="goodsDetail&&goodsDetail.goods_type==2">
<div class="content" v-html="goodsDetail.desc.detail">
</div>
<div class="btn-block" ref="btn_block">
<div class="lastTime">
优惠倒计时 {{lastTime.day}} 天 {{lastTime.hour}} 时 {{lastTime.min}} 分 {{lastTime.second}} 秒
</div>
<div class="btnBox">
<div class="btn slg" @click="toBuy(1)">
单独购&nbsp;&nbsp;￥{{goodsDetail.original_price/100}}
</div>
<div class="btn grp" @click="toBuy(3)">
{{goodsDetail.desc.group_number}}人团&nbsp;&nbsp;￥{{goodsDetail.current_price/100}}
</div>
</div>
</div>
</div> -->
</div>
<login-page v-if="goodsDetail" :bind-mobile="bindMobile" :groupDetail="goodsDetail" @goToBuyPage="goToBuyPage"></login-page>
</div>
</template>
<script>
import shareGoodsBg from '../../assets/newLesson/shareGoodsBg5.png'
import title_share_goods from '../../assets/newLesson/title-share-goods.png'
import btncoin from '../../assets/newLesson/btncoin.png'
import btnfree from '../../assets/newLesson/btnfree.png'
import icon_point from '../../assets/newLesson/icon_point@2x.png'
import {getOtherUserWatchApi,getShareGoodsApi} from "../../service/api";
import loginPage from '../buy/login'
import {Toast} from 'vant'
export default {
name: "shareGoods",
components: {loginPage},
data(){
return {
shareGoodsBg:shareGoodsBg,
title_share_goods:title_share_goods,
userDetail:null,
bindMobile:{
show:false,
mobile:'',
img_code:'',
verify_code:''
},
btncoin:btncoin,
btnfree:btnfree,
icon_point:icon_point,
shopId:null,
goodsDetail:null,
lastTime:localStorage.getItem('lastTimeShare')?JSON.parse(localStorage.getItem('lastTimeShare')):{day:0,hour:8,min:0,second:0},
nickname:""
}
},
methods:{
move(){
let moneyDom = document.getElementsByClassName('nav');
if(moneyDom.length>0){
console.log(moneyDom[0].offsetTop)
window.scrollTo(0,moneyDom[0].offsetTop);
}
// window.scrollTo(100,1200)
},
lastTimeOut(){
if(this.lastTime.second === 0 ){
this.lastTime.second = 59;
if(this.lastTime.min === 0 ){
this.lastTime.min = 59;
if(this.lastTime.hour === 0 ){
this.lastTime.hour = 8;
}else{
this.lastTime.hour--;
}
}else{
this.lastTime.min--;
}
}else{
this.lastTime.second--;
}
localStorage.setItem('lastTimeShare',JSON.stringify(this.lastTime))
},
initPage(){
Toast.loading({
mask: true,
message: ''
});
this.$sa.track('ViewInvitation',{
salesID:this.$route.query.userID,
});
console.log(JSON.parse(localStorage.getItem('userDesc')))
this.nickname = JSON.parse(localStorage.getItem('userDesc')).nickname
getOtherUserWatchApi(this.$route.query.userID).then(res=>{
res.user_info.avatar = res.user_info.avatar.replace('http://','https://');
this.userDetail = res
this.nickname= res.user_info.nickname
});
// this.shopId
getShareGoodsApi().then(res=>{
this.shopId = res.id;
res.desc = JSON.parse(res.desc)
res.goods_desc = JSON.parse(res.goods_desc);
this.goodsDetail = res
console.log(res)
setTimeout(() => {
this.goodsDetail = {}
this.goodsDetail = res
Toast.clear()
}, 500);
// debugger
// getGoodsDetailApi(this.shopId).then(res=>{
// res.desc = JSON.parse(res.desc)
// res.goods_desc = JSON.parse(res.goods_desc);
// this.goodsDetail = res
// })
})
},
goToBuyPage(type){
if(type==1){
window.location.href = `${process.env.API_URL}#/buy?shopId=${this.shopId}&type=single&invite_code=CC-UDK-${this.$route.query.userID}`
}else{
window.location.href = `${process.env.API_URL}#/buy?shopId=${this.shopId}&invite_code=CC-UDK-${this.$route.query.userID}`
}
},
toBuy(type){
if(this.goodsDetail.current_price==100){
this.$sa.track('buttonClick',{
tabTitle:'打卡商品页',
moduleTitle:'功能按钮',
buttonType:'购买',
buttonName:'1元领取 · 超值VIP课程'
});
}else{
this.$sa.track('buttonClick',{
tabTitle:'打卡商品页',
moduleTitle:'功能按钮',
buttonType:'购买',
buttonName:'正在疯抢.超值VIP课程'
});
}
if(!JSON.parse(localStorage.getItem('userDesc')).mobile|| JSON.parse(localStorage.getItem('userDesc')).mobile === ''){
this.bindMobile.show = true;
setTimeout(()=>{
this.$sa.track('ViewRegisterpage',{});
},1000)
}else{
this.goToBuyPage(type);
}
}
},
mounted(){
let that = this
this.initPage();
setInterval(()=>{this.lastTimeOut(
)},1000);
window.onscroll= ()=>{
//变量t是滚动条滚动时，距离顶部的距离
let t = document.documentElement.scrollTop||document.body.scrollTop;
if( this.$refs.btn_block){
if(t>500){
this.$refs.btn_block.style.opacity = 1
}else{
this.$refs.btn_block.style.opacity = 0
}
}
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
@-webkit-keyframes spin {
from {
-webkit-transform: translateY(-3*@toVw);
}
to {
-webkit-transform: translateY(3*@toVw);
}
}
@keyframes spin {
from {
transform: translateY(-3*@toVw);
}
to {
transform: translateY(3*@toVw);
}
}
.move{-webkit-animation: spin 2s linear 1s 5 alternate;animation: spin 2s linear infinite;}
.share-good-page{
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
.share-good-head{
width: 100vw;
// height: 584*@toVw;
// margin-top: -64*@toVw;
// background-size: 100% 100%;
position: relative;
.textBox{position: absolute;top: 265*@toVw;left:142*@toVw ;text-align: center;color: #746D6E; font-size: 15*@toVw;
.top{ font-size: 17*@toVw;}
.btn{ font-size: 15*@toVw;}
}
.iknow{
position: absolute;
top: 415*@toVw;
width: 265*@toVw;
// height: 44*@toVw;
left: 58*@toVw;
}
.head{
position: absolute;
width: 60*@toVw;
height: 60*@toVw;
top: 42*@toVw;
left: 159*@toVw;
border-radius: 100*@toVw;
}
.tip2{
position: absolute;
width: 350*@toVw;
color: #746D6E;
font-size: 15*@toVw;
text-align: center;
top: 110*@toVw;
left: 13*@toVw;
}
.title{
position: absolute;
width: 225*@toVw;
height: 54*@toVw;
background-size: 100% 100%;
top: 175*@toVw;
left: 75*@toVw;
text-align: center;
color: white;
font-size: 20*@toVw;
line-height: 48*@toVw;
}
.day{
position: absolute;
top: 176*@toVw;
width: 100%;
text-align: center;
color: white;
font-size:40*@toVw;
font-family:PingFangSC-Semibold;
font-weight:bold;
p{
font-size:15*@toVw;
font-family:PingFangSC-Semibold;
// font-weight:bold;
line-height: 16*@toVw;
font-weight:300;
color:white;
}
}
.Fml{position: absolute;top:314*@toVw;left:56*@toVw;font-size: 15*@toVw;color: #55343A;
text-align: center;
p{line-height: 36*@toVw;color: #55343A;}
div{color: #6A3028;font-weight: bold; }
.line{width: 95%;height: 4*@toVw;background: #F6C9A2;opacity: 0.44;position: relative;top: -5*@toVw;}
span{color: #E17640;}
}
.nav{position: absolute;top:412*@toVw;left: 108*@toVw;
img{width: 10*@toVw;}
width: 157*@toVw;height: 30*@toVw;
line-height: 30*@toVw;
border-radius: 15*@toVw;
background: #F98F55;
text-align: center;
color: white;}
}
.good-content{
background: #F4CAA2;
padding: 0 15*@toVw 80*@toVw 15*@toVw;
position: relative;
top: -5*@toVw;
.content{
// background: white;
border-radius: 8*@toVw;
overflow: hidden;
// padding: 10*@toVw;
};
}
.btn-block{
position: fixed;
padding: 10*@toVw 0 ;
left: 0;
width: 100%;
background: white;
opacity: 0;
transition: all 0.5s;
bottom: 0;
.lastTime{
top: -30*@toVw;
height: 30*@toVw;
line-height: 30*@toVw;
color: #FF785D;
background: #FFE543;
position: absolute;
text-align: center;
left: 0;
width: 100%;
}
.btnBox{
display: flex;
padding:0 29*@toVw;
.slg{background: white;color: #666666;border: 1px solid #666666;box-sizing: border-box;margin-right: 10*@toVw;}
}
.btn{
width: 287*@toVw;
height: 44*@toVw;
margin: auto;
background: #FF785D;
border-radius: 100*@toVw;
color: white;
line-height: 44*@toVw;
text-align: center;
font-size:18*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
}
}
</style>
<style>
img{
max-width: 100% !important;
}
</style>
src/components/newLesson/video.vue
View file @ f3020e57
...@@ -3,15 +3,35 @@ ...@@ -3,15 +3,35 @@
<div class="content"> <div class="content">
<div class="btn-block"> <div class="btn-block">
<div v-if="showObj.change" class="change-block-HP" @click="changeAudio(true)"> <div v-if="showObj.change" class="change-block-HP" @click="changeAudio(true)">
<div class=""> <div class>
<img :src="imgURL.tapToAudio"/> <img :src="imgURL.tapToAudio" />
</div> </div>
</div> </div>
<div v-if="showObj.video.length > 1&&orientationchange" class="age-block video" @click="videoShow = !videoShow"> <div
<div>视频({{videoIndex+1}})<i class="playImage _154722344142123489"></i></div> v-if="showObj.video.length > 1&&orientationchange"
class="age-block video"
@click="videoShow = !videoShow"
>
<div>
视频({{videoIndex+1}})
<i class="playImage _154722344142123489"></i>
</div>
</div>
<div
class="age-change-block video"
v-if="showObj.video.length > 1 && videoShow&&orientationchange"
>
<div
@click="videoIndex= index;videoShow=false;sendConsole('多视频选择视频')"
v-for="(item,index) in showObj.video"
:key="index"
>
视频({{index+1}})
<i
:class="{'playImage _282918034425091245':index === videoIndex}"
v-if="contentData.age === 1"
></i>
</div> </div>
<div class="age-change-block video" v-if="showObj.video.length > 1 && videoShow&&orientationchange">
<div @click="videoIndex= index;videoShow=false;sendConsole('多视频选择视频')" v-for="(item,index) in showObj.video">视频({{index+1}})<i :class="{'playImage _282918034425091245':index === videoIndex}" v-if="contentData.age === 1"></i></div>
</div> </div>
<div v-if="showObj.change" class="change-block"> <div v-if="showObj.change" class="change-block">
<div class="active">视频教学</div> <div class="active">视频教学</div>
...@@ -19,23 +39,45 @@ ...@@ -19,23 +39,45 @@
</div> </div>
</div> </div>
<div class="header"> <div class="header">
<img :src="imgURL.luolacoming" class="text" v-if="nowShow === 3"> <img :src="imgURL.luolacoming" class="text" v-if="nowShow === 3" />
<img :src="imgURL.luolalaila" class="text" v-if="nowShow === 2"> <img :src="imgURL.luolalaila" class="text" v-if="nowShow === 2" />
</div> </div>
<div class="video-block hp-video" v-if="showObj.video[videoIndex]" v-show="!share_show && !popupVisible && !star"> <div
<video :src="showObj.video[videoIndex].url" @ended="videoEnd" @play="videoPlay()" controls :poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"></video> class="video-block hp-video"
v-if="showObj.video[videoIndex]"
v-show="!share_show && !popupVisible && !star"
>
<video
:src="showObj.video[videoIndex].url"
@ended="videoEnd"
@play="videoPlay()"
controls
:poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"
></video>
</div> </div>
<!-- <div v-if="showObj.video.length > 1&&!orientationchange" class="age-block video" @click="videoShow = !videoShow"> <!-- <div v-if="showObj.video.length > 1&&!orientationchange" class="age-block video" @click="videoShow = !videoShow">
<div>视频({{videoIndex+1}})<i class="playImage _154722344142123489"></i></div> <div>视频({{videoIndex+1}})<i class="playImage _154722344142123489"></i></div>
</div> </div>
<div class="age-change-block video" v-if="showObj.video.length > 1 && videoShow&&!orientationchange"> <div class="age-change-block video" v-if="showObj.video.length > 1 && videoShow&&!orientationchange">
<div @click="videoIndex= index;videoShow=false;sendConsole('多视频选择视频')" v-for="(item,index) in showObj.video">视频({{index+1}})<i :class="{'playImage _282918034425091245':index === videoIndex}" v-if="contentData.age === 1"></i></div> <div @click="videoIndex= index;videoShow=false;sendConsole('多视频选择视频')" v-for="(item,index) in showObj.video">视频({{index+1}})<i :class="{'playImage _282918034425091245':index === videoIndex}" v-if="contentData.age === 1"></i></div>
</div> --> </div>-->
<p v-if="!orientationchange&&showObj.video.length>1" class="videoTitle">选集</p> <p v-if="!orientationchange&&showObj.video.length>1" class="videoTitle">选集</p>
<scroll :class="{scroll:true,disShow:showObj.video.length>1}" :data="showObj.video" v-if="!orientationchange" ref="scrollDom" :scrollX="true" :bounce="true" > <scroll
:class="{scroll:true,disShow:showObj.video.length>1}"
:data="showObj.video"
v-if="!orientationchange"
ref="scrollDom"
:scrollX="true"
:bounce="true"
>
<div class="itemBox" ref="itembox"> <div class="itemBox" ref="itembox">
<div :class="{item:true}" v-for="(item,index) in showObj.video" @click="scrollFn(index)" > <div
<img :class="{activity:videoStyle==index}" :src="item.url+'?vframe/jpg/offset/3'" alt=""> :class="{item:true}"
v-for="(item,index) in showObj.video"
@click="scrollFn(index)"
:key="index"
>
<img :class="{activity:videoStyle==index}" :src="item.url+'?vframe/jpg/offset/3'" alt />
<p style="text-align:center;">视频{{index+1}}</p> <p style="text-align:center;">视频{{index+1}}</p>
<!-- {{index}} --> <!-- {{index}} -->
</div> </div>
...@@ -43,429 +85,547 @@ ...@@ -43,429 +85,547 @@
</scroll> </scroll>
<div class="age-change-block ageclass" v-if="contentData.content.age "> <div class="age-change-block ageclass" v-if="contentData.content.age ">
<p>年龄段选择</p> <p>年龄段选择</p>
<div :class="{activity:contentData.age == 1}" @click="contentData.age = 1;sendConsole('选择分龄')">0-3岁</div> <div
<div :class="{activity:contentData.age == 2}" @click="contentData.age = 2;sendConsole('选择分龄')">4-6岁</div> :class="{activity:contentData.age == 1}"
@click="contentData.age = 1;sendConsole('选择分龄')"
>0-3岁</div>
<div
:class="{activity:contentData.age == 2}"
@click="contentData.age = 2;sendConsole('选择分龄')"
>4-6岁</div>
</div> </div>
<div class="parent-finish"> <div class="parent-finish">
<div class="finish-block" v-if="nowShow === 3"> <div class="finish-block" v-if="nowShow === 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" style="background: transparent">
v-model="popupVisible" style="background: transparent">
<div @click="popupVisible=false"> <div @click="popupVisible=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()" @closeShare="closeShare()" :contentData="contentData"/> <share-page @backList="backList()" @closeShare="closeShare()" :contentData="contentData" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import luolacoming from '../../assets/newLesson/luoLacoming.png' import luolacoming from "../../assets/newLesson/luoLacoming.png";
import luolalaila from '../../assets/newLesson/luolalaila.png' import luolalaila from "../../assets/newLesson/luolalaila.png";
import {subUserLessonApi,getUserWatchApi} from "../../service/api"; import { subUserLessonApi, getUserWatchApi } from "../../service/api";
import tapToAudio from '../../assets/tapToAudio.png' import tapToAudio from "../../assets/tapToAudio.png";
import finishStuat from '../../assets/newLesson/finishStudy.png' import finishStuat from "../../assets/newLesson/finishStudy.png";
import noFinishDia from './nofinishdia' import noFinishDia from "./nofinishdia";
import sharePage from './share' import sharePage from "./share";
import starBlock from './star' import starBlock from "./star";
import {Popup} from 'mint-ui' import { Popup } from "mint-ui";
export default { export default {
name: "play", name: "play",
components:{ components: {
noFinishDia, noFinishDia,
sharePage, sharePage,
starBlock, starBlock,
[Popup.name]:Popup [Popup.name]: Popup
}, },
data(){ data() {
return{ return {
finishStuat:finishStuat, finishStuat: finishStuat,
popupVisible:false, popupVisible: false,
ageShow:false, ageShow: false,
star:false, star: false,
share_show:false, share_show: false,
showObj:{ showObj: {
video:[], video: [],
change:false change: false
}, },
videoShow:false, videoShow: false,
videoIndex:0, videoIndex: 0,
imgURL:{ imgURL: {
luolacoming:luolacoming, luolacoming: luolacoming,
luolalaila:luolalaila, luolalaila: luolalaila,
tapToAudio:tapToAudio tapToAudio: tapToAudio
}, },
orientationchange:false, orientationchange: false,
testCount:5, testCount: 5,
videoStyle:'0', videoStyle: "0",
videoWidth:100 videoWidth: 100
} };
}, },
props:[ props: ["contentData", "nowShow"],
'contentData','nowShow' created() {
], this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
created(){ console.log(this.videoWidth);
this.videoWidth = Number(document.documentElement.clientWidth)/3.8
console.log(this.videoWidth)
}, },
mounted(){ mounted() {
this.changeAge(this.contentData.age) this.changeAge(this.contentData.age);
let that = this let that = this;
// console.log(Number(document.documentElement.clientWidth)) // console.log(Number(document.documentElement.clientWidth))
// console.log(Number(document.documentElement.clientWidth.replace('px',''))) // console.log(Number(document.documentElement.clientWidth.replace('px','')))
window.addEventListener('orientationchange',function(){ window.addEventListener(
setTimeout(function(){ "orientationchange",
let width = document.documentElement.clientWidth function() {
let height = document.documentElement.clientHeight that.$nextTick(() => {
if(width>height){ let width = document.documentElement.clientWidth;
that.orientationchange=true let height = document.documentElement.clientHeight;
}else{ if (width > height) {
that.orientationchange=false that.orientationchange = true;
} } else {
},300) that.orientationchange = false;
},false); }
});
},
false
);
}, },
methods:{ methods: {
scrollFn(index){ scrollFn(index) {
this.videoStyle = index this.videoStyle = index;
this.videoIndex = index this.videoIndex = index;
let parentwidth = Number(getComputedStyle(document.querySelector('.scroll')).width.replace('px','')) let parentwidth = Number(
let itemBoxWidth = Number(getComputedStyle(document.querySelector('.itemBox')).width.replace('px','')) getComputedStyle(document.querySelector(".scroll")).width.replace(
console.log(itemBoxWidth) "px",
let difWidth = (parentwidth/2)-45 ""
if(this.showObj.video.length>3){ )
if(index*this.videoWidth>difWidth){ );
console.log(140) let itemBoxWidth = Number(
let indexS = index - 1 getComputedStyle(document.querySelector(".itemBox")).width.replace(
if((index*this.videoWidth-difWidth)<(itemBoxWidth-parentwidth)){ "px",
this.$refs.scrollDom.scrollTo(-((index*this.videoWidth)-difWidth),0,this.videoWidth) ""
}else{ )
this.$refs.scrollDom.scrollTo(-(itemBoxWidth-parentwidth),0,this.videoWidth) );
} console.log(itemBoxWidth);
}else{ let difWidth = parentwidth / 2 - 45;
console.log(148) if (this.showObj.video.length > 3) {
this.$refs.scrollDom.scrollTo(0,0,this.videoWidth) if (index * this.videoWidth > difWidth) {
console.log(140);
let indexS = index - 1;
if (index * this.videoWidth - difWidth < itemBoxWidth - parentwidth) {
this.$refs.scrollDom.scrollTo(
-(index * this.videoWidth - difWidth),
0,
this.videoWidth
);
} else {
this.$refs.scrollDom.scrollTo(
-(itemBoxWidth - parentwidth),
0,
this.videoWidth
);
}
} else {
console.log(148);
this.$refs.scrollDom.scrollTo(0, 0, this.videoWidth);
} }
} }
},
swiperback(index){
this.videoIndex = index
this.sendConsole('多视频选择视频')
}, },
test(){ swiperback(index) {
this.videoIndex = index;
this.sendConsole("多视频选择视频");
}, },
changeStar(data){ test() {},
this.star = data changeStar(data) {
this.star = data;
}, },
backList(){ backList() {
this.$emit('backList') this.$emit("backList");
}, },
closeShare(){ closeShare() {
this.share_show=false this.share_show = false;
}, },
finishStudy(){ finishStudy() {
let query = JSON.parse(sessionStorage.getItem('classQuery')) let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.sendConsole('完成今日学习'); this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail')); let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
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.popupVisible = true (Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
}else{ 7
this.share_show = true ) {
this.popupVisible = true;
} else {
this.share_show = true;
} }
}) });
}, },
videoEnd(event){ videoEnd(event) {
event.srcElement.play() event.srcElement.play();
}, },
sendConsole(data){ sendConsole(data) {
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:data, 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: data,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
}); });
}, },
changeAudio(flag){ changeAudio(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.contentData.type = 'audio' this.contentData.type = "audio";
}, },
videoPlay(){ videoPlay() {
// 神策埋点 点击操作 // 神策埋点 点击操作
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()
}); });
}, },
changeAge(value){ changeAge(value) {
if(this.contentData.content.age && value === 2){ if (this.contentData.content.age && value === 2) {
this.showObj = { this.showObj = {
video:this.contentData.content.video2, video: this.contentData.content.video2,
change:this.contentData.content.change2 change: this.contentData.content.change2
} };
}else{ } else {
this.showObj = { this.showObj = {
video:this.contentData.content.video, video: this.contentData.content.video,
change:this.contentData.content.change change: this.contentData.content.change
} };
} }
// console.log(this.$refs.itembox) // console.log(this.$refs.itembox)
// console.log(this.showObj.video.length) // console.log(this.showObj.video.length)
if(this.$refs.itembox&&this.showObj.video.length){ if (this.$refs.itembox && this.showObj.video.length) {
this.$refs.itembox.style.width = this.showObj.video.length*this.videoWidth+'px' this.$refs.itembox.style.width =
console.log(this.videoWidth) this.showObj.video.length * this.videoWidth + "px";
console.log(this.videoWidth);
} }
console.log(this.showObj) console.log(this.showObj);
} }
}, },
watch:{ watch: {
'contentData':{ contentData: {
handler:function() { handler: function() {
this.videoIndex = 0; this.videoIndex = 0;
this.changeAge(this.contentData.age) this.changeAge(this.contentData.age);
}, },
deep: true deep: true
},
} }
} }
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.close-share-show{ .close-share-show {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
top: 18*@toVw; top: 18 * @toVw;
right: 12*@toVw; right: 12 * @toVw;
width: 20*@toVw; width: 20 * @toVw;
} }
.playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png') no-repeat;background-size:40*@toVw 189*@toVw;display: inline-block} .playImage {
._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;} background: url("https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png")
._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom} no-repeat;
.orientationchangeBox{ background-size: 40 * @toVw 189 * @toVw;
p{text-align: center;margin-bottom: 10*@toVw;} display: inline-block;
} }
.videoTitle{font-size: 14*@toVw;margin-bottom: 12*@toVw;text-indent: 6*@toVw;} ._154722344142123489 {
.scroll{ height: 5 * @toVw;
width: 310*@toVw; width: 9 * @toVw;
background-position: 0 0;
}
._282918034425091245 {
height: 8 * @toVw;
width: 9 * @toVw;
background-position: 0 -4 * @toVw;
vertical-align: bottom;
}
.orientationchangeBox {
p {
text-align: center;
margin-bottom: 10 * @toVw;
}
}
.videoTitle {
font-size: 14 * @toVw;
margin-bottom: 12 * @toVw;
text-indent: 6 * @toVw;
}
.scroll {
width: 310 * @toVw;
overflow: hidden; overflow: hidden;
// position: fixed; // position: fixed;
display: none; display: none;
.itemBox{ .itemBox {
// width: 600*@toVw; // width: 600*@toVw;
display: flex; display: flex;
.item{ .item {
// display: inline-block; // display: inline-block;
flex: 1; flex: 1;
width: 100*@toVw; width: 100 * @toVw;
height: 100*@toVw; height: 100 * @toVw;
// border: 1px solid black; // border: 1px solid black;
img{width: 90*@toVw;height: 60*@toVw;border-radius: 18px;border: 3px solid #E2E2E2;} img {
.activity{ width: 90 * @toVw;
border: 3px solid #40A9FF; height: 60 * @toVw;
border-radius: 18px;
border: 3px solid #e2e2e2;
} }
.activity {
border: 3px solid #40a9ff;
} }
p{font-size: 13*@toVw;color: #666666;}
} }
p {
font-size: 13 * @toVw;
color: #666666;
} }
.disShow{display: block;} }
.video-page{ }
.content{ .disShow {
display: block;
}
.video-page {
.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;
padding: 10*@toVw; padding: 10 * @toVw;
.header{ .header {
// text-align: center; // text-align: center;
padding-top: 8*@toVw; padding-top: 8 * @toVw;
height: auto; height: auto;
// display: flex; // display: flex;
.text{ .text {
width:96% ; width: 96%;
margin-bottom: 0; margin-bottom: 0;
display: block; display: block;
// border: none; // border: none;
} }
} }
.video-block{ .video-block {
margin-bottom: 16*@toVw; margin-bottom: 16 * @toVw;
// border: 1*@toVw solid #666; // border: 1*@toVw solid #666;
border-radius: 12*@toVw; border-radius: 12 * @toVw;
// padding: 8*@toVw; // padding: 8*@toVw;
background:#69C0FF; background: #69c0ff;
border: 4px solid #69C0FF; border: 4px solid #69c0ff;
overflow: hidden; overflow: hidden;
video{ video {
width: 100%; width: 100%;
// height: 171*@toVw; // height: 171*@toVw;
margin: 0; margin: 0;
display: block; display: block;
padding: 0; padding: 0;
background:rgba(0,0,0,0.4); background: rgba(0, 0, 0, 0.4);
border-radius:10*@toVw; border-radius: 10 * @toVw;
} }
} }
.age-block{ .age-block {
width: 66*@toVw; width: 66 * @toVw;
height: 28*@toVw; height: 28 * @toVw;
line-height: 28*@toVw; line-height: 28 * @toVw;
border: 1*@toVw solid #666; border: 1 * @toVw solid #666;
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);
&.video{ &.video {
right: 0; right: 0;
margin-right: 0; margin-right: 0;
text-align: center; text-align: center;
} }
} }
.age-change-block{ .age-change-block {
&.video{ &.video {
right: 10*@toVw; right: 10 * @toVw;
left: auto;z-index: 1231; left: auto;
z-index: 1231;
background: white; background: white;
width: 80*@toVw; width: 80 * @toVw;
width: 96*@toVw; width: 96 * @toVw;
border: 1*@toVw solid #666; border: 1 * @toVw solid #666;
border-radius: 10*@toVw; border-radius: 10 * @toVw;
&>div{ & > div {
margin: 0; margin: 0;
width: 96*@toVw; width: 96 * @toVw;
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
border-radius:8*@toVw; border-radius: 8 * @toVw;
text-align: center; text-align: center;
border:none; border: none;
box-sizing: border-box; box-sizing: border-box;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
} }
} }
} }
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 367*@toVw; top: 367 * @toVw;
left: 20*@toVw; left: 20 * @toVw;
width: 196*@toVw; width: 196 * @toVw;
// border-radius: 8*@toVw; // border-radius: 8*@toVw;
// border: 1*@toVw solid #666666; // border: 1*@toVw solid #666666;
font-size:12px; font-size: 12px;
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 {
margin: 10*@toVw 0; margin: 10 * @toVw 0;
width: 86*@toVw; width: 86 * @toVw;
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
border-radius:8*@toVw; border-radius: 8 * @toVw;
text-align: center; text-align: center;
border:1px solid rgba(200,205,220,1); border: 1px solid rgba(200, 205, 220, 1);
box-sizing: border-box; box-sizing: border-box;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
}
} }
.activity {
border: 3px solid rgba(64, 169, 255, 1);
} }
.activity{border:3px solid rgba(64,169,255,1);}
} }
.btn-block{ .btn-block {
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 100; z-index: 100;
.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;
} }
} }
} }
} }
.parent-finish{ .parent-finish {
position: fixed; position: fixed;
bottom: 2 * @toVw; bottom: 2 * @toVw;
width: 100%; width: 100%;
left: 0; left: 0;
top: 500*@toVw; top: 500 * @toVw;
.finish-block{ .finish-block {
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
...@@ -473,230 +633,237 @@ ...@@ -473,230 +633,237 @@
margin: 0; margin: 0;
text-align: center; text-align: center;
bottom: 0; bottom: 0;
img{ img {
width: 202*@toVw; width: 202 * @toVw;
} }
} }
} }
} }
} }
.change-block-HP{ .change-block-HP {
display: none; display: none;
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@toVw:100/667vw; @toVw: 100/667vw;
.video-page{ .video-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;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
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: flex; display: flex;
border-radius: 8px; border-radius: 8px;
padding: 0; padding: 0;
.header{ .header {
display: none; display: none;
} }
.age-change-block{ .age-change-block {
&.video{ &.video {
top: 33*@toVw; top: 33 * @toVw;
right: 0; right: 0;
left: auto;z-index: 1231; left: auto;
z-index: 1231;
background: white; background: white;
width: 80*@toVw; width: 80 * @toVw;
position: absolute; position: absolute;
&>div{ & > div {
margin: 0; margin: 0;
width: 100%; width: 100%;
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
border-radius:8*@toVw; border-radius: 8 * @toVw;
text-align: center; text-align: center;
border:none; border: none;
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
} }
} }
} }
display: inline-block; display: inline-block;
// position: absolute; // position: absolute;
// top: 37*@toVw; // top: 37*@toVw;
top: 367*@toVw; top: 367 * @toVw;
left: 0; left: 0;
width: 196*@toVw; width: 196 * @toVw;
// border-radius: 8*@toVw; // border-radius: 8*@toVw;
// border: 1*@toVw solid #666666; // border: 1*@toVw solid #666666;
font-size:12px; font-size: 12px;
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 {
margin: 10*@toVw 0; margin: 10 * @toVw 0;
width: 54*@toVw; width: 54 * @toVw;
padding: 6*@toVw 11*@toVw; padding: 6 * @toVw 11 * @toVw;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
border-radius:8*@toVw; border-radius: 8 * @toVw;
text-align: center; text-align: center;
border:1px solid rgba(200,205,220,1); border: 1px solid rgba(200, 205, 220, 1);
&:first-child{ &:first-child {
border-bottom: 1*@toVw solid #eee; border-bottom: 1 * @toVw solid #eee;
}
} }
.activity {
border: 3px solid rgba(64, 169, 255, 1);
} }
.activity{border:3px solid rgba(64,169,255,1);}
} }
.age-block{ .age-block {
&.video{ &.video {
display: block; display: block;
} }
} }
.ageclass{position: fixed;top: 30*@toVw;left:100*@toVw;z-index: 100; .ageclass {
&>div{ position: fixed;
top: 30 * @toVw;
left: 100 * @toVw;
z-index: 100;
& > div {
display: block; display: block;
} }
} }
.video-block{ .video-block {
display: none; display: none;
&.hp-video{ &.hp-video {
display: inline-block; display: inline-block;
margin: 0 10*@toVw 0 0; margin: 0 10 * @toVw 0 0;
border: none; border: none;
height: 100%; height: 100%;
border-radius: 12*@toVw; border-radius: 12 * @toVw;
padding: 0; padding: 0;
} }
video{ video {
height: 100%; height: 100%;
margin: auto; margin: auto;
width: auto; width: auto;
display: block; display: block;
background:rgba(0,0,0,0.4); background: rgba(0, 0, 0, 0.4);
border-radius:8*@toVw; border-radius: 8 * @toVw;
} }
} }
.btn-block{ .btn-block {
position:relative; position: relative;
min-width: 90*@toVw; min-width: 90 * @toVw;
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);
&.video{ &.video {
display: block; display: block;
} }
} }
.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;
} }
} }
} }
} }
} }
@media screen and (min-aspect-ratio: ~"20/8"){ @media screen and (min-aspect-ratio: ~"20/8") {
@toVw:100/900vw; @toVw: 100/900vw;
.video-page{ .video-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;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
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: flex; display: flex;
border-radius: 8px; border-radius: 8px;
padding: 0; padding: 0;
.header{ .header {
display: none; display: none;
} }
.video-block{ .video-block {
display: none; display: none;
&.hp-video{ &.hp-video {
display: inline-block; display: inline-block;
margin: 0 10*@toVw 0 0; margin: 0 10 * @toVw 0 0;
border: none; border: none;
height: 100%; height: 100%;
border-radius: 12*@toVw; border-radius: 12 * @toVw;
padding: 0; padding: 0;
} }
video{ video {
height: 100%; height: 100%;
margin: auto; margin: auto;
width: auto; width: auto;
display: block; display: block;
background:rgba(0,0,0,0.4); background: rgba(0, 0, 0, 0.4);
border-radius:8*@toVw; border-radius: 8 * @toVw;
} }
} }
.btn-block{ .btn-block {
position:relative; position: relative;
min-width: 90*@toVw; min-width: 90 * @toVw;
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);
&.video{ &.video {
display: block; display: block;
} }
} }
.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>
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