Skip to content

A
admin-base
Commit 061ab7f9 authored by wangwei's avatar wangwei
Browse files
Options

Merge branch 'myBranch' into development

parents 20a390ee ff3d5c8c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1521 additions and 1884 deletions
index.html
View file @ 061ab7f9
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="never">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_746649_bhids3f63a6.css">
<link rel="stylesheet" href="https:////at.alicdn.com/t/font_746649_x1rivf5f5.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css">
<title>唱唱启蒙-后台</title>
</head>
......
src/components/mould/baseBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-form ref="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="formData.title"/>
</el-form-item>
<el-form-item label="封面">
<el-upload
class="avatar-uploader"
:http-request="uploadFileImage"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="uploadImgSuccess"
:show-file-list="false">
<img v-if="formData.cover" :src="formData.cover" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {uploadFileApi} from "../../service/api";
export default {
name: "baseBlock",
props:[
'formData'
],
data(){
return{
}
},
methods:{
uploadFileImage(a){
if( a.file.size < 200 * 1024) {
uploadFileApi({file:a.file,type:'local',obj:a}).then(res=>{
this.formData.cover = process.env.IMAGE_URL_HEAD + res.url;
this.$message({
type: 'success',
message: '上传成功!'
});
a.onSuccess('上传成功')
});
}else{
this.$message({
type: 'error',
message: '文件过大'
});
}
},
uploadImgSuccess(a,b,c){
}
}
}
</script>
<style scoped>
</style>
src/components/mould/funBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<div style="max-height: 800px;overflow: auto;max-width: 800px">
<video-upload :formData="formData.fun"/>
</div>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<!--视频显示-->
<div class="view-content" v-if="!formData.fun.type && !type">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-if="formData.fun.video[0]" class="video-block">
<video :src="formData.fun.video[0].url" controls></video>
</div>
<div class="tips-block" v-if="formData.fun.change">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
<!--音频显示-->
<div class="view-content" v-if="formData.fun.type || type">
<div v-if="formData.fun.audio[0]">
<img :src="formData.fun.audio[0].image" class="audio-img">
<audio :src="formData.fun.audio[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.fun.audio[0].title}}
</div>
<div class="tips">
{{formData.fun.audio[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div>
<img :src="playAudio" class="play-btn"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import background from '../../assets/mould/funBlock.png'
import videoUpload from '../textarea/videoUpload'
import luolaUrl from '../../assets/mould/playLuola.png'
import luolaComing from '../../assets/mould/luoLacoming.png'
import playAudio from '../../assets/mould/playAudio.png'
export default {
name: "funBlock",
props:[
'formData'
],
data(){
return{
background:background,
luolaUrl:luolaUrl,
luolaComing:luolaComing,
playAudio:playAudio,
type:false,
range:0
}
},
components:{
videoUpload
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
.audio-img{
width: 188px;
height: 188px;
border-radius: 8px;
display: block;
margin: 40px auto 0 auto;
}
.range-block{
text-align: center;
width: 237px;
margin: auto;
margin-top: 11px;
.play-btn{
margin-top: 28px;
width: 40px;
}
input[type=range] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
display: flex;
width: 100%;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 12px;
width: 12px;
margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
background: #49E2A5;
}
}
.title-block{
text-align: center;
margin-top: 24px;
.title{
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:22px;
}
.tips{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:20px;
}
}
.luola{
width: 70px;
margin: 10px 0 0 20px;
}
.luolacoming{
width: 135px;
margin-left:42px ;
}
.video-block{
width: 303px;
padding: 8px;
margin: auto;
border: 1px solid #666666;
border-radius: 12px;
height: 171px;
video{
border-radius: 12px;
width: 100%;
}
}
.tips-block{
border-radius: 1000px;
width: 144px;
margin: 16px auto auto;
border: 1px solid #40A9FF;
height: 28px;
line-height: 28px;
&:after{
content: '';
display: block;
clear: both;
}
div{
float: left;
font-size:12px;
width: 50%;
text-align: center;
color: #cccccc;
&.active{
border-radius: 1000px;
background: #40A9FF;
color: #FFFFFF;
}
}
}
}
}
</style>
src/components/mould/lessonContent.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<el-form ref="form" label-width="120px">
<el-form-item label="课程内容">
<el-input v-model="formData.content.tips.content"></el-input>
</el-form-item>
<el-form-item label="title1">
<el-input rows="4" v-model="formData.content.tips.title1"></el-input>
</el-form-item>
<el-form-item label="title1-内容">
<el-input rows="4" type="textarea" v-model="formData.content.tips.title1_content"></el-input>
</el-form-item>
<el-form-item label="title2">
<el-input rows="4" v-model="formData.content.tips.title2"></el-input>
</el-form-item>
<el-form-item label="title2-内容">
<el-input type="textarea" rows="4" v-model="formData.content.tips.title2_content"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<div class="view" :style="{backgroundImage:`url(${background})`}">
<div class="title">
{{formData.title}}
</div>
<div class="lessonContent">
{{formData.content.tips.content}}
</div>
<div class="tips title1">
{{formData.content.tips.title1}}
</div>
<div class="title-content">
<ul>
<li v-for="data in splitContent">{{data}}</li>
</ul>
</div>
<div class="tips title2">
{{formData.content.tips.title2}}
</div>
<div class="title-content title2">
{{formData.content.tips.title2_content}}
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import background from '../../assets/mould/lessonContentBGI.png'
export default {
name: "lessonContent",
props:[
'formData'
],
computed:{
splitContent(){
let arr = [];
if(this.formData.content.tips.title1_content){
arr = this.formData.content.tips.title1_content.split('\n');
}
return arr
},
},
data(){
return{
background:background
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 275px;
height: 447px;
background-size: 100% 100%;
padding: 97px 49px 93px 51px;
margin: auto;
.title{
width:219px;
font-size:24px;
margin: 36px auto 16px;
text-align: center;
font-family:Helvetica-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:26px;
height: 52px;
overflow: hidden;
}
.lessonContent{
margin:8px auto;
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
text-align: center;
line-height:22px;
width: 83px;
padding: 7px 5px;
background: rgba(51,51,51,0.2);
border-radius: 4px;
height: 22px;
}
.tips{
height:20px;
width: fit-content;
margin: 12px auto 10px auto;
font-size:16px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(145,237,250,1);
line-height:22px;
display: block;
border-radius: 1000px;
padding: 3px 18px;
border: 2px solid #91EDFA;
&.title1{
margin-top: 55px;
}
}
.title-content{
word-break:break-all;
padding: 0 18px;
font-size:12px;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(136,136,136,1);
line-height:17px;
&.title2{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20px;
}
ul{
margin: 0;
padding: 0;
font-size:14px;
height:58px;
overflow: hidden;
margin-bottom: 14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:20px;
list-style-type:none;
&:after{
content: '';
display: block;
clear: both;
}
li{
width: 50%;
float: left;
}
}
}
}
</style>
src/components/mould/lookBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<area-blcok :lookData="formData.look"/>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<div v-html="formData.look.content" class="view-content">
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import AreaBlcok from '../textarea'
import background from '../../assets/mould/lookBlock.png'
export default {
name: "lookBlock",
props:[
'formData'
],
data(){
return {
background:background
}
},
components:{
AreaBlcok
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow: auto;
border-radius: 8px;
}
}
</style>
src/components/mould/playBlock.vue 0 → 100644
View file @ 061ab7f9
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<div style="max-height: 800px;overflow: auto;max-width: 800px">
<video-upload :formData="formData.play"/>
</div>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<!--视频显示-->
<div class="view-content" v-if="!formData.play.type && !type && !age">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-for="data in formData.play.video" class="video-block">
<video :src="data.url" controls></video>
</div>
<div class="btn-block">
<div class="change" v-if="formData.play.age" @click="age=true">
0-3岁
<i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
</div>
<div class="tips-block" v-if="formData.play.change">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
</div>
<div class="view-content" v-if="!formData.play.type && !type && age">
<img :src="luolaUrl" class="luola"/>
<img :src="luolaComing" class="luolacoming"/>
<div v-for="data in formData.play.video2" class="video-block">
<video :src="data.url" controls></video>
</div>
<div class="btn-block">
<div class="change" v-if="formData.play.age" @click="age=false">
4-6岁
<i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
</div>
<div class="tips-block" v-if="formData.play.change2">
<div class="active">视频教学</div>
<div @click="type=true">音频教学</div>
</div>
</div>
</div>
<!--音频显示-->
<div class="view-content" v-if="( formData.play.type || type )&& !age">
<div v-if="formData.play.audio[0]">
<img :src="formData.play.audio[0].image" class="audio-img">
<audio :src="formData.play.audio[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.play.audio[0].title}}
</div>
<div class="tips">
{{formData.play.audio[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div class="btn-block">
<img :src="listUrl"/>
<img :src="lastUrl"/>
<img :src="playAudio" class="play-btn"/>
<img :src="nextUrl"/>
<img :src="refUrl"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
<div class="view-content" v-if="( formData.play.type || type )&& age">
<div v-if="formData.play.audio2[0]">
<img :src="formData.play.audio2[0].image" class="audio-img">
<audio :src="formData.play.audio2[0].url"></audio>
<div class="title-block">
<div class="title">
{{formData.play.audio2[0].title}}
</div>
<div class="tips">
{{formData.play.audio2[0].tips}}
</div>
</div>
<div class="range-block">
<input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
<div class="btn-block">
<img :src="listUrl"/>
<img :src="lastUrl"/>
<img :src="playAudio" class="play-btn"/>
<img :src="nextUrl"/>
<img :src="refUrl"/>
</div>
</div>
</div>
<div class="tips-block" v-if="formData.play.change">
<div @click="type = false">视频教学</div>
<div class="active">音频教学</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import luolaUrl from '../../assets/mould/playLuola.png'
import luolaComing from '../../assets/mould/luoLacoming.png'
import background from '../../assets/mould/playBlock.png'
import videoUpload from '../textarea/videoUpload'
import playAudio from '../../assets/mould/playAudio.png'
import lastUrl from '../../assets/mould/last.png'
import nextUrl from '../../assets/mould/next.png'
import listUrl from '../../assets/mould/list.png'
import refUrl from '../../assets/mould/ref.png'
export default {
props:[
'formData'
],
name: "playBlock",
data(){
return{
background:background,
lastUrl:lastUrl,
listUrl:listUrl,
refUrl:refUrl,
nextUrl:nextUrl,
luolaUrl:luolaUrl,
luolaComing:luolaComing,
playAudio:playAudio,
type:false,
range:0,
age:false,
}
},
components:{
videoUpload
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.view{
width: 335px;
height: 469px;
background-size: 100% 100%;
padding: 140px 20px 77px 20px;
margin: auto;
.view-content{
background: white;
padding: 10px;
width: 315px;
height: 459px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 8px;
.audio-img{
width: 188px;
height: 188px;
border-radius: 8px;
display: block;
margin: 40px auto 0 auto;
}
.btn-block{
position: relative;
margin-top: 16px;
}
.change{
width: 72px;
height: 28px;
border-radius: 100px;
position: absolute;
text-align: center;
line-height: 28px;
font-size:12px;
top: 0;
left: 0;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
border: 1px solid #666666;
}
.range-block{
text-align: center;
width: 237px;
margin: auto;
margin-top: 11px;
.btn-block{
height: 40px;
margin-top: 28px;
line-height: 40px;
img{
width:16px ;
vertical-align: middle;
margin: 0 10px;
}
.play-btn{
width: 40px;
}
}
input[type=range] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
background-size: 75% 100%;/*设置左右宽度比例*/
display: flex;
width: 100%;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 12px;
width: 12px;
margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
background: #49E2A5;
}
}
.title-block{
text-align: center;
margin-top: 24px;
.title{
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(102,102,102,1);
line-height:22px;
}
.tips{
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
line-height:20px;
}
}
.luola{
width: 70px;
margin: 10px 0 0 20px;
}
.luolacoming{
width: 135px;
margin-left:42px ;
}
.video-block{
width: 303px;
padding: 8px;
margin: auto;
border: 1px solid #666666;
border-radius: 12px;
height: 171px;
video{
border-radius: 12px;
width: 100%;
}
}
.tips-block{
border-radius: 1000px;
width: 144px;
margin: auto;
border: 1px solid #40A9FF;
height: 28px;
line-height: 28px;
&:after{
content: '';
display: block;
clear: both;
}
div{
float: left;
font-size:12px;
width: 50%;
text-align: center;
color: #cccccc;
&.active{
border-radius: 1000px;
background: #40A9FF;
color: #FFFFFF;
}
}
}
}
}
</style>
src/components/preview/audio1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="radio1" :style="{backgroundImage:`url(${nowLesson.content.titleType === 0 ? imgUrl.bg:imgUrl.moerduoBg})`}">
<div class="bg-block" :style="{backgroundImage:`url('${imgUrl.contentBg}')`}">
<img :src="imgUrl.tabVideo" class="tab-video-img" @click="goNext(nowLesson.content.tabVideo.index)" v-if="nowLesson.content.tabVideo.type"/>
<div class="title">
<img :src="imgUrl.title" v-if="nowLesson.content.titleType === 0"/>
<img :src="imgUrl.moerduo" v-if="nowLesson.content.titleType === 1"/>
</div>
<div class="cd">
<img :src="imgUrl.CD"/>
</div>
<audio
ref="audio"
:src="nowLesson.content.radio[radioLenth].url"
@timeupdate="updateTime">
</audio>
<div class="name-block">
<div class="name">
<span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].title}}</span>
</div>
<div class="ahtor">
<span v-if="nowLesson.content.radio[radioLenth]">{{nowLesson.content.radio[radioLenth].lable}}</span>
</div>
</div>
<div class="play-block">
<img :src="imgUrl.loading"/>
<div class="radius-icon" :style="{left:audioLeft}"></div>
</div>
<div class="btn-block">
<img :src="imgUrl.near" @click="dRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
<img :src="imgUrl.play" class="play" v-if="!playAudioType" @click="playAudio()"/>
<img :src="imgUrl.stop" class="play" v-if="playAudioType" @click="stopAudio()"/>
<img :src="imgUrl.next" @click="aRadio()" v-if="nowLesson.content.radio && nowLesson.content.radio.length > 0"/>
</div>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 0">
<img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.showBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 1">
<img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 2">
<img :src="imgUrl.backLookBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.finishBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<div class="bottom-block" v-if="nowLesson.content.buttonType === 3">
<img :src="imgUrl.backPlayBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.nextBtn" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</template>
<script>
import {radio1} from "../../util/imgUrl";
import {Toast} from 'mint-ui'
export default {
name: "audio1",
props: [
'nowLesson'
],
data() {
return {
imgUrl: radio1,
audioLeft:0,
radioLenth:0,
playAudioType:false,
}
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 切换音频+
aRadio(){
if(this.radioLenth < this.nowLesson.content.radio.length - 1){
this.radioLenth ++;
this.playAudioType = false;
this.audioLeft = 0;
}else{
Toast('已是最后一个')
}
},
updateTime(e){
let time = e.target.currentTime / e.target.duration * 72.5333333;
this.audioLeft = time + 'vw';
if(e.target.currentTime === e.target.duration ){
this.playAudioType = false
}
},
// 暂停音频
stopAudio(){
this.$refs.audio.pause();
this.playAudioType = false
},
// 切换音频-
dRadio(){
if(this.radioLenth>0){
this.radioLenth --;
this.playAudioType = false;
this.audioLeft = 0;
}else{
Toast('已是第一个')
}
},
// 播放音频
playAudio(){
this.$refs.audio.play();
this.playAudioType = true;
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.radio1{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background-size: 100% 100%;
.bg-block{
background-color: transparent;
border: none;
width: 345 * @toVw;
top: 10 *@toVw;
height: 540 * @toVw;
padding: 10*@toVw;
box-shadow: none;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.tab-video-img{
position: absolute;
bottom: 15 * @toVw;
width: 24* @toVw;
right: 15 * @toVw;
}
.title{
text-align: center;
img{
width: 80%;
}
}
.cd{
text-align: center;
img{
width: 194 * @toVw;
}
}
.name-block{
text-align: center;
margin-top: 20 * @toVw;
font-family: PingFang-SC-Regular;
color: #333333;
.name{
height: 25 * @toVw;
line-height: 25 * @toVw;
font-size: 16 * @toVw;
}
.ahtor{
font-size: 12 * @toVw;
}
}
.play-block{
width: 272 * @toVw;
margin: 20 * @toVw auto auto auto;
position: relative;
img{
width: 272 * @toVw;
}
.radius-icon{
position: absolute;
width: 13 * @toVw;
top: 5*@toVw;
left: 0;
height: 13 * @toVw;
background: #80952B ;
border-radius: 50 * @toVw;
}
}
.btn-block{
line-height: 100 * @toVw;
text-align: center;
img{
vertical-align: middle;;
margin-right: 10 * @toVw;
width: 24 *@toVw;
&.play{
width: 36 *@toVw;
}
&:last-child{
margin-right: 0;
}
}
}
}
.bottom-block{
position: fixed;
width: 100%;
bottom: 10*@toVw;
text-align: center;
img{
width: 127 * @toVw;
}
img:first-child{
margin-right: 25 * @toVw;
}
}
}
</style>
src/components/preview/index.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="lesson">
<!--看一看1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'look1'">
<look1-div :nowLesson="nowLesson" @goNext="goNext"></look1-div>
</transition>
<!--玩一玩1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'play1'">
<video1-div :nowLesson="nowLesson" @goNext="goNext"></video1-div>
</transition>
<!--玩一玩音频-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'radio1'">
<audio1-div :nowLesson="nowLesson" @goNext="goNext"></audio1-div>
</transition>
<!--秀宝贝1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'show1'">
<show1-div :nowLesson="nowLesson" @goNext="goNext"></show1-div>
</transition>
<!--加油包1-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling1'">
<refueling1-div :nowLesson="nowLesson" @goNext="goNext"></refueling1-div>
</transition>
<!--加油包2-->
<transition name="fade" v-if="nowLesson && nowLesson.key === 'refueling2'">
<refueling2-div :nowLesson="nowLesson" @goNext="goNext"></refueling2-div>
</transition>
</div>
</template>
<script>
import {getElemenetDetailApi} from "../../service/api"
import look1Div from './look1'
import video1Div from './video1'
import audio1Div from './audio1'
import show1Div from './show1'
import refueling1Div from './refueling1'
import refueling2Div from './refueling2'
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);
export default {
name: "index",
components:{
look1Div,
video1Div,
audio1Div,
show1Div,
refueling1Div,
refueling2Div
},
data(){
return{
elementId:this.$route.params.id,
lessonList:[],
nowLesson:null
}
},
mounted(){
this.initPage()
},
methods:{
initPage(){
getElemenetDetailApi(this.elementId).then(res=>{
this.lessonList = JSON.parse(res.content);
this.nowLesson = this.lessonList[0]
})
},
goNext(data) {
if(!this.lessonList[data.i]){
alert('没有此内容')
}else{
this.nowLesson = this.lessonList[data.i];
}
},
}
}
</script>
<style lang="less">
html,body,#app,.lesson{
height: 100%;
}
div{
margin: auto;
}
</style>
src/components/preview/look1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div :style="{backgroundImage:`url(${imgUrl.bg})`}" class="look1">
<img :src="imgUrl.reqiqiu" class="reqiqiu"/>
<img :src="imgUrl.qiqiu" class="qiqiu"/>
<img :src="imgUrl.feiji" class="feiji"/>
<div class="content">
<div class="title">
<img :src="imgUrl.title1"/>
</div>
<audio ref="jiayouAudio" v-if="nowLesson.content.radio.length > 0" :src="nowLesson.content.radio[0].url" @ended="lookAudioType = 2" @play="lookAudioType = 1" preload="auto" autoplay ></audio>
<div class="radio">
<img :src="imgUrl.r1" class="r1">
<img :src="imgUrl.r2" class="r2" v-show="lookAudioType===2">
<img :src="imgUrl.playing" class="r2" v-show="lookAudioType===1">
<div class="r2 text" v-show="lookAudioType===0">
loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<img :src="imgUrl.r3" class="r3">
<img :src="imgUrl.rp" class="rp" @click="playLook1Audio" v-if="lookAudioType!==1">
<img :src="imgUrl.rs" class="rs" @click="stopLook1Audio" v-if="lookAudioType===1">
</div>
<div class="today-block">
<img :src="imgUrl.tadayBg"/>
<div class="today-text">
<div v-html="formatBr(nowLesson.content.today)">
</div>
</div>
</div>
<div class="title2-block">
<img :src="imgUrl.title2" class="title2"/>
<div class="directory-text">
<div v-html="formatBr(nowLesson.content.directory)">
</div>
</div>
</div>
</div>
<div class="bottom-block">
<img :src="imgUrl.bank" @click="goNext('')"/>
<img :src="imgUrl.go" v-if="nowLesson.content.nextIndex !== -1" @click="goNext(nowLesson.content.nextIndex,true)" />
</div>
</div>
</template>
<script>
import {getwechatParam,get} from "../../service/api";
import {look1} from "../../util/imgUrl";
export default {
name: "look1",
props:[
'nowLesson'
],
data(){
return {
imgUrl:look1,
lookAudioType:0,
timeCheck:0,
}
},
mounted(){
this.initPage()
},
methods:{
timeS(){
if(this.timeCheck > 0){
this.timeCheck --;
setTimeout( ()=> {
this.timeS();
},1000)
}
},
// 播放看一看音频
playLook1Audio(){
this.$refs.jiayouAudio.play();
this.lookAudioType = 1
},
// 暂停看一看音频
stopLook1Audio(){
this.$refs.jiayouAudio.pause();
this.lookAudioType = 2
},
autoPlayAudio(){
let that = this;
let voice = this.$refs.jiayouAudio;
document.addEventListener("WeixinJSBridgeReady",function(){
voice.play();
},false);
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
console.log(1)
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
console.log(2)
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
console.log(3)
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
console.log(4)
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play();
console.log(123)
})
})
})
})
})
},
initPage(){
this.timeCheck = this.nowLesson.content.timeLang;
this.timeS();
getwechatParam({
api_list:'onMenuShareAppMessage',
url:window.location.href.split('#')[0]
}).then(res=>{
let that = this;
wx.config({
debug: false,
appId: res.appId,
timestamp: parseInt(res.timestamp),
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: res.jsApiList
});
let voice = this.$refs.jiayouAudio;
this.autoPlayAudio()
});
},
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
formatBr(str){
str = str.replace(/\r\n/g,"<br/>");
str = str.replace(/\n/g,"<br/>");
str = str.replace(/\r/g,"<br/>");
return str
},
},
watch:{
'nowLesson'(){
this.autoPlayAudio
}
},
}
</script>
<style scoped lang="less">
@import "../../util/public";
.look1{
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 100% 100%;
.bottom-block{
position: fixed;
width: 100%;
text-align: center;
bottom: 5 * @toVw;
z-index: 5;
margin-top: 15 * @toVw;
.timeout-block{
display: inline-block;
position: relative;
.time-check{
color: white;
position: absolute;
top: 7 * @toVw;
width: 2em;
text-align: right;
left: 73 * @toVw;
}
}
img{
width: 127 * @toVw;
}
img:first-child{
margin-right: 25 * @toVw;
}
}
.reqiqiu{
position: absolute;
left: -30/ 2 * @toVw;
width: 56 * @toVw;
z-index: 1;
}
.qiqiu{
position: absolute;
z-index: 1;
width: 42 *@toVw;
left: -30/ 2 * @toVw;
top: 700/ 2 * @toVw;
}
.feiji{
position: absolute;
z-index: 1;
width: 84 * @toVw;
right: -10 * @toVw;
top: 120 * @toVw;
}
.content{
left: 20 * @toVw;
right: 20 * @toVw;
top:15 * @toVw;
bottom: 45 * @toVw;
overflow: auto;
position: fixed;
background: white;
border-radius: 5px;
padding: 10 * @toVw;
.title{
img{
width: 100%;
}
}
.radio{
text-align: center;
position: relative;
height: 55 * @toVw;
.r1{
position: absolute;
bottom: 10 * @toVw;
width: 225.5 * @toVw;
right: 10 * @toVw;
}
.r2{
position: absolute;
right: 45 * @toVw;
width: 118*@toVw;
bottom: 13 * @toVw;
color: #666;
&.text{
height: 28 * @toVw;
line-height: 28 * @toVw;
span{
font-size: 20px;
-webkit-animation: load 1s ease infinite;
&:nth-child(1){
-webkit-animation-delay:1.2s;
}
&:nth-child(2){
-webkit-animation-delay:1.4s;
}
&:nth-child(3){
-webkit-animation-delay:1.6s;
}
}
}
}
.r3{
position: absolute;
left: 15 * @toVw;
bottom: 10 * @toVw;
width: 73 * @toVw;
}
.rs{
position: absolute;
right: 190 * @toVw;
bottom: 15 * @toVw;
width: 22 * @toVw;
}
.rp{
position: absolute;
right: 190 * @toVw;
bottom: 15 * @toVw;
width: 22 * @toVw;
}
}
.today-block{
position: relative;
img{
width: 100%;
}
.today-text{
position: absolute;
top: 35* @toVw;
left: 0;
bottom: 0;
right: 0;
font-size: 14* @toVw;
line-height: 35* @toVw;
text-align: left;
padding-left: 20* @toVw;
padding-right: 15* @toVw;
z-index: 3;
overflow: hidden;
.zhanwei1{
float: left;
clear: left;
width: 15* @toVw;
height: 35* @toVw;
}
.zhanwei2{
float: left;
clear: left;
width: 60* @toVw;
height: 35* @toVw;
}
.zhanwei3{
float: left;
clear: left;
width: 70* @toVw;
height: 35* @toVw;
}
}
}
.title2-block{
background: #FFFFFF;
border: 1px solid #2E2E2E;
border-radius: 4px;
position: relative;
margin-top: 10 * @toVw;
min-height: 183 * @toVw;
.directory-text{
margin-top: 20 * @toVw;
font-size: 28/ 2 * @toVw;
line-height: 50/ 2 * @toVw;
text-align: left;
padding-left: 40/ 2 * @toVw;
padding-right: 30/ 2 * @toVw;
}
.title2{
position: absolute;
width: 192 * @toVw;
top: -20 * @toVw;
left: 10 * @toVw;
}
.redM{
position: absolute;
width: 96 * @toVw;
top: -2 * @toVw;
right: -2 * @toVw;
}
.flour{
position: absolute;
bottom: 0;
width: 169 * @toVw;
right: 0;
}
}
}
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>
src/components/preview/refueling1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="refueling1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
<div class="bg-block">
<img :src="imgUrl.title" class="title" >
<audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
<div class="content-img">
<img :src="nowLesson.content.banner[0].url" v-if="nowLesson.content.banner[0]" class="bg">
<img :src="imgUrl.radio" class="radio-icon" @click="playJiayou()">
</div>
</div>
<div class="bottom-block">
<img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</template>
<script>
import {refueling1} from "../../util/imgUrl";
export default {
name: "refueling1",
props:[
'nowLesson'
],
data(){
return{
imgUrl:refueling1
}
},
mounted(){
this.autoPlayAudio()
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放加油包音频
playJiayou(){
if(this.$refs.jiayouAudio.paused){
this.$refs.jiayouAudio.play()
}else{
this.$refs.jiayouAudio.pause()
}
},
autoPlayAudio(){
let voice = this.$refs.jiayouAudio;
let that = this;
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play()
})
})
})
})
})
}
},
watch:{
'nowLesson'(){
this.autoPlayAudio()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.refueling1{
position: absolute;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 100% 100%;
height: 100%;
.bg-block{
width: 325 * @toVw;
background: white;
border-radius: 8 * @toVw;
padding: 10 * @toVw;
position: relative;
margin-top: 10 * @toVw;
text-align: center;
}
.title{
width: 280 * @toVw ;
}
.bottom-block{
margin-top: 10 * @toVw;
width: 100%;
text-align: center;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 10*@toVw;
}
}
}
.pageNo{
position: absolute;
width: 100%;
color: #888888;
font-size: 12px;
left: 0;
display: inline-block;
text-align: center;
bottom:0;
}
.content-img{
position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 20/ 2 * @toVw;
border-radius: 8/ 2 * @toVw;
.bg{
width: 100%;
}
.radio-icon{
position: absolute;
width: 40 * @toVw;
right: 20/ 2 * @toVw;
top: 20/ 2 * @toVw;
}
}
}
</style>
src/components/preview/refueling2.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div class="refueling2" :style="{backgroundImage:`url(${imgUrl.refueling1.bg})`}">
<div class="bg-block">
<img :src="imgUrl.refueling1.title" class="title" v-if="nowLesson.content.title === 0">
<img :src="imgUrl.refueling2.title2" class="title" v-if="nowLesson.content.title === 1"/>
<audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
<div class="content-img">
<img :src="nowLesson.content.banner[0].url" class="img" v-if="nowLesson.content.banner[0]">
<img :src="imgUrl.refueling2.radio" class="radio-icon" @click="playJiayou()">
<div class="changPage-block">
<img :src="imgUrl.refueling2.back" class="left-icon" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.refueling2.next" class="right-icon" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
<span class="pageNo">-{{nowLesson.content.mouldIndex}}-</span>
</div>
</div>
<div class="bottom-block">
</div>
</div>
</template>
<script>
import {refueling1,refueling2} from "../../util/imgUrl";
export default {
name: "refueling2",
props:[
'nowLesson'
],
data(){
return{
imgUrl:{
refueling1:refueling1,
refueling2:refueling2
}
}
},
mounted(){
this.autoPlayAudio();
console.log(this.nowLesson)
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放加油包音频
playJiayou(){
if(this.$refs.jiayouAudio.paused){
this.$refs.jiayouAudio.play()
}else{
this.$refs.jiayouAudio.pause()
}
},
autoPlayAudio(){
let voice = this.$refs.jiayouAudio;
let that = this;
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
wx.ready(()=>{
that.$refs.jiayouAudio.play()
})
})
})
})
})
}
},
watch:{
'nowLesson'(){
this.autoPlayAudio()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.refueling2{
height: 100%;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
background-size: 100% 100%;
.bg-block{
width: 1154/2 * @toVw;
height: 690/2 * @toVw;
transform-origin: 355/2 * @toVw 370/2 * @toVw;
transform: rotate(90deg);
background: white;
text-align: center;
.title{
position: relative;
top: -30/2 * @toVw;
width: 560 / 2 * @toVw;
}
.content-img{
width: 1078/2 * @toVw;
height: 550/2 * @toVw;
margin: -40/2 * @toVw auto 0 auto;
position: relative;
border-radius: 8/2 * @toVw;
background-size: 100% 100%;
.img{
width: 100%;
border-radius: 4 * @toVw;
}
.pageNo{
color: white;
position: absolute;
bottom: 0;
right: 20 * @toVw;
}
.radio-icon{
width: 40 * @toVw;
position: absolute;
bottom: 20/2 * @toVw;
left: 20/2 * @toVw;
}
.changPage-block{
position: absolute;
bottom: 0;
left: 50%;
text-align: center;
margin-left: -25 * @toVw;
img{
width: 35 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
}
}
@media screen and (orientation: landscape) {
.refueling2{
height: 100%;
overflow: hidden;
width: 100%;
background-size: 100% 100%;
.bg-block{
width: 300 * @toVw;
height: 160 * @toVw;
transform: rotate(0);
background: white;
text-align: center;
border-radius: 8 * @toVw;
margin-top: 10 * @toVw ;
.title{
position: relative;
top: -10 * @toVw;
width: 120* @toVw;
}
.content-img{
width: 270 * @toVw;
height: 270 * 275 /539 * @toVw;
margin: 0 * @toVw auto 0 auto;
background: black;
position: relative;
top: -22 *@toVw;
border-radius: 8 * @toVw;
background-size: 100% 100%;
.img{
width: 100%;
}
.pageNo{
color: white;
position: absolute;
bottom: 0;
right: 10 * @toVw;
}
.radio-icon{
width: 22 * @toVw;
position: absolute;
bottom: 5 * @toVw;
left: 5 * @toVw;
}
.changPage-block{
position: absolute;
left: 50%;
bottom: 0;
text-align: center;
img{
width: 18 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
}
}
}
</style>
src/components/preview/show1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div>
<div class="show1" :style="{backgroundImage:`url(${imgUrl.bg})`}" v-if="!showType">
<img :src="imgUrl.riji" class="riji"/>
<img :src="imgUrl.yeziyou" class="yeziyou"/>
<img :src="imgUrl.yezizuo" class="yezizuo"/>
<img :src="imgUrl.zhaopianqiang" class="zhaopianqiang"/>
<div class="bg-block" :style="{backgroundImage:`url(${imgUrl.contentBg})`}">
<div class="title-block">
<img :src="imgUrl.title"/>
</div>
<div class="textarea">
<div :contenteditable="true" class="text" id="text" ref="textareaDiv">
</div>
<div class="btn-block">
<input type="file" accept="image/*" class="input"/>
<img :src="imgUrl.imgIcon" />
</div>
</div>
<div class="text-block">
解释说明：
<div class="text-content">
各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
<span style="color: #333">唱学加油包</span>哦！
</div>
</div>
<img :src="imgUrl.shareIcon" class="share-icon"/>
</div>
<div class="bottom-block">
<img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.jiayoubao" @click="subLog(nowLesson.content.nextIndex)"/>
</div>
</div>
</div>
</template>
<script>
import {show1,share} from "../../util/imgUrl";
import { Toast , Indicator } from 'mint-ui';
export default {
name: "show1",
props:[
'nowLesson',
],
data(){
function randomNum(min,max){
switch(arguments.length){
case 1:
return Math.floor(Math.random()*minNum+1);
break;
case 2:
return Math.floor(Math.random()*(max-min+1)+min);
break;
default:
return 0;
break;
}
}
return{
imgUrl:show1,
imgUrl2:share,
showType:false,
dataURL: '',
posterAvatar:'',
hasToImg:false,
num:randomNum(0,4),
pNum:randomNum(80,95),
watchLog:null,
user:null,
newUrl:null
}
},
mounted(){
},
methods:{
subLog(){
this.goNext(this.nowLesson.content.nextIndex,true);
},
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.show1{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow-x: hidden;
width: 100%;
background-size: 100% 100%;
&>img{
position: absolute;
z-index: 2;
&.haiou{
top: 390 * @toVw;
left: 70/ 2 * @toVw;
width: 81 * @toVw;
}
&.riji{
width:78*@toVw ;
top: 25 * @toVw;
left: 0;
}
&.yeziyou{
bottom: 0;
right: 0;
width: 258/2*@toVw;
}
&.yezizuo{
width: 238 / 2 *@toVw;
bottom: 0;
left: 0;
}
&.zhaopianqiang{
top: 400 * @toVw;
left: 80/ 2 * @toVw;
width: 234 / 2 * @toVw;
}
}
.bg-block{
position: relative;
width: 344 * @toVw;
background-size: 100%;
height: 552 * @toVw;
.zhuangshi{
bottom: 0;
}
.share-icon{
width: 90* @toVw;
position: absolute;
bottom: 30 * @toVw;
left: 100 * @toVw;
}
}
.title-block{
padding-top: 50 * @toVw;
text-align: center;
img{
width: 420 / 2 * @toVw;
}
}
.textarea{
background: #FDFDFD;
height: 352/ 2 * @toVw;
width: 626/ 2 * @toVw;
margin:10*@toVw auto 0 auto;
box-shadow: inset 1/ 2 * @toVw 1/ 2 * @toVw 3/ 2 * @toVw 1/ 2 * @toVw rgba(142,142,142,0.50);
border-radius: 8/ 2 * @toVw;
position: relative;
.text{
position: absolute;
top: 5px;
left: 5px;
overflow: auto;
outline: none;
bottom: 5px;
right: 5px;
}
.btn-block{
position: absolute;
bottom: 10/ 2 * @toVw;
right: 10/ 2 * @toVw;
.input{
opacity: 0;
width: 24 * @toVw;
position: absolute;
}
img{
width: 32 * @toVw;
margin-right: 10/ 2 * @toVw;
}
}
}
.text-block{
width: 600/ 2 * @toVw;
margin: auto;
padding-top: 20/ 2 * @toVw;
text-align: left;
font-family: PingFang-SC-Medium;
font-size: 28/ 2 * @toVw;
color: #666666;
line-height: 40/ 2 * @toVw;
.text-content{
font-family: PingFang-SC-Regular;
font-size: 24/ 2 * @toVw;
color: #999999;
}
}
.sub-block{
position: absolute;
width: 100%;
text-align: center;
bottom: 160/ 2 * @toVw;
img{
width: 88 * @toVw
}
}
.bottom-block{
width: 100%;
text-align: center;
position: fixed;
z-index: 5;
bottom: 10 * @toVw;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 15 * @toVw;
}
}
}
}
.share{
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
bottom:0;
right: 0;
.tips{
position: absolute;
top: 8 * @toVw;
height: 66 * @toVw;
z-index: 0;
right: 31 * @toVw;
}
.back-show{
width: 30 * @toVw;
position: absolute;
top: 15 * @toVw;
left: 30 * @toVw;
}
.text-tips{
position: absolute;
color: white;
top: 550 * @toVw;
font-size: 12px;
z-index: 5;
width: 100%;
text-align: center;
}
img.content{
z-index: 3;
}
.contentImg{
width: 313 * @toVw;
height: 524 * @toVw;
position: absolute;
top:53 * @toVw;
left: 50%;
z-index: 3;
margin-left: -156 * @toVw;
}
.content{
transform-origin:0 0;
width: 626 * @toVw;
height: 1048 * @toVw;
background-size: 100% 100%;
position: absolute;
z-index: 2;
top:53 * @toVw;
left: 50%;
margin-left: -156 * @toVw;
.head{
border-radius: 1000px;
width: 64 * @toVw;
position: absolute;
top: 257 *2 * @toVw;
left: 40 *2 * @toVw;
}
#qrcode{
position: absolute;
bottom: 90 * @toVw;
right: 80 * @toVw;
}
.name{
width:140px;
height:40px;
font-size:28px;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:40px;
position: absolute;
top: 257 * 2 * @toVw;
left: 84 * 2 * @toVw;
}
.day{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334*2 * @toVw;
right:243*2 * @toVw;
}
.num{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334 * 2 * @toVw;
right: 167 * 2 * @toVw;
}
.time{
font-size:40px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(51,51,51,1);
line-height:56px;
position: absolute;
top: 334 * 2 * @toVw;
right: 63 * 2 * @toVw;
}
}
}
</style>
<style>
.mint-indicator-wrapper{
z-index: 10 !important;
}
</style>
src/components/preview/video1.vue deleted 100644 → 0
View file @ 20a390ee
<template>
<div style="height: 100%">
<div class="play-l" :style="{backgroundImage:`url(${imgUrl.bgL})`}">
<div class="content" :style="{backgroundImage:`url(${imgUrl.bgC})`}">
<img :src="imgUrl.title" class="title"/>
<div class="tips-block">
<span>温馨提示：为了获得更好的学习观看体验，请您将手机横竖屏锁定打开，并将手机横放。</span>
</div>
<img class="audio" :src="imgUrl.audio" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)">
<img :src="imgUrl.b" class="b-img"/>
</div>
<div class="btn-block">
<img :src="imgUrl.backL" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.nextL" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
<div class="video-block">
<div class="icon-class" v-if="playVideoType">
<img :src="imgUrl.play" @click="playVideo()"/>
</div>
<video
id="test_video"
ref="video"
v-if="nowLesson.content.videoUrl.length > 0"
:controls="!playVideoType"
controlsList="nodownload"
:poster="!!nowLesson.content.banner[0] ? nowLesson.content.banner[0].url : `${nowLesson.content.videoUrl[0].url}?vframe/jpg/offset/0` "
:src="nowLesson.content.videoUrl[0].url"></video>
</div>
<div class="play1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
<div class="bg-block">
<img :src="imgUrl.radio" class="radio-img" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)"/>
<span class="pageNo" v-if="nowLesson.content.mouldIndex">-{{nowLesson.content.mouldIndex}}-</span>
<img :src="imgUrl.backBtn" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
<img :src="imgUrl.next" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
</div>
</div>
</div>
</template>
<script>
import {play1} from "../../util/imgUrl";
export default {
name: "video1",
props:[
'nowLesson'
],
data(){
return{
imgUrl:play1,
playVideoType:true,
}
},
methods:{
goNext(i,next){
this.$emit('goNext',{i:i,next:!!next})
},
// 播放视频
playVideo(){
this.playVideoType = false;
this.$refs.video.play()
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.play1{
display: none;
}
div{
margin: auto;
}
.video-block {
margin: 0;
background: black;
border-radius: 8 * @toVw;
height: 175 * @toVw;
width: 313 * @toVw;
z-index: 2;
top: 97 * @toVw;
left: 31 * @toVw;
position: absolute;
.icon-class {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
img {
position: absolute;
top: 50%;
z-index: 2;
left: 50%;
width: 58 * @toVw;
margin-top: -58/ 2 * @toVw;
margin-left: -58/ 2 * @toVw;
}
video {
width: 100%;
}
}
.play-l{
height: 100%;
background-size: 100% 100%;
text-align: center;
.content{
width: 345 * @toVw;
height: 540 * @toVw;
background-size: 100% 100%;
position: relative;
top: 10 * @toVw;
.b-img{
width: 61 * @toVw;
position: absolute;
left: -10 * @toVw;
top: 30 * @toVw;
}
.audio{
width: 42 * @toVw;
position: absolute;
right: 16 * @toVw;
bottom: 18 * @toVw;
}
.tips-block{
position: absolute;
width: 100%;
text-align: left;
left: 0;
bottom: 126 * @toVw;
span{
display: block;
padding: 0 20 * @toVw;
font-size: 14 * @toVw;
color:#333333;
}
}
.title{
width: 273 * @toVw;
}
}
.btn-block{
margin-top: 20 * @toVw;
position: relative;
z-index: 4;
img{
width: 127 * @toVw;
&:first-child{
margin-right: 20 * @toVw;
}
}
}
}
@media screen and (orientation: landscape) {
.play-l{display: none}
.play1 {
display: block;
height: 100%;
background-size: 100% 100%;
padding: 5 * @toVw;
.bg-block {
margin-top: 5 * @toVw;
background: white;
text-align: left;
border-radius: 4 * @toVw;
width: 245 * @toVw;
height: 120 * @toVw;
transform: rotate(0deg);
padding: 10* @toVw;
.radio-img {
position: absolute;
right: 5 * @toVw;
top: 5 * @toVw;
width: 20 * @toVw;
}
.btn {
position: absolute;
width: 20 * @toVw;
right: 5 * @toVw;
bottom: 5 * @toVw;
&.back {
bottom: 30 * @toVw
}
}
}
}
.video-block {
margin: 0;
background: black;
border-radius: 8/ 2 * @toVw;
height: 123 * @toVw;
width: 220 * @toVw;
z-index: 2;
top: 18 * @toVw;
left: 63 * @toVw;
position: absolute;
.icon-class {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
img {
position: absolute;
top: 50%;
z-index: 2;
left: 50%;
width: 30 * @toVw;
margin-top: -30/ 2 * @toVw;
margin-left: -30/ 2 * @toVw;
}
video {
width: 100%;
}
}
}
</style>
src/components/resources/editorDialog.vue
View file @ 061ab7f9
This diff is collapsed.
src/components/textarea/index.vue
View file @ 061ab7f9
<template>
<div class='tinymce'>
<div class="left">
<editor v-if="show" id='tinymce' v-model='tinymceHtml' :init='init'></editor>
</div>
<div class="right">
<div class="phone">
<div class="content" v-html='tinymceHtml'></div>
</div>
<editor id='tinymce' v-model='lookData.content' :init='init'></editor>
<div>
<div class="imgInter" @click="showDialog()">插入图片</div>
<div class="MP3Inter" @click="showDialogMP3()">插入音频</div>
</div>
<el-dialog
title="插入图片"
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="图片">
<el-upload
action="/api/public/upload"
:http-request="uploadFile"
:on-remove="removeFile"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="form.imgList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传png文件，且不超过100kb</div>
</el-upload>
</el-form-item>
<el-form-item label="铺满">
<el-switch
v-model="form.big">
</el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch
v-model="form.center">
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgInter">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="插入音频"
:visible.sync="dialogVisibleMp3"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="音频">
<el-upload
action="/api/public/upload"
:http-request="uploadFileMp3"
:on-remove="removeFileMp3"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="radio">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传MP3文件，且不超过5MB</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleMp3 = false">取 消</el-button>
<el-button type="primary" @click="audioInter">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -25,20 +92,31 @@
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'
import {uploadFileApi} from "../../service/api";
export default {
name: 'tinymce',
props:[
'lookData'
],
data () {
return {
tinymceHtml: '请输入内容',
dialogVisibleMp3:false,
radio:[],
form:{
imgList:[],
big:false,
weight:'',
center:true
},
show:'',
dialogVisible:false,
init: {
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray',
height: 500,
plugins: 'preview media link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
plugins: 'preview lists code colorpicker textcolor wordcount contextmenu media',
branding: false
}
}
......@@ -47,10 +125,119 @@
this.show = true
},
deactivated(){
this.show = false
},
mounted () {
},
methods:{
imgInter(){
if(this.form.imgList.length < 1){
this.$message({
type: 'error',
message: '请选择图片'
});
return false
}
let ImageStyle = '';
if(this.form.big){
ImageStyle += 'width:100%;'
}else{
ImageStyle += 'width:70%'
}
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
this.insertContent(str)
this.dialogVisible = false
},
audioInter(){
if(this.radio.length < 1){
this.$message({
type: 'error',
message: '请选择音频'
});
return false
}
let str = `<p style="text-align: center"><img class="mce-object mce-object-video" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="280" height="55" data-mce-p-controls="controls" data-mce-html="%0A%3Csource%20src%3D%22https%3A//cdn.singsingenglish.com/${this.radio[0].url}%22%20type%3D%22audio/mpeg%22%20/%3E" data-mce-object="video"></p>`;
console.log(str);
this.insertContent(str);
console.log(this.lookData.content);
this.dialogVisible = false
},
uploadFile(a){
if(a.file.size < 100*1024 && a.file.type === 'image/png'){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
}else {
this.$message({
type: 'error',
message: '上传失败，图片格式或大小不正确!'
});
this.form.imgList = [];
}
},
uploadFileMp3(a){
console.log(a);
if(a.file.size < 1024*1024*5 && a.file.type === 'audio/mp3'){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.radio = [{name:res.name,url:res.url}];
})
}else {
this.$message({
type: 'error',
message: '上传失败，音频格式或大小不正确!'
});
this.form.imgList = [];
}
},
showDialogMP3(){
this.dialogVisibleMp3 = true
},
showDialog(){
this.dialogVisible = true
},
insertContent(content) {
if (!content) {//如果插入的内容为空则返回
return;
}
let sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
let el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
let node = el.firstChild;
let lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
},
removeFile(){},
removeFileMp3(){},
handleExceed(){}
},
created:function(){
tinymce.init({})
......@@ -61,27 +248,36 @@
<style scoped lang="less">
@import "../../util/public";
.tinymce{
height: 100%;
overflow: auto;
position: relative;
.clear-both;
&>div{
float: left;
width: 50%;
position: relative;
.phone{
background:url("../../assets/phone.png") no-repeat;
background-size: 100% 100%;
width: 600px;
height: 800px;
position: relative;
.content{
position: absolute;
top: 120px;
left: 135px;
right: 160px;
bottom: 135px;
overflow: auto;
}
.MP3Inter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 400px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
.imgInter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 330px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
}
......
src/components/textarea/videoUpload.vue 0 → 100644
View file @ 061ab7f9
This diff is collapsed.
src/router/index.js
View file @ 061ab7f9
......@@ -33,13 +33,6 @@ const router =new Router({
skip_auth:true,
}
},
{
path:'/preview/:id',
name:'preview',
component: e=>require(['@/components/preview'],e),
meta:{
}
},
{
path:'/upload',
name:'upload',
......
src/service/index.js
View file @ 061ab7f9
......@@ -115,8 +115,12 @@ export function upload(url,json) {
let observable = qiniu.upload(json.file,res.data.data.new_name,res.data.data.token,putExtra,congif);
let observer = {
next(res){
let progress = Number(res.total.percent.toFixed(0));
if(json.obj){
json.obj.file.percent = progress;
json.obj.onProgress(json.obj.file);
}
if(store.state.progressList.find(i=>{return i.id === json.file.uid})){
let progress = Number(res.total.percent.toFixed(0));
store.dispatch('setProgress',{type: 'change',id: json.file.uid ,num: progress});
}
},
......
src/util/menuList.js
View file @ 061ab7f9
......@@ -299,7 +299,6 @@ export default [
component: e=>require(['@/components/weChatStatistics'],e),
}
},
]
},{
name: '',
......
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