front/src/views/career/plan/detail.vue

<template >
  <div class="video_detail_contianer">
    <el-container>
      <el-aside width="284px">
        <div class="aside_header">
          <span>CONTACT</span>
          <span>章节目录</span>
        </div>
        <div class="aside_content">
          <el-tree ref="treeBox" :data="contentData" :props="defaultProps" :highlight-current="true" :default-expanded-keys="expandId" :default-checked-keys="childrenId" node-key="id" @node-click="treeNodeClick"></el-tree>
        </div>
      </el-aside>
      <el-main>
        <evaluation-title :title="`${routeParams.name}`" navBackButton />
        <div class="video_wrap">
          <div class="videoplay">
            <div class="video">
              <mx-video :aliIdType="aliIdType" :src="videoId"></mx-video>
            </div>
          </div>
          <div class="text">
            <span :class="{ info_active: infoActive == 1 }" @click="infoActive = 1">课程概要</span>
            <span :class="{ info_active: infoActive == 2 }" @click="infoActive = 2">课时介绍</span>
            <span :class="{ info_active: infoActive == 3 }" @click="infoActive = 3">主要讲师</span>
          </div>
        </div>
        <!-- 视频 信息 -->
        <div class="video_info">
          <!-- 课程概要 -->
          <div class="summary" v-show="infoActive == 1">
            <div class="summary_tit">
              {{ videoInfo.title }}
            </div>
            <div class="vis_totle">
              <img src="@/assets/images/icon_eye.png" alt="" />
              <span>{{ routeParams.count }}人已观看</span>
            </div>
          </div>
          <!-- 课时介绍 -->
          <div class="introduce" v-show="infoActive == 2">
            <div class="introduce_tit">散文阅读之显性内容</div>
            <div class="introduce_con">
              各龙地却意制心收北叫示系者受志术叫叫该名光前劳基外通任体给温律太术社维问住角金议计数原科压么广速会好真商太数再还话种受王样率人为很反现严号约正生。写越花机还件口原受术标心需场象设开族着半风角不代运斯党派看回量类林集天学山员连地准真王几联。走海号音节身外期先管新直验美信所千料状到南民状西又统达交通无因指再五条给商今计生线斯至流还类业法认。
            </div>
          </div>
          <!-- 主要讲师 -->
          <div class="teacher" v-show="infoActive == 3">
            <el-col :span="5">
              <div class="teacher_info">
                <img src="@/assets/images/teacher_avatar.png" alt="" />
                <span style="font-weight: 600; color: #343434; margin: 6px 0">Andre Long</span>
                <span>哈佛大学精英讲师</span>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="teacher_ach">
                <div style="color: #ffa400; margin-bottom: 8px">教学成就</div>
                <div class="teacher_ach_info">
                  <div class="ach_item">“全球交科研先进个人”获得者</div>
                  <div class="ach_item">“全球交科研先进个人”获得者</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                  <div class="ach_item">全球十大杰出精英讲师</div>
                </div>
              </div>
            </el-col>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { videoInfo, getVideoPlayAuth } from "@/api/webApi/webVideo";
import aliplayer from "../../videocourse/compoent/aliplayer.vue";
import transferMixin from '@/components/mx-transfer-mixin'

export default {
  mixins: [transferMixin],
  components: { aliplayer },
  data() {
    return {
      routeParams: {},
      infoActive: 1,
      contentData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      expandId: [], // 默认展开的节点id
      childrenId: [], // 默认选中的节点id
      checkNode: {}, //选中的节点
      videoInfo: {},
      videoId: ''
    };
  },
  created() {
    const hasPrevData = !!Object.keys(this.prevData).length
    this.routeParams = hasPrevData ? this.prevData : this.$route.query;

    // Mock树节点
    this.contentData = [this.routeParams];
    this.expandId = [this.routeParams.id];
    this.childrenId = [this.routeParams.id];

    this.aliIdType = this.routeParams.aliIdType;
    this.videoId = this.routeParams.aliid;
  },
  methods: {
    handle() {
      //
    },
    treeNodeClick(node) {
      if (node.children && node.children.length) {
        return;
      }
      this.checkNode = data;
    },
  },
};
</script>

<style scoped>
.video_detail_contianer {
  padding: 20px;
  min-height: 100vh;
  background: #f7f7f7;
}
.el-main {
  padding: 7px 8px;
  background: #fff;
}
.aside_header {
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 16px 0 16px;
  margin-bottom: 16px;
}
.el-aside {
  background: white;
  padding: 0;
  margin-bottom: 0;
  margin-right: 16px;
}
.aside_header span {
  margin-top: 5px;
  width: 84px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 22px;
}
.aside_header span:first-child {
  width: 173px;
  height: 27px;
  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
  opacity: 0.5;
}
.video_wrap {
  border-bottom: 10px solid #f7f7f7;
}
.video_wrap video {
  width: 100%;
  height: 566px;
}
.text {
  padding-left: 32px;
}
.text span {
  cursor: pointer;
  width: 64px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #343434;
  margin-right: 16px;
  position: relative;
  padding: 32px 0 25px 0;
  display: inline-block;
}
.video_info {
  width: 100%;
  height: 172px;
  background: #ffffff;
  border-radius: 4px;
  padding-top: 28px;
  padding-left: 32px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
}
.info_active::after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #47c6a2 transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.video_info {
  border-top: 4px solid #47c6a2;
  border-radius: 4px 4px 0px 0px;
}
.summary_tit {
  margin-bottom: 16px;
}
.vis_totle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vis_totle img {
  margin-right: 6px;
}
.introduce .introduce_tit {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #343434;
  line-height: 20px;
  margin-bottom: 12px;
}
.introduce_con {
  height: 66px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
  line-height: 22px;
}
.teacher_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.teacher_ach_info {
  display: flex;
  flex-wrap: wrap;
}
.teacher_ach_info .ach_item {
  margin-bottom: 4px;
  flex: 50%;
  height: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #797979;
  line-height: 20px;
  font-size: 14px;
}
.el-tree {
  overflow: scroll;
  height: 600px;
  scroll-margin: 20px;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
  background-color: rgb(238, 241, 245);
}
</style>
<style >
.el-tree-node__content {
  padding-top: 6px;
  padding-bottom: 6px;
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 20px;
}
.el-tree-node {
  padding-left: 16px;
}
.el-tree-node__expand-icon.expanded {
  content: "";
}
.el-tree-node__content > .el-tree-node__expand-icon {
  padding: 6px;
  /* position: absolute; */
  right: 16px;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #47c6a2;
}
</style>