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 @@
<!--横屏导航-->
<div class="header-h" v-if="!nowLesson.old">
<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 :class="{headerHP:true, defaultPlay:nowShow !== 2,playHP:nowShow===2}" @click="type=2">
<img :src="HP.play2" alt="">
<img :src="HP.play2" alt />
</i>
<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 class="headerHP home" @click="backList">
<img :src="HP.back" alt="">
<img :src="HP.back" alt />
</i>
</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}">
<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" />
</div>
</div>
</template>
<script>
import {subUserLessonApi,getUserWatchApi,getwechatParam} from "../../service/api";
import {Toast} from 'vant'
import lookBlock from './look'
import videoBlock from './video'
import backUrl from '../../assets/newLesson/back.png'
import {HP} from '../../util/imgUrl.js'
import audioBlock from './audio'
export default {
import {
subUserLessonApi,
getUserWatchApi,
getwechatParam
} from "../../service/api";
import { Toast } from "vant";
import lookBlock from "./look";
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",
data(){
let query
console.log(this.$store.state.classQuery.periods_id)
if(this.$store.state.classQuery.periods_id){
query = this.$store.state.classQuery
}else{
data() {
let query;
console.log(this.$store.state.classQuery.periods_id);
if (this.$store.state.classQuery.periods_id) {
query = this.$store.state.classQuery;
} else {
// debugger
query = JSON.parse(sessionStorage.getItem('classQuery'))
query = JSON.parse(sessionStorage.getItem("classQuery"));
}
// debugger
return {
backUrl:backUrl,
periods_id:query.periods_id,
category_id:query.category_id,
elementId:query.elementId,
lesson:null,
nowShow:0,
page_id :1,
stillTime:0,
watchDetail:null,
timeInterval:null,
nowLesson:{
type:'',
content:null,
age:1,
backUrl: backUrl,
periods_id: query.periods_id,
category_id: query.category_id,
elementId: query.elementId,
lesson: null,
nowShow: 0,
page_id: 1,
stillTime: 0,
watchDetail: null,
timeInterval: null,
nowLesson: {
type: "",
content: null,
age: 1
},
HP:HP,
type:1
}
HP: HP,
type: 1
};
},
watch: {
type() {
this.changeTitle(this.type)
this.changeTitle(this.type);
}
},
components:{
components: {
lookBlock,
videoBlock,
audioBlock
},
mounted(){
mounted() {
// this.changeTitle(this.type);
this.initPage();
},
methods:{
methods: {
enableShare: function(option) {
let that = this;
getwechatParam({
api_list: 'onMenuShareAppMessage,onMenuShareTimeline',
url:window.location.href.split('#')[0]
api_list: "onMenuShareAppMessage,onMenuShareTimeline",
url: window.location.href.split("#")[0]
}).then(wechatRes => {
wx.config({
debug: false,
......@@ -103,428 +113,618 @@
wx.ready(function() {
wx.onMenuShareTimeline({
title: option.product_title, // 分享标题
desc: option.desc,// 分享描述
desc: option.desc, // 分享描述
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() {
// debugger
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:6,
stay_time:0,
page_type: 0,
page_id: 6,
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.nowTime = nowTime;
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({
title: option.product_title, // 分享标题
desc: option.desc,// 分享描述
desc: option.desc, // 分享描述
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() {
console.log(that.elementId)
// debugger
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let lessonDetail = JSON.parse(
localStorage.getItem("lessonDetail")
);
let nowTime = Date.parse(new Date());
let json = {
page_type:0,
page_id:6,
stay_time:0,
page_type: 0,
page_id: 6,
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.nowTime = nowTime;
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) {
this.enableShare({
product_title: `我家宝宝正在【唱唱启蒙英语】挑战童谣，已坚持${this.watchDetail.total_day}天`, // 分享标题
desc: JSON.parse(localStorage.getItem('userDesc')).nickname+`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`,//
shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg',
shareUrl:URL
})
desc:
JSON.parse(localStorage.getItem("userDesc")).nickname +
`赠您【领取超值课程】特权，来唱唱和百万家庭一起快乐启蒙英语吧！`, //
shareIcon: "https://cdn.singsingenglish.com/logo/logo.jpg",
shareUrl: URL
});
},
backList(){
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
backList() {
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
console.log(this.lesson)
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
console.log(this.lesson);
this.$sa.track('watchClick',{
buttonName:'返回课程列表',
partName:this.nowShow == 1 ? '爸妈看一看' : this.nowShow == 2 ? '宝贝玩一玩' : this.nowShow == 3 ? '磨磨小耳朵' : '',
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
this.$sa.track("watchClick", {
buttonName: "返回课程列表",
partName:
this.nowShow == 1
? "爸妈看一看"
: this.nowShow == 2
? "宝贝玩一玩"
: this.nowShow == 3
? "磨磨小耳朵"
: "",
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 = {
page_type:0,
page_id:this.page_id,
stay_time:lookTime,
page_type: 0,
page_id: this.page_id,
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.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
let query={
periods_id:this.periods_id,
course_type:this.course_type,
parent_category_id:this.parent_category_id,
back_id:this.category_id
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
let query = {
periods_id: this.periods_id,
course_type: this.course_type,
parent_category_id: this.parent_category_id,
back_id: this.category_id
};
console.log(query)
console.log(query);
// debugger
this.$router.push({name:'map',query:query})
this.$router.push({ name: "map", query: query });
});
},
changeTitle(type){
changeTitle(type) {
// if(type==type)
Toast.loading({
mask: true,
message: ''
message: ""
});
this.nowShow = type;
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type:0,
page_id:this.page_id,
stay_time:lookTime,
page_type: 0,
page_id: this.page_id,
stay_time: lookTime
};
console.log(lookTime)
subUserLessonApi(this.elementId,this.category_id,this.periods_id,json).then(res=>{
Toast.clear()
console.log(lookTime);
subUserLessonApi(
this.elementId,
this.category_id,
this.periods_id,
json
).then(res => {
Toast.clear();
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
switch (type) {
case 1:
// 神策埋点 板块切换
this.$sa.track('learnPart',{
partName:'爸妈看一看',
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,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.$sa.track("learnPart", {
partName: "爸妈看一看",
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,
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.nowLesson = {
type:'text',
title:1,
partName:'爸妈看一看',
content:this.lesson.content.look,
age:this.nowLesson.age
type: "text",
title: 1,
partName: "爸妈看一看",
content: this.lesson.content.look,
age: this.nowLesson.age
};
// debugger
break;
case 2:
// 神策埋点 板块切换
this.$sa.track('learnPart',{
partName:'宝贝玩一玩',
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,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.$sa.track("learnPart", {
partName: "宝贝玩一玩",
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,
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;
if(this.lesson.content.play.type){
if (this.lesson.content.play.type) {
this.nowLesson = {
type:'audio',
title:2,
partName:'宝贝玩一玩',
content:this.lesson.content.play,
age:this.nowLesson.age
type: "audio",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
}else{
} else {
this.nowLesson = {
type:'video',
title:2,
partName:'宝贝玩一玩',
content:this.lesson.content.play,
age:this.nowLesson.age
type: "video",
title: 2,
partName: "宝贝玩一玩",
content: this.lesson.content.play,
age: this.nowLesson.age
};
}
break;
case 3:
this.$sa.track('learnPart',{
partName:'磨磨小耳朵',
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,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.$sa.track("learnPart", {
partName: "磨磨小耳朵",
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,
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;
if(this.lesson.content.fun.type){
if (this.lesson.content.fun.type) {
this.nowLesson = {
type:'audio',
title:3,
partName:'磨磨小耳朵',
content:this.lesson.content.fun,
age:this.nowLesson.age
type: "audio",
title: 3,
partName: "磨磨小耳朵",
content: this.lesson.content.fun,
age: this.nowLesson.age
};
}else{
} else {
this.nowLesson = {
type:'video',
partName:'磨磨小耳朵',
title:3,
content:this.lesson.content.fun,
age:this.nowLesson.age
type: "video",
partName: "磨磨小耳朵",
title: 3,
content: this.lesson.content.fun,
age: this.nowLesson.age
};
}
break;
}
},
initPage(){
initPage() {
Toast.loading({
mask: true,
message: ''
message: ""
});
console.log(this.$store.state.classQuery)
this.parent_category_id = this.$route.query.parent_category_id
this.course_type = this.$route.query.course_type
console.log(this.$store.state.classQuery);
this.parent_category_id = this.$route.query.parent_category_id;
this.course_type = this.$route.query.course_type;
// debugger
getUserWatchApi().then(res=>{
getUserWatchApi().then(res => {
this.watchDetail = res;
this.$store.dispatch('setWatchDetail',this.watchDetail)
let URL = process.env.API_URL+'#/shareGoods?userID='+ JSON.parse(localStorage.getItem('userDesc')).user_id;
this.$store.dispatch("setWatchDetail", this.watchDetail);
let URL =
process.env.API_URL +
"#/shareGoods?userID=" +
JSON.parse(localStorage.getItem("userDesc")).user_id;
this.onShare(URL);
this.lesson = JSON.parse(localStorage.getItem('lessonDetail'));
this.lesson = JSON.parse(localStorage.getItem("lessonDetail"));
console.log(this.lesson);
this.nowShow = 1;
document.title =`${this.lesson.domTitle}`;
document.title = `${this.lesson.domTitle}`;
this.nowLesson = {
type:'text',
partName:'爸妈看一看',
title:1,
content:this.lesson.content.look,
age:this.nowLesson.age
type: "text",
partName: "爸妈看一看",
title: 1,
content: this.lesson.content.look,
age: this.nowLesson.age
};
let json = {
page_type:0,
page_id:1,
stay_time:1,
page_type: 0,
page_id: 1,
stay_time: 1
};
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
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.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
Toast.clear()
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
Toast.clear();
});
this.$sa.track('learnPart',{
partName:'爸妈看一看',
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,
is_view_today:!!new Date().setHours(0, 0, 0, 0) === new Date(this.lesson.push_time).setHours(0, 0, 0, 0)
this.$sa.track("learnPart", {
partName: "爸妈看一看",
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,
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 ){
this.nowLesson.old=true
if (
this.lesson.content.play.video.length < 1 &&
this.lesson.content.play.audio.length < 1
) {
this.nowLesson.old = true;
}
})
});
}
},
}
};
</script>
<style scoped lang="less">
@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}
.header-h{display: none}
.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{
.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;
}
.header-h {
display: none;
}
.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: -webkit-flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5*@toVw 0;
padding: 5 * @toVw 0;
z-index: 2;
background:rgba(255,255,255,1);
box-shadow:0*@toVw 2*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.1);
}
.newLesson{
background: rgba(255, 255, 255, 1);
box-shadow: 0 * @toVw 2 * @toVw 3 * @toVw 0 * @toVw rgba(0, 0, 0, 0.1);
}
.newLesson {
background: #f8f8f8;
}
.backImg{
}
.backImg {
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60*@toVw;
}
width: 60 * @toVw;
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.backImg{
@toVw: 100/667vw;
.backImg {
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60*@toVw;
width: 60 * @toVw;
}
.lessonHeader{
.lessonHeader {
display: none;
}
.header{
.header {
display: none;
}
.actBanKuai{
.actBanKuai {
background-color: white;
border: 1*@toVw solid transparent;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-color: black;
border-bottom-color: black;
border-radius: 8*@toVw 0 0 8*@toVw;
}
.headerHP{background-size:62*@toVw 434*@toVw;display: inline-block}
.home{height:62*@toVw;width:62*@toVw;background-position:0 0;}
.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{
border-radius: 8 * @toVw 0 0 8 * @toVw;
}
.headerHP {
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
}
.home {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
}
.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;
width: 62*@toVw;
width: 62 * @toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP{
.headerHP {
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;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
border-radius: 8 * @toVw;
}
}
}
@media screen and (min-aspect-ratio: ~"20/8"){
@toVw:100/900vw;
.backImg{
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.backImg {
position: fixed;
bottom: 40*@toVw;
right: 20*@toVw;
bottom: 40 * @toVw;
right: 20 * @toVw;
z-index: 99999999;
width: 60*@toVw;
width: 60 * @toVw;
}
.lessonHeader{
.lessonHeader {
display: none;
}
.header{
.header {
display: none;
}
.actBanKuai{
.actBanKuai {
background-color: white;
border: 1*@toVw solid transparent;
border: 1 * @toVw solid transparent;
border-left-color: black;
border-top-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-size:62*@toVw 434*@toVw;
background-size: 62 * @toVw 434 * @toVw;
display: inline-block;
&.lookHP{height:62*@toVw;width:62*@toVw;background-position:0 0;.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}
&.lookHP {
height: 62 * @toVw;
width: 62 * @toVw;
background-position: 0 0;
.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;
width: 62*@toVw;
width: 62 * @toVw;
position: absolute;
left: 17.5*@toVw;
top: 20*@toVw;
left: 17.5 * @toVw;
top: 20 * @toVw;
z-index: 2;
.headerHP{
.headerHP {
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;
top: 20*@toVw;
left: 80*@toVw;
right: 20*@toVw;
bottom: 20*@toVw;
top: 20 * @toVw;
left: 80 * @toVw;
right: 20 * @toVw;
bottom: 20 * @toVw;
background: white;
border: 1*@toVw solid #000;
border-radius: 0 8*@toVw 8*@toVw 8*@toVw;
&.radius{
border-radius: 8*@toVw;
border: 1 * @toVw solid #000;
border-radius: 0 8 * @toVw 8 * @toVw 8 * @toVw;
&.radius {
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 @@
<div class="content">
<div class="btn-block">
<div v-if="showObj.change" class="change-block-HP" @click="changeAudio(true)">
<div class="">
<img :src="imgURL.tapToAudio"/>
<div class>
<img :src="imgURL.tapToAudio" />
</div>
</div>
<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
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 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 v-if="showObj.change" class="change-block">
<div class="active">视频教学</div>
......@@ -19,23 +39,45 @@
</div>
</div>
<div class="header">
<img :src="imgURL.luolacoming" class="text" v-if="nowShow === 3">
<img :src="imgURL.luolalaila" class="text" v-if="nowShow === 2">
<img :src="imgURL.luolacoming" class="text" v-if="nowShow === 3" />
<img :src="imgURL.luolalaila" class="text" v-if="nowShow === 2" />
</div>
<div 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
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 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">视频({{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>
<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="{item:true}" v-for="(item,index) in showObj.video" @click="scrollFn(index)" >
<img :class="{activity:videoStyle==index}" :src="item.url+'?vframe/jpg/offset/3'" alt="">
<div
: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>
<!-- {{index}} -->
</div>
......@@ -43,429 +85,547 @@
</scroll>
<div class="age-change-block ageclass" v-if="contentData.content.age ">
<p>年龄段选择</p>
<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
: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 class="parent-finish">
<div class="finish-block" v-if="nowShow === 3">
<img :src="finishStuat" @click="finishStudy">
<img :src="finishStuat" @click="finishStudy" />
</div>
</div>
<star-block @showShare="share_show = true" @changeShow="changeStar" :contentData="contentData"/>
<star-block
@showShare="share_show = true"
@changeShow="changeStar"
:contentData="contentData"
/>
</div>
<mt-popup
v-model="popupVisible" style="background: transparent">
<mt-popup v-model="popupVisible" style="background: transparent">
<div @click="popupVisible=false">
<no-finish-dia/>
<no-finish-dia />
</div>
</mt-popup>
<div v-if="share_show">
<share-page @backList="backList()" @closeShare="closeShare()" :contentData="contentData"/>
<share-page @backList="backList()" @closeShare="closeShare()" :contentData="contentData" />
</div>
</div>
</template>
<script>
import luolacoming from '../../assets/newLesson/luoLacoming.png'
import luolalaila from '../../assets/newLesson/luolalaila.png'
import {subUserLessonApi,getUserWatchApi} from "../../service/api";
import tapToAudio from '../../assets/tapToAudio.png'
import finishStuat from '../../assets/newLesson/finishStudy.png'
import noFinishDia from './nofinishdia'
import sharePage from './share'
import starBlock from './star'
import {Popup} from 'mint-ui'
export default {
import luolacoming from "../../assets/newLesson/luoLacoming.png";
import luolalaila from "../../assets/newLesson/luolalaila.png";
import { subUserLessonApi, getUserWatchApi } from "../../service/api";
import tapToAudio from "../../assets/tapToAudio.png";
import finishStuat from "../../assets/newLesson/finishStudy.png";
import noFinishDia from "./nofinishdia";
import sharePage from "./share";
import starBlock from "./star";
import { Popup } from "mint-ui";
export default {
name: "play",
components:{
components: {
noFinishDia,
sharePage,
starBlock,
[Popup.name]:Popup
[Popup.name]: Popup
},
data(){
return{
finishStuat:finishStuat,
popupVisible:false,
ageShow:false,
star:false,
share_show:false,
showObj:{
video:[],
change:false
data() {
return {
finishStuat: finishStuat,
popupVisible: false,
ageShow: false,
star: false,
share_show: false,
showObj: {
video: [],
change: false
},
videoShow:false,
videoIndex:0,
imgURL:{
luolacoming:luolacoming,
luolalaila:luolalaila,
tapToAudio:tapToAudio
videoShow: false,
videoIndex: 0,
imgURL: {
luolacoming: luolacoming,
luolalaila: luolalaila,
tapToAudio: tapToAudio
},
orientationchange:false,
testCount:5,
videoStyle:'0',
videoWidth:100
}
orientationchange: false,
testCount: 5,
videoStyle: "0",
videoWidth: 100
};
},
props:[
'contentData','nowShow'
],
created(){
this.videoWidth = Number(document.documentElement.clientWidth)/3.8
console.log(this.videoWidth)
props: ["contentData", "nowShow"],
created() {
this.videoWidth = Number(document.documentElement.clientWidth) / 3.8;
console.log(this.videoWidth);
},
mounted(){
this.changeAge(this.contentData.age)
let that = this
mounted() {
this.changeAge(this.contentData.age);
let that = this;
// console.log(Number(document.documentElement.clientWidth))
// console.log(Number(document.documentElement.clientWidth.replace('px','')))
window.addEventListener('orientationchange',function(){
setTimeout(function(){
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
if(width>height){
that.orientationchange=true
}else{
that.orientationchange=false
}
},300)
},false);
window.addEventListener(
"orientationchange",
function() {
that.$nextTick(() => {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if (width > height) {
that.orientationchange = true;
} else {
that.orientationchange = false;
}
});
},
false
);
},
methods:{
scrollFn(index){
this.videoStyle = index
this.videoIndex = index
let parentwidth = Number(getComputedStyle(document.querySelector('.scroll')).width.replace('px',''))
let itemBoxWidth = Number(getComputedStyle(document.querySelector('.itemBox')).width.replace('px',''))
console.log(itemBoxWidth)
let difWidth = (parentwidth/2)-45
if(this.showObj.video.length>3){
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)
methods: {
scrollFn(index) {
this.videoStyle = index;
this.videoIndex = index;
let parentwidth = Number(
getComputedStyle(document.querySelector(".scroll")).width.replace(
"px",
""
)
);
let itemBoxWidth = Number(
getComputedStyle(document.querySelector(".itemBox")).width.replace(
"px",
""
)
);
console.log(itemBoxWidth);
let difWidth = parentwidth / 2 - 45;
if (this.showObj.video.length > 3) {
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){
this.star = data
test() {},
changeStar(data) {
this.star = data;
},
backList(){
this.$emit('backList')
backList() {
this.$emit("backList");
},
closeShare(){
this.share_show=false
closeShare() {
this.share_show = false;
},
finishStudy(){
let query = JSON.parse(sessionStorage.getItem('classQuery'))
this.sendConsole('完成今日学习');
let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
finishStudy() {
let query = JSON.parse(sessionStorage.getItem("classQuery"));
this.sendConsole("完成今日学习");
let lessonDetail = JSON.parse(localStorage.getItem("lessonDetail"));
let nowTime = Date.parse(new Date());
let lookTime = (nowTime- lessonDetail.nowTime)/1000;
let lookTime = (nowTime - lessonDetail.nowTime) / 1000;
let json = {
page_type:0,
page_id:5,
stay_time:lookTime,
page_type: 0,
page_id: 5,
stay_time: lookTime
};
getUserWatchApi().then(res=>{
this.$store.dispatch('setWatchDetail',res)
subUserLessonApi(query.elementId,query.category_id,query.periods_id,json).then(res=>{
getUserWatchApi().then(res => {
this.$store.dispatch("setWatchDetail", res);
subUserLessonApi(
query.elementId,
query.category_id,
query.periods_id,
json
).then(res => {
lessonDetail.total_watch_time = res.total_watch_time;
lessonDetail.nowTime = nowTime;
lessonDetail.star_num = res.total_star_num;
localStorage.setItem('lessonDetail',JSON.stringify(lessonDetail));
localStorage.setItem("lessonDetail", JSON.stringify(lessonDetail));
});
if((Number(lookTime) + Number(lessonDetail.total_watch_time))/60 < 7){
this.popupVisible = true
}else{
this.share_show = true
if (
(Number(lookTime) + Number(lessonDetail.total_watch_time)) / 60 <
7
) {
this.popupVisible = true;
} else {
this.share_show = true;
}
})
});
},
videoEnd(event){
event.srcElement.play()
videoEnd(event) {
event.srcElement.play();
},
sendConsole(data){
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:data,
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
sendConsole(data) {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: data,
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
changeAudio(flag){
if(flag){
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'切换音频教学',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
changeAudio(flag) {
if (flag) {
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "切换音频教学",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
}
this.contentData.type = 'audio'
this.contentData.type = "audio";
},
videoPlay(){
videoPlay() {
// 神策埋点 点击操作
this.$sa.track('watchClick',{
dayModule:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9),
weekName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
elementName:JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(0,9) + '-'+ JSON.parse(localStorage.getItem('lessonDetail')).domTitle.slice(10,JSON.parse(localStorage.getItem('lessonDetail')).domTitle.length),
themeID:JSON.parse(localStorage.getItem('lessonDetail')).themeID,
themeName:JSON.parse(localStorage.getItem('lessonDetail')).themeName,
goodsID:JSON.parse(localStorage.getItem('lessonDetail')).goodsID,
classID:JSON.parse(localStorage.getItem('lessonDetail')).classID,
buttonName:'播放视频',
partName:this.contentData.partName,
elementID:this.$route.query.elementId.toString(),
this.$sa.track("watchClick", {
dayModule: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(0, 9),
weekName: JSON.parse(
localStorage.getItem("lessonDetail")
).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
elementName:
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
0,
9
) +
"-" +
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.slice(
10,
JSON.parse(localStorage.getItem("lessonDetail")).domTitle.length
),
themeID: JSON.parse(localStorage.getItem("lessonDetail")).themeID,
themeName: JSON.parse(localStorage.getItem("lessonDetail")).themeName,
goodsID: JSON.parse(localStorage.getItem("lessonDetail")).goodsID,
classID: JSON.parse(localStorage.getItem("lessonDetail")).classID,
buttonName: "播放视频",
partName: this.contentData.partName,
elementID: this.$route.query.elementId.toString()
});
},
changeAge(value){
if(this.contentData.content.age && value === 2){
changeAge(value) {
if (this.contentData.content.age && value === 2) {
this.showObj = {
video:this.contentData.content.video2,
change:this.contentData.content.change2
}
}else{
video: this.contentData.content.video2,
change: this.contentData.content.change2
};
} else {
this.showObj = {
video:this.contentData.content.video,
change:this.contentData.content.change
}
video: this.contentData.content.video,
change: this.contentData.content.change
};
}
// console.log(this.$refs.itembox)
// console.log(this.showObj.video.length)
if(this.$refs.itembox&&this.showObj.video.length){
this.$refs.itembox.style.width = this.showObj.video.length*this.videoWidth+'px'
console.log(this.videoWidth)
if (this.$refs.itembox && this.showObj.video.length) {
this.$refs.itembox.style.width =
this.showObj.video.length * this.videoWidth + "px";
console.log(this.videoWidth);
}
console.log(this.showObj)
console.log(this.showObj);
}
},
watch:{
'contentData':{
handler:function() {
watch: {
contentData: {
handler: function() {
this.videoIndex = 0;
this.changeAge(this.contentData.age)
this.changeAge(this.contentData.age);
},
deep: true
},
}
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.close-share-show{
@import "../../util/public";
.close-share-show {
position: fixed;
z-index: 99;
top: 18*@toVw;
right: 12*@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}
._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}
.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;
top: 18 * @toVw;
right: 12 * @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;
}
._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;
}
.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;
// position: fixed;
display: none;
.itemBox{
.itemBox {
// width: 600*@toVw;
display: flex;
.item{
.item {
// display: inline-block;
flex: 1;
width: 100*@toVw;
height: 100*@toVw;
width: 100 * @toVw;
height: 100 * @toVw;
// border: 1px solid black;
img{width: 90*@toVw;height: 60*@toVw;border-radius: 18px;border: 3px solid #E2E2E2;}
.activity{
border: 3px solid #40A9FF;
img {
width: 90 * @toVw;
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;
width: 315*@toVw;
width: 315 * @toVw;
position: absolute;
top: 70*@toVw;
left: 20*@toVw;
right: 20*@toVw;
top: 70 * @toVw;
left: 20 * @toVw;
right: 20 * @toVw;
bottom: 0;
overflow: auto;
margin: auto;
display: block;
border-radius: 8*@toVw;
padding: 10*@toVw;
.header{
border-radius: 8 * @toVw;
padding: 10 * @toVw;
.header {
// text-align: center;
padding-top: 8*@toVw;
padding-top: 8 * @toVw;
height: auto;
// display: flex;
.text{
width:96% ;
.text {
width: 96%;
margin-bottom: 0;
display: block;
// border: none;
}
}
.video-block{
margin-bottom: 16*@toVw;
.video-block {
margin-bottom: 16 * @toVw;
// border: 1*@toVw solid #666;
border-radius: 12*@toVw;
border-radius: 12 * @toVw;
// padding: 8*@toVw;
background:#69C0FF;
border: 4px solid #69C0FF;
background: #69c0ff;
border: 4px solid #69c0ff;
overflow: hidden;
video{
video {
width: 100%;
// height: 171*@toVw;
margin: 0;
display: block;
padding: 0;
background:rgba(0,0,0,0.4);
border-radius:10*@toVw;
}
}
.age-block{
width: 66*@toVw;
height: 28*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
padding: 0 13*@toVw;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&.video{
background: rgba(0, 0, 0, 0.4);
border-radius: 10 * @toVw;
}
}
.age-block {
width: 66 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
padding: 0 13 * @toVw;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
right: 0;
margin-right: 0;
text-align: center;
}
}
.age-change-block{
&.video{
right: 10*@toVw;
left: auto;z-index: 1231;
.age-change-block {
&.video {
right: 10 * @toVw;
left: auto;
z-index: 1231;
background: white;
width: 80*@toVw;
width: 96*@toVw;
border: 1*@toVw solid #666;
border-radius: 10*@toVw;
&>div{
width: 80 * @toVw;
width: 96 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 10 * @toVw;
& > div {
margin: 0;
width: 96*@toVw;
padding: 6*@toVw 11*@toVw;
width: 96 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius:8*@toVw;
border-radius: 8 * @toVw;
text-align: center;
border:none;
border: none;
box-sizing: border-box;
&:first-child{
border-bottom: 1*@toVw solid #eee;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
display: inline-block;
position: absolute;
top: 367*@toVw;
left: 20*@toVw;
width: 196*@toVw;
top: 367 * @toVw;
left: 20 * @toVw;
width: 196 * @toVw;
// border-radius: 8*@toVw;
// border: 1*@toVw solid #666666;
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
margin: 10*@toVw 0;
width: 86*@toVw;
padding: 6*@toVw 11*@toVw;
font-size: 12px;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
margin: 10 * @toVw 0;
width: 86 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius:8*@toVw;
border-radius: 8 * @toVw;
text-align: center;
border:1px solid rgba(200,205,220,1);
border: 1px solid rgba(200, 205, 220, 1);
box-sizing: border-box;
&:first-child{
border-bottom: 1*@toVw solid #eee;
&:first-child {
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;
text-align: center;
z-index: 100;
.change-block{
border-radius: 1000*@toVw;
width: 144*@toVw;
border:1*@toVw solid #40A9FF;
&:after{
content: '';
.change-block {
border-radius: 1000 * @toVw;
width: 144 * @toVw;
border: 1 * @toVw solid #40a9ff;
&:after {
content: "";
display: block;
clear: both;
}
div{
div {
float: left;
width: 50%;
border-radius: 100*@toVw;
font-size:12*@toVw;
height: 28*@toVw;
line-height: 28*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(204,204,204,1);
&.active{
background: #40A9FF;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
height: 28 * @toVw;
line-height: 28 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(204, 204, 204, 1);
&.active {
background: #40a9ff;
color: white;
}
}
}
}
.parent-finish{
.parent-finish {
position: fixed;
bottom: 2 * @toVw;
width: 100%;
left: 0;
top: 500*@toVw;
.finish-block{
top: 500 * @toVw;
.finish-block {
position: absolute;
width: 100%;
left: 0;
......@@ -473,230 +633,237 @@
margin: 0;
text-align: center;
bottom: 0;
img{
width: 202*@toVw;
img {
width: 202 * @toVw;
}
}
}
}
}
.change-block-HP{
}
.change-block-HP {
display: none;
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.video-page{
}
@media screen and (orientation: landscape) {
@toVw: 100/667vw;
.video-page {
position: absolute;
top: 5*@toVw;
bottom: 5*@toVw;
left: 5*@toVw;
right: 5*@toVw;
background:rgba(255,255,255,1);
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius:8*@toVw;
.content{
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header{
.header {
display: none;
}
.age-change-block{
&.video{
top: 33*@toVw;
.age-change-block {
&.video {
top: 33 * @toVw;
right: 0;
left: auto;z-index: 1231;
left: auto;
z-index: 1231;
background: white;
width: 80*@toVw;
width: 80 * @toVw;
position: absolute;
&>div{
& > div {
margin: 0;
width: 100%;
padding: 6*@toVw 11*@toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius:8*@toVw;
border-radius: 8 * @toVw;
text-align: center;
border:none;
&:first-child{
border-bottom: 1*@toVw solid #eee;
border: none;
&:first-child {
border-bottom: 1 * @toVw solid #eee;
}
}
}
display: inline-block;
// position: absolute;
// top: 37*@toVw;
top: 367*@toVw;
top: 367 * @toVw;
left: 0;
width: 196*@toVw;
width: 196 * @toVw;
// border-radius: 8*@toVw;
// border: 1*@toVw solid #666666;
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&>div{
margin: 10*@toVw 0;
width: 54*@toVw;
padding: 6*@toVw 11*@toVw;
font-size: 12px;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
& > div {
margin: 10 * @toVw 0;
width: 54 * @toVw;
padding: 6 * @toVw 11 * @toVw;
text-align: left;
display: inline-block;
border-radius:8*@toVw;
border-radius: 8 * @toVw;
text-align: center;
border:1px solid rgba(200,205,220,1);
&:first-child{
border-bottom: 1*@toVw solid #eee;
border: 1px solid rgba(200, 205, 220, 1);
&:first-child {
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{
&.video{
.age-block {
&.video {
display: block;
}
}
.ageclass{position: fixed;top: 30*@toVw;left:100*@toVw;z-index: 100;
&>div{
.ageclass {
position: fixed;
top: 30 * @toVw;
left: 100 * @toVw;
z-index: 100;
& > div {
display: block;
}
}
.video-block{
.video-block {
display: none;
&.hp-video{
&.hp-video {
display: inline-block;
margin: 0 10*@toVw 0 0;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12*@toVw;
border-radius: 12 * @toVw;
padding: 0;
}
video{
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background:rgba(0,0,0,0.4);
border-radius:8*@toVw;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.btn-block{
position:relative;
min-width: 90*@toVw;
.btn-block {
position: relative;
min-width: 90 * @toVw;
display: block;
height: 100%;
.age-block{
.age-block {
display: block;
position: static;
padding: 0;
height: 28*@toVw;
width: 88*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&.video{
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
display: block;
}
}
.change-block-HP{
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78*@toVw;
img{
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block{
.change-block {
display: none;
}
}
}
}
}
}
@media screen and (min-aspect-ratio: ~"20/8"){
@toVw:100/900vw;
.video-page{
@media screen and (min-aspect-ratio: ~"20/8") {
@toVw: 100/900vw;
.video-page {
position: absolute;
top: 5*@toVw;
bottom: 5*@toVw;
left: 5*@toVw;
right: 5*@toVw;
background:rgba(255,255,255,1);
top: 5 * @toVw;
bottom: 5 * @toVw;
left: 5 * @toVw;
right: 5 * @toVw;
background: rgba(255, 255, 255, 1);
overflow: auto;
border-radius:8*@toVw;
.content{
border-radius: 8 * @toVw;
.content {
position: static;
height: 100%;
width: 100%;
display: flex;
border-radius: 8px;
padding: 0;
.header{
.header {
display: none;
}
.video-block{
.video-block {
display: none;
&.hp-video{
&.hp-video {
display: inline-block;
margin: 0 10*@toVw 0 0;
margin: 0 10 * @toVw 0 0;
border: none;
height: 100%;
border-radius: 12*@toVw;
border-radius: 12 * @toVw;
padding: 0;
}
video{
video {
height: 100%;
margin: auto;
width: auto;
display: block;
background:rgba(0,0,0,0.4);
border-radius:8*@toVw;
background: rgba(0, 0, 0, 0.4);
border-radius: 8 * @toVw;
}
}
.btn-block{
position:relative;
min-width: 90*@toVw;
.btn-block {
position: relative;
min-width: 90 * @toVw;
display: block;
height: 100%;
.age-block{
.age-block {
display: block;
position: static;
padding: 0;
height: 28*@toVw;
width: 88*@toVw;
line-height: 28*@toVw;
border: 1*@toVw solid #666;
border-radius: 100*@toVw;
font-size:12*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
&.video{
height: 28 * @toVw;
width: 88 * @toVw;
line-height: 28 * @toVw;
border: 1 * @toVw solid #666;
border-radius: 100 * @toVw;
font-size: 12 * @toVw;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
&.video {
display: block;
}
}
.change-block-HP{
.change-block-HP {
position: absolute;
top: ~"calc(100vh - 12.5vw)";
display: block;
width: 78*@toVw;
img{
width: 78 * @toVw;
img {
width: 100%;
}
}
.change-block{
.change-block {
display: none;
}
}
}
}
}
}
</style>
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