|
|
@@ -0,0 +1,687 @@
|
|
|
+<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">
|
|
|
+ <i class="el-icon-d-arrow-right"></i>
|
|
|
+ </div>
|
|
|
+ <div class="nav">
|
|
|
+ <ul>
|
|
|
+ <li class="active">目录</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>
|
|
|
+ <!-- <img v-else alt="" src="../../assets/index/circular.png" /> -->
|
|
|
+ <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 { videoDetail, lookRecord, getSetting } from "./api/video";
|
|
|
+import { showDetail } from "./api/course_detail";
|
|
|
+
|
|
|
+var myPlayer = "";
|
|
|
+var playTimeInterval = ""; //播放事件定时器
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value1: 3.5,
|
|
|
+ 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",
|
|
|
+
|
|
|
+ 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,
|
|
|
+ videoArr: [],
|
|
|
+ times:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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.nextVideo = false;
|
|
|
+ console.log(this.vIndex, "YYYYYYYYYYYYYY");
|
|
|
+ clearInterval(playTimeInterval);
|
|
|
+ this.getCourseDetail();
|
|
|
+ this.getSetting();
|
|
|
+ this.show = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.show = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //章节折叠
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getSetting() {
|
|
|
+ const { data } = await getSetting({ keys: ["SENG_VIDEO_MSG"]});
|
|
|
+ console.log(data);
|
|
|
+ this.times = Number(data.SENG_VIDEO_MSG)
|
|
|
+ console.log(this.times)
|
|
|
+ },
|
|
|
+ //点击重新播放
|
|
|
+ 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;
|
|
|
+ myPlayer.exitFullscreen();
|
|
|
+ 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 / that.times) > 0 && that.playTime % that.times == 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.slug;
|
|
|
+ console.log(slug, "getCourseDetail");
|
|
|
+ const { data } = await showDetail({ slug: slug });
|
|
|
+ console.log(data);
|
|
|
+ this.directory = data.directory;
|
|
|
+ this.course_zhangjie = 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;
|
|
|
+ }
|
|
|
+ var videoArr = [];
|
|
|
+ for (var i = 0; i < data.directory.length; i++) {
|
|
|
+ for (var j = 0; j < data.directory[i].children.length; i++) {
|
|
|
+ videoArr = videoArr.concat(data.directory[i].children[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(videoArr, "视频数组");
|
|
|
+ this.videoArr = videoArr;
|
|
|
+ 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.title;
|
|
|
+ myPlayer.src(data.url_resource);
|
|
|
+
|
|
|
+ this.attaches = data.attaches;
|
|
|
+ this.videoDescription = data.description;
|
|
|
+ this.loading = false;
|
|
|
+ this.ban_drag = data.ban_drag;
|
|
|
+ let enurl = data.subtitle_en_path_resource;
|
|
|
+ let url = data.subtitle_zh_path_resource;
|
|
|
+ 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.subtitle_zh_path_resource, "myPlayer");
|
|
|
+ if (enurl) {
|
|
|
+ var enUrl = {
|
|
|
+ kind: "subtitles",
|
|
|
+ label: "English",
|
|
|
+ src: enurl,
|
|
|
+ default: "true",
|
|
|
+ };
|
|
|
+ myPlayer.addRemoteTextTrack(enUrl, true);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(data.subtitle_en_path_resource, "视频详情");
|
|
|
+ },
|
|
|
+
|
|
|
+ back() {
|
|
|
+ // this.$router.go(-1)
|
|
|
+ this.$router.push({
|
|
|
+ path: "./courseDetail",
|
|
|
+ query: {
|
|
|
+ slug: this.course_slug,
|
|
|
+ id: this.courseId,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video_container {
|
|
|
+ ul,
|
|
|
+ li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ position: fixed;
|
|
|
+ top: 145px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chuxian {
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xsc