|
|
@@ -0,0 +1,897 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="video_container">
|
|
|
+ <div :class="['left_video', isNav ? 'all' : '']">
|
|
|
+ <div class="video_header">
|
|
|
+ <span class="back" @click="back">
|
|
|
+ <i class="el-icon-arrow-left"></i>
|
|
|
+ 返回课程
|
|
|
+ </span>
|
|
|
+ <span>{{ videoTitle }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="video_body">
|
|
|
+ <video id="myVideo" class="video-js">
|
|
|
+ <!--<source src="" type="video/mp4" />-->
|
|
|
+ <!-- ../../assets/video/ce.mp4 -->
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div class="video_footer"></div>
|
|
|
+ </div>
|
|
|
+ <div :class="['right_nav', isNav ? 'chuxian' : '']">
|
|
|
+ <div class="btn" @click="change_nav">
|
|
|
+ <i class="el-icon-d-arrow-right"></i>
|
|
|
+ </div>
|
|
|
+ <div class="nav">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ 目录
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div v-if="index == 1" class="nav_item">
|
|
|
+ <div class="item_wrap">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(item, key) in course_zhangjie"
|
|
|
+ :key="key"
|
|
|
+ class="out_wrap"
|
|
|
+ @click="zhedie(item.id)"
|
|
|
+ >
|
|
|
+ <div class="zhangjie">
|
|
|
+ <div class="left">
|
|
|
+ <i class="el-icon-s-unfold"></i>
|
|
|
+ <span class="title">
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <i
|
|
|
+ v-if="!current_zhedie.includes(item.id)"
|
|
|
+ class="el-icon-minus"
|
|
|
+ ></i>
|
|
|
+ <i v-else class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ :class="[
|
|
|
+ 'keshi',
|
|
|
+ current_zhedie.includes(item.id) ? 'is_zhedie' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item1, index1) in item.children"
|
|
|
+ :key="index1"
|
|
|
+ :class="isLearn == item1.id ? 'li-active' : ''"
|
|
|
+ @click.stop="clickVideo(item1, vIndex, cIndex)"
|
|
|
+ >
|
|
|
+ <div class="left">
|
|
|
+ <span v-if="item1.progress < 100" class="scrle"></span>
|
|
|
+ <i
|
|
|
+ v-else-if="item1.progress == 100"
|
|
|
+ class="el-icon-success complate"
|
|
|
+ ></i>
|
|
|
+ <span class="title">{{ item1.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span>{{ item1.duration_text }}</span>
|
|
|
+ <i class="el-icon-video-play complate"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getCourseDetail,
|
|
|
+ videoDetail,
|
|
|
+ lookRecord,
|
|
|
+ saveBiji,
|
|
|
+ } from './api/video'
|
|
|
+ import { getCourse_detail } from './api/course_detail'
|
|
|
+
|
|
|
+ var myPlayer = ''
|
|
|
+ var playTimeInterval = '' //播放事件定时器
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value1: 3.5,
|
|
|
+ index: 1,
|
|
|
+ isNav: true,
|
|
|
+ biji_text: '', //笔记内容
|
|
|
+ isText: false,
|
|
|
+ course_zhangjie: [],
|
|
|
+ video_slug: '',
|
|
|
+ current_zhedie: [],
|
|
|
+
|
|
|
+ ban_drag: 0, //当前播放视频是否禁止拖动
|
|
|
+ time: 3, //倒计时
|
|
|
+ isFull: false, //是否全屏
|
|
|
+ loading: true,
|
|
|
+ vIndex: 0, //当前播放视频索引
|
|
|
+ cIndex: 0, //当前播放视频所属章节索引
|
|
|
+ zhUrl: '', //中文字幕地址
|
|
|
+ enUrl: '', //英文字幕地址
|
|
|
+ nextVideo: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ activeName: 'zero',
|
|
|
+
|
|
|
+ directory: [], //章节视频列表
|
|
|
+ videoList: [], //当前章节的视频列表
|
|
|
+ isLearn: '', //是否正在学习中
|
|
|
+ courseId: '', //课程id
|
|
|
+ videoId: '', //正在学习的视频id
|
|
|
+ isWatch: 0, //是否完成学习
|
|
|
+ videoTitle: '', //正在播放的视频名称
|
|
|
+ playTime: 0, //视频播放秒数
|
|
|
+ queryForm: {
|
|
|
+ page: 1,
|
|
|
+ per_page: 15,
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ form: {
|
|
|
+ danmu: 'admin-pro',
|
|
|
+ },
|
|
|
+ activeNames: ['first'],
|
|
|
+ player: null,
|
|
|
+ biji_title: '',
|
|
|
+ question_title: '',
|
|
|
+ question_text: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: 'getCourseDetail',
|
|
|
+ },
|
|
|
+ // computed: {
|
|
|
+ // ...mapGetters({
|
|
|
+ // token: 'user/token',
|
|
|
+ // }),
|
|
|
+ // },
|
|
|
+ mounted() {
|
|
|
+ // this.player = this.$refs.player.dp
|
|
|
+ this.nextVideo = false
|
|
|
+ console.log('测试')
|
|
|
+ this.initVideo()
|
|
|
+ // clearInterval(this.playTimeInterval)
|
|
|
+ // console.log(this.player.video.paused, 'ppppp')
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 组件销毁时，清除播放器
|
|
|
+ myPlayer.dispose() // 该方法会重置videojs的内部状态并移除dom
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+
|
|
|
+ if (myPlayer) {
|
|
|
+ console.log('清除视频播放组件')
|
|
|
+ myPlayer.dispose() // 该方法会重置videojs的内部状态并移除dom
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+
|
|
|
+ console.log('清除视频播放组件')
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let route = this.$route
|
|
|
+ this.courseId = route.query.course_id
|
|
|
+ this.video_slug = route.query.video_slug
|
|
|
+ this.course_slug = route.query.course_slug
|
|
|
+ this.isLearn = this.videoId = route.query.video_id
|
|
|
+ console.log(this.videoId, this.courseId, this.video_slug, '123')
|
|
|
+ this.getCourse_detail()
|
|
|
+ this.nextVideo = false
|
|
|
+ console.log(this.vIndex, 'YYYYYYYYYYYYYY')
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ this.getCourseDetail()
|
|
|
+ this.show = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.show = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTnyMac(res) {
|
|
|
+ this.biji_text = res
|
|
|
+ },
|
|
|
+ getTnyMac_question(res) {
|
|
|
+ this.question_text = res
|
|
|
+ },
|
|
|
+ //取消提问
|
|
|
+ cancle_question() {
|
|
|
+ this.question_title = ''
|
|
|
+ this.question_text = ''
|
|
|
+ },
|
|
|
+ //提问
|
|
|
+ async save_question() {
|
|
|
+ if (!this.question_title) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入问答标题',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.question_text) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入问答内容',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ type: 1,
|
|
|
+ title: this.question_title,
|
|
|
+ body: this.question_text,
|
|
|
+ course_id: this.courseId,
|
|
|
+ course_video_id: this.videoId,
|
|
|
+ }
|
|
|
+ const { message } = await saveBiji(params)
|
|
|
+ this.$message({
|
|
|
+ message: message,
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ this.question_text = ''
|
|
|
+ this.question_title = ''
|
|
|
+ },
|
|
|
+ // 保存笔记
|
|
|
+ async seve_biji() {
|
|
|
+ if (!this.biji_title) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入笔记标题',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.biji_text) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入笔记内容',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ type: 0,
|
|
|
+ title: this.biji_title,
|
|
|
+ body: this.biji_text,
|
|
|
+ course_id: this.courseId,
|
|
|
+ course_video_id: this.videoId,
|
|
|
+ }
|
|
|
+ const { message } = await saveBiji(params)
|
|
|
+ this.$message({
|
|
|
+ message: message,
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ this.biji_title = ''
|
|
|
+ this.biji_text = ''
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ //获取课程章节
|
|
|
+ async getCourse_detail() {
|
|
|
+ const { data } = await getCourse_detail(this.course_slug)
|
|
|
+ console.log(data, 'xaingqing')
|
|
|
+ this.course_zhangjie = this.directory = data.directory
|
|
|
+ // this.course_fenlei = data
|
|
|
+ },
|
|
|
+ //章节折叠
|
|
|
+ zhedie(e) {
|
|
|
+ if (this.current_zhedie.includes(e)) {
|
|
|
+ this.current_zhedie = this.current_zhedie.filter((item) => {
|
|
|
+ return item != e
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.current_zhedie.push(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //点击重新播放
|
|
|
+ refLook() {
|
|
|
+ this.cIndex = 0
|
|
|
+ this.vIndex = 0
|
|
|
+ this.videoList = this.directory[this.cIndex].children
|
|
|
+ console.log(this.video_list, 'list')
|
|
|
+ //let video_list = this.directory[this.cIndex].children
|
|
|
+ this.isLearn = this.videoId = this.videoList[this.vIndex].id
|
|
|
+ // this.isLearn = this.video_slug = this.videoList[this.vIndex].slug
|
|
|
+ this.lookVideo()
|
|
|
+ //this.videoComments()
|
|
|
+ },
|
|
|
+ initVideo() {
|
|
|
+ let that = this
|
|
|
+ //初始化视频方法
|
|
|
+ myPlayer = this.$video(document.getElementById('myVideo'), {
|
|
|
+ language: 'zh-CN',
|
|
|
+ //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
|
|
|
+ controls: true,
|
|
|
+ //自动播放属性,muted:静音播放
|
|
|
+ autoplay: 'autoplay',
|
|
|
+ //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
|
|
|
+ preload: 'auto',
|
|
|
+ })
|
|
|
+
|
|
|
+ myPlayer.ready(function () {
|
|
|
+ myPlayer.volume(0.5)
|
|
|
+ myPlayer.play()
|
|
|
+ })
|
|
|
+ console.log(myPlayer, 'document.getElementById')
|
|
|
+ //监听视频播放完成
|
|
|
+ myPlayer.on('ended', function () {
|
|
|
+ console.log(this.course_slug, 'YYYYYYYYYYYYYY---视频播放结束')
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ that.isWatch = 1
|
|
|
+ that.playTime = parseInt(myPlayer.currentTime())
|
|
|
+ that.lookRecord()
|
|
|
+ that.playTime = 0
|
|
|
+ // let params = {
|
|
|
+ // course_id: that.courseId,
|
|
|
+ // }
|
|
|
+ // debugger
|
|
|
+ // getCourseDetail(params).then((res) => {
|
|
|
+ // console.log(res, '刷新章节列表')
|
|
|
+ // that.directory = res.data.directory
|
|
|
+ // })
|
|
|
+ myPlayer.exitFullscreen()
|
|
|
+ // that.getCourseDetail()
|
|
|
+ setTimeout(function () {
|
|
|
+ that.autoPlayNext()
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
+ console.log('视频播放结束')
|
|
|
+ })
|
|
|
+ //监听视频暂停
|
|
|
+ myPlayer.on('pause', function () {
|
|
|
+ console.log('YYYYYYYYYYYYYY---视频播放暂停')
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ console.log(parseInt(myPlayer.currentTime()), '视频播放进度暂停')
|
|
|
+ if (this.ban_drag == 0) {
|
|
|
+ let time = parseInt(myPlayer.currentTime())
|
|
|
+ if (time - this.playTime > 10) {
|
|
|
+ myPlayer.currentTime(this.playTime)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(that.playTime, '视频播放时长')
|
|
|
+ console.log('用户点击了暂停')
|
|
|
+ })
|
|
|
+ //监听视频播放
|
|
|
+ myPlayer.on('play', function () {
|
|
|
+ that.time = 0
|
|
|
+ that.nextVideo = false
|
|
|
+ console.log('YYYYYYYYYYYYYY---视频播放')
|
|
|
+ that.getPlayTime()
|
|
|
+ console.log('视频播放')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取视频播放事件每秒加一
|
|
|
+ //自动播放下一章节事件
|
|
|
+ autoPlayNext() {
|
|
|
+ //获取视频判断当前视频是不是本章节的最后一条
|
|
|
+ console.log(this.directory, this.cIndex, 'this.directory')
|
|
|
+
|
|
|
+ this.videoList = this.directory[this.cIndex].children
|
|
|
+ this.vIndex = Number(this.vIndex)
|
|
|
+ console.log(typeof this.vIndex + 1, 'vIndex')
|
|
|
+ let vIndexnum = this.vIndex + 1
|
|
|
+ console.log(vIndexnum == this.videoList.length, 'length')
|
|
|
+ if (vIndexnum == this.videoList.length) {
|
|
|
+ //是---判断章节是不是最后一张
|
|
|
+ this.cIndex = Number(this.cIndex)
|
|
|
+ let cIndexnum = this.cIndex + 1
|
|
|
+ if (cIndexnum == this.directory.length) {
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ this.nextVideo = true
|
|
|
+ return
|
|
|
+ //是最后一张-----提示用户本课程视频已学完
|
|
|
+ } else {
|
|
|
+ //不是最后一张---播放下一章节的第一条视频
|
|
|
+ console.log(' //不是最后一张---播放下一章节的第一条视频')
|
|
|
+ this.cIndex = this.cIndex + 1
|
|
|
+ this.vIndex = 0
|
|
|
+ let video_list = this.directory[this.cIndex].children
|
|
|
+ this.isLearn = this.videoId = video_list[this.vIndex].id
|
|
|
+ this.video_slug = video_list[this.vIndex].slug
|
|
|
+
|
|
|
+ this.lookVideo()
|
|
|
+ /// this.videoComments()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //不是---视频索引+1播放下一条
|
|
|
+ console.log(' // //不是---视频索引+1播放下一条')
|
|
|
+ this.vIndex = this.vIndex + 1
|
|
|
+ let video_list = this.directory[this.cIndex].children
|
|
|
+ console.log(video_list, 'video_list')
|
|
|
+ this.isLearn = this.videoId = video_list[this.vIndex].id
|
|
|
+ this.video_slug = video_list[this.vIndex].slug
|
|
|
+ console.log(this.videoId, 'this.videoId')
|
|
|
+ this.lookVideo()
|
|
|
+ // this.videoComments()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPlayTime() {
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ let that = this
|
|
|
+ playTimeInterval = setInterval(function () {
|
|
|
+ that.playTime = parseInt(myPlayer.currentTime())
|
|
|
+ if (Math.floor(that.playTime / 10) > 0 && that.playTime % 10 == 0) {
|
|
|
+ that.lookRecord()
|
|
|
+ console.log(that.playTime, 'that.playTime')
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ //定时发送视频播放记录
|
|
|
+ async lookRecord() {
|
|
|
+ let data = {
|
|
|
+ video_id: this.videoId,
|
|
|
+ //video_slug: this.video_slug,
|
|
|
+ watch_seconds: this.playTime,
|
|
|
+ is_watched: this.isWatch,
|
|
|
+ course_id: this.courseId,
|
|
|
+ }
|
|
|
+ const { message } = await lookRecord(data)
|
|
|
+ console.log(message, 'ooooooooo')
|
|
|
+ },
|
|
|
+ //获取课程详情章节列表和视频列表
|
|
|
+ async getCourseDetail() {
|
|
|
+ let slug = this.$route.query.course_slug
|
|
|
+ console.log(slug, 'getCourseDetail')
|
|
|
+ const { data } = await getCourseDetail(slug)
|
|
|
+
|
|
|
+ this.directory = data.directory
|
|
|
+
|
|
|
+ if (this.videoId) {
|
|
|
+ this.isLearn = this.videoId
|
|
|
+ //this.isLearn = this.video_slug
|
|
|
+ let route = this.$route
|
|
|
+ this.vIndex = route.query.v_index
|
|
|
+ this.cIndex = route.query.c_index
|
|
|
+ } else {
|
|
|
+ console.log(data, 'YYYYY YYY')
|
|
|
+ this.isLearn = this.videoId = data.directory[0].children[0].id
|
|
|
+ //this.isLearn = this.video_slug = data.directory[0].children[0].slug
|
|
|
+ this.videoList = this.directory[0].children
|
|
|
+ }
|
|
|
+
|
|
|
+ this.lookVideo()
|
|
|
+ // this.videoComments()
|
|
|
+ console.log(data.directory, '课程详情')
|
|
|
+ },
|
|
|
+ //选择需要播放的视频
|
|
|
+ async clickVideo(item, vIndex, cIndex) {
|
|
|
+ this.vIndex = vIndex
|
|
|
+ this.cIndex = cIndex
|
|
|
+ clearInterval(playTimeInterval)
|
|
|
+ console.log(vIndex, 'vIndex, cIndex')
|
|
|
+ console.log(cIndex, 'vIndex, cIndex')
|
|
|
+ this.nextVideo = false
|
|
|
+ this.isWatch = 0
|
|
|
+ console.log(item, '点击时间点')
|
|
|
+ this.isLearn = item.id
|
|
|
+ this.videoTitle = item.title
|
|
|
+ this.videoId = item.id
|
|
|
+ this.video_slug = item.slug
|
|
|
+ this.playTime = 0
|
|
|
+ this.lookVideo()
|
|
|
+ // this.videoComments()
|
|
|
+ },
|
|
|
+ async lookVideo() {
|
|
|
+ var oldTracks = myPlayer.remoteTextTracks()
|
|
|
+ var i = oldTracks.length
|
|
|
+ while (i--) {
|
|
|
+ myPlayer.removeRemoteTextTrack(oldTracks[i])
|
|
|
+ }
|
|
|
+ // const { data } = await videoDetail({ id: this.videoId })
|
|
|
+ const { data } = await videoDetail(this.video_slug)
|
|
|
+ console.log(this.video_slug, 'this.video_slug')
|
|
|
+ this.videoTitle = data.video.title
|
|
|
+ myPlayer.src(data.video.url_resource.url)
|
|
|
+
|
|
|
+ this.attaches = data.attaches
|
|
|
+ this.videoDescription = data.video.description
|
|
|
+ this.loading = false
|
|
|
+ this.ban_drag = data.video.ban_drag
|
|
|
+ let enurl = data.video.subtitle_en_path_resource.url
|
|
|
+ let url = data.video.subtitle_zh_path_resource.url
|
|
|
+ var zhurl = {
|
|
|
+ kind: 'subtitles',
|
|
|
+ label: '中文简体',
|
|
|
+ src: url,
|
|
|
+ default: 'true',
|
|
|
+ }
|
|
|
+ //https://platform.site.ximengnaikang.com/storage/course_video/hKy5X404wDrRAuAS8gZxfZIDbx6sFkAW.webvtt
|
|
|
+ // this.enUrl = data.video.subtitle_en_path_resource
|
|
|
+ myPlayer.addRemoteTextTrack(zhurl, true)
|
|
|
+ console.log(myPlayer, 'myPlayer')
|
|
|
+ console.log(data.video.subtitle_zh_path_resource, 'myPlayer')
|
|
|
+ if (enurl) {
|
|
|
+ var enUrl = {
|
|
|
+ kind: 'subtitles',
|
|
|
+ label: 'English',
|
|
|
+ src: enurl,
|
|
|
+ default: 'true',
|
|
|
+ }
|
|
|
+ myPlayer.addRemoteTextTrack(enUrl, true)
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(data.video.subtitle_en_path_resource, '视频详情')
|
|
|
+ },
|
|
|
+
|
|
|
+ change(e) {
|
|
|
+ this.index = e
|
|
|
+ },
|
|
|
+ change_nav() {
|
|
|
+ this.isNav = !this.isNav
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ // this.$router.go(-1)
|
|
|
+ this.$router.push({
|
|
|
+ path: 'courseDetail',
|
|
|
+ query: {
|
|
|
+ course_slug: this.course_slug,
|
|
|
+ course_id: this.courseId,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .video_container {
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ height: 100%;
|
|
|
+ .left_video {
|
|
|
+ position: absolute;
|
|
|
+ left: 26px;
|
|
|
+ right: 35px;
|
|
|
+ top: 0;
|
|
|
+ padding-top: 54px;
|
|
|
+ bottom: 70px;
|
|
|
+ transition: 0.5s;
|
|
|
+ .video_header {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 54px;
|
|
|
+ color: #999;
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .back {
|
|
|
+ color: #666;
|
|
|
+ padding-right: 20px;
|
|
|
+ border-right: 1px solid #c1c1c1;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video_body {
|
|
|
+ position: relative;
|
|
|
+ background-color: #000;
|
|
|
+ height: 88%;
|
|
|
+ overflow: hidden;
|
|
|
+ .my_video {
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100vh - 300px);
|
|
|
+ }
|
|
|
+ .vjs-error .vjs-error-display:before {
|
|
|
+ content: none !important;
|
|
|
+ }
|
|
|
+ .video-js .vjs-big-play-button {
|
|
|
+ /*对播放按钮的样式进行设置*/
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100vh - 300px);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .video-js {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ .video-js .vjs-big-play-button {
|
|
|
+ position: absolute !important;
|
|
|
+ top: 50% !important;
|
|
|
+ left: 50% !important;
|
|
|
+ display: block;
|
|
|
+ width: 50px !important;
|
|
|
+ height: 50px !important;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: -25px !important;
|
|
|
+ margin-left: -25px !important;
|
|
|
+ font-size: 3em;
|
|
|
+ line-height: 42px !important;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #2b333f;
|
|
|
+ background-color: rgba(43, 51, 63, 0.7);
|
|
|
+ border: 0.06666em solid #fff;
|
|
|
+ border-radius: 50% !important;
|
|
|
+ opacity: 1;
|
|
|
+ -webkit-transition: all 0.4s;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video_footer {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .all {
|
|
|
+ right: 395px;
|
|
|
+ }
|
|
|
+ .right_nav {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 360px;
|
|
|
+ right: -360px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: -1px 0 5px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: 0.5s;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: -32px;
|
|
|
+ margin-top: -24px;
|
|
|
+ width: 32px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 100px 0 0 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #46c37b;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ ul {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ height: 56px;
|
|
|
+ list-style: none;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666;
|
|
|
+ line-height: 56px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 36px;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background: #46c37b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav_item {
|
|
|
+ position: absolute;
|
|
|
+ top: 57px;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ // overflow-y: hidden;
|
|
|
+ overflow-x: hidden;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .item_wrap {
|
|
|
+ margin-top: 24px;
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ .out_wrap {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .zhangjie {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding-right: 17px;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .keshi {
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-right: 17px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f3fee8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .li-active {
|
|
|
+ background-color: #f3fee8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is_zhedie {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ padding: 0 0 0 17px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ .scrle {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .complate {
|
|
|
+ color: #46c37b;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 15px 10px 15px 0;
|
|
|
+ margin-left: 20px;
|
|
|
+ // width: calc(100% - 20px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #999;
|
|
|
+ span {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .biji {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 15px;
|
|
|
+ .text {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ height: 70vh;
|
|
|
+ ::v-deep .menu-management-container {
|
|
|
+ height: 65vh;
|
|
|
+ }
|
|
|
+ ::v-deep .tox-tinymce {
|
|
|
+ height: 65vh !important;
|
|
|
+ }
|
|
|
+ ::v-deep .tox-editor-container {
|
|
|
+ height: 65vh;
|
|
|
+ }
|
|
|
+ .input_wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ background-image: none;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ -webkit-transition: border-color 0.15s ease-in-out,
|
|
|
+ box-shadow 0.15s ease-in-out;
|
|
|
+ -o-transition: border-color ease-in-out 0.15s,
|
|
|
+ box-shadow ease-in-out 0.15s;
|
|
|
+ transition: border-color 0.15s ease-in-out,
|
|
|
+ box-shadow 0.15s ease-in-out;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ outline: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: #666;
|
|
|
+ border-color: #e1e1e1;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .biji_btn {
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ border-color: #34a263;
|
|
|
+ background-color: #46c37b;
|
|
|
+ color: #fff;
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .question {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .question_body {
|
|
|
+ margin-bottom: 0;
|
|
|
+ padding: 15px;
|
|
|
+ .input_wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ background-image: none;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+ -webkit-transition: border-color 0.15s ease-in-out,
|
|
|
+ box-shadow 0.15s ease-in-out;
|
|
|
+ -o-transition: border-color ease-in-out 0.15s,
|
|
|
+ box-shadow ease-in-out 0.15s;
|
|
|
+ transition: border-color 0.15s ease-in-out,
|
|
|
+ box-shadow 0.15s ease-in-out;
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ outline: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: #666;
|
|
|
+ border-color: #e1e1e1;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .question_detail {
|
|
|
+ margin: 10px 0 15px;
|
|
|
+ }
|
|
|
+ .question_btn {
|
|
|
+ margin: 10px 0 15px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .cancle {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .asck {
|
|
|
+ display: inline-block;
|
|
|
+ border-color: #34a263;
|
|
|
+ background-color: #46c37b;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: none;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chuxian {
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
