|
|
@@ -1,4 +1,3 @@
|
|
|
-
|
|
|
<template>
|
|
|
<div class="video_container">
|
|
|
<div :class="['left_video', isNav ? 'all' : '']">
|
|
|
@@ -23,9 +22,7 @@
|
|
|
</div>
|
|
|
<div class="nav">
|
|
|
<ul>
|
|
|
- <li>
|
|
|
- 目录
|
|
|
- </li>
|
|
|
+ <li>目录</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div v-if="index == 1" class="nav_item">
|
|
|
@@ -86,732 +83,739 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {
|
|
|
- videoList,
|
|
|
- videoDetail,
|
|
|
- lookRecord,
|
|
|
- } from './api/video'
|
|
|
- import { getCourse_detail,chapterList } from './api/course_detail'
|
|
|
+import { videoList, lookRecord, showDetail } from "./api/video";
|
|
|
+import { chapterList } from "./api/course_detail";
|
|
|
|
|
|
- var myPlayer = ''
|
|
|
- var playTimeInterval = '' //播放事件定时器
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- index: 1,
|
|
|
- isNav: true,
|
|
|
- course_zhangjie: [],
|
|
|
- video_slug: '',
|
|
|
- current_zhedie: [],
|
|
|
+var myPlayer = "";
|
|
|
+var playTimeInterval = ""; //播放事件定时器
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ index: 1,
|
|
|
+ isNav: true,
|
|
|
+ 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',
|
|
|
+ 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',
|
|
|
- },
|
|
|
- player: null,
|
|
|
- videoIndex:0
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: 'getCourseDetail',
|
|
|
+ directory: [], //章节视频列表
|
|
|
+ videoList: [], //当前章节的视频列表
|
|
|
+ isLearn: "", //是否正在学习中
|
|
|
+ courseId: "", //课程id
|
|
|
+ videoId: "", //正在学习的视频id
|
|
|
+ isWatch: 0, //是否完成学习
|
|
|
+ videoTitle: "", //正在播放的视频名称
|
|
|
+ playTime: 0, //视频播放秒数
|
|
|
+ queryForm: {
|
|
|
+ page: 1,
|
|
|
+ per_page: 15,
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ form: {
|
|
|
+ danmu: "admin-pro",
|
|
|
+ },
|
|
|
+ player: null,
|
|
|
+ videoIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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.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.showDetail();
|
|
|
+ this.show = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.show = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取课程章节
|
|
|
+ async getCourse_detail() {
|
|
|
+ const { data } = await chapterList({ id: this.courseId });
|
|
|
+ console.log(data, "xaingqing");
|
|
|
+ // this.course_zhangjie = data.data
|
|
|
+ // this.course_fenlei = data
|
|
|
},
|
|
|
- // 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')
|
|
|
+ // 获取课程
|
|
|
+ async showDetail() {
|
|
|
+ this.loading = true;
|
|
|
+ const { data } = await showDetail({ slug: this.course_slug });
|
|
|
+ this.loading = false;
|
|
|
+ console.log(data);
|
|
|
+ this.course_zhangjie = data.directory;
|
|
|
+ this.lookVideo()
|
|
|
+ // 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;
|
|
|
+ // }
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- // 组件销毁时，清除播放器
|
|
|
- myPlayer.dispose() // 该方法会重置videojs的内部状态并移除dom
|
|
|
- clearInterval(playTimeInterval)
|
|
|
-
|
|
|
- if (myPlayer) {
|
|
|
- console.log('清除视频播放组件')
|
|
|
- myPlayer.dispose() // 该方法会重置videojs的内部状态并移除dom
|
|
|
+ //章节折叠
|
|
|
+ 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);
|
|
|
}
|
|
|
+ // this.videoIndex = e
|
|
|
+ // this.lookVideo()
|
|
|
},
|
|
|
- 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
|
|
|
- })
|
|
|
+ //点击重新播放
|
|
|
+ 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()
|
|
|
},
|
|
|
- methods: {
|
|
|
- //获取课程章节
|
|
|
- async getCourse_detail() {
|
|
|
- const { data } = await chapterList({id:this.courseId})
|
|
|
- console.log(data, 'xaingqing')
|
|
|
- // this.course_zhangjie = data.data
|
|
|
- // 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)
|
|
|
- // }
|
|
|
- this.videoIndex = e
|
|
|
- this.lookVideo()
|
|
|
- },
|
|
|
- //点击重新播放
|
|
|
- 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')
|
|
|
+ initVideo() {
|
|
|
+ let that = this;
|
|
|
+ //初始化视频方法
|
|
|
+ myPlayer = this.$video(document.getElementById("myVideo"), {
|
|
|
+ language: "zh-CN",
|
|
|
+ //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
|
|
|
+ controls: true,
|
|
|
+ //自动播放属性,muted:静音播放
|
|
|
+ autoplay: "autoplay",
|
|
|
+ //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
|
|
|
+ preload: "auto",
|
|
|
+ });
|
|
|
|
|
|
- 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
|
|
|
+ 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);
|
|
|
|
|
|
- this.lookVideo()
|
|
|
- /// this.videoComments()
|
|
|
+ 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);
|
|
|
}
|
|
|
- } 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() {
|
|
|
- const { data } = await videoList()
|
|
|
- console.log(data)
|
|
|
- this.course_zhangjie = data.data
|
|
|
+ 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");
|
|
|
|
|
|
- // 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.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()
|
|
|
- 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.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()
|
|
|
- },
|
|
|
- async lookVideo() {
|
|
|
- var oldTracks = myPlayer.remoteTextTracks()
|
|
|
- var i = oldTracks.length
|
|
|
- while (i--) {
|
|
|
- myPlayer.removeRemoteTextTrack(oldTracks[i])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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");
|
|
|
}
|
|
|
- // 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
|
|
|
- console.log(this.course_zhangjie)
|
|
|
- myPlayer.src(this.course_zhangjie[this.videoIndex].url_resource)
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ //定时发送视频播放记录
|
|
|
+ async lookRecord() {
|
|
|
+ let data = {
|
|
|
+ video_id: this.course_zhangjie[this.videoIndex].id,
|
|
|
+ //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() {
|
|
|
+ const { data } = await videoList({ course_id: this.courseId });
|
|
|
+ console.log(data);
|
|
|
+ // this.course_zhangjie = data.data
|
|
|
|
|
|
- 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)
|
|
|
- }
|
|
|
+ // 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
|
|
|
+ console.log(this.course_zhangjie);
|
|
|
+ myPlayer.src(
|
|
|
+ this.course_zhangjie[this.videoIndex].children[0].url_resource.url
|
|
|
+ );
|
|
|
|
|
|
- console.log(data.video.subtitle_en_path_resource, '视频详情')
|
|
|
- },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
|
|
|
- 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,
|
|
|
- id: this.courseId,
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
+ 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,
|
|
|
+ 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 {
|
|
|
+.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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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_body {
|
|
|
+ position: relative;
|
|
|
+ background-color: #000;
|
|
|
+ height: 88%;
|
|
|
+ overflow: hidden;
|
|
|
+ .my_video {
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100vh - 300px);
|
|
|
}
|
|
|
- .video_footer {
|
|
|
+ .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;
|
|
|
}
|
|
|
}
|
|
|
- .all {
|
|
|
- right: 395px;
|
|
|
+ .video_footer {
|
|
|
}
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
- line-height: 48px;
|
|
|
- height: 48px;
|
|
|
- border-radius: 100px 0 0 100px;
|
|
|
+ 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;
|
|
|
- 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;
|
|
|
+ li {
|
|
|
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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
|
|
|
- .zhangjie {
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .keshi {
|
|
|
+ li {
|
|
|
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 {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-right: 17px;
|
|
|
+ &:hover {
|
|
|
background-color: #f3fee8;
|
|
|
}
|
|
|
}
|
|
|
- .is_zhedie {
|
|
|
- display: none;
|
|
|
+ .li-active {
|
|
|
+ background-color: #f3fee8;
|
|
|
}
|
|
|
- i {
|
|
|
- font-size: 18px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .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);
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
}
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #999;
|
|
|
- span {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .input_wrap {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 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;
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ outline: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: #666;
|
|
|
+ border-color: #e1e1e1;
|
|
|
+ border: none;
|
|
|
}
|
|
|
}
|
|
|
- .biji_btn {
|
|
|
+ .question_detail {
|
|
|
+ margin: 10px 0 15px;
|
|
|
+ }
|
|
|
+ .question_btn {
|
|
|
+ margin: 10px 0 15px;
|
|
|
text-align: right;
|
|
|
- margin-bottom: 15px;
|
|
|
- cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
|
|
|
- span {
|
|
|
+ .cancle {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .asck {
|
|
|
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;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
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;
|
|
|
- }
|
|
|
+ border: 1px solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .chuxian {
|
|
|
- right: 0px;
|
|
|
- }
|
|
|
}
|
|
|
+ .chuxian {
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
xsc