mp3数据接入页面修改

src/pages/resourceMovReview.vue

@@ -1,62 +1,117 @@
 <template>
-  <commonHeader/>
+  <commonHeader />
   <div class="allPageWidthBg movPage">
     <div class="withShadow">
       <div class="likeBread">
-        <div class="likeBread_left">{{sourceDetailData.kf_name}}</div>
+        <div class="likeBread_left">{{ sourceDetailData.kf_name }}</div>
         <div class="likeBread_right">
-          <span>课程资源</span>-
-          <span>查看详情</span>-
-          <span>{{sourceDetailData.kf_name}}</span>
+          <span>课程资源</span>- <span>查看详情</span>-
+          <span>{{ sourceDetailData.kf_name }}</span>
         </div>
       </div>
     </div>
     <div class="common1280 vedioMain">
       <div class="vedio_titel">
-        <div class="vedio_titel_left">{{sourceDetailData.kf_name}}</div>
-        <div class="vedio_titel_right"> <img src="../assets/kczy/shareIcon.png" alt=""> 分享</div>
+        <div class="vedio_titel_left">{{ sourceDetailData.kf_name }}</div>
+        <div class="vedio_titel_right" @mouseenter="showTrue" @mouseleave="showFalse">
+          <img src="../assets/kczy/shareIcon.png" alt="" /> 分享
+          <div class="qrcodeAll" v-if="shareSwitch" >
+            <p class="bigTit">呼唤小伙伴们前来围观吧</p>
+            <div class="shareCover">
+              <div class="sinaShare" @click="sinaWeiBo">
+                <img src="../assets/zbktwlzb/weibo.png" alt="" />
+              </div>
+              <div class="QQShare" @click="shareQQ">
+                <img src="../assets/zbktwlzb/QQ.png" alt="" />
+              </div>
+              <div class="zoneShare" @click="qZone">
+                <img src="../assets/zbktwlzb/QQzone.png" alt="" />
+              </div>
+              <div class="wechatShare">
+                <div class="mainInQR">
+                  <qrcode-vue :value="shareLink" :size="size" level="H" />
+                </div>
+                <p class="textS">微信扫码分享</p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="vedioMainContent">
         <div class="vedioMainContent_left">
           <div class="vedioMainContent_left_top">
             <div class="nicBaseInfo_avator">
-              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
-              <!-- <span>头像</span> -->
+              <el-avatar
+                :src="userInfoData.user_avatar"
+                v-if="userInfoData.user_avatar"
+              />
+              <el-avatar
+                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                v-else
+              />
             </div>
             <div class="nicBaseInfo_text">
-              <div class="nicBaseInfo_text_top" style="height:50%">
-                <span class="fir">{{userInfoData.user_name}}</span>
-                <span class="middle"><img src="../assets/kczy/fireIcon.png" alt=""></span>
-                <span class="sec" v-if="userInfoData.ext" >{{userInfoData.ext.ue_hot}}</span>
+              <div class="nicBaseInfo_text_top" style="height: 50%">
+                <span class="fir">{{ userInfoData.user_name }}</span>
+                <span class="middle"
+                  ><img src="../assets/kczy/fireIcon.png" alt=""
+                /></span>
+                <span class="sec" v-if="userInfoData.ext">{{
+                  userInfoData.ext.ue_hot
+                }}</span>
               </div>
-              <div class="nicBaseInfo_text_bottom" style="height:50%">
+              <div class="nicBaseInfo_text_bottom" style="height: 50%">
                 <span class="markLableOne">金牌讲师</span>
                 <span class="markLableTwo">YYDS</span>
               </div>
             </div>
             <div class="nicBaseInfo_action">
-              <span  class="zan" @click="addLike">{{sourceDetailData.kf_like_num}}</span>
-              <span class="collect" @click="addCollect">{{sourceDetailData.kf_fav_num}}</span>
+              <span class="zan" @click="addLike">{{
+                sourceDetailData.kf_like_num
+              }}</span>
+              <span class="collect" @click="addCollect">{{
+                sourceDetailData.kf_fav_num
+              }}</span>
             </div>
             <div class="nicBaseInfo_forceBtn" v-show="false">
               <span>关注</span>
             </div>
           </div>
