视频、资讯

src/api/webApi/career-news.js

@@ -1,49 +1,67 @@
-import request from '@/utils/request'
-
-// 00 生涯课程类型
-export function types(params) {
-    return request({
-        url: '/front/news/types',
-        method: 'get',
-        params: params
-    })
-}
-
-// 01 生涯课程列表
-export function list(params) {
-    return request({
-        url: '/front/news/list',
-        method: 'get',
-        params: params
-    })
-}
-
-// 02 生涯课程详情
-export function info(params) {
-    return request({
-        url: '/front/news/info',
-        method: 'get',
-        params: params
-    })
-}
-
-
-// 01 热门院校榜单
-export function universitiesTop (params) {
-    return request({
-        url: '/front/syzy/home/universities/top',
-        method: 'get',
-        params: params
-    })
-}
-
-
-
-// 02 热门专业榜单
-export function marjorsTop (params) {
-    return request({
-        url: '/front/syzy/home/marjors/top',
-        method: 'get',
-        params: params
-    })
-}
+import request from '@/utils/request'
+
+// 00 生涯课程类型
+export function types(params) {
+    return request({
+        url: '/front/news/types',
+        method: 'get',
+        params: params
+    })
+}
+
+// 01 生涯课程列表
+export function list(params) {
+    return request({
+        url: '/front/news/list',
+        method: 'get',
+        params: params
+    })
+}
+
+// 02 生涯课程详情
+export function info(params) {
+    return request({
+        url: '/front/news/info',
+        method: 'get',
+        params: params
+    })
+}
+
+
+// 01 热门院校榜单
+export function universitiesTop (params) {
+    return request({
+        url: '/front/syzy/home/universities/top',
+        method: 'get',
+        params: params
+    })
+}
+
+
+
+// 02 热门专业榜单
+export function marjorsTop (params) {
+    return request({
+        url: '/front/syzy/home/marjors/top',
+        method: 'get',
+        params: params
+    })
+}
+
+// 高考视频
+export function gkVideo(params) {
+  return request({
+    url: '/front/newsVideo/list',
+    method: 'get',
+    params: params
+  })
+}
+
+//  保存点击数
+export function saveClicked(params) {
+  return request({
+    url: '/front/newsVideo/saveClicked',
+    method: 'get',
+    params: params
+  })
+}

src/views/career/components/infoList.vue

