Skip to content

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

后台课包编辑

parent b9a44ec9
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 1858 deletions
src/components/mould/baseBlock.vue 0 → 100644
View file @ ccad2062
<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="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "baseBlock",
props:[
'formData'
],
data(){
return{
}
}
}
</script>
<style scoped>
</style>
src/components/mould/lessonContent.vue 0 → 100644
View file @ ccad2062
<template>
<div>
<el-row :gutter="40">
<el-col :span="12">
<el-form ref="form" label-width="120px">
<el-form-item label="课程内容">
<el-input type="textarea" rows="4" 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="btn">
课程内容
</div>
<div class="lessonContent">
{{formData.content.tips.content}}
</div>
<div class="tips title1">
{{formData.content.tips.title1}}
</div>
<div class="title-content">
{{formData.content.tips.title1_content}}
</div>
<div class="tips title2">
{{formData.content.tips.title2}}
</div>
<div class="title-content">
{{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'
],
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: 17px auto 17px;
text-align: center;
font-family:Helvetica-Bold;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:26px;
height: 52px;
overflow: hidden;
}
.btn{
margin: auto;
width: 100px;
border-radius: 1000px;
border: 1px solid #FFF;
color: #FFFFFF;
text-align: center;
padding: 3px 0;
}
.lessonContent{
margin:8px auto;
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
line-height:17px;
width: 196px;
padding: 6px 11px;
background: rgba(51,51,51,0.2);
border-radius: 8px;
height: 52px;
}
.tips{
height:20px;
width: fit-content;
margin: 12px 0 12px 17px;
border-radius: 1000px;
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(145,237,250,1);
line-height:20px;
padding: 2px 12px;
border: 1px solid #91EDFA;
&.title1{
margin-top: 30px;
}
}
.title-content{
word-break:break-all;
padding: 0 17px;
font-size:12px;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(136,136,136,1);
line-height:17px;
}
}
</style>
src/components/preview/audio1.vue deleted 100644 → 0
View file @ b9a44ec9
<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 @ b9a44ec9
<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 @ b9a44ec9
<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 @ b9a44ec9
<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 @ b9a44ec9
<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 @ b9a44ec9
<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 @ b9a44ec9
<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 @ ccad2062
...@@ -7,280 +7,58 @@ ...@@ -7,280 +7,58 @@
:modal="false" :modal="false"
:center="true" :center="true"
:fullscreen="true"> :fullscreen="true">
<el-container> <el-tabs v-model="activeName2" type="card" >
<el-aside class="left-block" width="180px"> <el-tab-pane label="基本信息" name="base">
<div class="list-title"> <base-block :formData="formData"/>
模板列表 </el-tab-pane>
</div> <el-tab-pane label="课程内容" name="content">
<div class="page-list"> <lesson-content :formData="formData"/>
<div v-for="data in mouldList" @click="addMould(data)" :key="data.key"> </el-tab-pane>
<el-card shadow="hover" class="box" :body-style="{ padding: '0px' }"> <el-tab-pane label="爸妈看一看" name="look">
<img :src="data.imgUrl" class="image">
<div style="padding: 14px;"> </el-tab-pane>
<span>{{data.title}}</span> <el-tab-pane label="宝贝玩一玩" name="play">
<div class="bottom clearfix">
</div> </el-tab-pane>
</div> <el-tab-pane label="多元趣味课" name="fun">
</el-card>
</div> </el-tab-pane>
</div> </el-tabs>
</el-aside>
<el-main class="main-block">
<div class="main-btns">
<el-button type="primary" @click="showDialog = true">
课程基本信息编辑
</el-button>
<el-button style="float: right;" type="success" @click="onSave()">
保存
</el-button>
</div>
<div class="editor-block">
<editor :selectedMould="selectedMould" :editorObj="editorObj"/>
</div>
</el-main>
</el-container>
<el-dialog
title="信息编辑"
:modal="false"
:visible.sync="showDialog">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="单词量">
<el-input-number v-model="form.words_num"></el-input-number>
</el-form-item>
<el-form-item label="分龄分级">
<el-select v-model="age" placeholder="请选择">
<el-option
label="全部"
:value="2">
</el-option>
<el-option
label="0-3岁"
:value="0">
</el-option>
<el-option
label="4-6岁"
:value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="封面">
<el-upload
class="upload-demo"
action="/api/public/upload"
list-type="picture-card"
:http-request="uploadCover"
multiple
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="imgList">
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="success" @click="showDialog = false">确 定</el-button>
</div>
</el-dialog>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import addUrl from '../../assets/editor/Group 7.png' import baseBlock from '../mould/baseBlock'
import {MOULDLIST} from "../../util/resourceMould"; import lessonContent from '../mould/lessonContent'
import editor from './editor'
import {addElementApi,editElementApi,getElemenetDetailApi,uploadFileApi} from "../../service/api";
export default { export default {
props:[ props:[
'editorObj' 'editorObj'
], ],
components:{ components:{
editor lessonContent,
baseBlock
}, },
data(){ data() {
return{ return {
selectedMould:[], activeName2:'base',
addUrl:addUrl, formData:{
showDialog:false,
imgList:[],
mouldList:MOULDLIST,
age:0,
fileUid:null,
form:{
category_id:this.editorObj.category_id,
title:'', title:'',
content:'',
min_age:0,
max_age:3,
cover:'', cover:'',
content:{
base:{},
tips:{},
look:{},
play:{},
fun:{}
},
type:0
} }
} }
}, },
computed:{
progress(){
return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
}
},
methods:{
addMould(data){
this.selectedMould.push(JSON.parse(JSON.stringify(data)))
},
uploadCover(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.form.cover = process.env.IMAGE_URL_HEAD + res.url;
this.imgList.push({name:res.url,url:process.env.IMAGE_URL_HEAD + res.url})
})
},
onSave(){
if (!this.form.title) {
this.$message({
type: 'error',
message: '请完成基本信息编辑!'
});
return
}
if(this.age === 0 ){
this.form.min_age = 0;
this.form.max_age = 3
}else if(this.age === 1){
this.form.min_age = 4;
this.form.max_age = 6
}else{
this.form.min_age = 0;
this.form.max_age = 100
}
this.form.content = JSON.stringify(this.selectedMould);
this.category_id = this.editorObj.category_id;
switch (this.editorObj.type) {
case 0:
addElementApi(this.form , '0').then(res=>{
this.$message({
type: 'success',
message: '添加成功!'
});
this.editorObj.show = false;
this.$emit('reflash')
});
break;
case 1:
editElementApi(this.form , this.editorObj.id).then(res=>{
this.$message({
type: 'success',
message: '修改成功!'
});
this.editorObj.show = false;
this.$emit('reflash')
});
}
},
initPage(){
switch (this.editorObj.type) {
case 0:
this.selectedMould=[];
this.form = {
category_id:this.editorObj.category_id,
title:'',
content:'',
cover:'',
words_num: 0
};
break;
case 1:
getElemenetDetailApi(this.editorObj.id).then(res=>{
if(res.max_age=== 3 ){
this.age = 0
}else if(res.max_age === 6){
this.age = 1
}else{
this.age = ''
}
this.form = {
category_id:res.category_id,
content:res.content,
cover:res.cover,
title:res.title,
words_num: res.words_num
};
this.selectedMould = JSON.parse(res.content)
})
}
}
},
watch:{
'editorObj'(){
this.initPage()
}
},
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.el-container{
height: 900px;
overflow: auto;
.el-main{
padding: 10px;
background: #f5f8ff;
}
.main-block{
position: relative;
.main-btns {
margin-top: 68px;
margin-bottom: 10px;
}
.editor-block{
position: absolute;
top: 118px;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
}
.left-block{
font-size: 14px;
border: 1px solid #f0f0f0;
color: #333333;
text-align: center;
.list-title{
padding: 5px;
}
.page-list{
padding: 10px 0;
background: #e8e8e8;
.box{
margin: 15px 5px;
cursor: pointer;
&:hover{
box-shadow: 0 0 20px #ff9a22;
}
img{
width: 100%;
}
}
.title{
font-size: 12px;
text-align: center;
}
&-add{
cursor: pointer;
padding: 10px 0;
font-size: 12px;
color: #CCCCCC;
}
}
}
}
</style>
<style>
.el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item{
width: 50px;
height: 50px;
line-height: 58px;
}
</style> </style>
src/router/index.js
View file @ ccad2062
...@@ -33,13 +33,6 @@ const router =new Router({ ...@@ -33,13 +33,6 @@ const router =new Router({
skip_auth:true, skip_auth:true,
} }
}, },
{
path:'/preview/:id',
name:'preview',
component: e=>require(['@/components/preview'],e),
meta:{
}
},
{ {
path:'/upload', path:'/upload',
name:'upload', name:'upload',
......
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