-          <div class="vedioMainContent_left_bottom" >
-            <video controls >
-               <source :src="prefixImg+sourceDetailData.kf_path" type="video/mp4">
-               <source :src="prefixImg+sourceDetailData.kf_path" type="video/ogg">
+          <div
+            class="vedioMainContent_left_bottom"
+            v-if="transIconType == 'mp4'"
+          >
+            <video controls>
+              <source
+                :src="prefixImg + sourceDetailData.kf_path"
+                type="video/mp4"
+              />
+              <source
+                :src="prefixImg + sourceDetailData.kf_path"
+                type="video/ogg"
+              />
             </video>
             <!-- <div class="assi">助教：沈老师</div> -->
-            <div class="watchingNum">浏览量：{{sourceDetailData.kf_view_num}}</div>
+            <div class="watchingNum">
+              浏览量：{{ sourceDetailData.kf_view_num }}
+            </div>
+          </div>
+          <div class="vedioMainContent_left_bottom" v-else>
+            <!-- {{prefixImg+sourceDetailData.kf_path}} -->
+            <audio controls :src="prefixImg + sourceDetailData.kf_path">
+              <!-- <source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3"> -->
+            </audio>
+            <!-- <div class="assi">助教：沈老师</div> -->
+            <div class="watchingNum">
+              浏览量：{{ sourceDetailData.kf_view_num }}
+            </div>
           </div>
-          
         </div>
         <div class="vedioMainContent_right">
           <div class="vedioMainContent_right_top" v-show="false">
             <div class="titleChapter">
               <span class="titleBorder-title">相关章节</span>
-              <span class="titleBorder-line"></span> 
+              <span class="titleBorder-line"></span>
             </div>
             <div class="detailChapter">
               <ul>
@@ -77,25 +132,42 @@
             </div>
             <div class="comList">
               <div>
-                <el-rate v-model="starsValue" :texts="['极差', '失望', '普通', '优秀', '惊艳']" show-text/>
+                <el-rate
+                  v-model="starsValue"
+                  :texts="['极差', '失望', '普通', '优秀', '惊艳']"
+                  show-text
+                />
               </div>
-              <div class="rateBtn" @click="evalua()"><button >评价</button></div>
-              <div class="allCommonList" v-if="evaluaListData && evaluaListData.length>0">
-                <div class="singleList" v-for="(item ,index) in evaluaListData" :key="index">
-                  <p>{{item.ke_user_realname}}<span>{{item.create_dateline}}</span></p>
-                  <div class="starListS"> 
-                    <img src="../assets/kczy/stars.png" v-for="(itemsec,index) in Number(item.ke_star)" :key="index" alt=""> 
+              <div class="rateBtn" @click="evalua()"><button>评价</button></div>
+              <div
+                class="allCommonList"
+                v-if="evaluaListData && evaluaListData.length > 0"
+              >
+                <div
+                  class="singleList"
+                  v-for="(item, index) in evaluaListData"
+                  :key="index"
+                >
+                  <p>
+                    {{ item.ke_user_realname
+                    }}<span>{{ item.create_dateline }}</span>
+                  </p>
+                  <div class="starListS">
+                    <img
+                      src="../assets/kczy/stars.png"
+                      v-for="(itemsec, index) in Number(item.ke_star)"
+                      :key="index"
+                      alt=""
+                    />
                   </div>
                 </div>
               </div>
 
-              <div class="NOdata" sytle="padding-top: 80px;" v-else>
-                <img src="../assets/kczy/noData4.png" alt="">
+              <div class="NOdata" style="padding-top: 40%" v-else>
+                <img src="../assets/kczy/noData4.png" alt="" />
                 <p class="NOdata_p">暂无数据~</p>
-              </div> 
-
+              </div>
             </div>
-
           </div>
         </div>
       </div>
@@ -104,208 +176,346 @@
 </template>
 
 <script>