@@ -1,80 +1,81 @@
-<template>
-  <div class="info-list-container">
-    <el-row :gutter="10" v-if="total > 0">
-      <el-col
-        class="evaluation-card-wrapper"
-        v-for="item in dataList"
-        :key="item.id"
-        :span="24"
-      >
-        <el-card>
-          <info-card
-            :date="item.sendDate"
-            :name="item.title"
-            @click.native="detail(item)"
-          />
-        </el-card>
-      </el-col>
-    </el-row>
-    <evaluation-empty class="mt10" v-else />
-    <pagination
-      v-show="total > queryParams.pageSize"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      :page-size="20"
-      :pageSizes="[20, 40, 100]"
-      @pagination="getList"
-    />
-  </div>
-</template>
-<script>
-import infoCard from "./infoCard.vue";
-import * as career from "@/api/webApi/career-news";
-
-export default {
-  components: { infoCard },
-  props: {
-    type: {
-      type: String | Number,
-      default: "",
-    },
-  },
-  watch: {
-    type(newVal, oldVal) {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-  },
-  data() {
-    return {
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
-        tag: ''
-      },
-      dataList: [],
-      total: 0,
-    };
-  },
-  methods: {
-    detail(item) {
-      this.$emit("click", item);
-    },
-    getList() {
-      if (!this.type) return;
-      career.list({ ...this.queryParams, type: this.type }).then((res) => {
-        console.log("career news list res", res);
-        if (res.code == 200 || res.code == 0) {
-          this.dataList = res.rows;
-          this.total = res.total;
-        } else {
-          this.msgError(res.msg || "career news list 请求异常");
-        }
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-</style>
+<template>
+  <div class="info-list-container">
+    <el-row :gutter="10" v-if="total > 0">
+      <el-col
+        class="evaluation-card-wrapper"
+        v-for="item in dataList"
+        :key="item.id"
+        :span="24"
+      >
+        <el-card>
+          <info-card
+            :date="item.sendDate"
+            :name="item.title"
+            @click.native="detail(item)"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <evaluation-empty class="mt10" v-else />
+    <pagination
+      v-show="total > queryParams.pageSize"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :page-size="20"
+      :pageSizes="[20, 40, 100]"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script>
+import infoCard from "./infoCard.vue";
+import * as career from "@/api/webApi/career-news";
+
+export default {
+  components: { infoCard },
+  props: {
+    type: {
+      type: String | Number,
+      default: "",
+    },
+  },
+  watch: {
+    type(newVal, oldVal) {
+      console.log(2222222222222222)
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        tag: ''
+      },
+      dataList: [],
+      total: 0,
+    };
+  },
+  methods: {
+    detail(item) {
+      this.$emit("click", item);
+    },
+    getList() {
+      if (!this.type) return;
+      career.list({ ...this.queryParams, type: this.type }).then((res) => {
+        console.log("career news list res", res);
+        if (res.code == 200 || res.code == 0) {
+          this.dataList = res.rows;
+          this.total = res.total;
+        } else {
+          this.msgError(res.msg || "career news list 请求异常");
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/information/singleStroke.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="info-container">
+    <el-container>
+      <el-main>
+        <info-list
+          class="mt10"
+          :type="type"
+          v-show="!detailMode"
+          @click="detailList"
+        ></info-list>
+        <info-detail
+          class="mt10"
+          v-if="detailMode"
+          :type="type"
+          :title="detailTitle"
+          :id="detailId"
+          @close="detailClose"
+        />
+      </el-main>
+<!--      <el-aside width="400px" style="background-color: #ffffff">-->
+<!--        <el-card class="mt20" v-for="opt in typeOptions" :key="opt.value">-->
+<!--          <info-sample-->
+<!--            :type="opt.label"-->
+<!--            :title="opt.label"-->
+<!--            @click="detailSample"-->
+<!--          /></el-card>-->
+<!--      </el-aside>-->
+    </el-container>
+  </div>
+</template>
+<script>
+import InfoDetail from "../components/infoDetail.vue";
+import infoList from "../components/infoList.vue";
+import InfoSample from "../components/infoSample.vue";
+import * as career from "@/api/webApi/career-news";
+
+export default {
+  components: { infoList, InfoSample, InfoDetail },
+  data() {
+    return {
+      detailMode: false,
+      detailTitle: "",
+      detailId: 0,
+      type: "",
+    };
+  },
+  mounted() {
+    this.type = '单招志愿'
+  },
+  methods: {
+    detailList(item) {
+      this.detailTitle = item.title;
+      this.detailId = item.id;
+      this.detailMode = true;
+    },
+    detailSample(item) {
+      this.detailTitle = item.title;
+      this.detailId = item.id;
+      this.detailMode = true;
+    },
+    detailClose() {
+      this.detailMode = false;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/newGaokao/raisePoints.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="app-container">
+    <div class="career-course-body mt10">
+      <el-row v-if="total > 0" :gutter="10">
+        <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
+          <el-card>
+            <course-card @click.native="detail(c)" :img="c.coverUrl" :title="c.title" :count="c.clicked"></course-card>
+          </el-card>
+        </el-col>
+      </el-row>
+      <evaluation-empty class="mt10" v-else />
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  gkVideo,
+  saveClicked
+} from "@/api/webApi/career-news";
+import courseCard from "../components/courseCard.vue";
+
+export default {
+  components:{
+    courseCard
+  },
+  data() {
+    return {
+      type:'高考提分',
+      queryParams:{
+        pageSize:12,
+        pageNum: 1
+      },
+      total:0,
+      dataList:[]
+    };
+  },
+  mounted() {
+    this.type = '高考提分'
+    this.getList()
+  },
+  methods: {
+    detail (item) {
+      this.saveClick(item.id)
+      const nextParams = {
+        id: item.id,
+        aliid: item.aliId.split(',')[1],
+        aliIdType: item.aliIdType,
+        name: item.title,
+        count: item.clicked,
+        img: item.coverUrl,
+      };
+      this.$router.push({
+        path: "/career/plan/detail",
+        query: nextParams,
+      });
+    },
+    saveClick(id) {
+      saveClicked({
+        id: id
+      }).then(res => {
+        console.log(res)
+      })
+    },
+    getList() {
+      gkVideo({
+        type: this.type,
+        tag: '',
+        ...this.queryParams
+      }).then(res => {
+        this.total = res.total
+        this.dataList = res.rows
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/newGaokao/video.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="app-container">
+    <div class="career-course-body mt10">
+      <el-row v-if="total > 0" :gutter="10">
+        <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
+          <el-card>
+            <course-card @click.native="detail(c)" :img="c.coverUrl" :title="c.title" :count="c.clicked"></course-card>
+          </el-card>
+        </el-col>
+      </el-row>
+      <evaluation-empty class="mt10" v-else />
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  gkVideo,
+  saveClicked
+} from "@/api/webApi/career-news";
+import courseCard from "../components/courseCard.vue";
+
+export default {
+  components:{
+    courseCard
+  },
+  data() {
+    return {
+      type:'高考视频',
+      queryParams:{
+        pageSize:12,
+        pageNum: 1
+      },
+      total:0,
+      dataList:[]
+    };
+  },
+  mounted() {
+    this.type = '高考视频'
+    this.getList()
+  },
+  methods: {
+    detail (item) {
+      this.saveClick(item.id)
+      const nextParams = {
+        id: item.id,
+        aliid: item.aliId.split(',')[1],
+        aliIdType: item.aliIdType,
+        name: item.title,
+        count: item.clicked,
+        img: item.coverUrl,
+      };
+      this.$router.push({
+        path: "/career/plan/detail",
+        query: nextParams,
+      });
+    },
+    saveClick(id) {
+      saveClicked({
+        id: id
+      }).then(res => {
+        console.log(res)
+      })
+    },
+    getList() {
+      gkVideo({
+        type: this.type,
+        tag: '',
+        ...this.queryParams
+      }).then(res => {
+        this.total = res.total
+        this.dataList = res.rows
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/career/plan/detail.vue

@@ -1,299 +1,299 @@
-<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";
-export default {
-  components: { aliplayer },
-  data() {
-    return {
-      routeParams: {},
-      infoActive: 1,
-      contentData: [],
-      defaultProps: {
-        children: "children",
-        label: "name",
-      },
-      expandId: [], // 默认展开的节点id
-      childrenId: [], // 默认选中的节点id
-      checkNode: {}, //选中的节点
-      videoInfo: {},
-      videoId: ''
-    };
-  },
-  created() {
-    this.routeParams = 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>
+<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";
+export default {
+  components: { aliplayer },
+  data() {
+    return {
+      routeParams: {},
+      infoActive: 1,
+      contentData: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      expandId: [], // 默认展开的节点id
+      childrenId: [], // 默认选中的节点id
+      checkNode: {}, //选中的节点
+      videoInfo: {},
+      videoId: ''
+    };
+  },
+  created() {
+    this.routeParams = 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>