diff --git a/src/api/map.js b/src/api/map.js
index 48d852f..8aa8e87 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -24,4 +24,14 @@ export function geoCoding(v,city) {
     url:`https://bird.ioliu.cn/${v}?url=https://api.map.baidu.com/geocoding/v3/?address=${city}&output=json&ak=FvIYykqgB0i9dbTXWGf79nlyKT996zmj`,
     method: "get"
   })
+}
+
+/**
+ * 获取首页统计
+ */
+export function getCityCount() {
+  return request({
+    url:"/v1/edu/cityclass/count/",
+    method: "get"
+  })
 }
\ No newline at end of file
diff --git a/src/api/video.js b/src/api/video.js
index e0487f1..5ef86ca 100644
--- a/src/api/video.js
+++ b/src/api/video.js
@@ -10,6 +10,14 @@ import request from "@/utils/request";
 
 import {requestGet} from "@/utils/newrequest";
 
+// 视频课附件下载埋点
+export function downloadLog(fileId) {
+  return request({
+    url: `/v1/edu/video/attachment/download/log/${fileId}`,
+    method: "get",
+  })
+}
+
 // 埋点每次进入和离开时间
 export function updateVideoCountLog(params) {
   return request({
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 20fd268..181e0e7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -143,7 +143,7 @@
           <router-link to="/class" :class="$route.meta.active == 'class' ? 'active' : ''">学习班</router-link>
           <router-link to="/live" :class="$route.meta.active == 'live' ? 'active' : ''">直播</router-link>
           <router-link to="/cityclass" :class="$route.meta.active == 'cityclass' ? 'active' : ''">城市课堂</router-link>
-          <router-link to="/more" :class="$route.meta.active == 'more' ? 'active' : ''">资源导航</router-link>
+          <!-- <router-link to="/more" :class="$route.meta.active == 'more' ? 'active' : ''">资源导航</router-link> -->
         </div>
       </div>
     </div>
@@ -271,9 +271,9 @@
                 <el-menu-item>
                   <router-link to="/cityclass" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'cityclass' ? 'active' : ''"> 城市课堂</router-link>
                 </el-menu-item>
-                <el-menu-item>
+                <!-- <el-menu-item>
                   <router-link to="/more" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'more' ? 'active' : ''">资源导航 </router-link>
-                </el-menu-item>
+                </el-menu-item> -->
               </el-menu-item-group>
             </el-submenu>
 
diff --git a/src/router.js b/src/router.js
index 8c9a41d..f1ebc1f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -326,7 +326,7 @@ const routes = [
     name: 'live_play',
     component: () => import('@/views/live/live_play.vue'),
     meta: {
-      title: '进入直播 - 直播',
+      title: '直播 - 帆软学院',
       active: 'live',
       isMobile: 1,
     },
diff --git a/src/views/cityclass.vue b/src/views/cityclass.vue
index 97b1a05..fa5ff27 100644
--- a/src/views/cityclass.vue
+++ b/src/views/cityclass.vue
@@ -3,14 +3,22 @@
     <div class="header">
       <h2 class="title flex-1 flex-4"><span>帆软</span><i></i><span>城市课堂</span></h2>
       <div class="description flex-6">
-        <div><span class="strong">{{statistics.city}} </span>所城市</div>
-        <div><span class="strong">{{statistics.class}} </span>场城市课堂</div>
-        <div><span class="strong">{{statistics.student}}</span>名学员</div>
+        <div>
+          <span class="strong">{{ statistics.city }} </span>所城市
+        </div>
+        <div>
+          <span class="strong">{{ statistics.class }} </span>场城市课堂
+        </div>
+        <div>
+          <span class="strong">{{ statistics.student }}</span
+          >名学员
+        </div>
       </div>
       <div class="tabs">
         <ul class="tab-list">
-          <li class="tab-pane" v-for="(item,i) in tabLists" :key="i" :class="{active:currentIndex===i}"
-            @click="changeTab(i,item.url)"><span>{{item.date}}</span></li>
+          <li class="tab-pane" v-for="(item, i) in tabLists" :key="i" :class="{ active: currentIndex === i }" @click="changeTab(i, item.url)">
+            <span>{{ item.date }}</span>
+          </li>
         </ul>
       </div>
     </div>
@@ -18,22 +26,20 @@
       <div id="custom-chart" style="width: 780px; height: 860px; margin-right: 40px;"></div>
 
       <div class="activity">
-        <h4 class="activity-title">城市课堂{{tabLists[currentIndex].date}}活动</h4>
+        <h4 class="activity-title">城市课堂{{ tabLists[currentIndex].date }}活动</h4>
         <el-scrollbar style="height: 420px;">
           <ul class="activity-list">
-            <li class="activity-item" v-for="(item,i) in convertList" :key="i">
-              <a :href="'https://bbs.fanruan.com/activity/activity-kt-bm.php?cid='+item.class_id+'&qd=edu'"
-                target="_blank">
-                <h5 class="title">【{{item.class_date}}】 {{item.class_name}}-城市课堂活动</h5>
+            <li class="activity-item" v-for="(item, i) in convertList" :key="i">
+              <a :href="'https://bbs.fanruan.com/activity/activity-kt-bm.php?cid=' + item.class_id + '&qd=edu'" target="_blank">
+                <h5 class="title">【{{ item.class_date }}】 {{ item.class_name }}-城市课堂活动</h5>
                 <p>
-                  <span class="prt">地点: {{item.class_city}}</span>
-                  时间: {{item.class_date}}
+                  <span class="prt">地点: {{ item.class_city }}</span>
+                  时间: {{ item.class_date }}
                 </p>
               </a>
             </li>
           </ul>
         </el-scrollbar>
-
       </div>
     </main>
 
@@ -42,264 +48,258 @@
     <div class="imgcar">
       <el-carousel :interval="3000" type="card" height="260px" indicator-position="none">
         <el-carousel-item v-for="(item, i) in imgcar" :key="i">
-          <img class="img" :src="item.img" alt="">
+          <img class="img" :src="item.img" alt="" />
         </el-carousel-item>
       </el-carousel>
     </div>
 
     <div style="height: 100px"></div>
-
   </div>
 </template>
 
 <script>
-  import { computed, onMounted, reactive, toRefs } from "vue";
-  import chinaMap from "../assets/geo/jiuduanMap.json";
-  import axios from "axios";
-  import { getMapList } from "@/api/map";
-  import * as echarts from "echarts";
-  import jsonp from 'jsonp-promise'
-  export default {
-    name: "cityclass",
-    setup() {
-      echarts.registerMap("china", chinaMap);
-      const state = reactive({
-        currentIndex: 1,
-        convertList: [],
-        chartList: [],
-        statistics: {
-          city: 0,
-          class: 0,
-          student: 0,
+import { computed, onMounted, reactive, toRefs } from "vue";
+import chinaMap from "../assets/geo/jiuduanMap.json";
+import { getMapList, getCityCount } from "@/api/map";
+import * as echarts from "echarts";
+import jsonp from "jsonp-promise";
+export default {
+  name: "cityclass",
+  setup() {
+    echarts.registerMap("china", chinaMap);
+    const state = reactive({
+      currentIndex: 1,
+      convertList: [],
+      chartList: [],
+      statistics: {
+        city: 0,
+        class: 0,
+        student: 0,
+      },
+      myChart: null,
+      is_baiduloc: 0,
+      newList: [],
+      imgcar: [
+        {
+          img: require("@/assets/img/fs1.png"),
         },
-        myChart: null,
-        is_baiduloc: 0,
-        newList: [],
-        imgcar: [
-          {
-            img: require('@/assets/img/fs1.png'),
-          },
-          {
-            img: require('@/assets/img/fs2.png'),
-          },
-          {
-            img: require('@/assets/img/fs3.png'),
-          },
-        ]
-      });
-
-      const tabLists = computed(() => {
-        const date = new Date();
-        let YY = date.getFullYear();
-        let MM = date.getMonth() + 2;
-
-        const arr = [];
-        for (let i = 0; i < 4; i++) {
-          if (MM > 12) {
-            YY = YY + 1;
-            MM = 1;
-          }
-          arr.push({
-            date: `${YY}年${MM < 10 ? "0" + MM : MM}月`,
-            url: `${YY}-${MM < 10 ? "0" + MM : MM}`,
-          });
-          if (MM - 1 <= 0) {
-            MM = 12;
-            YY = YY - 1;
-          } else {
-            MM = MM - 1;
-          }
+        {
+          img: require("@/assets/img/fs2.png"),
+        },
+        {
+          img: require("@/assets/img/fs3.png"),
+        },
+      ],
+    });
+
+    const tabLists = computed(() => {
+      const date = new Date();
+      let YY = date.getFullYear();
+      let MM = date.getMonth() + 2;
+
+      const arr = [];
+      for (let i = 0; i < 4; i++) {
+        if (MM > 12) {
+          YY = YY + 1;
+          MM = 1;
         }
+        arr.push({
+          date: `${YY}年${MM < 10 ? "0" + MM : MM}月`,
+          url: `${YY}-${MM < 10 ? "0" + MM : MM}`,
+        });
+        if (MM - 1 <= 0) {
+          MM = 12;
+          YY = YY - 1;
+        } else {
+          MM = MM - 1;
+        }
+      }
 
-        return arr;
-      });
-
-      // 切换tab
-      const changeTab = (index, url) => {
-        state.currentIndex = index;
-        fetchMapList(url);
-      };
-
-
-      const option = {
-        //backgroundColor: "#013954",
-        geo: {
-          type: "map",
-          map: "china",
-          aspectScale: 0.75,
-          zoom: 1.1,
-          layoutCenter: ["50%", "50%"],
-          layoutSize: "100%",
-          show: true,
-          roam: false,//滚动缩放
-          label: {
-            normal: {
-              show: false,
+      return arr;
+    });
+
+    // 切换tab
+    const changeTab = (index, url) => {
+      state.currentIndex = index;
+      fetchMapList(url);
+    };
+
+    const option = {
+      //backgroundColor: "#013954",
+      geo: {
+        type: "map",
+        map: "china",
+        aspectScale: 0.75,
+        zoom: 1.1,
+        layoutCenter: ["50%", "50%"],
+        layoutSize: "100%",
+        show: true,
+        roam: false, //滚动缩放
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+        itemStyle: {
+          normal: {
+            areaColor: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "RGBA(37,108,190,1)", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "RGBA(15,169,195,1)", // 100% 处的颜色
+                },
+              ],
             },
-            emphasis: {
-              show: false,
+            borderColor: "#4ECEE6",
+            borderWidth: 1,
+          },
+          emphasis: {
+            areaColor: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "RGBA(37,108,190,1)", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "RGBA(15,169,195,1)", // 100% 处的颜色
+                },
+              ],
             },
           },
+        },
+      },
+      series: [
+        {
+          type: "effectScatter",
+          coordinateSystem: "geo",
+          showEffectOn: "render",
+          rippleEffect: {
+            brushType: "stroke",
+            // period: 4,
+            // scale: 5,
+            // brushType: "fill",
+          },
           itemStyle: {
             normal: {
-              areaColor: {
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
+              color: {
+                type: "radial",
+                x: 0.5,
+                y: 0.5,
+                r: 0.5,
                 colorStops: [
                   {
                     offset: 0,
-                    color: "RGBA(37,108,190,1)", // 0% 处的颜色
+                    color: "rgba(0,255,246,0.5)",
                   },
                   {
-                    offset: 1,
-                    color: "RGBA(15,169,195,1)", // 100% 处的颜色
+                    offset: 0.6,
+                    color: "rgba(0,255,246,0.8)",
                   },
-                ],
-              },
-              borderColor: "#4ECEE6",
-              borderWidth: 1,
-
-            },
-            emphasis: {
-              areaColor: {
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
                   {
-                    offset: 0,
-                    color: "RGBA(37,108,190,1)", // 0% 处的颜色
+                    offset: 0.8,
+                    color: "rgba(255,255,255,0.5)",
                   },
                   {
-                    offset: 1,
-                    color: "RGBA(15,169,195,1)", // 100% 处的颜色
+                    offset: 0.5,
+                    color: "rgba(255,255,255,0.2)",
                   },
                 ],
+                global: false, // 缺省为 false
               },
             },
           },
+          zlevel: 1,
+          hoverAnimation: true,
+          emphasis: {
+            show: true,
+          },
+          symbol: "circle",
+          symbolSize: 16,
+          data: state.data,
         },
-        series: [
-          {
-            type: "effectScatter",
-            coordinateSystem: "geo",
-            showEffectOn: "render",
-            rippleEffect: {
-              brushType: "stroke",
-              // period: 4,
-              // scale: 5,
-              // brushType: "fill",
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: "radial",
-                  x: 0.5,
-                  y: 0.5,
-                  r: 0.5,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(0,255,246,0.5)",
-                    },
-                    {
-                      offset: 0.6,
-                      color: "rgba(0,255,246,0.8)",
-                    },
-                    {
-                      offset: 0.8,
-                      color: "rgba(255,255,255,0.5)",
-                    },
-                    {
-                      offset: 0.5,
-                      color: "rgba(255,255,255,0.2)",
-                    },
-                  ],
-                  global: false, // 缺省为 false
+        {
+          type: "scatter",
+          coordinateSystem: "geo",
+          itemStyle: {
+            color: "#4ECEE6",
+          },
+          label: {
+            normal: {
+              show: true,
+              formatter: function(params) {
+                return "{fline|" + params.name + "}{tline|" + params.data.date + "}";
+              },
+              position: [0, -30],
+              backgroundColor: "rgba(0,2,89,1)",
+              padding: [0, 0],
+              borderRadius: [0, 3, 3, 0],
+              lineHeight: 30,
+              color: "#ffffff",
+              rich: {
+                fline: {
+                  padding: [0, 5, 0, 5],
+                  color: "#ffffff",
+                  fontSize: 14,
+                },
+                tline: {
+                  padding: [0, 10, 0, 5],
+                  color: "#ffffff",
+                  fontSize: 14,
                 },
               },
             },
-            zlevel: 1,
-            hoverAnimation: true,
             emphasis: {
               show: true,
             },
-            symbol: "circle",
-            symbolSize: 16,
-            data: state.data,
           },
-          {
-            type: "scatter",
-            coordinateSystem: "geo",
-            itemStyle: {
-              color: "#4ECEE6",
-            },
-            label: {
-              normal: {
-                show: true,
-                formatter: function (params) {
-                  return (
-                    "{fline|" + params.name + "}{tline|" + params.data.date + "}"
-                  );
-                },
-                position: [0, -30],
-                backgroundColor: "rgba(0,2,89,1)",
-                padding: [0, 0],
-                borderRadius: [0, 3, 3, 0],
-                lineHeight: 30,
-                color: "#ffffff",
-                rich: {
-                  fline: {
-                    padding: [0, 5, 0, 5],
-                    color: "#ffffff",
-                    fontSize: 14,
-                  },
-                  tline: {
-                    padding: [0, 10, 0, 5],
-                    color: "#ffffff",
-                    fontSize: 14,
-                  },
-                },
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            hoverAnimation: false,
-            symbol: "rect",
-            symbolSize: [1, 40],
-            data: state.data,
-          },
-        ],
-      };
-
-
-      // 请求城市课堂数据
-      const fetchMapList = async (url) => {
-        let query;
-        if (!url) {
-          query = tabLists.value[1].url;
-        } else {
-          query = url;
-        }
-        const res = await getMapList(query);
-        if (res.code === 200) {
-          state.convertList = res.data;
-          state.newList = res.data;
-          getLocation(res.data);
-        }
-      };
-
-      // 请求百度位置坐标
-      const getLocation = (data) => {
-        let promises = [];
-        data.forEach((item) => {
-          const _p = new Promise((resolve, reject) => {
-            const baiduurl = `https://api.map.baidu.com/geocoding/v3/?address=${item.class_city}&output=json&ak=js3GYdotKxN9K0YCLlYg9bFRBdj4Qz0U`
-            jsonp(baiduurl).promise.then(res => {
+          hoverAnimation: false,
+          symbol: "rect",
+          symbolSize: [1, 40],
+          data: state.data,
+        },
+      ],
+    };
+
+    // 请求城市课堂数据
+    const fetchMapList = async (url) => {
+      let query;
+      if (!url) {
+        query = tabLists.value[1].url;
+      } else {
+        query = url;
+      }
+      const res = await getMapList(query);
+      if (res.code === 200) {
+        state.convertList = res.data;
+        state.newList = res.data;
+        getLocation(res.data);
+      }
+    };
+
+    // 请求百度位置坐标
+    const getLocation = (data) => {
+      let promises = [];
+      data.forEach((item) => {
+        const _p = new Promise((resolve, reject) => {
+          const baiduurl = `https://api.map.baidu.com/geocoding/v3/?address=${item.class_city}&output=json&ak=js3GYdotKxN9K0YCLlYg9bFRBdj4Qz0U`;
+          jsonp(baiduurl)
+            .promise.then((res) => {
               let newres = res.result;
               const obj = {
                 id: item.class_id,
@@ -307,269 +307,260 @@
                 value: [newres.location.lng, newres.location.lat],
                 date: item.class_date,
               };
-              resolve(obj)
-            }).catch(err => {
-              reject(err)
+              resolve(obj);
+            })
+            .catch((err) => {
+              reject(err);
             });
-          });
-          promises.push(_p);
         });
+        promises.push(_p);
+      });
 
-        Promise.all(promises).then(data => {
+      Promise.all(promises)
+        .then((data) => {
           option.series[0].data = data;
           option.series[1].data = data;
           state.myChart.setOption(option, true);
-        }).catch(err => {
+        })
+        .catch((err) => {
           console.log(err);
         });
-      };
-
-
-      // 请求统计数据
-      const fetchStatistic = async () => {
-        const res = await axios.get("./api/countclass.json");
-        if (res.status === 200 && res.data.code === 200) {
-          const arr = res.data.data;
-          if (arr.length) {
-            state.statistics = arr[0];
-          }
-        }
-      };
-
+    };
 
-      fetchMapList();
-      fetchStatistic();
-
-      onMounted(() => {
-
-        echarts.init(document.getElementById('custom-chart')).dispose();
-        state.myChart = echarts.init(document.getElementById("custom-chart"));
-        state.myChart.setOption(option);
-        // window.onresize = function () {
-        //   //自适应大小
-        //   state.myChart.resize();
-        // };
-      });
-
-      return {
-        ...toRefs(state),
-        tabLists,
-        changeTab,
-      };
-    },
-  };
+    // 请求统计数据
+    const fetchStatistic = async () => {
+      const res = await getCityCount();
+      if (res.code === 200) {
+        state.statistics = res.data;
+      }
+    };
+
+    fetchMapList();
+    fetchStatistic();
+
+    onMounted(() => {
+      echarts.init(document.getElementById("custom-chart")).dispose();
+      state.myChart = echarts.init(document.getElementById("custom-chart"));
+      state.myChart.setOption(option);
+      // window.onresize = function () {
+      //   //自适应大小
+      //   state.myChart.resize();
+      // };
+    });
+
+    return {
+      ...toRefs(state),
+      tabLists,
+      changeTab,
+    };
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .imgcar {
-    width: 820px;
-    margin: 0 auto;
-
-    .img {
-      width: 380px;
-      border-radius: 8px;
-    }
-
-  }
+.imgcar {
+  width: 820px;
+  margin: 0 auto;
 
-  ::v-deep .el-carousel__mask {
-    background-color: rgb(0, 21, 58, 1) !important;
-  }
-
-  ::v-deep .is-active {
-    .img {
-      opacity: 1;
-    }
-  }
-
-
-  .el-carousel__item {
+  .img {
+    width: 380px;
     border-radius: 8px;
   }
+}
 
+::v-deep .el-carousel__mask {
+  background-color: rgb(0, 21, 58, 1) !important;
+}
 
-  .city-page {
-    margin-bottom: -40px;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    background: #00153A url("~@/assets/citybg.png") 30% -140px no-repeat;
+::v-deep .is-active {
+  .img {
+    opacity: 1;
+  }
+}
+
+.el-carousel__item {
+  border-radius: 8px;
+}
+
+.city-page {
+  margin-bottom: -40px;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: #00153a url("~@/assets/citybg.png") 30% -140px no-repeat;
+
+  .header {
+    padding: 24px 0 34px;
+    box-sizing: border-box;
+
+    .title {
+      text-align: center;
+      font-weight: 500;
+      font-size: 56px;
+      letter-spacing: 4px;
+      padding-bottom: 18px;
+
+      i {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 100px;
+        background-color: #fff;
+        margin: 0 24px;
+      }
+    }
 
-    .header {
-      padding: 24px 0 34px;
-      box-sizing: border-box;
+    .description {
+      width: 480px;
+      margin: 0 auto;
+      text-align: center;
+      font-size: 20px;
 
-      .title {
-        text-align: center;
-        font-weight: 500;
-        font-size: 56px;
-        letter-spacing: 4px;
-        padding-bottom: 18px;
-
-        i {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 100px;
-          background-color: #fff;
-          margin: 0 24px;
-        }
+      .strong {
+        font-size: 32px;
+        padding-right: 8px;
+        color: rgb(11, 195, 255);
       }
+    }
 
-      .description {
-        width: 480px;
-        margin: 0 auto;
-        text-align: center;
-        font-size: 20px;
-
-        .strong {
-          font-size: 32px;
-          padding-right: 8px;
-          color: rgb(11, 195, 255);
+    .tabs {
+      margin-top: 40px;
+      width: 840px;
+      margin: 60px auto 0 auto;
+
+      .tab-list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        &::after {
+          content: " ";
+          position: absolute;
+          height: 1px;
+          background-color: #0685d0;
+          width: 821px;
+          bottom: 0;
+          left: 1px;
         }
-      }
 
-      .tabs {
-        margin-top: 40px;
-        width: 840px;
-        margin: 60px auto 0 auto;
+        .tab-pane {
+          background-color: rgb(9, 112, 172);
+          transform: skewX(-20deg);
+          width: 204px;
+          height: 42px;
+          line-height: 42px;
+          margin-right: 2px;
+          cursor: pointer;
+          transition: 0.7s;
+          text-align: center;
+          font-size: 20px;
 
-        .tab-list {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          position: relative;
+          background: linear-gradient(90deg, #074685 0%, #002e69 100%);
 
-          &::after {
-            content: " ";
-            position: absolute;
-            height: 1px;
-            background-color: #0685D0;
-            width: 821px;
-            bottom: 0;
-            left: 1px;
+          span {
+            opacity: 0.9;
+            display: inline-block;
+            transform: skewX(20deg);
           }
 
+          &:hover {
+            background: linear-gradient(90deg, rgb(16, 178, 252, 0.6) 0%, rgb(3, 111, 189, 0.6) 100%);
+          }
 
-          .tab-pane {
-            background-color: rgb(9, 112, 172);
-            transform: skewX(-20deg);
-            width: 204px;
-            height: 42px;
-            line-height: 42px;
-            margin-right: 2px;
-            cursor: pointer;
-            transition: 0.7s;
-            text-align: center;
-            font-size: 20px;
-
-            background: linear-gradient(90deg, #074685 0%, #002E69 100%);
+          &.active {
+            background: linear-gradient(90deg, #10b2fc 0%, #036fbd 100%) !important;
 
             span {
-              opacity: 0.9;
-              display: inline-block;
-              transform: skewX(20deg);
-            }
-
-            &:hover {
-              background: linear-gradient(90deg, rgb(16, 178, 252, .6) 0%, rgb(3, 111, 189, .6) 100%);
-            }
-
-            &.active {
-              background: linear-gradient(90deg, #10B2FC 0%, #036FBD 100%) !important;
-
-              span {
-                opacity: 1;
-              }
+              opacity: 1;
             }
           }
         }
       }
     }
+  }
 
-    main {
-      margin: 0 50px;
-      display: flex;
-      height: calc(100% - 180px);
-      justify-content: center;
-      box-sizing: border-box;
-
-      #custom-chart {
-        width: 780px;
-        height: 660px;
-        margin-right: 40px;
-      }
-
-      .activity {
-        width: 420px;
-        height: 480px;
-        margin-top: 90px;
-        background-color: #002D5F;
-
+  main {
+    margin: 0 50px;
+    display: flex;
+    height: calc(100% - 180px);
+    justify-content: center;
+    box-sizing: border-box;
+
+    #custom-chart {
+      width: 780px;
+      height: 660px;
+      margin-right: 40px;
+    }
 
-        .activity-title {
-          font-size: 18px;
-          text-align: center;
-          height: 48px;
-          line-height: 48px;
-          background: linear-gradient(90deg, rgba(19, 184, 252, 0.83) 0%, rgba(0, 93, 163, 0.83) 100%);
-          border-radius: 8px 8px 0px 0px;
-        }
+    .activity {
+      width: 420px;
+      height: 480px;
+      margin-top: 90px;
+      background-color: #002d5f;
 
-        .activity-list {
+      .activity-title {
+        font-size: 18px;
+        text-align: center;
+        height: 48px;
+        line-height: 48px;
+        background: linear-gradient(90deg, rgba(19, 184, 252, 0.83) 0%, rgba(0, 93, 163, 0.83) 100%);
+        border-radius: 8px 8px 0px 0px;
+      }
 
-          .activity-item {
-            display: flex;
-            flex-direction: column;
-            height: 76px;
-            justify-content: center;
-            line-height: 26px;
-            padding: 0 12px;
-            position: relative;
+      .activity-list {
+        .activity-item {
+          display: flex;
+          flex-direction: column;
+          height: 76px;
+          justify-content: center;
+          line-height: 26px;
+          padding: 0 12px;
+          position: relative;
 
-            a {
-              color: #fff;
-            }
+          a {
+            color: #fff;
+          }
 
-            .prt {
-              padding-right: 10px;
-            }
+          .prt {
+            padding-right: 10px;
+          }
 
-            &::after {
-              content: " ";
-              position: absolute;
-              background-color: #003C83;
-              height: 1px;
-              width: 390px;
-              left: 16px;
-              bottom: 0;
-            }
+          &::after {
+            content: " ";
+            position: absolute;
+            background-color: #003c83;
+            height: 1px;
+            width: 390px;
+            left: 16px;
+            bottom: 0;
+          }
 
-            &:hover {
-              background: linear-gradient(90deg, rgb(19, 163, 252, .36) 0%, rgb(0, 93, 163, .36) 100%);
-            }
+          &:hover {
+            background: linear-gradient(90deg, rgb(19, 163, 252, 0.36) 0%, rgb(0, 93, 163, 0.36) 100%);
+          }
 
-            h5 {
-              font-size: 14px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
+          h5 {
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
 
-            p {
-              padding-left: 6px;
-              font-size: 12px;
-            }
+          p {
+            padding-left: 6px;
+            font-size: 12px;
           }
         }
       }
     }
   }
+}
 
-  ::v-deep .el-scrollbar__thumb {
-    background-color: #32649F;
-  }
+::v-deep .el-scrollbar__thumb {
+  background-color: #32649f;
+}
 
-  ::v-deep .el-scrollbar__thumb:hover {
-    background-color: #1b4f8b;
-  }
-</style>
\ No newline at end of file
+::v-deep .el-scrollbar__thumb:hover {
+  background-color: #1b4f8b;
+}
+</style>
diff --git a/src/views/live/live_play.vue b/src/views/live/live_play.vue
index f61999d..f026a36 100644
--- a/src/views/live/live_play.vue
+++ b/src/views/live/live_play.vue
@@ -16,9 +16,10 @@
     </div>
   </div>
 
-  <div class="playbox" v-else>
+  <div style="margin-top: -2.5rem;" class="playbox" v-else>
     <!-- <iframe scrolling="no" border="0" frameborder="0" allowfullscreen="true" :src="'https://live.vhall.com/webinar/inituser/' + live.webinar_id + '?email=' + live.uid + '@vhall.com&name=' + live.liveUserName + '&k=' + live.livekey" width="100%" height="100%"> </iframe> -->
-    <iframe id="iframe_live" border="0" frameborder="0" allowfullscreen="true" :src="'https://live.polyv.cn/watch/' + live.webinar_id + '?userid=' + live.uid + '&ts=' + live.ts + '&sign=' + live.sign" width="100%" height="100%"> </iframe>
+    <!-- <iframe border="0" frameborder="0" allowfullscreen="true" :src="'https://live.polyv.cn/watch/' + live.webinar_id + '?userid=' + live.uid + '&ts=' + live.ts + '&sign=' + live.sign" width="100%" height="100%"> </iframe> -->
+    <iframe border="0" frameborder="0" allowfullscreen="true" :src="live.directAuthUrl" width="100%" height="100%"> </iframe>
   </div>
 </template>
 
@@ -64,13 +65,6 @@ export default {
       reslivePlay();
     }
 
-    // setTimeout(function() {
-    //   let iframeDocument = document.getElementById("iframe_live").contentWindow;
-    //   console.log("iframeDocument=====", iframeDocument);
-
-    //   iframeDocument.body.style.backgroundColor = "blue";
-    // }, 500);
-
     return {
       ...toRefs(state),
       liveid,
diff --git a/src/views/video/video_course.vue b/src/views/video/video_course.vue
index b5b6c15..670d172 100644
--- a/src/views/video/video_course.vue
+++ b/src/views/video/video_course.vue
@@ -1,15 +1,12 @@
 <template>
-  <div v-wechat-title="basic.it618_name + ' - ' +$route.meta.title"></div>
+  <div v-wechat-title="basic.it618_name + ' - ' + $route.meta.title"></div>
   <div class="w1200 m_box">
-
-    <div style="padding: 50px 0 150px;" v-if="empty===-1">
+    <div style="padding: 50px 0 150px;" v-if="empty === -1">
       <el-empty :image-size="150" :description="msg"></el-empty>
     </div>
 
-    <div class="basic" v-if="empty===1">
-
+    <div class="basic" v-if="empty === 1">
       <el-skeleton class="lf_ske_m" :loading="loading" animated style="width: 600px;">
-
         <template #template>
           <div class="lfinfo" style="width: 580px;">
             <el-skeleton-item variant="image" class="img" />
@@ -18,9 +15,8 @@
 
         <template #default>
           <div class="lfinfo">
-
             <div class="timesale flex-1" v-if="basic.isTimeOver > 0">
-              <div class="tmtxt">{{basic.timeSale.start_time}} 至 {{basic.timeSale.end_time}}</div>
+              <div class="tmtxt">{{ basic.timeSale.start_time }} 至 {{ basic.timeSale.end_time }}</div>
               <div class="tmbox flex-1">
                 <i class="el-icon-alarm-clock f24 colfff icoclock"></i>
                 <div v-html="basic.newtime"></div>
@@ -30,11 +26,9 @@
             <el-image class="img" :src="basic.it618_picbig"></el-image>
           </div>
         </template>
-
       </el-skeleton>
 
       <el-skeleton :loading="loading" animated style="width: 550px;">
-
         <template #template>
           <div class="rt_ske_m" style=" width: 550px; padding: 32px 24px 14px 4px;">
             <el-skeleton-item variant="h1" />
@@ -45,14 +39,13 @@
 
         <template #default>
           <div class="rtinfo">
-            <h2 class="til">{{basic.it618_name}}<i>视频课</i></h2>
+            <h2 class="til">{{ basic.it618_name }}<i>视频课</i></h2>
             <ul class="ulinfo flex-2">
-              <li>报名人数：{{basic.snum}}人</li>
-              <li>课程总量：共{{basic.it618_videocount}}课时 ，共{{basic.it618_videotime}}</li>
+              <li>报名人数：{{ basic.snum }}人</li>
+              <li>课程总量：共{{ basic.it618_videocount }}课时 ，共{{ basic.it618_videotime }}</li>
               <li class="flex-1">
                 <span>分享链接：</span>
-                <i class="iconfont icon-line f24 colb3c fxurl"
-                  @click="copyActiveCode($event,com_edu_url+$route.path)"></i>
+                <i class="iconfont icon-line f24 colb3c fxurl" @click="copyActiveCode($event, com_edu_url + $route.path)"></i>
 
                 <el-popover placement="right" :width="208" trigger="click">
                   <canvas id="QRCode_weixin"></canvas>
@@ -61,42 +54,38 @@
                   </template>
                 </el-popover>
               </li>
-              <li class="price">课程价格：
+              <li class="price">
+                课程价格：
                 <span v-if="basic.it618_saleprice">
-                  <span class="saleprice colff3">
-                    <i class="f16">￥</i>{{basic.it618_saleprice}}
-                  </span>
-                  <del>￥{{basic.it618_price}}</del>
+                  <span class="saleprice colff3"> <i class="f16">￥</i>{{ basic.it618_saleprice }} </span>
+                  <del>￥{{ basic.it618_price }}</del>
                 </span>
                 <span class="f24 col28c" v-else>免费</span>
               </li>
             </ul>
 
-
             <div class="flex-1">
               <!-- 收费已购买 -->
-              <div v-if="isBuy===true && basic.it618_saleprice > 0" class="plbtn_p_m">
-                <router-link :to="'/video/play/'+firstID" class="plbtn">我已购买 现在学习</router-link>
+              <div v-if="isBuy === true && basic.it618_saleprice > 0" class="plbtn_p_m">
+                <router-link :to="'/video/play/' + firstID" class="plbtn">我已购买 现在学习</router-link>
               </div>
 
               <!-- 收费未购买 -->
-              <div v-if="isBuy===false && basic.it618_saleprice > 0" class="plbtn_p_m">
+              <div v-if="isBuy === false && basic.it618_saleprice > 0" class="plbtn_p_m">
                 <!-- 限时抢购 -->
-                <div v-if="basic.timeSaleType===1 && com_user_token" class="plbtn_p_m">
+                <div v-if="basic.timeSaleType === 1 && com_user_token" class="plbtn_p_m">
                   <div v-if="basic.isTimeOver === -1 && !isBuy" class="plbtn2 plbtn_m">抢购已结束</div>
                   <a v-else href="javascript:;" class="plbtn" @click="dialogFormVisible = true">立即抢购</a>
                 </div>
 
                 <!-- 限时抢购相关 timeSaleType=2,这个不知道是啥 先按购买处理  -->
-                <div v-if="basic.timeSaleType===2 && com_user_token" class="plbtn_p_m">
-                  <a href="javascript:;" class="plbtn" @click="dialogFormVisible = true,order_no=true,order_ok=false">
-                    付费学习</a>
+                <div v-if="basic.timeSaleType === 2 && com_user_token" class="plbtn_p_m">
+                  <a href="javascript:;" class="plbtn" @click="(dialogFormVisible = true), (order_no = true), (order_ok = false)"> 付费学习</a>
                 </div>
 
                 <!-- 非抢购 -->
-                <div v-if="!basic.timeSaleType && com_user_token " class="plbtn_p_m">
-                  <a href="javascript:;" class="plbtn" @click="dialogFormVisible = true,order_no=true,order_ok=false">
-                    付费学习</a>
+                <div v-if="!basic.timeSaleType && com_user_token" class="plbtn_p_m">
+                  <a href="javascript:;" class="plbtn" @click="(dialogFormVisible = true), (order_no = true), (order_ok = false)"> 付费学习</a>
                 </div>
 
                 <!-- 未登录 -->
@@ -110,44 +99,37 @@
                     <template #reference>
                       <a href="javascript:;" class="plbtn">付费学习</a>
                     </template>
-
                   </el-popover>
                 </div>
-
               </div>
 
               <!-- 免费 -->
-              <router-link :to="'/video/play/'+firstID" class="plbtn" v-if="!basic.it618_saleprice">现在学习</router-link>
+              <router-link :to="'/video/play/' + firstID" class="plbtn" v-if="!basic.it618_saleprice">现在学习</router-link>
 
               <div class="flex-1">
                 <el-tooltip content="收藏课程" placement="top">
                   <i @click="setCollection" class="iconfont icon-shoucang collection" :class="collectionSty"></i>
                 </el-tooltip>
               </div>
-
             </div>
-
           </div>
         </template>
       </el-skeleton>
-
-
     </div>
 
     <!-- 订单弹出层 -->
 
     <el-dialog title="确定购买" v-model="dialogFormVisible" width="780px" center custom-class="orderDia">
       <div v-loading="cploading">
-
         <div class="dia_cpinfo_box">
           <div class="cp_flex">
             <el-image class="dia_cp_cover" :src="basic.it618_picbig"></el-image>
             <div class="dia_cpinfo_rt">
-              <h2 class="til">{{basic.it618_name}}<i>视频课</i></h2>
+              <h2 class="til">{{ basic.it618_name }}<i>视频课</i></h2>
 
               <div class="dia_cpinfo_price">
-                <span class="f24 colff3 mrt10"><span class="f16">￥</span>{{basic.it618_saleprice}}</span>
-                <del v-if="basic.it618_price">￥{{basic.it618_price}}</del>
+                <span class="f24 colff3 mrt10"><span class="f16">￥</span>{{ basic.it618_saleprice }}</span>
+                <del v-if="basic.it618_price">￥{{ basic.it618_price }}</del>
               </div>
             </div>
           </div>
@@ -155,13 +137,10 @@
 
         <el-tabs v-model="cpActiveName" class="cp-tabs">
           <el-tab-pane label="可用优惠券" name="keyong">
-
-            <div class="couponBox" v-if="cpstatus===1">
+            <div class="couponBox" v-if="cpstatus === 1">
               <el-scrollbar always ref="cpscroll">
                 <div style="display: flex; height: 140px; position: relative;">
-                  <li v-for="(item, i) in couponData" :key="i" class="couponItem"
-                    :class="{select_cp:item.coupon_log_id===coupon_logid}"
-                    @click="gouxuan(item.coupon_log_id,item.coupon_value)">
+                  <li v-for="(item, i) in couponData" :key="i" class="couponItem" :class="{ select_cp: item.coupon_log_id === coupon_logid }" @click="gouxuan(item.coupon_log_id, item.coupon_value)">
                     <div :class="`couponBg cpType_${item.coupon_module}`">
                       <div class="mkopacity">
                         <div class="lfbox">
@@ -169,19 +148,13 @@
                             <span>
                               ￥
                             </span>
-                            <i>
-                              {{item.coupon_value}}.00
-                            </i>
-                          </p>
-                          <p class="cpTil hide-txt2 f14">
-                            适用于{{item.coupon_name}}
-                          </p>
-                          <p class="f12">
-                            有效期至：{{item.etime}}
+                            <i> {{ item.coupon_value }}.00 </i>
                           </p>
+                          <p class="cpTil hide-txt2 f14">适用于{{ item.coupon_name }}</p>
+                          <p class="f12">有效期至：{{ item.etime }}</p>
                         </div>
                         <div class="rtbox">
-                          <i class="iconfont icon-correct" v-if="item.coupon_log_id===coupon_logid"></i>
+                          <i class="iconfont icon-correct" v-if="item.coupon_log_id === coupon_logid"></i>
                           <i class="iconfont right_icon" v-else></i>
                         </div>
                       </div>
@@ -189,21 +162,17 @@
                   </li>
                 </div>
               </el-scrollbar>
-
             </div>
 
-            <div v-if="cpstatus===0" style="height: 170px;">
+            <div v-if="cpstatus === 0" style="height: 170px;">
               <el-empty :image-size="70" description=" ">
                 <div class="col617" style="margin-top: -20px;">暂时没有可用优惠券哦</div>
               </el-empty>
             </div>
-
           </el-tab-pane>
           <el-tab-pane label="兑换优惠券" name="duihuan">
-
             <div style="padding-top: 20px">
-              <el-form ref="cprValidateRef" :model="cpValidateForm" :rules="cprules" label-width="0px"
-                class="demo-ruleForm" @submit.prevent>
+              <el-form ref="cprValidateRef" :model="cpValidateForm" :rules="cprules" label-width="0px" class="demo-ruleForm" @submit.prevent>
                 <el-form-item label="" prop="cpcode">
                   <div class="flex-3">
                     <el-input v-model="cpValidateForm.cpcode" autocomplete="off"></el-input>
@@ -217,13 +186,11 @@
               <div class="colb3c" style="margin-top: 12px; line-height: 22px;">
                 <div class="f16" style="padding-bottom:4px;">提示</div>
                 <span class="f14">
-                  1. 兑换码获取：参与社区活动有机会获得优惠券兑换码，兑换码是16位；<br>
+                  1. 兑换码获取：参与社区活动有机会获得优惠券兑换码，兑换码是16位；<br />
                   2. 兑换码使用：在当前页面输入兑换码即可兑换相应优惠券，一个兑换码只能兑换一张优惠券，不可重复使用；
                 </span>
               </div>
-
             </div>
-
           </el-tab-pane>
         </el-tabs>
 
@@ -232,7 +199,7 @@
             <div class="mn-txt-box">
               <span class="mn-txt f18">应付总额：</span>
               <span class="mn-nb">
-                <span class="f18">￥</span><span class="upprice">{{newprice}}</span>
+                <span class="f18">￥</span><span class="upprice">{{ newprice }}</span>
               </span>
             </div>
 
@@ -242,15 +209,11 @@
             </div>
           </div>
         </div>
-
       </div>
-
     </el-dialog>
 
-
-    <div class="listbox flex-3" v-if="empty===1">
+    <div class="listbox flex-3" v-if="empty === 1">
       <div class="lf-box">
-
         <el-affix target=".listbox" :offset="0" @scroll="onscroll($event)">
           <el-tabs v-model="activeName" @tab-click="handleClick" class="fix-tabs">
             <el-tab-pane label="课程简介" name="menu0"></el-tab-pane>
@@ -266,14 +229,12 @@
         <div class="lecturer">
           <div class="til">授课讲师</div>
           <div class="info">
-            <a :href="com_shequ_url+'/u/'+basic.lecturer?.it618_uid" target="_blank">
-              <el-image class="img"
-                :src="'https://bbs.fanruan.com/uc_server/avatar.php?uid='+basic.lecturer?.it618_uid">
-              </el-image>
+            <a :href="com_shequ_url + '/u/' + basic.lecturer?.it618_uid" target="_blank">
+              <el-image class="img" :src="'https://bbs.fanruan.com/uc_server/avatar.php?uid=' + basic.lecturer?.it618_uid"> </el-image>
             </a>
             <div class="namebox">
-              <p class="f16 fw600 name">{{basic.lecturer?.it618_name}}</p>
-              <p class="f12 col7e8">{{basic.lecturer?.it618_about}}</p>
+              <p class="f16 fw600 name">{{ basic.lecturer?.it618_name }}</p>
+              <p class="f12 col7e8">{{ basic.lecturer?.it618_about }}</p>
             </div>
           </div>
         </div>
@@ -281,45 +242,37 @@
           <div class="info" v-html="basic.it618_message"></div>
         </div>
 
-
         <div id="tab-menu1_box" class="btile flex-1 tab_cur_box">
           <h2>课程目录</h2>
         </div>
 
         <div class="lesson" v-if="countList">
-
           <div class="looplist" v-for="(item, i) in looplist" :key="i">
-
             <div class="otile flex-1">
-              <h2>{{item.it618_name}}</h2>
-              <span>共{{item.it618_videocount}}课时 {{item.it618_videotime}}</span>
+              <h2>{{ item.it618_name }}</h2>
+              <span>共{{ item.it618_videocount }}课时 {{ item.it618_videotime }}</span>
             </div>
 
             <ul class="vlist">
               <li class="item" v-for="(item, i) in item.video" :key="i">
-
-                <router-link class="a-play" :to="'/video/play/'+item.id">
+                <router-link class="a-play" :to="'/video/play/' + item.id">
                   <i class="iconfont icon-bofang2"></i>
-                  <span :class="'status_'+item.video_status">{{item.video_state}}</span>
-                  <div class="vdtitle" v-if="item.it618_name.length > 40">{{item.it618_name.substring(0,40)}}...</div>
-                  <div class="vdtitle" v-else>{{item.it618_name}}</div>
+                  <span :class="'status_' + item.video_status">{{ item.video_state }}</span>
+                  <div class="vdtitle" v-if="item.it618_name.length > 40">{{ item.it618_name.substring(0, 40) }}...</div>
+                  <div class="vdtitle" v-else>{{ item.it618_name }}</div>
                   <div class="progress" v-if="item.play_progress">
                     <el-progress :show-text="false" color="#0082FC" :percentage="item.progress"></el-progress>
-                    <span :style="'left:'+item.progress+'%'">
-                      <div v-if="item.play_progress===100">已看完</div>
-                      <div v-else>{{item.progress}}%</div>
+                    <span :style="'left:' + item.progress + '%'">
+                      <div v-if="item.play_progress === 100">已看完</div>
+                      <div v-else>{{ item.progress }}%</div>
                       <i class="el-icon-caret-bottom"></i>
                     </span>
                   </div>
 
-                  <div class="time">{{item.videoTime}}</div>
-
+                  <div class="time">{{ item.videoTime }}</div>
                 </router-link>
-
-
               </li>
             </ul>
-
           </div>
         </div>
 
@@ -334,38 +287,33 @@
             <div v-for="(item, i) in item.video" :key="i">
               <!-- <el-divider content-position="left" v-if="item.attachment.length>0" class="attachment_title">{{item.it618_name}}</el-divider> -->
               <ul v-for="(item, i) in item.attachment" :key="i">
-                
                 <li class="item flex-1 flex-3" v-if="item.it618_name">
                   <div class="til flex-1">
                     <i class="zip"></i>
-                    <span class="f_title">{{item.it618_name}}</span>
+                    <span class="f_title">{{ item.it618_name }}</span>
                   </div>
 
                   <div v-if="basic.it618_saleprice > 0">
-                    <a class="el-btn" :href="item.it618_dataurl" target="_blank" v-if="isBuy===true">下载</a>
-                    <el-tooltip content="购买课程后可以下载" placement="left" v-if="isBuy===false">
+                    <a class="el-btn" :href="item.it618_dataurl" target="_blank" v-if="isBuy === true">下载</a>
+                    <el-tooltip content="购买课程后可以下载" placement="left" v-if="isBuy === false">
                       <a href="javascript:;" class="el-btn">购买后下载</a>
                     </el-tooltip>
                   </div>
 
                   <div v-else>
-                    <a class="el-btn" :href="item.it618_dataurl" target="_blank">下载</a>
+                    <a @click="clickDownloadLog(item.id)" class="el-btn" :href="item.it618_dataurl" target="_blank">下载</a>
                   </div>
                 </li>
-
-            </ul>
-
+              </ul>
             </div>
           </div>
         </div>
         <el-empty :image-size="100" description="暂无学习资料" v-if="!countAtt"></el-empty>
 
-
         <div id="tab-menu3_box" class="btile flex-1 tab_cur_box">
           <h2>课程评论</h2>
         </div>
         <div class="comment_box">
-
           <div class="post-box">
             <el-form :model="postmsg" ref="numberValidateRef" :rules="rules" label-width="1px" class="demo-ruleForm">
               <el-form-item prop="msg">
@@ -384,35 +332,29 @@
                   <el-button type="primary" v-if="!isLook" disabled>请观看该课程后再评价</el-button>
                   <el-button type="primary" @click="postComment" v-if="com_user_token && isLook">发表评论</el-button>
                 </div>
-
               </el-form-item>
             </el-form>
           </div>
 
           <ul class="list">
             <li class="item" v-for="(item, i) in loopComment" :key="i">
-              <div class="uname f12 col008">{{item.uname}}</div>
+              <div class="uname f12 col008">{{ item.uname }}</div>
               <div class="star">
-                <i class="el-icon-star-on" v-for="item, in item.fenshu" :key="item"></i>
+                <i class="el-icon-star-on" v-for="item in item.fenshu" :key="item"></i>
               </div>
               <div class="f16 msg">
-                {{item.msg}}
+                {{ item.msg }}
               </div>
               <div class="f12 txt-r colb3c">
-                {{item.ptime}}
+                {{ item.ptime }}
               </div>
-
             </li>
           </ul>
 
           <div style="margin: 30px 0 40px">
-            <el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next"
-              @current-change="handleCurrentChange" :total="total" :page-size="query.perpage" />
+            <el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next" @current-change="handleCurrentChange" :total="total" :page-size="query.perpage" />
           </div>
-
         </div>
-
-
       </div>
 
       <!-- 右侧 -->
@@ -423,1749 +365,1683 @@
             <div class="dbox">
               <li v-for="(item, i) in loopStudent" :key="i">
                 <el-tooltip :content="item.username" placement="top">
-                  <a class="usera" :href="com_shequ_url+'/u/'+item.uid" target="_blank">
-                    <el-image class="img" :src="'https://bbs.fanruan.com/uc_server/avatar.php?uid='+item.uid">
-                    </el-image>
+                  <a class="usera" :href="com_shequ_url + '/u/' + item.uid" target="_blank">
+                    <el-image class="img" :src="'https://bbs.fanruan.com/uc_server/avatar.php?uid=' + item.uid"> </el-image>
                   </a>
                 </el-tooltip>
               </li>
-              <li class="num">+ {{basic.snum}}人</li>
+              <li class="num">+ {{ basic.snum }}人</li>
             </div>
           </ul>
 
           <h3>讲师其它课程</h3>
           <div class="hotvideo">
             <li v-for="(item, i) in loopLecturerVideo" :key="i">
-              <a :href="'/video/'+item.id" class="flex-3">
+              <a :href="'/video/' + item.id" class="flex-3">
                 <el-image class="img" :src="item.it618_picbig"></el-image>
                 <div class="info flex-2">
                   <p class="til hide-txt2 f14">
-                    {{item.it618_name}}
+                    {{ item.it618_name }}
                   </p>
                   <div class="prunm flex-3">
                     <span v-if="item.it618_saleprice">
-                      <span class="saleprice colff3">
-                        <i class="f16">￥</i>{{item.it618_saleprice}}
-                      </span>
-                      <del>￥{{item.it618_price}}</del>
+                      <span class="saleprice colff3"> <i class="f16">￥</i>{{ item.it618_saleprice }} </span>
+                      <del>￥{{ item.it618_price }}</del>
                     </span>
                     <span class="f14 col28c" v-else>免费</span>
-                    <div class="num f12 col333">{{item.snum}}人学习</div>
+                    <div class="num f12 col333">{{ item.snum }}人学习</div>
                   </div>
                 </div>
               </a>
-
             </li>
           </div>
 
-
           <h3>热门课程</h3>
           <div class="hotvideo">
             <li v-for="(item, i) in loophotVideo" :key="i">
-              <a :href="'/video/'+item.id" class="flex-3">
+              <a :href="'/video/' + item.id" class="flex-3">
                 <el-image class="img" :src="item.it618_picbig"></el-image>
                 <div class="info flex-2">
                   <p class="til hide-txt2 f14">
-                    {{item.it618_name}}
+                    {{ item.it618_name }}
                   </p>
                   <div class="prunm flex-3">
                     <span v-if="item.it618_saleprice">
-                      <span class="saleprice colff3">
-                        <i class="f16">￥</i>{{item.it618_saleprice}}
-                      </span>
-                      <del>￥{{item.it618_price}}</del>
+                      <span class="saleprice colff3"> <i class="f16">￥</i>{{ item.it618_saleprice }} </span>
+                      <del>￥{{ item.it618_price }}</del>
                     </span>
                     <span class="f14 col28c" v-else>免费</span>
-                    <div class="num f12 col333">{{item.snum}}人学习</div>
+                    <div class="num f12 col333">{{ item.snum }}人学习</div>
                   </div>
                 </div>
               </a>
-
             </li>
           </div>
-
         </div>
       </div>
-
     </div>
   </div>
-
 </template>
 
 <script>
-  import { useRoute } from 'vue-router'
-  import { videoBasic, getLessonList, getStudent, gethotVideo, getLecturerVideo, createOrder, getComment, addComment } from "@/api/video";
-  import { getCoupon, exchCoupon } from "@/api/coupon";
-  import { addCollection, isCollection } from "@/api/user";
-  import { toRefs, reactive, onMounted, getCurrentInstance, computed, ref, nextTick } from 'vue';
-  import store from '@/store';
-  import { scrollToElementAnchor, scrollActive } from '@/utils/scrollTo';
-  import QRCode from "qrcode";
-  import Clipboard from 'clipboard';
-  //import { _debounce } from "@/utils/debounce";
-  import { getInfo } from "@/api/auth";
-  import dateFormat from '@/utils/dateFormat';
-  export default {
-    name: 'video_course',
-
-    setup() {
-      const { proxy } = getCurrentInstance()
-      const route = useRoute()
-      const courseid = route.params.courseid;
-
-      const state = reactive({
-        basic: {},
-        countAtt: 0,
-        countList: 0,
-        isBuy: 0,
-        isLook: 0,
-        looplist: [],
-        loopStudent: [],
-        loophotVideo: [],
-        loopLecturerVideo: [],
-        activeIndex: 1,
-        activeName: 'menu0',
-        empty: 1,
-        msg: 0,
-        ltuid: 0,
-        firstID: 0,
-        loading: true,
-        loopComment: [],
-        total: 0,
-        query: {
-          page: 1,
-          perpage: 10,
-        },
-        postmsg: {
-          msg: '',
-        },
-        pingfen: null,
-        getInfo: {},
-        collectionSty: 'collection2',
-        dialogFormVisible: false,
-        cpActiveName: 'keyong',
-        couponData: [],
-        cpstatus: 0,
-        coupon_logid: 0,
-        newprice: 0,
-        cpValidateForm: {
-          cpcode: '',
-        },
-        cprules: {
-          cpcode: [
-            { required: true, message: '请输入16位兑换码', trigger: 'blur' },
-            { min: 16, max: 16, message: '请输入16位兑换码', trigger: 'blur' },
-          ],
-        },
-        cploading: false,
-        order_ok: false,
-        order_no: true,
-
-      })
-
+import { useRoute } from "vue-router";
+import { videoBasic, getLessonList, getStudent, gethotVideo, getLecturerVideo, createOrder, getComment, addComment, downloadLog } from "@/api/video";
+import { getCoupon, exchCoupon } from "@/api/coupon";
+import { addCollection, isCollection } from "@/api/user";
+import { toRefs, reactive, onMounted, getCurrentInstance, computed, ref, nextTick } from "vue";
+import store from "@/store";
+import { scrollToElementAnchor, scrollActive } from "@/utils/scrollTo";
+import QRCode from "qrcode";
+import Clipboard from "clipboard";
+//import { _debounce } from "@/utils/debounce";
+import { getInfo } from "@/api/auth";
+import dateFormat from "@/utils/dateFormat";
+export default {
+  name: "video_course",
+
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const route = useRoute();
+    const courseid = route.params.courseid;
+
+    const state = reactive({
+      basic: {},
+      countAtt: 0,
+      countList: 0,
+      isBuy: 0,
+      isLook: 0,
+      looplist: [],
+      loopStudent: [],
+      loophotVideo: [],
+      loopLecturerVideo: [],
+      activeIndex: 1,
+      activeName: "menu0",
+      empty: 1,
+      msg: 0,
+      ltuid: 0,
+      firstID: 0,
+      loading: true,
+      loopComment: [],
+      total: 0,
+      query: {
+        page: 1,
+        perpage: 10,
+      },
+      postmsg: {
+        msg: "",
+      },
+      pingfen: null,
+      getInfo: {},
+      collectionSty: "collection2",
+      dialogFormVisible: false,
+      cpActiveName: "keyong",
+      couponData: [],
+      cpstatus: 0,
+      coupon_logid: 0,
+      newprice: 0,
+      cpValidateForm: {
+        cpcode: "",
+      },
+      cprules: {
+        cpcode: [
+          { required: true, message: "请输入16位兑换码", trigger: "blur" },
+          { min: 16, max: 16, message: "请输入16位兑换码", trigger: "blur" },
+        ],
+      },
+      cploading: false,
+      order_ok: false,
+      order_no: true,
+    });
+
+    // 视频课附件下载埋点
+    const clickDownloadLog = async (fileId) => {
+      await downloadLog(fileId);
+    };
+
+    // 获取用户信息
+    const fetchInfo = async () => {
+      const res = await getInfo();
+      if (res.code === 200) {
+        state.userInfo = res.data;
+      }
+    };
+    fetchInfo();
 
-      // 获取用户信息
-      const fetchInfo = async () => {
-        const res = await getInfo();
-        if (res.code === 200) {
-          state.userInfo = res.data;
-        }
+    // 视频基础信息
+    const resvideoBasic = async () => {
+      const params = {
+        uid: store.getters.get_uid,
       };
-      fetchInfo();
-
-
-
-      // 视频基础信息
-      const resvideoBasic = async () => {
-        const params = {
-          uid: store.getters.get_uid,
-        }
-        const res = await videoBasic(courseid, params);
-        if (res.code === 200) {
-          if (res.status === -1) {
-            state.empty = -1;
-          } else {
-            state.empty = 1;
-            state.basic = res.data;
-            state.isBuy = res.data.isBuy;
-            state.isLook = res.data.isLook;
-            state.ltuid = res.data.lecturer.it618_uid;
-            state.newprice = res.data.it618_saleprice;
-            regetLecturerVideo(state.ltuid);
-            // 限时抢购
-            if (res.data.timeSaleType === 1 && res.data.isTimeOver === 1) {
-              createSetInterVal(res.data.timeSale, 1);
-            }
-            state.loading = false;
+      const res = await videoBasic(courseid, params);
+      if (res.code === 200) {
+        if (res.status === -1) {
+          state.empty = -1;
+        } else {
+          state.empty = 1;
+          state.basic = res.data;
+          state.isBuy = res.data.isBuy;
+          state.isLook = res.data.isLook;
+          state.ltuid = res.data.lecturer.it618_uid;
+          state.newprice = res.data.it618_saleprice;
+          regetLecturerVideo(state.ltuid);
+          // 限时抢购
+          if (res.data.timeSaleType === 1 && res.data.isTimeOver === 1) {
+            createSetInterVal(res.data.timeSale, 1);
           }
+          state.loading = false;
         }
-      };
-      resvideoBasic();
-
-      // 倒计时
-      const createSetInterVal = (item, i) => {
-        const { saleEndtime } = item;
-        state.basic.newtime = dateFormat(saleEndtime, 'f16', 'f20', 'reload', '限时抢购:');
-        setTimeout(() => {
-          createSetInterVal(item, i);
-        }, 1000);
-      };
+      }
+    };
+    resvideoBasic();
+
+    // 倒计时
+    const createSetInterVal = (item, i) => {
+      const { saleEndtime } = item;
+      state.basic.newtime = dateFormat(saleEndtime, "f16", "f20", "reload", "限时抢购:");
+      setTimeout(() => {
+        createSetInterVal(item, i);
+      }, 1000);
+    };
 
-      // 课程目录
-      const reslooplist = async () => {
-        const params = {
-          uid: store.getters.get_uid,
+    // 课程目录
+    const reslooplist = async () => {
+      const params = {
+        uid: store.getters.get_uid,
+      };
+      const res = await getLessonList(courseid, params);
+      if (res.code === 200) {
+        if (res.status != -1) {
+          state.countAtt = res.data.countAtt;
+          state.countList = res.data.countList;
+          state.msg = res.message;
+          state.looplist = res.data.list;
+          state.firstID = res.data.list[0].video[0].id;
         }
-        const res = await getLessonList(courseid, params);
-        if (res.code === 200) {
-
-          if (res.status != -1) {
-            state.countAtt = res.data.countAtt;
-            state.countList = res.data.countList;
-            state.msg = res.message;
-            state.looplist = res.data.list;
-            state.firstID = res.data.list[0].video[0].id;
-          }
 
-          state.looplist.forEach((item, index) => {
-            state.looplist[index].video.forEach((item, i) => {
-              setTimeout(function () {
-                state.looplist[index].video[i].progress = item.play_progress;
-              }, 500);
-            });
+        state.looplist.forEach((item, index) => {
+          state.looplist[index].video.forEach((item, i) => {
+            setTimeout(function() {
+              state.looplist[index].video[i].progress = item.play_progress;
+            }, 500);
           });
-        }
-      };
-      reslooplist();
-
-      // 学员
-      const resStudent = async () => {
-        const res = await getStudent(courseid);
-        if (res.code === 200) {
-          state.loopStudent = res.data;
-        }
-      };
-      resStudent();
+        });
+      }
+    };
+    reslooplist();
+
+    // 学员
+    const resStudent = async () => {
+      const res = await getStudent(courseid);
+      if (res.code === 200) {
+        state.loopStudent = res.data;
+      }
+    };
+    resStudent();
+
+    // 讲师其他课程
+    const regetLecturerVideo = async (ltuid) => {
+      const res = await getLecturerVideo(ltuid);
+      if (res.code === 200) {
+        state.loopLecturerVideo = res.data;
+      }
+    };
 
-      // 讲师其他课程
-      const regetLecturerVideo = async (ltuid) => {
-        const res = await getLecturerVideo(ltuid);
-        if (res.code === 200) {
-          state.loopLecturerVideo = res.data;
-        }
-      };
+    // 7天热门课程
+    const reshotVideo = async () => {
+      const res = await gethotVideo();
+      if (res.code === 200) {
+        state.loophotVideo = res.data;
+      }
+    };
+    reshotVideo();
 
-      // 7天热门课程
-      const reshotVideo = async () => {
-        const res = await gethotVideo();
-        if (res.code === 200) {
-          state.loophotVideo = res.data;
-        }
+    // 获取评论
+    const resgetComment = async (query) => {
+      const params = {
+        ...query,
       };
-      reshotVideo();
-
-
-      // 获取评论
-      const resgetComment = async (query) => {
-        const params = {
-          ...query,
-        };
-        const res = await getComment(courseid, params);
-        if (res.code === 200) {
-          state.loopComment = res.data.data;
-          state.total = res.data.total;
-        }
+      const res = await getComment(courseid, params);
+      if (res.code === 200) {
+        state.loopComment = res.data.data;
+        state.total = res.data.total;
+      }
+    };
+    setTimeout(function() {
+      resgetComment(state.query);
+    }, 1000);
+
+    const numberValidateRef = ref(null);
+    // 表单规则验证
+    const rules = computed(() => {
+      return {
+        msg: [{ required: true, message: "内容不能为空", trigger: "blur" }],
       };
-      setTimeout(function () {
-        resgetComment(state.query)
-      }, 1000);
-
-
-      const numberValidateRef = ref(null);
-      // 表单规则验证
-      const rules = computed(() => {
-        return {
-          msg: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
-        }
-      })
-
-      // 添加评论
-      const postComment = () => {
-        nextTick(() => {
-          numberValidateRef.value.validate(async (valid) => {
-            if (valid) {
-              if (state.postmsg.fenshu === 0) {
-                proxy.$message({
-                  type: 'warning',
-                  message: '请选择星级',
+    });
+
+    // 添加评论
+    const postComment = () => {
+      nextTick(() => {
+        numberValidateRef.value.validate(async (valid) => {
+          if (valid) {
+            if (state.postmsg.fenshu === 0) {
+              proxy.$message({
+                type: "warning",
+                message: "请选择星级",
+                center: true,
+                offset: 60,
+              });
+            } else {
+              const res = await addComment(courseid, state.postmsg);
+              if (res.message === "success") {
+                const newComment = {
+                  uname: state.userInfo.username,
+                  msg: state.postmsg.msg,
+                  fenshu: state.postmsg.fenshu,
+                  ptime: "刚刚",
+                };
+                state.loopComment.unshift(newComment);
+              } else {
+                proxy.$message.error({
+                  message: res.message,
                   center: true,
                   offset: 60,
                 });
-              } else {
-                const res = await addComment(courseid, state.postmsg)
-                if (res.message === 'success') {
-                  const newComment = {
-                    uname: state.userInfo.username,
-                    msg: state.postmsg.msg,
-                    fenshu: state.postmsg.fenshu,
-                    ptime: '刚刚',
-                  }
-                  state.loopComment.unshift(newComment)
-                } else {
-                  proxy.$message.error({
-                    message: res.message,
-                    center: true,
-                    offset: 60,
-                  });
-                }
               }
             }
-          });
-        })
-      }
-
-      // 切换分页
-      const handleCurrentChange = (val) => {
-        state.query.page = val;
-        const params = {
-          ...state.query,
-        };
-        resgetComment(params);
+          }
+        });
+      });
+    };
+
+    // 切换分页
+    const handleCurrentChange = (val) => {
+      state.query.page = val;
+      const params = {
+        ...state.query,
       };
-
-
-
-      // 添加订单
-      const resAddOrder = async (order) => {
-        const res = await createOrder(order);
-        if (res.code === 200) {
-          state.dialogFormVisible = false;
-          state.cploading = false;
-          let message = res.message;
-          let status = res.status;
-          if (message === 'success' && status === 1) {
-            proxy.$confirm('<P class="f18">前往订单中心支付</p>', '下单成功', {
+      resgetComment(params);
+    };
+
+    // 添加订单
+    const resAddOrder = async (order) => {
+      const res = await createOrder(order);
+      if (res.code === 200) {
+        state.dialogFormVisible = false;
+        state.cploading = false;
+        let message = res.message;
+        let status = res.status;
+        if (message === "success" && status === 1) {
+          proxy
+            .$confirm('<P class="f18">前往订单中心支付</p>', "下单成功", {
               confirmButtonClass: "fr-btn big",
               dangerouslyUseHTMLString: true,
-              confirmButtonText: '确定',
+              confirmButtonText: "确定",
               showCancelButton: false,
-              type: 'success',
-              center: true
-            }).then(() => {
-              if(res.data.info){
-                window.location.href = proxy.$root.com_pass_url + '/#/orders/payment/'+res.data.info;
-              }else{
-                window.location.href = proxy.$root.com_pass_url + '/#/orders';
+              type: "success",
+              center: true,
+            })
+            .then(() => {
+              if (res.data.info) {
+                window.location.href = proxy.$root.com_pass_url + "/#/orders/payment/" + res.data.info;
+              } else {
+                window.location.href = proxy.$root.com_pass_url + "/#/orders";
               }
-              
-            }).catch(() => {
-            });
-          } else if (status === -1) {
-            proxy.$confirm('<p class="f16">前往订单中心支付</p>', message, {
+            })
+            .catch(() => {});
+        } else if (status === -1) {
+          proxy
+            .$confirm('<p class="f16">前往订单中心支付</p>', message, {
               confirmButtonClass: "fr-btn big",
               dangerouslyUseHTMLString: true,
-              confirmButtonText: '确定',
+              confirmButtonText: "确定",
               showCancelButton: false,
-              type: 'info',
-              center: true
-            }).then(() => {
-              if(res.data.info){
-                window.location.href = proxy.$root.com_pass_url + '/#/orders/payment/'+res.data.info;
-              }else{
-                window.location.href = proxy.$root.com_pass_url + '/#/orders';
+              type: "info",
+              center: true,
+            })
+            .then(() => {
+              if (res.data.info) {
+                window.location.href = proxy.$root.com_pass_url + "/#/orders/payment/" + res.data.info;
+              } else {
+                window.location.href = proxy.$root.com_pass_url + "/#/orders";
               }
-            }).catch(() => {
-            });
-          }
-        } else {
-          proxy.$confirm('<p class="f16">请刷新页面重试，或联系管理员</p>', '请求错误', {
+            })
+            .catch(() => {});
+        }
+      } else {
+        proxy
+          .$confirm('<p class="f16">请刷新页面重试，或联系管理员</p>', "请求错误", {
             confirmButtonClass: "fr-btn big",
             dangerouslyUseHTMLString: true,
-            confirmButtonText: '确定',
+            confirmButtonText: "确定",
             showCancelButton: false,
-            type: 'error',
-            center: true
-          }).then(() => {
-          }).catch(() => {
-          });
-        }
-      };
-
-
-      // 触发添加订单
-      // const addOrder = _debounce((order) => {
-      //   resAddOrder(order);
-      // }, 300)
-      const addOrder = () => {
-        state.cploading = true;
-        state.order_no = false;
-        state.order_ok = true;
-        let params = {
-          'price': state.basic.it618_saleprice,
-          'oprice': state.basic.it618_price,
-          'ptitle': state.basic.it618_name,
-          'pid': state.basic.id,
-          'url': proxy.$root.com_edu_url + route.path,
-          'api_type': 'it618_video',
-          'coupon_module': 1,
-          'coupon_logid': state.coupon_logid,
-        }
-        //console.log(params);
-        setTimeout(function () {
-          resAddOrder(params);
-        }, 500);
-      }
-
-      // 控制滚动位置
-      const cpscroll = ref(null);
-
-      //选择优惠券
-      const gouxuan = (id, val) => {
-        state.coupon_logid = id;
-        if (state.basic.it618_saleprice < val) {
-          state.newprice = 0;
-        } else {
-          state.newprice = state.basic.it618_saleprice - val;
-        }
-        //let cpLeft = event.target.offsetLeft;
-        //cpscroll.value.wrap.scrollLeft = cpLeft - 170;
+            type: "error",
+            center: true,
+          })
+          .then(() => {})
+          .catch(() => {});
       }
-      const gouxuanApi = (id, val) => {
-        state.coupon_logid = id;
+    };
+
+    // 触发添加订单
+    // const addOrder = _debounce((order) => {
+    //   resAddOrder(order);
+    // }, 300)
+    const addOrder = () => {
+      state.cploading = true;
+      state.order_no = false;
+      state.order_ok = true;
+      let params = {
+        price: state.basic.it618_saleprice,
+        oprice: state.basic.it618_price,
+        ptitle: state.basic.it618_name,
+        pid: state.basic.id,
+        url: proxy.$root.com_edu_url + route.path,
+        api_type: "it618_video",
+        coupon_module: 1,
+        coupon_logid: state.coupon_logid,
+      };
+      //console.log(params);
+      setTimeout(function() {
+        resAddOrder(params);
+      }, 500);
+    };
+
+    // 控制滚动位置
+    const cpscroll = ref(null);
+
+    //选择优惠券
+    const gouxuan = (id, val) => {
+      state.coupon_logid = id;
+      if (state.basic.it618_saleprice < val) {
+        state.newprice = 0;
+      } else {
         state.newprice = state.basic.it618_saleprice - val;
       }
-
-
-      // 优惠券tab切换
-      // const funscroll = () => {
-
-      //   let x = event.layerX;
-      //   console.log(x);
-
-      // }
-
-
-      // 获取优惠券
-      const resgetCoupon = async () => {
-        let params = {
-          module: 1,
-          pid: courseid,
-        }
-        const res = await getCoupon(params);
-        if (res.code === 200) {
-          state.couponData = res.data.list;
-          state.cpstatus = res.status;
-          if (res.status === 0) {
-            state.cpActiveName = 'duihuan';
-          }
-        }
+      //let cpLeft = event.target.offsetLeft;
+      //cpscroll.value.wrap.scrollLeft = cpLeft - 170;
+    };
+    const gouxuanApi = (id, val) => {
+      state.coupon_logid = id;
+      state.newprice = state.basic.it618_saleprice - val;
+    };
+
+    // 优惠券tab切换
+    // const funscroll = () => {
+
+    //   let x = event.layerX;
+    //   console.log(x);
+
+    // }
+
+    // 获取优惠券
+    const resgetCoupon = async () => {
+      let params = {
+        module: 1,
+        pid: courseid,
       };
-      resgetCoupon();
-
-
-
-      // 提交优惠券兑换码
-      const cprValidateRef = ref(null);
-      const cpsubmitForm = () => {
-        nextTick(() => {
-          cprValidateRef.value.validate(async (valid) => {
-            state.errExcShow = false;
-            if (valid) {
-              let params = {
-                module: 1,
-                pid: courseid,
-                cpcode: state.cpValidateForm.cpcode
-              }
-              const res = await exchCoupon(params)
-              if (res.status === -1) {
-                const myvalidate = (rule, value, callback) => {
-                  callback(new Error(res.message))
-                }
-                state.cprules = {
-                  cpcode: [
-                    { required: true, message: '请输入16位兑换码', trigger: 'blur' },
-                    { min: 16, max: 16, message: '请输入16位兑换码', trigger: 'blur' },
-                    { required: true, trigger: 'blur', validator: myvalidate }
-                  ],
-                }
-              } else if (res.status === -2) {
-                proxy.$alert(
-                  res.message,
-                  '兑换成功',
-                  {
-                    dangerouslyUseHTMLString: true,
-                  }
-                )
-              } else if (res.status === 1) {
-                resgetCoupon();
-                state.cpActiveName = 'keyong';
-                gouxuanApi(res.data.coupon_log_id, res.data.coupon_value);
-              }
-            }
-          });
-        })
-      }
-
-
-
-      const handleClick = (tab) => {
-        let getid = 'tab-' + tab.paneName;
-        scrollToElementAnchor(getid + '_box', 52);
-      }
-
-      const onscroll = (event) => {
-        state.activeName = scrollActive(event, 'tab_cur_box', 'menu', 150);
-      }
-
-      const copyActiveCode = (e, text) => {
-        const clipboard = new Clipboard(e.target, { text: () => text })
-        clipboard.on('success', e => {
-          e;
-          proxy.$message({
-            type: 'success',
-            message: '复制成功，快去粘贴分享吧',
-            center: true
-          });
-
-          // 释放内存
-          clipboard.off('error')
-          clipboard.off('success')
-          clipboard.destroy()
-        })
-        clipboard.on('error', e => {
-          e;
-          proxy.$message({
-            type: 'error',
-            message: '该浏览器不支持自动复制',
-            center: true
-          });
-          clipboard.off('error')
-          clipboard.off('success')
-          clipboard.destroy()
-        })
-        clipboard.onClick(e)
+      const res = await getCoupon(params);
+      if (res.code === 200) {
+        state.couponData = res.data.list;
+        state.cpstatus = res.status;
+        if (res.status === 0) {
+          state.cpActiveName = "duihuan";
+        }
       }
-
-
-      onMounted(() => {
-
-        // 二维码
-        let opts = {
-          errorCorrectionLevel: "H",//容错级别
-          type: "image/png",//生成的二维码类型
-          quality: 0.3,//二维码质量
-          margin: 1,//二维码留白边距
-          width: 180,//宽
-          height: 180,//高
-          text: window.location.href,//二维码内容
-          color: {
-            dark: "#333",//前景色
-            light: "#fff"//背景色
-          }
-        };
-        setTimeout(function () {
-          let QRCodeMsg = window.location.href; //生成的二维码为URL地址js
-          let msg = document.getElementById("QRCode_weixin");
-          QRCode.toCanvas(msg, QRCodeMsg, opts);
-        }, 1000);
-
-      })
-
-      //收藏
-      const setCollection = async () => {
-        if (!store.getters.get_uid) {
-          proxy.$message.error('登录后才能收藏');
-        } else {
-          let prm = {
-            pid: courseid,
-            business_type: 0,
-            business_classify: 0,
-          }
-          const res = await addCollection(prm);
-
-          if (res.code === 200) {
-            if (res.status === 1) {
-              state.collectionSty = 'collection1';
-              proxy.$message.success({
-                message: res.message,
-                center: true,
-              });
-            }
-            else if (res.status === 2) {
-              state.collectionSty = 'collection2';
-              proxy.$message.warning({
-                message: res.message,
-                center: true,
-              });
-            } else {
-
-              proxy.$message.error({
-                message: res.message,
-                center: true,
+    };
+    resgetCoupon();
+
+    // 提交优惠券兑换码
+    const cprValidateRef = ref(null);
+    const cpsubmitForm = () => {
+      nextTick(() => {
+        cprValidateRef.value.validate(async (valid) => {
+          state.errExcShow = false;
+          if (valid) {
+            let params = {
+              module: 1,
+              pid: courseid,
+              cpcode: state.cpValidateForm.cpcode,
+            };
+            const res = await exchCoupon(params);
+            if (res.status === -1) {
+              const myvalidate = (rule, value, callback) => {
+                callback(new Error(res.message));
+              };
+              state.cprules = {
+                cpcode: [
+                  { required: true, message: "请输入16位兑换码", trigger: "blur" },
+                  { min: 16, max: 16, message: "请输入16位兑换码", trigger: "blur" },
+                  { required: true, trigger: "blur", validator: myvalidate },
+                ],
+              };
+            } else if (res.status === -2) {
+              proxy.$alert(res.message, "兑换成功", {
+                dangerouslyUseHTMLString: true,
               });
+            } else if (res.status === 1) {
+              resgetCoupon();
+              state.cpActiveName = "keyong";
+              gouxuanApi(res.data.coupon_log_id, res.data.coupon_value);
             }
           }
-        }
+        });
+      });
+    };
+
+    const handleClick = (tab) => {
+      let getid = "tab-" + tab.paneName;
+      scrollToElementAnchor(getid + "_box", 52);
+    };
+
+    const onscroll = (event) => {
+      state.activeName = scrollActive(event, "tab_cur_box", "menu", 150);
+    };
+
+    const copyActiveCode = (e, text) => {
+      const clipboard = new Clipboard(e.target, { text: () => text });
+      clipboard.on("success", (e) => {
+        e;
+        proxy.$message({
+          type: "success",
+          message: "复制成功，快去粘贴分享吧",
+          center: true,
+        });
+
+        // 释放内存
+        clipboard.off("error");
+        clipboard.off("success");
+        clipboard.destroy();
+      });
+      clipboard.on("error", (e) => {
+        e;
+        proxy.$message({
+          type: "error",
+          message: "该浏览器不支持自动复制",
+          center: true,
+        });
+        clipboard.off("error");
+        clipboard.off("success");
+        clipboard.destroy();
+      });
+      clipboard.onClick(e);
+    };
+
+    onMounted(() => {
+      // 二维码
+      let opts = {
+        errorCorrectionLevel: "H", //容错级别
+        type: "image/png", //生成的二维码类型
+        quality: 0.3, //二维码质量
+        margin: 1, //二维码留白边距
+        width: 180, //宽
+        height: 180, //高
+        text: window.location.href, //二维码内容
+        color: {
+          dark: "#333", //前景色
+          light: "#fff", //背景色
+        },
       };
+      setTimeout(function() {
+        let QRCodeMsg = window.location.href; //生成的二维码为URL地址js
+        let msg = document.getElementById("QRCode_weixin");
+        QRCode.toCanvas(msg, QRCodeMsg, opts);
+      }, 1000);
+    });
 
-      const resPublicTop = async () => {
+    //收藏
+    const setCollection = async () => {
+      if (!store.getters.get_uid) {
+        proxy.$message.error("登录后才能收藏");
+      } else {
         let prm = {
           pid: courseid,
           business_type: 0,
           business_classify: 0,
-        }
-        const res = await isCollection(prm);
+        };
+        const res = await addCollection(prm);
+
         if (res.code === 200) {
           if (res.status === 1) {
-            state.collectionSty = 'collection1';
-          }
-          if (res.status === -1) {
-            state.collectionSty = 'collection2';
+            state.collectionSty = "collection1";
+            proxy.$message.success({
+              message: res.message,
+              center: true,
+            });
+          } else if (res.status === 2) {
+            state.collectionSty = "collection2";
+            proxy.$message.warning({
+              message: res.message,
+              center: true,
+            });
+          } else {
+            proxy.$message.error({
+              message: res.message,
+              center: true,
+            });
           }
         }
-      };
-      resPublicTop();
-
-
-
-      return {
-        courseid,
-        ...toRefs(state),
-        handleClick,
-        onscroll,
-        copyActiveCode,
-        addOrder,
-        handleCurrentChange,
-        postComment,
-        numberValidateRef,
-        rules,
-        setCollection,
-        gouxuan,
-        cpscroll,
-        cpsubmitForm,
-        cprValidateRef,
+      }
+    };
 
+    const resPublicTop = async () => {
+      let prm = {
+        pid: courseid,
+        business_type: 0,
+        business_classify: 0,
+      };
+      const res = await isCollection(prm);
+      if (res.code === 200) {
+        if (res.status === 1) {
+          state.collectionSty = "collection1";
+        }
+        if (res.status === -1) {
+          state.collectionSty = "collection2";
+        }
       }
-    }
-  }
+    };
+    resPublicTop();
+
+    return {
+      courseid,
+      ...toRefs(state),
+      handleClick,
+      onscroll,
+      copyActiveCode,
+      addOrder,
+      handleCurrentChange,
+      postComment,
+      numberValidateRef,
+      rules,
+      setCollection,
+      gouxuan,
+      cpscroll,
+      cpsubmitForm,
+      cprValidateRef,
+      clickDownloadLog,
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-  .attachment_title{
-    width: auto;
-    color: #617288;
-    margin-left: 24px;
-    margin-right: 24px;
-  }
-  .rt-box {
-    margin-top: 50px;
+.attachment_title {
+  width: auto;
+  color: #617288;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+.rt-box {
+  margin-top: 50px;
+}
+
+.lecturer {
+  margin-bottom: 24px;
+
+  .til {
+    font-size: 18px;
+    font-weight: 600;
+    padding: 20px 24px 14px 20px;
   }
 
-  .lecturer {
-
-    margin-bottom: 24px;
+  .info {
+    display: flex;
+    border-radius: 8px;
+    border: 1px solid #ceddf2;
+    padding: 16px;
 
-    .til {
-      font-size: 18px;
-      font-weight: 600;
-      padding: 20px 24px 14px 20px;
+    .img {
+      width: 48px;
+      height: 48px;
+      border-radius: 100px;
     }
 
-    .info {
-      display: flex;
-      border-radius: 8px;
-      border: 1px solid #CEDDF2;
-      padding: 16px;
-
-      .img {
-        width: 48px;
-        height: 48px;
-        border-radius: 100px;
-      }
-
-      .namebox {
-        width: 700px;
-        padding: 4px 0 0 16px;
-        line-height: 20px;
+    .namebox {
+      width: 700px;
+      padding: 4px 0 0 16px;
+      line-height: 20px;
 
-        .name {
-          padding-bottom: 4px;
-        }
+      .name {
+        padding-bottom: 4px;
       }
     }
-
-
   }
-
-  .basic {
-    display: flex;
-    margin: 24px 0 24px;
+}
+
+.basic {
+  display: flex;
+  margin: 24px 0 24px;
+  height: 390px;
+  background-color: #f3f8ff;
+  border-radius: 16px;
+
+  .lfinfo {
+    position: relative;
+    width: 580px;
     height: 390px;
-    background-color: #F3F8FF;
-    border-radius: 16px;
-
-    .lfinfo {
-      position: relative;
-      width: 580px;
-      height: 390px;
 
-      .img {
-        width: 100%;
-        height: 100%;
-        border-radius: 16px;
+    .img {
+      width: 100%;
+      height: 100%;
+      border-radius: 16px;
+    }
+
+    .timesale {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 56px;
+      z-index: 9;
+      border-radius: 16px 16px 0 0;
+      background-color: rgb(0, 0, 0, 0.5);
+      line-height: 0;
+
+      .tmbox {
+        margin-left: auto;
+        padding-right: 18px;
       }
 
-      .timesale {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 56px;
-        z-index: 9;
-        border-radius: 16px 16px 0 0;
-        background-color: rgb(0, 0, 0, .5);
-        line-height: 0;
-
-        .tmbox {
-          margin-left: auto;
-          padding-right: 18px;
-        }
-
-        .tmtxt {
-          font-size: 14px;
-          color: #fff;
-          padding-left: 14px;
-        }
+      .tmtxt {
+        font-size: 14px;
+        color: #fff;
+        padding-left: 14px;
       }
+    }
 
-      .icoclock {
-        margin: 2px 4px 0 18px;
-      }
+    .icoclock {
+      margin: 2px 4px 0 18px;
+    }
 
-      ::v-deep .dateFormat {
-        color: #fff;
+    ::v-deep .dateFormat {
+      color: #fff;
 
-        em {
-          color: #fff;
-        }
+      em {
+        color: #fff;
+      }
 
-        big {
-          color: #ffa600
-        }
+      big {
+        color: #ffa600;
       }
     }
+  }
 
-    .rtinfo {
-      width: 620px;
-      padding: 22px 24px 14px 24px;
-      line-height: 1;
+  .rtinfo {
+    width: 620px;
+    padding: 22px 24px 14px 24px;
+    line-height: 1;
 
-      .til {
-        font-size: 24px;
-        padding-bottom: 20px;
-        line-height: 32px;
+    .til {
+      font-size: 24px;
+      padding-bottom: 20px;
+      line-height: 32px;
 
-        i {
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: 8px;
-          color: #fff;
-          font-size: 12px;
-          padding: 0 10px;
-          width: 56px;
-          height: 24px;
-          line-height: 24px;
-          white-space: nowrap;
-          background: linear-gradient(90deg, #00B8FE 0%, #0082FC 100%);
-          border-radius: 12px;
-        }
+      i {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 8px;
+        color: #fff;
+        font-size: 12px;
+        padding: 0 10px;
+        width: 56px;
+        height: 24px;
+        line-height: 24px;
+        white-space: nowrap;
+        background: linear-gradient(90deg, #00b8fe 0%, #0082fc 100%);
+        border-radius: 12px;
       }
+    }
 
-      .ulinfo {
+    .ulinfo {
+      li {
+        padding-bottom: 18px;
+        font-size: 16px;
 
-        li {
-          padding-bottom: 18px;
-          font-size: 16px;
+        &.nopb {
+          padding-bottom: 0;
+        }
 
-          &.nopb {
-            padding-bottom: 0;
+        &.price {
+          .saleprice {
+            font-size: 32px;
           }
 
-          &.price {
-            .saleprice {
-              font-size: 32px;
-            }
-
-            del {
-              margin-left: 8px;
-              color: #B3C1D3;
-              font-size: 18px;
-            }
-
-            .free {
-              font-size: 24px;
-            }
+          del {
+            margin-left: 8px;
+            color: #b3c1d3;
+            font-size: 18px;
           }
 
-          .fxweixin {
-            cursor: pointer;
-            margin-left: 14px;
-
-            &:hover {
-              color: #28C346;
-            }
+          .free {
+            font-size: 24px;
           }
+        }
 
-          .fxurl {
-            cursor: pointer;
+        .fxweixin {
+          cursor: pointer;
+          margin-left: 14px;
 
-            &:hover {
-              color: #409EFF;
-            }
+          &:hover {
+            color: #28c346;
           }
-
-
         }
 
+        .fxurl {
+          cursor: pointer;
 
+          &:hover {
+            color: #409eff;
+          }
+        }
       }
+    }
 
-      .plbtn {
-        letter-spacing: 4px;
-        margin-top: 6px;
-        display: block;
-        color: #fff;
-        text-align: center;
-        font-size: 20px;
-        width: 360px;
-        height: 58px;
-        line-height: 58px;
-        background: linear-gradient(270deg, #FF7C6B 0%, #FF4B72 100%);
-        border-radius: 8px;
-      }
-
-      .plbtn2 {
-        letter-spacing: 4px;
-        margin-top: 6px;
-        display: block;
-        text-align: center;
-        font-size: 20px;
-        width: 360px;
-        height: 58px;
-        line-height: 58px;
-        background: #D2DCE7;
-        color: #7E8FA3;
-        border-radius: 8px;
-      }
+    .plbtn {
+      letter-spacing: 4px;
+      margin-top: 6px;
+      display: block;
+      color: #fff;
+      text-align: center;
+      font-size: 20px;
+      width: 360px;
+      height: 58px;
+      line-height: 58px;
+      background: linear-gradient(270deg, #ff7c6b 0%, #ff4b72 100%);
+      border-radius: 8px;
     }
-  }
 
-  .plbtn2 {
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    background: #D2DCE7;
-    color: #7E8FA3;
-    border-radius: 8px;
+    .plbtn2 {
+      letter-spacing: 4px;
+      margin-top: 6px;
+      display: block;
+      text-align: center;
+      font-size: 20px;
+      width: 360px;
+      height: 58px;
+      line-height: 58px;
+      background: #d2dce7;
+      color: #7e8fa3;
+      border-radius: 8px;
+    }
   }
-
-  .jianjie {
-    word-wrap: break-word;
-
-    .info {
-      padding-left: 24px;
-      line-height: 26px;
-
-      img {
-        max-width: 100% !important;
-        height: auto !important;
-      }
+}
+
+.plbtn2 {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  background: #d2dce7;
+  color: #7e8fa3;
+  border-radius: 8px;
+}
+
+.jianjie {
+  word-wrap: break-word;
+
+  .info {
+    padding-left: 24px;
+    line-height: 26px;
+
+    img {
+      max-width: 100% !important;
+      height: auto !important;
     }
   }
-
-  .jianjie>>>img {
-    max-width: 100% !important;
-    height: auto !important;
+}
+
+.jianjie >>> img {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+.btile {
+  padding: 0 18px;
+  height: 40px;
+  background: #f3f8ff;
+  border-radius: 8px;
+  margin-top: 40px;
+
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
   }
+}
 
-  .btile {
-    padding: 0 18px;
-    height: 40px;
-    background: #F3F8FF;
-    border-radius: 8px;
-    margin-top: 40px;
+.looplist {
+  margin-top: 24px;
+
+  .otile {
+    padding: 0 18px 12px 24px;
+    border-bottom: solid 1px #ceddf2;
 
     h2 {
       font-size: 18px;
       font-weight: 600;
     }
-  }
 
-  .looplist {
-    margin-top: 24px;
+    span {
+      margin-left: 18px;
+      font-size: 14px;
+      color: #7e8fa3;
+    }
+  }
 
-    .otile {
-      padding: 0 18px 12px 24px;
-      border-bottom: solid 1px #CEDDF2;
+  .novideo {
+    padding: 18px 0 0 24px;
+    font-size: 16px;
+  }
 
-      h2 {
-        font-size: 18px;
-        font-weight: 600;
-      }
+  .vlist {
+    .item {
+      border-bottom: solid 1px #ceddf2;
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 24px;
 
-      span {
-        margin-left: 18px;
-        font-size: 14px;
-        color: #7E8FA3;
+      &.last {
+        border-bottom: none;
       }
-    }
-
-    .novideo {
-      padding: 18px 0 0 24px;
-      font-size: 16px;
-    }
 
-    .vlist {
-      .item {
-        border-bottom: solid 1px #CEDDF2;
-        font-size: 14px;
+      .a-play {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-left: 24px;
-
-        &.last {
-          border-bottom: none;
-        }
-
-
-        .a-play {
-          display: flex;
-          align-items: center;
-          width: 100%;
-          padding: 20px 0;
-          border-radius: 6px;
-          transition: all .3s;
+        width: 100%;
+        padding: 20px 0;
+        border-radius: 6px;
+        transition: all 0.3s;
 
-          &:hover {
-            padding: 20px 10px;
-            background-color: #F3F8FF;
-          }
+        &:hover {
+          padding: 20px 10px;
+          background-color: #f3f8ff;
         }
+      }
 
-        .a-play:hover .icon-bofang2 {
-          color: #0082fc;
-        }
+      .a-play:hover .icon-bofang2 {
+        color: #0082fc;
+      }
 
-        .icon-bofang2 {
-          font-size: 14px;
-          color: #B3C1D3;
-          margin-right: 12px;
-          margin-top: 2px;
-        }
+      .icon-bofang2 {
+        font-size: 14px;
+        color: #b3c1d3;
+        margin-right: 12px;
+        margin-top: 2px;
+      }
 
-        .status_1,
-        .status_2,
-        .status_3 {
-          padding-right: 14px;
-        }
+      .status_1,
+      .status_2,
+      .status_3 {
+        padding-right: 14px;
+      }
 
-        .status_1 {
-          color: #FF3C23;
-        }
+      .status_1 {
+        color: #ff3c23;
+      }
 
-        .status_2 {
-          color: #67C23A;
-        }
+      .status_2 {
+        color: #67c23a;
+      }
 
-        .status_3 {
-          color: #0082fc;
-        }
+      .status_3 {
+        color: #0082fc;
+      }
 
-        .progress {
-          margin-left: 14px;
-          width: 100px;
-          position: relative;
+      .progress {
+        margin-left: 14px;
+        width: 100px;
+        position: relative;
 
+        span {
+          text-align: center;
+          position: absolute;
+          width: 40px;
+          left: 0;
+          font-size: 12px;
+          color: #fff;
+          margin-top: -30px;
+          margin-left: -22px;
+          background: #0082fc;
+          border-radius: 3px;
+          padding: 1px 2px;
+          transition: all 0.6s;
 
-          span {
-            text-align: center;
+          i {
             position: absolute;
-            width: 40px;
-            left: 0;
-            font-size: 12px;
-            color: #fff;
-            margin-top: -30px;
-            margin-left: -22px;
-            background: #0082fc;
-            border-radius: 3px;
-            padding: 1px 2px;
-            transition: all .6s;
-
-            i {
-              position: absolute;
-              color: #0082fc;
-              bottom: -8px;
-              left: 15px;
-            }
+            color: #0082fc;
+            bottom: -8px;
+            left: 15px;
           }
-
         }
+      }
 
-        .time {
-          margin-left: auto;
-          color: #7E8FA3;
-        }
-
-
-
-
+      .time {
+        margin-left: auto;
+        color: #7e8fa3;
       }
     }
   }
+}
 
-  .datalist {
-    border-radius: 8px;
-    border: 1px solid #CEDDF2;
-    padding: 14px 0;
-    margin-top: 16px;
+.datalist {
+  border-radius: 8px;
+  border: 1px solid #ceddf2;
+  padding: 14px 0;
+  margin-top: 16px;
 
-    .item {
+  .item {
+    transition: all 0.3s;
+    margin: 0 14px;
+    border-radius: 6px;
+    padding: 8px 16px 8px 10px;
 
-      transition: all .3s;
-      margin: 0 14px;
-      border-radius: 6px;
-      padding: 8px 16px 8px 10px;
-
-      &:hover {
-        color: #0082fc;
-        background-color: #F3F8FF;
-      }
-
-      .zip {
-        display: inline-block;
-        background: url('~@/assets/class/zip.png');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        height: 32px;
-        width: 36px;
-        margin-right: 12px;
-      }
+    &:hover {
+      color: #0082fc;
+      background-color: #f3f8ff;
+    }
 
+    .zip {
+      display: inline-block;
+      background: url("~@/assets/class/zip.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      height: 32px;
+      width: 36px;
+      margin-right: 12px;
     }
   }
+}
+
+/* 右侧 */
+.rtbox {
+  h2,
+  h3 {
+    font-weight: 600;
+    font-size: 18px;
+    padding-bottom: 14px;
+  }
 
+  h3 {
+    padding-top: 14px;
+  }
 
-  /* 右侧 */
-  .rtbox {
+  .info {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
 
-    h2,
-    h3 {
-      font-weight: 600;
-      font-size: 18px;
+    li {
+      font-size: 14px;
+      width: 50%;
       padding-bottom: 14px;
     }
+  }
 
-    h3 {
-      padding-top: 14px;
+  .know {
+    li {
+      padding-bottom: 16px;
+      font-size: 14px;
     }
+  }
+}
 
-    .info {
-      display: flex;
-      justify-content: flex-start;
-      flex-wrap: wrap;
+.bbom {
+  padding-bottom: 14px;
+  border-bottom: 1px solid #ceddf2;
+  margin-bottom: 10px;
+}
 
-      li {
-        font-size: 14px;
-        width: 50%;
-        padding-bottom: 14px;
-      }
-    }
+.joblist {
+  li {
+    width: 110%;
+    margin-left: -15px;
+    line-height: 22px;
 
-    .know {
-      li {
-        padding-bottom: 16px;
-        font-size: 14px;
-      }
+    h5 {
+      font-size: 14px;
     }
-  }
-
-  .bbom {
-    padding-bottom: 14px;
-    border-bottom: 1px solid #CEDDF2;
-    margin-bottom: 10px;
-  }
 
-  .joblist {
-    li {
-      width: 110%;
-      margin-left: -15px;
-      line-height: 22px;
+    a {
+      border-radius: 4px;
+      color: #333;
+      display: block;
+      padding: 14px 14px 14px 10px;
+    }
 
-      h5 {
-        font-size: 14px;
-      }
+    a:hover {
+      background-color: #e6f7ff;
+    }
 
-      a {
-        border-radius: 4px;
-        color: #333;
-        display: block;
-        padding: 14px 14px 14px 10px;
-      }
+    .jinfo {
+      font-size: 14px;
 
-      a:hover {
-        background-color: #E6F7FF;
+      span {
+        min-width: 140px;
+        padding-left: 6px;
       }
 
-      .jinfo {
-        font-size: 14px;
-
-        span {
-          min-width: 140px;
-          padding-left: 6px;
-        }
-
-        p {
-          color: #FF6029;
-        }
+      p {
+        color: #ff6029;
       }
     }
   }
+}
 
-  .student-box {
-    overflow: hidden;
-    padding-top: 8px;
+.student-box {
+  overflow: hidden;
+  padding-top: 8px;
 
-    .dbox {
-      width: 112%;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    li {
-      width: 32px;
-      height: 32px;
-      margin-right: 20px;
-      margin-bottom: 20px;
-
-      &.num {
-        text-align: center;
-        width: 84px;
-        height: auto;
-        padding: 5px 0;
-        border-radius: 20px;
-        border: 1px solid #CEDDF2;
-        font-size: 14px;
-        margin-right: 0px !important;
-        overflow: hidden;
-      }
-    }
+  .dbox {
+    width: 112%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
 
-    .usera {
-      display: inline-block;
+  li {
+    width: 32px;
+    height: 32px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+
+    &.num {
+      text-align: center;
+      width: 84px;
+      height: auto;
+      padding: 5px 0;
+      border-radius: 20px;
+      border: 1px solid #ceddf2;
+      font-size: 14px;
+      margin-right: 0px !important;
+      overflow: hidden;
     }
-
-    .img {
-      border-radius: 100px;
-      width: 32px;
-      height: 32px;
-    }
-
-
   }
 
-  .hotvideo {
-    .img {
-      width: 120px;
-      height: 80px;
-      border-radius: 4px;
-    }
+  .usera {
+    display: inline-block;
+  }
 
-    li {
-      width: 318px;
-      margin-left: -10px;
+  .img {
+    border-radius: 100px;
+    width: 32px;
+    height: 32px;
+  }
+}
 
-      a.active {
-        color: #333;
-      }
+.hotvideo {
+  .img {
+    width: 120px;
+    height: 80px;
+    border-radius: 4px;
+  }
 
-      a {
-        padding: 10px 14px 10px 10px;
-        border-radius: 4px;
+  li {
+    width: 318px;
+    margin-left: -10px;
 
-        &:hover {
-          background-color: #E6F7FF;
+    a.active {
+      color: #333;
+    }
 
-          .til {
-            color: #0082fc;
-          }
-        }
+    a {
+      padding: 10px 14px 10px 10px;
+      border-radius: 4px;
 
-        .num {
-          color: #333;
-        }
+      &:hover {
+        background-color: #e6f7ff;
 
-        del {
-          color: #B3C1D3;
-          font-size: 12px;
-          margin-left: 8px;
+        .til {
+          color: #0082fc;
         }
       }
-    }
 
-    .info {
-      width: 160px;
-    }
+      .num {
+        color: #333;
+      }
 
-    .prunm {
-      margin-top: auto;
+      del {
+        color: #b3c1d3;
+        font-size: 12px;
+        margin-left: 8px;
+      }
     }
   }
 
-  /* 评论 */
-  ::v-deep .el-rate__icon {
-    font-size: 24px;
+  .info {
+    width: 160px;
   }
 
-  .comment_box {
-    margin-top: 16px;
+  .prunm {
+    margin-top: auto;
+  }
+}
 
-    .list {
+/* 评论 */
+::v-deep .el-rate__icon {
+  font-size: 24px;
+}
 
-      .item {
-        padding: 16px 16px;
-        border-top: 1px solid #CEDDF2;
+.comment_box {
+  margin-top: 16px;
 
-        .star {
-          margin-left: -3px;
-          padding-top: 2px;
+  .list {
+    .item {
+      padding: 16px 16px;
+      border-top: 1px solid #ceddf2;
 
-          i {
-            color: #FFC54B;
-          }
-        }
+      .star {
+        margin-left: -3px;
+        padding-top: 2px;
 
-        .msg {
-          padding: 10px 0 4px 0;
+        i {
+          color: #ffc54b;
         }
       }
 
+      .msg {
+        padding: 10px 0 4px 0;
+      }
     }
   }
+}
 
-  /* 订单弹出层 */
-  .dia_cpinfo_box {
-    margin-bottom: 10px;
-    padding: 16px 28px;
-    background-color: #F3F8FF;
-    border-radius: 8px;
+/* 订单弹出层 */
+.dia_cpinfo_box {
+  margin-bottom: 10px;
+  padding: 16px 28px;
+  background-color: #f3f8ff;
+  border-radius: 8px;
 
-    .cp_flex {
-      display: flex;
-    }
+  .cp_flex {
+    display: flex;
+  }
 
-    .til {
-      font-size: 18px;
-      padding-bottom: 20px;
-      line-height: 32px;
+  .til {
+    font-size: 18px;
+    padding-bottom: 20px;
+    line-height: 32px;
 
-      i {
-        display: inline-block;
-        vertical-align: middle;
-        margin-left: 8px;
-        color: #fff;
-        font-size: 12px;
-        padding: 0 10px;
-        width: 56px;
-        height: 24px;
-        line-height: 24px;
-        white-space: nowrap;
-        background: linear-gradient(90deg, #00B8FE 0%, #0082FC 100%);
-        border-radius: 12px;
-      }
-    }
-
-    .dia_cptag {
+    i {
       display: inline-block;
+      vertical-align: middle;
+      margin-left: 8px;
       color: #fff;
       font-size: 12px;
-      background: linear-gradient(139deg, #1fd9df 0%, #0ea9f0 89%);
-      border-radius: 2px;
-      padding: 3px 6px;
-      margin-left: 6px;
-      vertical-align: middle;
-    }
-
-    .dia_cp_cover {
-      width: 160px;
-      height: 100px;
-      margin-right: 18px;
-      border-radius: 5px;
-    }
-
-    .dia_cpinfo_price {
-      margin-top: auto;
-    }
-
-    .dia_cpinfo_rt {
-      margin-top: 4px;
+      padding: 0 10px;
+      width: 56px;
+      height: 24px;
+      line-height: 24px;
+      white-space: nowrap;
+      background: linear-gradient(90deg, #00b8fe 0%, #0082fc 100%);
+      border-radius: 12px;
     }
   }
 
-  /* 优惠券列表 */
-  .couponBox {
-
-    image-rendering: -webkit-optimize-contrast;
-    margin-top: 16px;
-
-    .cpType_0 {
-      background-image: url('~@/assets/img/coupon_shop.png');
-    }
-
-    .cpType_1 {
-      background-image: url('~@/assets/img/coupon_video.png');
-    }
-
-    .cpType_2 {
-      background-image: url('~@/assets/img/coupon_class.png');
-    }
-
-    .cpType_3 {
-      background-image: url('~@/assets/img/coupon_certification.png');
-    }
-
-    .couponItem {
-      margin-right: 12px;
-      cursor: pointer;
-
-      .lfbox {
-        display: flex;
-        justify-content: space-around;
-        flex-direction: column;
-        width: 170px;
-        padding: 10px 20px;
-        box-sizing: border-box;
-      }
-
-      .cpTil {
-        line-height: 16px;
-      }
-
-      .cp_money {
-        display: flex;
-        align-items: center;
-      }
-
-      .cp_money span {
-        font-size: 16px;
-        padding-right: 2px;
-      }
-
-      .cp_money i {
-        font-size: 22px;
-      }
-
-      .couponBg {
-        width: 216px;
-        height: 114px;
-        background-size: 100% auto;
-        background-repeat: no-repeat;
-        image-rendering: -webkit-optimize-contrast;
-        color: #fff;
-      }
-
-      .mkopacity {
-        display: flex;
-        justify-content: space-between;
-        width: 216px;
-        height: 114px;
-        image-rendering: -webkit-optimize-contrast;
-      }
-
-      .rtbox {
-        display: flex;
-        justify-content: space-around;
-        flex-direction: column;
-        align-items: center;
-        flex: 1;
-      }
+  .dia_cptag {
+    display: inline-block;
+    color: #fff;
+    font-size: 12px;
+    background: linear-gradient(139deg, #1fd9df 0%, #0ea9f0 89%);
+    border-radius: 2px;
+    padding: 3px 6px;
+    margin-left: 6px;
+    vertical-align: middle;
+  }
 
-      .right_icon {
-        background: #fff;
-        line-height: 16px;
-        border-radius: 100px;
-        height: 20px;
-        width: 20px;
-      }
+  .dia_cp_cover {
+    width: 160px;
+    height: 100px;
+    margin-right: 18px;
+    border-radius: 5px;
+  }
 
-    }
+  .dia_cpinfo_price {
+    margin-top: auto;
+  }
 
+  .dia_cpinfo_rt {
+    margin-top: 4px;
   }
+}
 
-  .addodbox {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    border-top: 1px solid #EEF3FA;
-    height: 80px;
-    padding-top: 14px;
+/* 优惠券列表 */
+.couponBox {
+  image-rendering: -webkit-optimize-contrast;
+  margin-top: 16px;
 
-    .mn-txt-box {
-      margin-right: 30px;
-    }
+  .cpType_0 {
+    background-image: url("~@/assets/img/coupon_shop.png");
+  }
 
-    .mn-txt-box .mn-nb {
-      font-size: 30px;
-      color: #FF4D50;
-    }
+  .cpType_1 {
+    background-image: url("~@/assets/img/coupon_video.png");
+  }
 
+  .cpType_2 {
+    background-image: url("~@/assets/img/coupon_class.png");
   }
 
-  .select_cp {
-    .icon-correct {
-      background: none;
-      font-size: 20px;
-      z-index: 999;
-      color: #0082fc;
-    }
+  .cpType_3 {
+    background-image: url("~@/assets/img/coupon_certification.png");
   }
-</style>
 
-<style lang="scss" scoped>
-  ::v-deep .el-affix--fixed {
-    left: 0;
-    width: 100% !important;
-    backdrop-filter: saturate(180%) blur(20px);
-    background-color: rgba(255, 255, 255, .8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-    -moz-background-color: #fff;
-
-    .el-tabs__header {
-      width: 1200px !important;
-      margin: 0 auto;
+  .couponItem {
+    margin-right: 12px;
+    cursor: pointer;
+
+    .lfbox {
+      display: flex;
+      justify-content: space-around;
+      flex-direction: column;
+      width: 170px;
+      padding: 10px 20px;
+      box-sizing: border-box;
     }
 
-    .el-tabs__nav-wrap {
-      &::after {
-        height: 0px !important;
-      }
+    .cpTil {
+      line-height: 16px;
     }
 
-    .el-tabs__item {
-      color: #333 !important;
+    .cp_money {
+      display: flex;
+      align-items: center;
     }
 
-    .is-active {
-      color: #0082FC !important;
+    .cp_money span {
+      font-size: 16px;
+      padding-right: 2px;
     }
-  }
 
-  ::v-deep .el-tabs__header {
-    margin: 0 auto;
+    .cp_money i {
+      font-size: 22px;
+    }
 
-    .is-active {
-      color: #0082FC;
+    .couponBg {
+      width: 216px;
+      height: 114px;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      image-rendering: -webkit-optimize-contrast;
+      color: #fff;
     }
-  }
 
-  ::v-deep .fix-tabs {
-    .el-tabs__nav {
-      margin-left: 18px;
+    .mkopacity {
+      display: flex;
+      justify-content: space-between;
+      width: 216px;
+      height: 114px;
+      image-rendering: -webkit-optimize-contrast;
     }
 
-    .el-tabs__nav-wrap {
-      &::after {
-        height: 1px;
-        background-color: #CEDDF2;
-      }
+    .rtbox {
+      display: flex;
+      justify-content: space-around;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
     }
 
-    .el-tabs__item {
-      color: #617288;
-      font-size: 20px;
-      height: 52px;
-      line-height: 52px;
+    .right_icon {
+      background: #fff;
+      line-height: 16px;
+      border-radius: 100px;
+      height: 20px;
+      width: 20px;
     }
   }
+}
+
+.addodbox {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px solid #eef3fa;
+  height: 80px;
+  padding-top: 14px;
+
+  .mn-txt-box {
+    margin-right: 30px;
+  }
 
-  ::v-deep .el-affix--fixed {
-    box-shadow: 0px 3px 8px -2px rgba(179, 193, 211, 0.3);
+  .mn-txt-box .mn-nb {
+    font-size: 30px;
+    color: #ff4d50;
+  }
+}
+
+.select_cp {
+  .icon-correct {
+    background: none;
+    font-size: 20px;
+    z-index: 999;
+    color: #0082fc;
+  }
+}
+</style>
 
+<style lang="scss" scoped>
+::v-deep .el-affix--fixed {
+  left: 0;
+  width: 100% !important;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  -moz-background-color: #fff;
+
+  .el-tabs__header {
+    width: 1200px !important;
+    margin: 0 auto;
   }
 
-  .collection {
-    font-size: 46px;
-    margin-left: 20px;
-    margin-top: 8px;
-    cursor: pointer;
+  .el-tabs__nav-wrap {
+    &::after {
+      height: 0px !important;
+    }
   }
 
-  .collection2 {
-    color: #D3DCE9;
+  .el-tabs__item {
+    color: #333 !important;
   }
 
-  .collection1 {
-    color: #ffc013;
+  .is-active {
+    color: #0082fc !important;
   }
+}
 
-  /* 订单tab */
-  ::v-deep .cp-tabs {
+::v-deep .el-tabs__header {
+  margin: 0 auto;
 
-    .el-tabs__item {
-      color: #617288;
-      font-size: 16px;
-      height: 40px;
-      line-height: 40px;
-    }
+  .is-active {
+    color: #0082fc;
+  }
+}
 
-    .is-active {
-      color: #0082fc;
-    }
+::v-deep .fix-tabs {
+  .el-tabs__nav {
+    margin-left: 18px;
+  }
 
-    .el-tabs__header {
-      background-color: #F3F8FF;
-      border-radius: 5px;
+  .el-tabs__nav-wrap {
+    &::after {
+      height: 1px;
+      background-color: #ceddf2;
     }
+  }
 
-    .el-tabs__active-bar {
-      width: 50px !important;
-      left: 15px;
-    }
+  .el-tabs__item {
+    color: #617288;
+    font-size: 20px;
+    height: 52px;
+    line-height: 52px;
+  }
+}
+
+::v-deep .el-affix--fixed {
+  box-shadow: 0px 3px 8px -2px rgba(179, 193, 211, 0.3);
+}
+
+.collection {
+  font-size: 46px;
+  margin-left: 20px;
+  margin-top: 8px;
+  cursor: pointer;
+}
+
+.collection2 {
+  color: #d3dce9;
+}
+
+.collection1 {
+  color: #ffc013;
+}
+
+/* 订单tab */
+::v-deep .cp-tabs {
+  .el-tabs__item {
+    color: #617288;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+  }
 
-    .el-tabs__nav-wrap::after {
-      display: none;
-    }
+  .is-active {
+    color: #0082fc;
+  }
 
-    .el-tabs__nav {
-      margin-left: 20px;
-    }
+  .el-tabs__header {
+    background-color: #f3f8ff;
+    border-radius: 5px;
+  }
 
+  .el-tabs__active-bar {
+    width: 50px !important;
+    left: 15px;
   }
 
-  ::v-deep .el-scrollbar__bar.is-horizontal {
-    height: 8px;
+  .el-tabs__nav-wrap::after {
+    display: none;
   }
 
-  ::v-deep .el-scrollbar__thumb {
-    background-color: #8496ab;
+  .el-tabs__nav {
+    margin-left: 20px;
   }
+}
+
+::v-deep .el-scrollbar__bar.is-horizontal {
+  height: 8px;
+}
+
+::v-deep .el-scrollbar__thumb {
+  background-color: #8496ab;
+}
 </style>
 <style>
-  .el-popover.el-popper {
-    line-height: 1;
-  }
+.el-popover.el-popper {
+  line-height: 1;
+}
 </style>
 
 <style lang="scss">
-  /*响应式-移动端*/
-  @import '~@/assets/css/m.css';
+/*响应式-移动端*/
+@import "~@/assets/css/m.css";
 
-  @media screen and (max-width: 1200px) {
+@media screen and (max-width: 1200px) {
+  html,
+  body {
+    background-color: #fff;
+  }
 
-    html,
-    body {
-      background-color: #fff;
-    }
+  .m_box {
+    padding: 0 20px;
+  }
+
+  .basic {
+    height: auto !important;
+    min-height: 240px;
 
-    .m_box {
-      padding: 0 20px;
+    .rt_ske_m {
+      width: 86% !important;
+      max-height: 250px;
+      padding: 12px 20px 14px 20px !important;
+      overflow: hidden;
     }
 
-    .basic {
-      height: auto !important;
-      min-height: 240px;
+    .lf_ske_m {
+      width: auto !important;
 
-      .rt_ske_m {
-        width: 86% !important;
-        max-height: 250px;
-        padding: 12px 20px 14px 20px !important;
-        overflow: hidden;
+      .lfinfo {
+        width: auto !important;
+
+        .img {
+          min-height: 260px;
+        }
       }
+    }
 
-      .lf_ske_m {
-        width: auto !important;
+    .lfinfo {
+      height: auto !important;
+    }
 
-        .lfinfo {
-          width: auto !important;
+    .rtinfo {
+      padding-top: 12px !important;
+      padding-bottom: 20px !important;
 
-          .img {
-            min-height: 260px;
-          }
-        }
+      .plbtn_p_m {
+        width: 100%;
       }
 
-      .lfinfo {
-        height: auto !important;
+      .til {
+        font-size: 16px !important;
+        font-weight: 700;
+        padding-bottom: 12px !important;
+        height: 36px;
+        overflow: hidden;
+        margin-bottom: 10px;
+      }
 
+      .plbtn {
+        width: 80% !important;
+        min-width: 120px;
+        height: 40px !important;
+        line-height: 40px !important;
+        font-size: 16px !important;
       }
 
-      .rtinfo {
-        padding-top: 12px !important;
-        padding-bottom: 20px !important;
+      .plbtn_m {
+        width: 80% !important;
+        min-width: 120px;
+        height: 40px !important;
+        line-height: 40px !important;
+        font-size: 16px !important;
+      }
 
-        .plbtn_p_m {
-          width: 100%;
-        }
+      li {
+        font-size: 14px !important;
+        padding-bottom: 16px !important;
+      }
 
-        .til {
-          font-size: 16px !important;
-          font-weight: 700;
-          padding-bottom: 12px !important;
-          height: 36px;
-          overflow: hidden;
-          margin-bottom: 10px;
+      .price {
+        .f24 {
+          font-size: 18px;
         }
+      }
 
-        .plbtn {
-          width: 80% !important;
-          min-width: 120px;
-          height: 40px !important;
-          line-height: 40px !important;
-          font-size: 16px !important;
-        }
+      .collection {
+        font-size: 40px !important;
+      }
+    }
+  }
 
-        .plbtn_m {
-          width: 80% !important;
-          min-width: 120px;
-          height: 40px !important;
-          line-height: 40px !important;
-          font-size: 16px !important;
-        }
+  .rt-box {
+    display: none;
+  }
 
-        li {
-          font-size: 14px !important;
-          padding-bottom: 16px !important;
-        }
+  .lf-box {
+    width: 100% !important;
+  }
 
-        .price {
-          .f24 {
-            font-size: 18px;
-          }
-        }
+  ::v-deep .fix-tabs {
+    .el-tabs__nav {
+      margin-left: 18px;
+    }
 
-        .collection {
-          font-size: 40px !important;
-        }
+    .el-tabs__nav-wrap {
+      &::after {
+        height: 1px;
+        background-color: #ceddf2;
       }
     }
+  }
 
-    .rt-box {
-      display: none;
-    }
+  .el-tabs__item {
+    font-size: 16px !important;
+    height: 42px;
+    line-height: 42px;
+  }
+}
+</style>
 
-    .lf-box {
+<style lang="scss">
+@media screen and (max-width: 700px) {
+  .basic {
+    display: block !important;
+
+    .lfinfo {
       width: 100% !important;
     }
 
-    ::v-deep .fix-tabs {
-      .el-tabs__nav {
-        margin-left: 18px;
-      }
+    .rtinfo {
+      width: 100% !important;
 
-      .el-tabs__nav-wrap {
-        &::after {
-          height: 1px;
-          background-color: #CEDDF2;
-        }
+      .til {
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
 
-    .el-tabs__item {
-      font-size: 16px !important;
-      height: 42px;
-      line-height: 42px;
+    .rt_ske_m {
+      width: 68% !important;
+      max-height: 240px !important;
     }
-
   }
-</style>
-
-<style lang="scss">
-  @media screen and (max-width: 700px) {
-    .basic {
-      display: block !important;
-
-      .lfinfo {
-        width: 100% !important;
 
-      }
+  .el-tabs__item {
+    padding: 0 10px !important;
+  }
 
-      .rtinfo {
-        width: 100% !important;
+  /* 附件 */
+  .dlist {
+    .item {
+      .til {
+        width: 65%;
 
-        .til {
+        .f_title {
           display: inline-block;
-          width: 100%;
+          width: 80%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
       }
 
-      .rt_ske_m {
-        width: 68% !important;
-        max-height: 240px !important;
+      .el-btn {
+        padding: 6px 10px !important;
       }
-
-    }
-
-    .el-tabs__item {
-      padding: 0 10px !important;
     }
+  }
 
-    /* 附件 */
-    .dlist {
-      .item {
-        .til {
-          width: 65%;
-
-          .f_title {
-            display: inline-block;
-            width: 80%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-
-        .el-btn {
-          padding: 6px 10px !important;
+  /* 视频列表 */
+  .vlist {
+    .item {
+      .a-play {
+        .status_2 {
+          min-width: 50px;
         }
       }
-    }
-
-    /* 视频列表 */
-    .vlist {
-      .item {
-        .a-play {
-          .status_2 {
-            min-width: 50px;
-          }
-        }
 
-        .progress {
-          margin-right: 14px;
-        }
+      .progress {
+        margin-right: 14px;
       }
     }
+  }
 
-    /* 购买弹窗 */
-    .el-dialog{
-      width: 95% !important;
-      .el-dialog__body{
-        padding: 2px  12px  12px 12px !important;
-      }
-      .pay_order_btn_m{
-        width: 40% !important;
-      }
-      .upprice{
-        font-size: 26px !important;
-      }
-      .dia_cpinfo_box{
-        padding: 10px !important;
-      }
+  /* 购买弹窗 */
+  .el-dialog {
+    width: 95% !important;
+    .el-dialog__body {
+      padding: 2px 12px 12px 12px !important;
+    }
+    .pay_order_btn_m {
+      width: 40% !important;
+    }
+    .upprice {
+      font-size: 26px !important;
+    }
+    .dia_cpinfo_box {
+      padding: 10px !important;
     }
-
   }
+}
 </style>