-  import commonHeader from "@/components/header/index.vue";
-  import { courseSourceDetail,evaluaList ,evaluaAdd,userInfoDetail} from "./kczy/allApi.js";
-  import { user } from "@/store/user.js";
-  export default {
+import commonHeader from "@/components/header/index.vue";
+import {
+  courseSourceDetail,
+  evaluaList,
+  evaluaAdd,
+  userInfoDetail,
+} from "./kczy/allApi.js";
+import { user } from "@/store/user.js";
+import QrcodeVue from "qrcode.vue";
+export default {
   name: "moviePage",
-  components:{
-      commonHeader
+  components: {
+    commonHeader,
+    QrcodeVue,
   },
-    data() {
-      return {
-        starsValue:'',
-        transIconType: '',
-        transKfId: '',
-        sourceDetailData: '',
-        typeKind:'',
-        prefixImg: 'https://tyyxopenapi.bozedu.top/',
-        evaluaListData: [],
-        userInfoData:'',
-        
-      }
-    },
-    mounted() {
-      this.initData();
-      this.initEvaluaList();
-      this.initUserInfoDetail();
+  data() {
+    return {
+      starsValue: "",
+      transIconType: "",
+      transKfId: "",
+      sourceDetailData: "",
+      typeKind: "",
+      prefixImg: "https://tyyxopenapi.bozedu.top/",
+      evaluaListData: [],
+      userInfoData: "",
+      shareLink: "",
+      shareSwitch: false,
+    };
+  },
+  mounted() {
+    this.initData();
+    this.initEvaluaList();
+    this.initUserInfoDetail();
   },
   methods: {
     /**初始化数据*/
     initData() {
-        this.transIconType = this.$route.query.icon;
-        this.transKfId = this.$route.query.kfId;
-        this.transKkId = this.$route.query.kkID;
-        let transObj = {
-          token:user.token,
-          kf_id:this.transKfId
-        }
-        courseSourceDetail(transObj)
-          .then(res => {
-            if (res.code == "1") {
-              this.sourceDetailData = res.data.one_info;
-              let tempD = res.data.one_info.kf_path;
-              this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1)
-            }
-          })
-          .catch(error => { console.log(error) });
+      this.transIconType = this.$route.query.icon;
+      this.transKfId = this.$route.query.kfId;
+      this.transKkId = this.$route.query.kkID;
+      let transObj = {
+        token: user.token,
+        kf_id: this.transKfId,
+      };
+      courseSourceDetail(transObj)
+        .then((res) => {
+          if (res.code == "1") {
+            this.sourceDetailData = res.data.one_info;
+            let tempD = res.data.one_info.kf_path;
+            this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
-     /**初始化评论*/
+    /**初始化评论*/
     initEvaluaList() {
       let transObj = {
-        token:user.token,
-        kf_id:this.transKfId
-      }
+        token: user.token,
+        kf_id: this.transKfId,
+      };
       evaluaList(transObj)
-        .then(res => {
+        .then((res) => {
           if (res.code == "1") {
             this.evaluaListData = res.data.page_data;
           }
-      })
-      .catch(error => {
-        console.log(error)
-      })
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
     /**课程用户信息*/
     initUserInfoDetail() {
       let transObj = {
-        token:user.token,
-        user_id:user.user_id
-      }
+        token: user.token,
+        user_id: user.user_id,
+      };
       userInfoDetail(transObj)
-        .then(res => {
+        .then((res) => {
           if (res.code == "1") {
             this.userInfoData = res.data;
           }
-      })
-      .catch(error=>{console.log(error)})
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
     /**评价*/
     evalua() {
       let prefiexOBJ = {
         ke_star: this.starsValue,
-        ke_user_realname:user.user_realname,
+        ke_user_realname: user.user_realname,
         kk_id: this.transKkId,
-        kf_id:this.transKfId,
-      }
+        kf_id: this.transKfId,
+      };
       let transObj = {
-        token:user.token,
-        kczy_evaluate:prefiexOBJ
-      }
+        token: user.token,
+        kczy_evaluate: prefiexOBJ,
+      };
       evaluaAdd(transObj)
-      .then(res => {
-        if (res.code == "1") {
-          ElMessage({
-            message:res.msg,
-            type: 'success',
-          })
-        }
-      })
-      .catch(error=>{console.log(error)})
+        .then((res) => {
+          if (res.code == "1") {
+            ElMessage({
+              message: res.msg,
+              type: "success",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
     /**增加赞*/
     addLike() {
-      console.log("增加赞")
+      console.log("增加赞");
     },
-     /**增加收藏*/
+    /**增加收藏*/
     addCollect() {
-      console.log("增加收藏")
-     },
+      console.log("增加收藏");
     },
-  }
+    /**创建二维码*/
+    showTrue() {
+      this.shareSwitch = true;
+      //地址栏参数
+      this.shareLink = window.location.href;
+    },
+    showFalse() {
+      this.shareSwitch = false;
+    },
+    //分享大全
+    shareQQ(title, url, pic) {
+      var p = {
+        url: this.shareLink /*获取URL，可加上来自分享到QQ标识，方便统计*/,
+        desc: "来自桐乡艺校的分享" /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/,
+        title: "优质课程一起围观~" /*分享标题(可选)*/,
+        summary: "优质课程一起围观~" /*分享描述(可选)*/,
+        pics: pic /*分享图片(可选)*/,
+        flash: "" /*视频地址(可选)*/,
+        //commonClient : true, /*客户端嵌入标志*/
+        site: "桐乡艺校" /*分享来源 (可选) ，如：QQ分享*/,
+      };
+      var s = [];
+      for (var i in p) {
+        s.push(i + "=" + encodeURIComponent(p[i] || ""));
+      }
+      var target_url =
+        "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join("&");
+      window.open(target_url, "qq", "height=520, width=720");
+    },
+    qZone(title, pic) {
+      var p = {
+        url: this.shareLink,
+        showcount: "1" /*是否显示分享总数,显示：'1'，不显示：'0' */,
+        desc: "这篇文章不错,分享一下~~" /*默认分享理由(可选)*/,
+        summary: "" /*分享摘要(可选)*/,
+        title: '优质课程一起围观~' /*分享标题(可选)*/,
+        site: "桐乡艺校" /*分享来源 如：腾讯网(可选)summary*/,
+        pics: pic /*分享图片的路径(可选)*/,
+        style: "101",
+        width: 199,
+        height: 30,
+      };
+      var s = [];
+      for (var i in p) {
+        s.push(i + "=" + encodeURIComponent(p[i] || ""));
+      }
+      var target_url =
+        "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" +
+        s.join("&");
+      window.open(target_url, "qZone", "height=430, width=400");
+    },
+    weixin() {
+      var target_url =
+        "http://qr.liantu.com/api.php?text=http://test.qicheyitiao.com";
+      window.open(target_url, "weixin", "height=320, width=320");
+    },
+    sinaWeiBo(title, url, pic) {
+      var param = {
+        url: this.shareLink,
+        type: "3",
+        count: "1" /** 是否显示分享数，1显示(可选)*/,
+        appkey: "桐乡艺校" /** 您申请的应用appkey,显示分享来源(可选)*/,
+        title: "优质课程一起围观~" /** 分享的文字内容(可选，默认为所在页面的title)*/,
+        pic: pic,
+        /**分享图片的路径(可选)*/
+        ralateUid: ""
+        /**关联用户的UID，分享微博会@该用户(可选)*/,
+        rnd: new Date().valueOf(),
+      };
+      var temp = [];
+      for (var p in param) {
+        temp.push(p + "=" + encodeURIComponent(param[p] || ""));
+      }
+      var target_url ="http://service.weibo.com/share/share.php?" + temp.join("&");
+      window.open(target_url, "sinaweibo", "height=430, width=400");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @import "../styles/common_resource.scss";
-.vedio_titel{
-  display:flex;
+.vedio_titel {
+  display: flex;
   height: 40px;
   line-height: 40px;
-  .vedio_titel_left{
+  .vedio_titel_left {
     font-size: 20px;
     font-weight: 800;
     text-align: left;
     color: #000000;
   }
-  .vedio_titel_right{
+  .vedio_titel_right {
     font-size: 16px;
     font-weight: 400;
     text-align: left;
     color: #00a3ff;
     margin-left: 20px;
-    img{
-      display: inline-block!important;
-      width:16px;
+    position: relative;
+    img {
+      display: inline-block !important;
+      width: 16px;
+    }
+    .qrcodeAll {
+      position: absolute;
+      left: 10px;
+      top: 32px;
+      z-index: 14;
+      width: 408px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      padding: 10px;
+      background-color: rgb(255, 255, 255);
+      .bigTit {
+        font-size: 16px;
+        font-weight: 500;
+        text-align: center;
+        color: #000000;
+        margin-bottom:20px;
+      }
+      .shareCover {
+        display: flex;
+        .sinaShare,
+        .QQShare,
+        .zoneShare {
+          width: 20%;
+          height: 115px;
+          line-height: 115px;
+          text-align: center;
+          cursor: pointer;
+          img {
+            width: 50%;
+          }
+        }
+        .wechatShare {
+          width: 40%;
+          text-align: center;
+          cursor: pointer;
+          .mainInQR {
+            height: 100px;
+          }
+          .textS {
+            font-size: 14px;
+            font-weight: 400;
+            text-align: center;
+            color: #000000;
+          }
+        }
+      }
     }
   }
 }
-.vedioMainContent{
+.vedioMainContent {
   display: flex;
-  justify-content:space-between;
-  .vedioMainContent_left{
-    width:70%;
+  justify-content: space-between;
+  .vedioMainContent_left {
+    width: 70%;
     display: flex;
-    flex-direction:column;
-    justify-content:space-between;
-    .vedioMainContent_left_top{
+    flex-direction: column;
+    justify-content: space-between;
+    .vedioMainContent_left_top {
       display: flex;
       height: 100px;
       background: #ffffff;
       border-radius: 10px;
-      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18); 
+      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       margin-bottom: 10px;
-      justify-content:space-between;
-      .nicBaseInfo_avator{
+      justify-content: space-between;
+      .nicBaseInfo_avator {
         width: 10%;
         line-height: 100px;
         position: relative;
-        span{
-          width:77px;
+        span {
+          width: 77px;
           height: 77px;
           border-radius: 50%;
-          display:inline-block;
-          background-color: #00a3ff;
+          display: inline-block;
+          background-color: #cacaca;
           position: absolute;
           left: 50%;
           top: 50%;
           z-index: 13;
-          transform: translate(-50%,-50%);
+          transform: translate(-50%, -50%);
         }
       }
-      .nicBaseInfo_text{
+      .nicBaseInfo_text {
         width: 50%;
-        .nicBaseInfo_text_top{
+        .nicBaseInfo_text_top {
           line-height: 70px;
           display: flex;
-          span.middle{
-            display:inline-block;
-            margin-left:10px;
-            margin-right:3px;
+          span.middle {
+            display: inline-block;
+            margin-left: 10px;
+            margin-right: 3px;
             box-sizing: border-box;
-            padding-top:4%;
-            img{
-              width:19px;
+            padding-top: 4%;
+            img {
+              width: 19px;
               height: 22px;
             }
           }
-          span.fir{
+          span.fir {
             font-size: 16px;
             font-weight: 800;
             text-align: left;
             color: #000000;
           }
-          span.sec{
+          span.sec {
             font-size: 14px;
             font-weight: 400;
             text-align: left;
             color: #949494;
-            background: url('../assets/images/kczy/fireIcon1.png');
-            background-size:100% 100%;
+            background: url("../assets/images/kczy/fireIcon1.png");
+            background-size: 100% 100%;
           }
         }
-        .nicBaseInfo_text_bottom{
+        .nicBaseInfo_text_bottom {
           line-height: 30px;
-          .markLableOne{
+          .markLableOne {
             background: #190006;
             border: 1px solid #f1c342;
             border-radius: 12px;
@@ -314,10 +524,10 @@
             text-align: center;
             color: #ffffff;
             padding: 5px 8px;
-            margin-right:10px;
+            margin-right: 10px;
           }
-          .markLableTwo{
-            background: linear-gradient(90deg,#00a3ff 1%, #57c38f);
+          .markLableTwo {
+            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
             border-radius: 12px;
             font-size: 12px;
             font-weight: 400;
@@ -327,60 +537,64 @@
           }
         }
       }
-      .nicBaseInfo_action{
-        width:30%;
+      .nicBaseInfo_action {
+        width: 30%;
         line-height: 100px;
         height: 17px;
         font-size: 16px;
         font-weight: 400;
         text-align: left;
         color: #00a3ff;
-        .zan{
-          background: url('../assets/kczy/zanIcon.png') no-repeat left center;
+        .zan {
+          background: url("../assets/kczy/zanIcon.png") no-repeat left center;
           background-size: 21px 20px;
           box-sizing: border-box;
-          padding-left:25px;
+          padding-left: 25px;
         }
-        .collect{
-          background: url('../assets/kczy/collectIcon.png') no-repeat left center;
+        .collect {
+          background: url("../assets/kczy/collectIcon.png") no-repeat left
+            center;
           background-size: 21px 20px;
           box-sizing: border-box;
-          padding-left:25px;
-          margin-left:30px;
+          padding-left: 25px;
+          margin-left: 30px;
         }
       }
-      .nicBaseInfo_forceBtn{
-        width:10%;
+      .nicBaseInfo_forceBtn {
+        width: 10%;
         text-align: left;
         line-height: 100px;
-        span{
+        span {
           font-size: 16px;
           font-weight: 400;
           text-align: center;
           color: #ffffff;
-          background: rgba(0,131,197,0.80);
+          background: rgba(0, 131, 197, 0.8);
           border-radius: 6px;
-          padding:7px 20px;
+          padding: 7px 20px;
           cursor: pointer;
         }
       }
-      
     }
-    .vedioMainContent_left_bottom{
+    .vedioMainContent_left_bottom {
       height: 465px;
       background: #cee5fb;
       border-radius: 10px;
       overflow: hidden;
       position: relative;
-      video{
-        width:100%;
+      video {
+        width: 100%;
+        height: 100%;
+      }
+      audio {
+        width: 100%;
         height: 100%;
       }
-      .assi{
-        position:absolute;
-        left:0;
-        top:0;
-        z-index:13;
+      .assi {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 13;
         width: 176px;
         height: 48px;
         line-height: 48px;
@@ -391,16 +605,16 @@
         text-align: center;
         color: #00a3ff;
       }
-      .watchingNum{
-        position:absolute;
-        right:0;
-        top:0;
-        z-index:13;
+      .watchingNum {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 13;
         width: 190px;
         height: 38px;
         line-height: 38px;
-        background-color:rgba(255,255,255,0.5);
-        border-bottom-left-radius:10px;
+        background-color: rgba(255, 255, 255, 0.5);
+        border-bottom-left-radius: 10px;
         width: 166px;
         font-size: 16px;
         font-weight: 400;
@@ -408,81 +622,77 @@
         color: #ffffff;
       }
     }
-
   }
-  .vedioMainContent_right{
-    width:28%;
+  .vedioMainContent_right {
+    width: 28%;
     display: flex;
-    flex-direction:column;
-    justify-content:space-between;
-    .vedioMainContent_right_top{
+    flex-direction: column;
+    justify-content: space-between;
+    .vedioMainContent_right_top {
       width: 100%;
       height: 459px;
       background: #ffffff;
       border-radius: 12px;
-      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18); 
+      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       box-sizing: border-box;
       padding: 33px 18px;
-      .titleChapter{
+      .titleChapter {
         width: 100%;
         height: 50px;
         position: relative;
-        .titleBorder-title{
+        .titleBorder-title {
           font-size: 16px;
           font-weight: 500;
           text-align: left;
           color: #222222;
-          position:absolute;
+          position: absolute;
           left: 5px;
-          top:13%;
+          top: 13%;
           z-index: 14;
         }
-        .titleBorder-line{
+        .titleBorder-line {
           width: 72px;
           height: 6px;
           opacity: 0.2;
           background: #6c5dd3;
           border-radius: 3px;
-          position:absolute;
+          position: absolute;
           left: 0;
-          top:42%;
+          top: 42%;
           z-index: 13;
         }
-        
-
       }
-      .detailChapter{
+      .detailChapter {
         overflow: auto;
-        ul{
-          li{
+        ul {
+          li {
             width: 100%;
             height: 40px;
             line-height: 40px;
-            background:#F3FAFF;
+            background: #f3faff;
             border-radius: 16px 16px 0px 0px;
             margin-bottom: 20px;
             box-sizing: border-box;
-            padding-left:24px;
+            padding-left: 24px;
           }
         }
       }
-
     }
-    .vedioMainContent_right_bottom{
+    .vedioMainContent_right_bottom {
       width: 100%;
       min-height: 578px;
       background: #ffffff;
       border-radius: 12px;
-      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18); 
+      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
       box-sizing: border-box;
-      padding:18px;
-      .tabTitle{
-        ul{
-          display:flex;
+      padding: 18px;
+      .tabTitle {
+        ul {
+          display: flex;
           justify-content: space-between;
           box-sizing: border-box;
           padding: 0 5%;
-          li{
+          li {
             height: 32px;
             line-height: 32px;
             font-size: 16px;
@@ -491,19 +701,18 @@
             color: #a09dbb;
             cursor: pointer;
           }
-
         }
       }
-      .comList{
+      .comList {
         box-sizing: border-box;
         padding: 25px 0 0 0;
-        .rateBtn{
+        .rateBtn {
           margin-top: 20px;
-          button{
+          button {
             width: 111px;
             height: 32px;
             line-height: 32px;
-            background: linear-gradient(90deg,#00a3ff 1%, #57c38f);
+            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
             border-radius: 38px;
             font-size: 14px;
             font-weight: 400;
@@ -512,37 +721,37 @@
             letter-spacing: 0.6px;
           }
         }
-        .allCommonList{
-          margin-top:25px;
-          height:376px;
+        .allCommonList {
+          margin-top: 25px;
+          height: 376px;
           overflow-y: auto;
-          .singleList{
+          .singleList {
             min-height: 70px;
             border-bottom: 1px dashed #6e58c5;
             box-sizing: border-box;
-            padding-top:10px;
-            p{
+            padding-top: 10px;
+            p {
               height: 20px;
               line-height: 20px;
               font-size: 14px;
               font-weight: 600;
               text-align: left;
               color: #171721;
-              span{
+              span {
                 font-size: 12px;
                 font-weight: 400;
                 text-align: left;
                 color: #8083a3;
-                margin-left:15px;
+                margin-left: 15px;
               }
             }
-            .starListS{
-              margin:10px 0;
+            .starListS {
+              margin: 10px 0;
               box-sizing: border-box;
-              padding:0 10%;
-              img{
+              padding: 0 10%;
+              img {
                 display: inline;
-                margin-left:2%;
+                margin-left: 2%;
               }
             }
           }
@@ -551,22 +760,21 @@
     }
   }
 }
-.activein{
-  color: #222222!important;
+.activein {
+  color: #222222 !important;
   border-bottom: 3px solid lightblue;
 }
-.allCommonList::-webkit-scrollbar {
-    width: 10px;
-    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
+.allCommonList::-webkit-scrollbar  {
+  width: 10px;
+  // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
 }
 
 .allCommonList::-webkit-scrollbar-thumb {
-    background: #ccc; // 滑块颜色
-    border-radius: 5px; // 滑块圆角
+  background: #ccc; // 滑块颜色
+  border-radius: 5px; // 滑块圆角
 }
 
 .allCommonList::-webkit-scrollbar-thumb:hover {
-    background: rgb(145, 145, 145); // 鼠标移入滑块变红
+  background: rgb(145, 145, 145); // 鼠标移入滑块变红
 }
-
 </style>