<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>