From 3db47fe738d81788ab0661785f80ec38975d22e8 Mon Sep 17 00:00:00 2001
From: lmj <3407000732@qq.com>
Date: Wed, 7 Sep 2022 14:31:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/playtime.png      |  Bin 0 -> 1037 bytes
 public/images/tearch-top.png    |  Bin 0 -> 2649 bytes
 src/router/index.js             |    2 +-
 src/views/study/PortalIndex.vue |    2 +-
 src/views/study/coursenew.vue   | 1467 ++++++++++++++++++++++++++++++-
 5 files changed, 1451 insertions(+), 20 deletions(-)
 create mode 100644 public/images/playtime.png
 create mode 100644 public/images/tearch-top.png

diff --git a/public/images/playtime.png b/public/images/playtime.png
new file mode 100644
index 0000000000000000000000000000000000000000..c917edc5f6da8e91c1230547496129110abbf3a0
GIT binary patch
literal 1037
zcmV+o1oHcdP)<h;3K|Lk000e1NJLTq000#L000;W1^@s66^XV;00001b5ch_0Itp)
z=>Px&$4Nv%R7gv$lv`*VWfaH%=bM?mq}gmqy6I+b>C$)sX$+>Dk_bymp&Bocmpu4b
zv5!TeL=d&458jBaNJUZfwV?H(RPchReb7S4wuwm-+8Ag|w!4$vY<9Dk+1<H)GP7w+
z#FvH~7&za2^Zn+W|2gL)Y%@MMD6Tyk@-cs~TiM9@YT0C6&1BPhrm(PHG>V?3C8Gpz
z3<A|;mk@Tj+9k<2?c~*q(dnha0~A@##s2=_GirIDz1@43b@+S99}#QyDinDcwN)9l
zOc938vpOhcl36hUhe#~wX7GCiMkLbHU6Xfi?126_5c|}#Q99k}YZj$o2Uy?`bVg8C
zSD?r#)Y5qvssRmv2|x!R5#SOC`xt{u5XTPRnm@k-dLw@9Wi4O&s?+O$JK%>9io$TY
zp=6Ubw3=RnUeRorvH1uDI0Zrz5%xQzAHs?G7pbugJN=pGPxh{_q<-mekk=b-hY*SY
z`+cb9(x}KuRMQ!#8?{E1+=`TgKsMCP2+e{}X?5s<wu!~!7W9vS?smbDes$NBCk}>u
zVBrYZfdHzd929v4N=k;huD~=oG!P7!;6!k4O5hO$kRTm@Bys!t7L<>S2sh>BZ_V|>
za46Uc(SrIzP-_Y*@-mck8ue@mreQ+mmaZHo2oeL_R<y*>BstDU6Sv3yg#t8td|<S)
zmj58!whxZZFql6AonUuBC4C<?xnLKop)0q=6B*gXaucChbo_Sc=G+MaxUH#WvqSNd
z#pK$xpvU2KcZR?M5pZXtSmjg_H8}@e(d-`?+=3F=X8KKb#9~H_JpNep>ea#)^snKe
z!}*o_KerH%wnhVB9U%?gwz86w>*dtnye{WNb))Lk2~NX=WDqAJXfDQzqR76NOnUdp
znY(wl(zl$Ik$!h3rT-+A%iRYezOT7IbS2%=Jbm=S7i-r3nXWG9vy$O=n=E89_&8$%
zGm))peEPY?M%8!pskQiKWJFL?OXswLk~lRt_ucl79@gJV-#R$f*E?L-H1oZwnQIRV
z`rk;cm+!=SdP<-Z?@vx$*fZ!GeSK{LX=i_*m^yd8G2*+j9qFGL>T-J4y|3q$>?fbi
zF6Vbed@%dl55ILRc50)XpSU!)IKOAmv4L2;qErr!PtRZ3Gw7SKSXkxSOXG>@aagzf
zE^LRUc3TY&HY?@AtJOmJ!%K^c^<6L<_vwF(MvoqOEuSl2{_@_v)xCmZw72IKwWR#{
z@xsF7-a-4GdO@!$Eg#L^xx8o4x8w06YF&v>Oe8+v%@F(pq~xP01XI8p00000NkvXX
Hu0mjfGO_@j

literal 0
HcmV?d00001

diff --git a/public/images/tearch-top.png b/public/images/tearch-top.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee8d4220d4e5b9d78037b93f6ec3a055b7ea0734
GIT binary patch
literal 2649
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
Hu0mjfE(;{d

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index c64564af..0ffd2241 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -96,7 +96,7 @@ export const constantRoutes = [{
     //此页面需要指定课程的参数
     path: '/course/studyindex',
     hidden: true,
-    component: (resolve) => require(['@/views/study/PortalIndex'], resolve),
+    component: (resolve) => require(['@/views/study/coursenew'], resolve),
     name: 'courseStudyIndex',
     meta: { title: '课程学习', icon: 'dashboard', noCache: true, affix: false },
 },
diff --git a/src/views/study/PortalIndex.vue b/src/views/study/PortalIndex.vue
index c0019cac..16ce69d7 100644
--- a/src/views/study/PortalIndex.vue
+++ b/src/views/study/PortalIndex.vue
@@ -789,7 +789,7 @@ export default {
       //当前已经不再使用
       //console.log(e);
     },
-    showRes(r,i,index) {//i:子节下标，index:章下标
+    showRes(r,i,index) {    //i:子节下标，index:章下标
       if(i!=undefined && index!=undefined && r.status<9) {
         if(this.courseInfo.orderStudy) {
           //判断上个是否学完
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index 6e23ddae..a8d7af9a 100644
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -14,9 +14,115 @@
         </div>
         <div class="coures-content">
            <div class="coures-play">
-              
+               <div  class="player" style="width: 100%;height: 100%;border: 1px solid #ffffff;background-color: #FFFFFF;overflow: auto;">
+                   <div>
+                <div v-if="resType == null || resType == 0">
+                  <!--先显示视频图片-->
+                  <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
+                </div>
+                <div v-if="resType == 10" style="position: relative;">
+                  <videoPlayer  id="myVideoPlayer" v-if="resType == 10"
+                    :src="blobUrl"
+                    @onPlayerPlaying="onPlayerPlaying"
+                    :initTime="contentData.lastStudyTime"
+                    @onPlayerPlay="onPlayerPlay"
+                    :isDrag="curriculumData.isDrag"
+                    @onFullscreen="onFullscreen"
+                    @onPlayerPause="onPlayerPause"
+                    @onPlayerEnded="onPlayerEnded"
+                  ></videoPlayer>
+                  <div class="player-box" v-if="playerBoxShow">
+                    <div class="player-praise" style="cursor: pointer;">
+                      <div @click="praiseContent">
+                        <img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')" />
+                        <img class="icon-small" v-else :src="require('@/assets/images/icon/zhan.png')" />
+                        <!-- {{ courseInfo.praises }} -->
+                        <div style="color:#fff;cursor: pointer;">赞</div>
+                      </div>
+                      <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
+                        <img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')" />
+                        <img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" />
+                        <!-- {{ courseInfo.trampleCount }} -->
+                        <div style="color:#fff;cursor: pointer;">踩</div>
+                      </div>
+                    </div>
+                    <div v-if="!scoreInfo.has" class="player-rate">
+                      <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></el-rate>
+                    </div>
+                      <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
+                    <div class="player-rate" style="padding-left: 35px;">
+                      <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
+                    </div>
+                    <span class="score-text" style="margin-top:35px">
+                      <span style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</span>
+                      <span style="font-size: 12px;color: #fff">分</span>
+                    </span>
+
+                   </div>
+                  </div>
+                </div>
+                <div v-if="resType == 20">
+                  <div class="con-audio">
+                    <div class="con-audio-title">{{ contentData.contentName }}</div>
+                    <div class="con-audio-player">
+                      <audioPlayer
+                        v-if="resType == 20"
+                        :url="fileBaseUrl + curriculumData.url"
+                        :name="contentData.contentName"
+                        @onPlaying="audioPlaying"
+                        :isDrag="curriculumData.isDrag"
+                        @onPlay="audioPlay"
+                        @onPause="audioPause"
+                        @onPlayEnd="audioEnd"
+                      ></audioPlayer>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="resType == 40">
+                  <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus < 2 && !contentData.content">
+                    <div>此课程内容无法预览，请联系管理员</div>
+                  </div>
+                    <div style="padding: 10px;color: #ed0000;" v-if="curCFile.converStatus == 3 && !contentData.content">
+                        此课程内容无法预览，请联系管理员
+                    </div>
+                  <pdfPreview :autoScroll="true" v-if="resType == 40" :filePath="fileBaseUrl + contentData.content"></pdfPreview>
+                </div>
+                <div v-if="resType == 41"><div style="padding: 20px;" v-html="contentData.content"></div></div>
+                <div v-if="resType == 52">
+                  <div v-if="contentData.content != ''">
+                    <div class="hyper-link" v-if="conLink.openType == 2">
+                      <div class="hyper-link-row">{{ contentData.contentName }}</div>
+                      <div class="hyper-link-row">{{ conLink.url }}</div>
+                    </div>
+                    <div v-if="conLink.openType == 1"><iframe :src="conLink.url" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div>
+                  </div>
+                </div>
+                <div v-if="resType == 60"><homework v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework></div>
+                <div v-if="resType == 61"><exam v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam></div>
+                <div v-if="resType == 62" style="padding:5px">
+                  <assess v-if="resType == 62 && studyId != '' && contentData.id" :studyId="studyId" :content="contentData"></assess>
+                </div>
+              </div>
+               </div>
+            <div style="padding-left:5px;margin: 14px 0px;background-color: #FFFFFF;" class="info">
+                <div class="coure-tab">
+                    <div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
+                    <div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
+                </div>
+                <div v-if="courestab" class="coures-comments">
+                   <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
+                </div>
+                <div v-else class="coures-note">
+                   <div class="note-tole">33条笔记</div>
+                   <div class="note-info">
+                      
+                   </div>
+                </div>
+               
+            </div>
            </div>
-           <div class="coures-info">
+           <div class="coures-infobox">
+               <div class="coures-info">
                <div class="hear-tab">
                    <div @click="heartabone" :class="tab == 1 ? 'tab-active' : ' '"><i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元</div>
                    <div @click="heartabtwo" :class="tab == 2 ? 'tab-active' : ' '"><i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记</div>
@@ -89,35 +195,886 @@
                        
                     </div>
                    <div class="newcote-bottom" v-if="notetab == 1">
-                       <span> 视频位置</span>
+                       <span> <img src="../../../public/images/playtime.png" alt=""> 视频位置</span>
                        <el-radio v-model="radio" label="1">公开</el-radio>
                        <el-radio v-model="radio" label="2">私密</el-radio>
                         <el-button type="primary" size="small">保存</el-button>
                    </div>
 
                </div>
-           </div>
-        </div>
-        
 
+           </div>
+           <div class="coures-tearch">
+                   <div class="tearch-top"><img src="../../../public/images/tearch-top.png" alt=""></div>
+
+               <el-card :body-style="{ padding: '0px' }" class="teachers">
+              <div class="top">
+                  课程讲师
+                <el-button style="float :right;" type="primary" size="small">+ 关注</el-button>
+              </div>
+              <div>
+                <div class="teacher" v-for="(item, idx) in teachers" :key="idx">
+                  <div class="teacher-avator">
+                    <!-- <div class="teacher-text" v-if="item.authorInfo.avatar == ''">{{userAvatarText(item.teacherName)}}</div> -->
+                    <el-avatar v-if="item.authorInfo.avatar !== ''" :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar>
+                     <div v-else class="teacher-text">
+                        <div v-if="item.authorInfo.sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
+                        <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
+
+                     </div>
+                  </div>
+                  <div class="teacher-info">
+                    <div class="teacher-name">{{ item.teacherName }}</div>
+                    <div class="teacher-remark" v-html="item.remark"></div>
+                  </div>
+                </div>
+              </div>
+            </el-card>
+           </div>
+           </div>
+         
+        </div>
     </div>
 </template>
-
 <script>
+import { mapGetters } from 'vuex';
 import portalHeader from "@/components/PortalHeader.vue";
 import portalFooter from "@/components/PortalFooter.vue";
 import comments from "@/components/Portal/comments.vue";
 import interactBar from "@/components/Portal/interactBar.vue";
+import audioPlayer from '@/components/AudioPlayer/index.vue';
+import videoPlayer from '@/components/VideoPlayer/index.vue';
+import hyperLink from '@/components/Course/hyperLink.vue';
+import studyUtil from '@/utils/study.js';
+import {encrypt} from '@/utils/jsencrypt.js';
+import cookies from 'vue-cookies';
+import apiStudy from '@/api/modules/courseStudy.js';
+import apiVideoStudy from "@/api/modules/videoStudy.js";
+import apiCourseGrade from '@/api/modules/courseGrade.js';
+import apiPraises from '@/api/modules/praises.js';
+import apiTrample from '@/api/modules/trample.js';
+import apiCoursePortal from '@/api/modules/coursePortal.js';
+import apiCourse from '@/api/modules/course.js';
+import apiUser from '@/api/system/user.js';
+import apiCourseFile from '@/api/modules/courseFile.js';
+import { resListMap, resOwnerListMap, courseType, getType, toScore,userAvatarText } from '@/utils/tools.js';
+import pdfPreview from '@/components/PdfPreview/index.vue';
+import courseImage from '@/components/Course/courseImage.vue';
+import exam from '@/components/Course/exam';
+import homework from '@/components/Course/homework';
+import assess from '@/components/Course/assess';
 export default {
   name: "atticle",
-  components: {portalHeader, portalFooter,interactBar,comments,},
+  components: {courseImage, portalHeader, portalFooter, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer },
   data(){
       return{
+        courestab:true,
+        curCFile:{
+        converStatus:4,
+      },
+      interactRuning:false,
+      playerBoxShow:false,
+      userAvatarText,
+      publicPath: process.env.VUE_APP_PUBLIC_PATH,
+      showiframe: false,
+      toScore,
+      courseId: '',//当前课程的id
+      studyId: '', //当前学习的id
+      initContentId: '', //初始化当前学习的内容节
+      blobUrl:'',//播放的文件地址，新添加，采用blob方式
+      contentData: {
+        studyItemId:'',
+        status:1
+      }, //当前的显示的内容
+      conLink: { openType: 1, url: '' }, //对于超连接的内容
+      curriculumData:{url:'',isDrag:true,completeSetup:0,setupTage:0,second:0},// 课件内容
+      courseInfo: { id: '', name: '' }, //课程信息
+      totalContent: 0, //课程内容数量
+      pageCount: 0,
+      currentPage: 0,
+      fileBaseUrl: this.$Constants.fileBaseUrl,
+      contentList: [],
+      sectionList: [],
+      teachers: [],
+      toUsers: [], //对于@教师的处理
+      getType: getType,
+      ctabName: 'catalog',
+      resType: null,
+      activeNames: [0, 1, 2, 3, 4,5,6,7,8,9],
+      scoreInfo: {
+        dlgShow: false,
+        score: 5,
+        has: false
+      },
+      isPraise: false,
+      isTrample: false,
+      appendStartTime: null, //记录追加的开始时间
+      appendHandle:null,
+      isAppendTime:false,//是否追加学习时长
+      appentId:'',//当前追加的学习时长的id
+      appentInterval:30000,//追加学习时间的间隔 30秒加一次
+      handleTimeout:null,
+      completed:[],
         tab:1,
         notetab:1,
       }
   },
+  mounted() {
+    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
+    this.courseId = this.$route.query.id;
+    this.loadData();
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    catalogTree() {
+      let treeList = [];
+      this.completed = [];
+      let $this = this;
+      $this.sectionList.forEach(sec => {
+        let treeNode = { section: sec, children: [] };
+        sec.status = 1;
+        let finishCount = 0;
+        $this.contentList.forEach(c => {
+          if (c.csectionId == sec.id) {
+            if (c.status > 1) {
+              sec.status = 2;
+              if(c.status == 9){
+                finishCount++;
+              }
+            }
+            if(c.status == 9) {
+              $this.completed.push(c.id);
+            }
+            treeNode.children.push(c);
+          }
+        });
+        if (finishCount == treeNode.children.length) {
+          sec.status = 9;
+        }
+        treeList.push(treeNode);
+      });
+      return treeList;
+    }
+  },
   methods: {
+      coutab(){
+         this.courestab = !this.courestab;
+      },
+         createPlayUrl(fid,u){
+      let nowDate=new Date();
+      let ctime=parseInt(nowDate.getTime()/1000);
+      let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+fid;
+      //console.log(beforeUrl,'beforeUrl');
+      let urlSign=encodeURIComponent(encrypt(beforeUrl));
+      //console.log(urlSign,'urlSign');
+      cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
+      //以下判断是为了区分本地环境和服务器环境
+      if(process.env.NODE_ENV == 'development'){
+        this.blobUrl=process.env.VUE_APP_FILE_BASE_URL+u;
+      }else{
+        this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/cware/resource?sign='+urlSign;
+      }
+      //console.log(this.blobUrl,'this.blobUrl');
+    },
+    widthOpen(url) {
+      window.open(url, '_blank');
+    },
+      showRes(r,i,index) {    //i:子节下标，index:章下标
+      if(i!=undefined && index!=undefined && r.status<9) {
+        if(this.courseInfo.orderStudy) {
+          //判断上个是否学完
+          if(i == 0) {
+            if(index > 0) { //第一章 第一节
+              let preCatalog=this.catalogTree[index-1];
+              let last=preCatalog.children[preCatalog.children.length-1];
+              if(last.status!=9){
+                this.$message.warning('请按顺序学习！');
+                return;
+              }
+            }
+          }else{
+            let pre=this.catalogTree[index].children[i-1];
+            if(pre.status!=9){
+               this.$message.warning('请按顺序学习！');
+                return;
+            }
+          }
+          //判断是否是第一个未学完的
+          let isAllow=false;
+          let has=this.catalogTree.some(treeNode=>{
+             let hasNo=treeNode.children.some(child=>{
+                 if(child.status<9){
+                  if(child.id==r.id){
+                    isAllow=true;
+                  }
+                  return true;
+                 }else{
+                  return false;
+                 }
+                 
+             });
+             return hasNo;
+          });
+          if(has){
+            if(!isAllow){
+              this.$message.warning('请按顺序学习！');
+              return;
+            }
+          }
+        }
+      }
+
+      this.playerBoxShow=false;
+      //显示内容部分
+      let $this = this;
+      this.resType = r.contentType;
+      this.contentData = r;
+      this.saveStudyDuration();
+
+      if(r.contentType == 10 || r.contentType == 20) {
+          if (r.content.startsWith('\{')) {
+              this.curriculumData = JSON.parse(r.content);
+            } else {
+              this.curriculumData.url = r.content;
+            }
+            //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
+            //let url=this.fileBaseUrl+this.curriculumData.url;
+            this.createPlayUrl(r.contentRefId,this.curriculumData.url);
+      } else if (r.contentType == 40) {
+        // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
+          apiCourseFile.detail(r.contentRefId).then(cfrs => {
+            if (cfrs.status == 200) {
+              r.content = cfrs.result.previewFilePath;
+              this.curCFile = cfrs.result;
+              if(cfrs.result.previewFilePath == '' && cfrs.result.filePath.indexOf('pdf') > -1) {
+                r.content = cfrs.result.filePath;
+                this.curCFile.converStatus=2;
+              }
+              if(r.content && r.content.indexOf('.pdf')>-1){
+                this.curCFile.converStatus=2;
+              }
+            } else {
+              $this.$message.error('加载pdf课件文件失败');
+            }
+          });
+        // }
+      } else if (r.contentType == 52) {
+        this.isAppendTime=false;
+        if (r.content.startsWith('\{')) {
+          this.conLink = JSON.parse(r.content);
+        } else {
+          this.conLink.url = r.content;
+          this.conLink.openType = 1;
+        }
+        if (this.conLink.openType == 2) {
+          //直接设置完成状态
+          this.widthOpen(this.conLink.url);
+        }
+        //this.conLink=
+      } else if (r.contentType == 61) {
+        // 考试
+      } else if (r.contentType == 60) {
+        // 作业
+      } else if (r.contentType == 62) {
+        // 评估
+        //评估不需要查找，因为内容就是content中
+        console.log('评估处理');
+      }
+      if(this.contentData.status<2){
+         this.contentData.status=2;//进行中
+      }
+      if(this.contentData.contentType>20){ //非视频类的
+        this.isAppendTime=true;
+        this.appendStudyTime();
+        this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+      }
+
+    },
+    handleChange(val) {
+      console.log(val);
+    },
+    loadScorePraiseAndTrample() {
+      //加载是否请过分
+      apiCourseGrade.has(this.courseId).then(rs => {
+        if (rs.status == 200 && rs.result) {
+          this.scoreInfo.has = true;
+        }
+      });
+      apiPraises.has(1, this.courseId).then(rs => {
+        if (rs.status == 200 && rs.result) {
+          this.isPraise = true;
+        }
+      });
+      apiTrample.has(this.courseId).then(rs => {
+        if (rs.status == 200 && rs.result) {
+          this.isTrample = true;
+        }
+      });
+    },
+    addScore() {
+      let that = this;
+      let postData = {
+        courseId: this.courseInfo.id,
+        studyId: this.studyId,
+        score: this.scoreInfo.score
+      };
+      if (this.scoreInfo.score > 0) {
+        apiCourseGrade.grade(postData).then(rs => {
+          if (rs.status == 200){
+            this.$message.success('打分成功，谢谢您的打分');
+            that.scoreInfo.has = true;
+            that.courseInfo.score = rs.result;
+          } else {
+            this.$message.error('打分处理失败，请稍后再试');
+          }
+        });
+      }
+    },
+    praiseContent() {
+      if (this.isTrample) {
+        this.$message.error('您已踩过了，不能再赞了');
+        return;
+      }
+       if(this.interactRuning){
+				return;
+			}
+			this.interactRuning=true;
+      let postData = {
+        objType: 1,
+        objId: this.courseId,
+        title: this.courseInfo.name
+      };
+      if (this.isPraise) {
+        apiPraises.remove(1, this.courseInfo.id).then(res => {
+          this.interactRuning=false;
+          if (res.status == 200) {
+            this.$message.info('已取消点赞');
+            this.isPraise = false;
+            this.courseInfo.praises--;
+          } else {
+            this.$message.error('取消点赞失败,请稍后再试');
+          }
+        });
+      } else {
+        apiPraises.save(postData).then(rs => {
+          this.interactRuning=false;
+          if (rs.status == 200) {
+            this.$message.success('点赞成功');
+            this.isPraise = true;
+            this.courseInfo.praises++;
+          } else {
+            this.$message.error('点赞失败,请稍后再试');
+          }
+        });
+      }
+    },
+    treadContent() {
+      if (this.isPraise) {
+        this.$message.error('您已赞过了，不能再踩了');
+        return;
+      }
+       if(this.interactRuning){
+				return;
+			}
+			this.interactRuning=true;
+      if (this.isTrample) {
+        apiTrample.remove(this.courseInfo.id).then(rs => {
+          this.interactRuning=false;
+          if (rs.status == 200) {
+            this.$message.info('已取消踩');
+            this.isTrample = false;
+            this.courseInfo.trampleCount--;
+          } else {
+            this.$message.error('取消失败,请稍后再试');
+          }
+        });
+      } else {
+        apiTrample.trample(this.courseInfo.id).then(rs => {
+          this.interactRuning=false;
+          if (rs.status == 200) {
+            this.$message.success('已踩');
+            this.isTrample = true;
+            this.courseInfo.trampleCount++;
+          } else {
+            this.$message.error('踩失败,请稍后再试');
+          }
+        });
+      }
+    },
+    statusToContent(status) {
+      let data = null;
+      switch (status) {
+        case 1: {
+          data = {
+            text: '未开始',
+            class: 'catalog-cell-state1'
+          };
+          break;
+        }
+        case 2: {
+          data = {
+            text: '进行中',
+            class: 'catalog-cell-state2'
+          };
+          break;
+        }
+        case 9: {
+          data = {
+            text: '已完成',
+            class: 'catalog-cell-state9'
+          };
+          break;
+        }
+        default:
+          {
+            data = {
+              text: '未开始',
+              class: 'catalog-cell-state1'
+            };
+          }
+          break;
+      }
+      return data;
+    },
+    loadAuthorInfo(list, ids) {
+      //加载作者信息，头像，机构信息
+      if (ids.length == 0) {
+        return;
+      }
+      apiUser.getByIds(ids).then(res => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some(author => {
+              if (author.aid == item.teacherId) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          //console.log('加载课程信息失败:'+res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+       ctabChange(e) {
+      //当前已经不再使用
+      //console.log(e);
+    },
+      onPlayerPause() {
+      //console.log("暂停");
+    },
+    onPlayerEnded() {
+      this.playerBoxShow = true;
+      if(this.contentData.status<9){
+        this.finishStudyItem();
+      }
+    },
+    onPlayerPlaying(itme) {
+      this.isAppendTime=false;
+      this.appendStartTime=null;
+      //console.log("当前播放"+itme);
+      //console.log("当前播放11"+itme);
+      if (this.contentData.contentType && this.contentData.contentType == 10){
+        let intTime = parseInt(itme);
+        //判断是否完成
+        let completeType=this.curriculumData.completeSetup;
+        let completeSecond=this.curriculumData.second;
+        if(!completeSecond || completeType==0){
+          completeSecond=5;//如果没有就采用默认的时间了
+        }
+        if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+            if(completeType==1){
+              let finishPercent=this.curriculumData.setupTage;
+              let videDuration=this.contentData.duration;
+              let percent =intTime*100/videDuration;
+              if(percent>=finishPercent){
+                  this.finishStudyItem();
+              }
+            }else{
+              if(intTime>=completeSecond){
+                 this.finishStudyItem();
+              }
+            }
+        }
+        //下面是每隔10秒记录一下次
+        let saveTime = Math.floor(intTime % 10);
+        if (intTime > 10 && intTime!=this.contentData.lastStudyTime && saveTime == 0 && this.contentData.studyItemId != '') {
+          this.contentData.lastStudyTime=intTime;
+          let postData = {
+            itemId: this.contentData.studyItemId,
+            videoTime: intTime
+          };
+          //console.log('记录播放时间')
+          apiStudy.studyVideoTime(postData).then(rs => {
+            if (rs.status != 200) {
+              console.log('记录播放时间错误');
+            }
+          });
+        }
+      }
+    },
+    audioPlaying(item,currentTime) {
+      //console.log("当前播放"+item);
+      let intTime = parseInt(currentTime);
+      //判断是否完成
+      let completeType=this.curriculumData.completeSetup;
+      let completeSecond=this.curriculumData.second;
+      if(!completeSecond || completeType==0){
+        completeSecond=5;//如果没有就采用默认的时间了
+      }
+      if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+          if(completeType==1){
+            let finishPercent=this.curriculumData.setupTage;
+            let videDuration=this.contentData.duration;
+            let percent =intTime*100/videDuration;
+            if(percent>=finishPercent){
+                this.finishStudyItem();
+            }
+          }else{
+            if(intTime>=completeSecond){
+               this.finishStudyItem();
+            }
+          }
+      }
+      //下面是每隔10秒记录一下次
+      let saveTime = Math.floor(intTime % 10);
+      if (intTime > 10 && intTime!=this.contentData.lastStudyTime && saveTime == 0 && this.contentData.studyItemId) {
+        this.contentData.lastStudyTime=intTime;
+        let postData = {
+          itemId: this.contentData.studyItemId,
+          videoTime: intTime
+        };
+        //console.log('记录播放时间')
+        apiStudy.studyVideoTime(postData).then(rs => {
+          if (rs.status != 200) {
+            console.log('记录播放时间错误');
+          }
+        });
+      }
+    },
+    audioPlay() {
+      //console.log("开始播放");
+      let $this=this;
+      // if(this.contentData.status!=9){
+      //   let completeType=this.curriculumData.completeSetup;
+      //   if(completeType==0){
+      //     //默认5秒后学习完成.
+      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+      //   }else{
+      //     //先记录进行中的学习内容
+      //     this.saveStudyItem();
+      //   }
+      // }
+    },
+    audioPause() {
+      //console.log("暂停");
+    },
+    audioEnd() {
+       //console.log("播放结束");
+      if(this.contentData.status<9){
+        this.finishStudyItem();
+      }
+    },
+    loadData() {
+      apiCoursePortal.detail(this.courseId,false).then(rs => {
+        if (rs.status == 200) {
+          //设置必须的字段
+          rs.result.sections.forEach(sec => {
+            sec.status = 0; //加入状态表未开始
+            rs.result.contents.forEach(c => {
+              c.status = 0; //初始化状态 ，未开始
+              c.studyItemId = ''; //初始化字段，学习条目id
+              c.lastStudyTime = 0; //初始化上次一学习的时间，作用于视频插放
+            });
+          });
+          this.sectionList = rs.result.sections;
+          this.courseInfo = rs.result.course;
+          this.teachers = rs.result.teachers;
+          if (rs.result.teachers && rs.result.teachers.length > 0) {
+            let userIds = [];
+            let ctoUsers = [];
+            rs.result.teachers.forEach(item => {
+              item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null, };
+              userIds.push(item.teacherId);
+              ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
+            });
+            this.toUsers = ctoUsers;
+            this.loadAuthorInfo(rs.result.teachers, userIds);
+          }
+          this.contentList = rs.result.contents;
+          this.totalContent = rs.result.contents.length;
+          //加载学习的数据
+          this.loadStudyData();
+        } else {
+          this.$message.error(rs.message);
+        }
+      });
+    },
+    loadStudyData() {
+      let $this = this;
+      apiStudy.studyInfo(this.courseId).then(res => {
+        if (res.status == 200) {
+          if (res.result.signup){
+            this.loadScorePraiseAndTrample();
+            this.studyId = res.result.studyId;
+            //对已学习的内容进行比对，重要的字段， 学习内容id，在后缀的
+            let playIndex = -1;
+            this.contentList.forEach((con, conIdx) => {
+              res.result.contents.forEach((scon, sconIdx) => {
+                if (scon.contentId == con.id) {
+                  //定位显示的内容
+                  if ($this.initContentId != '' && $this.initContentId == scon.contentId) {
+                    //定位当前学习的内容，是上一次学习的内容
+                    playIndex = conIdx;
+                  } else {
+                    if (sconIdx == 0 && con.contentType < 52){
+                      playIndex = conIdx;
+                    }
+                  }
+                  //console.log(scon.contentId,con.id);
+                  con.lastStudyTime = scon.lastStudyTime;
+                  //以下判断是为了兼容之前的问题，学习状态
+                  if(scon.status){
+                    con.status = scon.status;
+                  }else{
+                    con.status = 9;
+                  }
+                  con.studyItemId = scon.id; //这个就是学习内容（条目）的id
+                  //console.log(scon.id,"scon.id");
+                  //console.log(con,"scon.id");
+                }
+              });
+            });
+            //如果没有，就定位第一项内容
+            if (playIndex === -1) {
+              // this.showRes(this.contentList[0]);
+              this.showRes(this.catalogTree[0].children[0])
+            } else {
+              this.showRes(this.contentList[playIndex]);
+            }
+          } else {
+            this.$message.error('您还未报名');
+            if (this.courseInfo.type == 10) {
+              location.href = this.webBaseUrl + '/course/micro?id=' + this.courseId;
+            } else {
+              location.href = this.webBaseUrl + '/course/detail?id=' + this.courseId;
+            }
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    saveStudyInfo() {
+      //记录课件学习信息
+      if (this.contentData.contentType >= 60) {
+        //只有在课件页面停留超过5秒才会记录
+        return;
+      }
+      if (this.contentData.status == 9) {
+        //已学习完的，不用再添加
+        return;
+      }
+      let params = {
+        studyId: this.studyId, //学习id,
+        courseId: this.courseId, //课程id,
+        contentId: this.contentData.id, //内容id,
+        contentType:this.contentData.contentType,
+        contentName: this.contentData.contentName, //内容名称
+        progress: 100,
+        status:9,
+        contentTotal: this.totalContent
+      };
+      apiStudy.studyContent(params).then(res => {
+        if (res.status == 200) {
+          this.contentData.status = 9; //完成
+          this.contentData.studyItemId = res.result; //学习记录id
+        } else {
+          console.log('记录学习失败:' + res.message + '，' + res.error);
+        }
+      });
+    },
+    saveStudyDuration(){ //保存本地存储的学习时长
+       let duration=studyUtil.getStudyDuration();
+       if(duration>0){
+           let postData = {
+             id:this.appentId,
+             studyId: this.studyId,
+             courseId: this.courseInfo.id,
+             contentId: this.contentData.id,
+             studyInfo:
+               this.courseInfo.name +
+               "-" +
+               this.contentData.contentName,
+             duration: duration
+           };
+           apiStudy.appendStudyTime(postData).then(rs => {
+             if (rs.status == 200){
+               this.appentId=rs.result;
+               studyUtil.clearStudyDuration();//清除本地存储
+             } else {
+               console.log(rs.message);
+             }
+           });
+       }
+    },
+    appendStudyTime(flag) {
+      if(this.studyId==''){
+        return;
+      }
+      if(!this.contentData.id){
+        return;
+      }
+      if(!this.isAppendTime){
+        this.appendStartTime =null;
+        return;
+      }
+
+      if(this.appendHandle!=null){
+        window.clearTimeout(this.appendHandle);
+      }
+      //首先从本地读取
+      let duration=studyUtil.getStudyDuration();
+      //追加学习时间
+      let $this = this;
+      if (this.appendStartTime == null) {
+        this.appendStartTime = new Date();
+        this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
+        if(duration>0 && flag){
+          this.saveStudyDuration();
+        }
+        return;
+      }
+      let now = new Date();
+      let m = now.getTime() - this.appendStartTime.getTime(); //相差的毫秒数
+      let sen = parseInt(m / 1000); //计算秒数
+      duration=duration+sen;
+      if(flag) {
+        if(duration>0){
+            let postData = {
+              id:this.appentId,
+              studyId: this.studyId,
+              courseId: this.courseInfo.id,
+              contentId: this.contentData.id,
+              studyInfo:
+                this.courseInfo.name +
+                "-" +
+                this.contentData.contentName,
+              duration: duration
+            };
+            apiStudy.appendStudyTime(postData).then(rs => {
+              if (rs.status == 200){
+                $this.appentId=rs.result;
+                $this.appendStartTime = new Date(); //重置开始时间
+                studyUtil.clearStudyDuration();//清除本地存储
+                //this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
+              } else {
+                console.log(rs.message);
+              }
+            });
+        }
+      } else {
+        $this.appendStartTime = new Date(); //重置开始时间
+        studyUtil.setStudyDuration(duration);//添加到本地存储中
+      }
+      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
+    },
+      onPlayerPlay() {
+      //console.log("开始播放");
+      this.playerBoxShow = false;
+      let $this=this;
+      //console.log(this.contentData.status,'this.contentData.status');
+      // if(this.contentData.status<9){
+      //   let completeType=this.curriculumData.completeSetup;
+      //   //console.log(completeType,'completeType');
+      //   if(completeType==0){
+      //     //默认5秒后学习完成.
+      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+      //   }else{
+      //     //先记录进行中的学习内容
+      //     this.saveStudyItem();
+      //   }
+      // }
+    },
+       onFullscreen(full){
+      let divId='videowatermark';
+      var div = document.getElementById('myVideoPlayer')
+      if(full){
+      	var div3 = document.createElement("div");
+        div3.id =divId;
+        div3.setAttribute("class", "fullmark");
+      	div3.innerHTML='';
+        //从父组件传过来的水印内容
+        //div3.innerText =this.userInfo.name+this.userInfo.code;
+      	for(var i=0;i<8;i++){
+      		div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.loginName+'</div>';
+      	}
+        div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
+      	div.appendChild(div3);
+      }else{
+      	var markDiv=div.querySelector("#"+divId);
+      	if(markDiv){
+      		div.removeChild(markDiv);
+      	}
+      }
+    },
+       finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
+        if(!this.contentData.studyItemId){
+          //这种可能没有，不过这里也是为了万中那个1
+          this.saveStudyInfo();
+        }else{
+          let params={
+            itemId:this.contentData.studyItemId,
+            studyId:this.studyId,
+            courseId:this.courseId,
+            cnum:this.totalContent
+          }
+          apiVideoStudy.finishStudyItem(params).then(res=>{
+              if(res.status == 200){
+                this.contentData.status = 9;
+                this.contentData.progress = 100;
+              }else{
+                console.log("记录完成学习失败:" + res.message + "，" + res.error);
+              }
+          });
+        }
+    },
+   
+      saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
+      if(this.contentData.studyItemId) {
+        return;//已经有记录的，不需要再保存了
+      }
+      let params = {
+        studyId: this.studyId, //学习id,
+        courseId: this.courseId, //课程id,
+        contentId: this.contentData.id, //内容id,
+        contentType:this.contentData.contentType, //内容id,
+        contentName: this.contentData.contentName, //内容名称
+        progress: 0,
+        lastStudyTime:0,
+        status:2,
+        studyDuration:0,
+        contentTotal: this.totalContent
+      };
+      apiVideoStudy.saveStudyItem(params).then(res=>{
+          if(res.status == 200){
+            this.contentData.studyItemId=res.result.id;
+            this.contentData.status = 2;//进行中状态
+          }else{
+            console.log("记录学习失败:" + res.message + "，" + res.error);
+          }
+      });
+    },
+      formatTime(duration){
+      let min=0;
+      if(duration>0){
+        min=parseInt(duration/60);
+      }
+      return min;
+    },
       heartabone(){
           this.tab = 1
       },
@@ -135,8 +1092,472 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.tearch-top{
+  margin-top: 10px;
+    width: 100%;
+    height: 15px;
+    img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.coures-note{
+    min-height: 500px;
+    padding-left: 50px;
+    padding-top: 25px;
+    .note-tole{
+      color: #333333;
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .note-info{
+
+    }
+}
+.coure-tab{
+    display: flex;
+    width: 300px;
+    padding-top: 30px;
+    margin-left: 55px;
+    div{
+        flex: 1;
+        color: #666666;
+        font-size: 18px;
+    }
+    .coureactive{
+        color: #333333;
+        position: relative;
+        span{
+            display: inline-block;
+            width: 69px;
+            height: 4px;
+            background: #387DF7;
+            border-radius: 5px;
+            position: absolute;
+            left: 0;
+            top: 128%;
+        }
+
+  }
+
+}
+.mltit{
+
+  // width: 70%;
+  // width: ;
+  word-break:break-all;
+  // line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.catalog-text{
+  width: 70%;
+  overflow: hidden;
+  word-break:break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  height: 40px;
+}
+.player-box{
+  position: absolute;
+  // top: 62px;
+  // left: 184px;
+  width: 300px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 187px;
+  background: rgba(74, 74, 74,.5);
+  border-radius: 33px;
+  text-align: center;
+  padding: 20px;
+  box-sizing: border-box;
+  .player-praise{
+    margin-top: 25px;
+    display: flex;
+    // justify-items: center;
+    justify-content: center;
+  }
+  .player-rate{
+    margin-top: 35px;
+  }
+}
+.score {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-rate {
+    display: inline-block;
+  }
+  .score-text {
+    font-size: 28px;
+    color: #ffb30f;
+    font-family: 'Arial';
+    margin-left: 23px;
+    // font-weight: 600;
+  }
+  // margin-bottom: 19px;
+  .score-no {
+    color: #ffb30f;
+    padding: 5px 0;
+    background: #efefef;
+    border-radius: 20px;
+    width: 65px;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+  }
+}
+.portal-content-title {
+  font-weight: 600;
+  padding: 10px;
+  font-size: 22px;
+  line-height: 40px;
+  color: #333333;
+  word-break:break-all;
+}
+
+.type-kuang {
+  color: #666666;
+  border: 1px solid #666666;
+}
+.type-click {
+  color: #ffb30f !important;
+  border: 1px solid #ffb30f !important;
+}
+::v-deep .el-rate__icon {
+  font-size: 22px;
+  margin-right: 6px;
+  color: #ff8e00;
+  transition: 0.3s;
+}
+.ref-score {
+  // background: #e4e4e4;
+  // width: 64px;
+  // height: 32px;
+  // border-radius: 17px;
+  // line-height: 32px;
+  // // opacity: 0.24;
+  // color: #000;
+  // font-size: 14px;
+  // border: none;
+}
+.icon-small {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+}
+.con-audio {
+  padding: 50px;
+  text-align: center;
+  .con-audio-title {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .con-audio-player {
+    padding: 20px 100px;
+  }
+}
+.hyper-link {
+  padding-left: 20px;
+  text-align: center;
+  padding-top: 100px;
+  .hyper-link-row {
+    padding: 20px;
+  }
+}
+.catalog-box {
+  background: #fff;
+  // padding: 15px 0px;
+  // box-shadow: 1px 1px 2px 2px #ededed;
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    padding-left: 20px;
+  }
+}
+.collapse-title {
+  flex: 1 0 90%;
+  order: 1;
+}
+
+.el-collapse-item__header {
+  flex: 1 0 auto;
+  order: -1;
+}
+.course-interact {
+  height: 54px;
+  // padding-top: 10px;
+  // padding-right: 10px;
+  padding: 0 20px;
+  line-height: 54px;
+  background-color: #FFFFFF;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.interact-btn {
+  margin-right: 10px;
+}
+.uc-badge {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+.cres-list {
+  list-style-type: decimal;
+  margin: 0px;
+  li {
+    line-height: 30px;
+  }
+  .current {
+    color: #1ea0fa;
+  }
+}
+.uc-course {
+  display: flex;
+  justify-content: space-around;
+  border: 1px solid #f0f0f0;
+  padding: 10px;
+  .uc-course-img {
+    width: 200px;
+    img {
+      width: 200px;
+      border: 1px solid #f4f4f5;
+    }
+  }
+  .uc-course-info {
+    flex: 1;
+    line-height: 28px;
+    padding: 0px 10px;
+    .uc-course-name {
+      font-size: 18px;
+      font-weight: 700;
+    }
+    .uc-course-text {
+      color: #747474;
+    }
+  }
+  .uc-course-btns {
+    width: 150px;
+  }
+}
+
+.catalog-cell-state2 {
+  height: 24px;
+  width: 58px;
+  line-height: 20px;
+  border: 0px dotted #bed2f8;
+  padding: 3px 10px;
+  color: #ff8e00;
+  font-size: 12px;
+  border-radius: 6px;
+  margin-left: 2px;
+  background: #ffedd6;
+}
+.catalog-cell-state9 {
+  height: 24px;
+  width: 58px;
+  line-height: 20px;
+  border: 0px dotted #bed2f8;
+  padding: 3px 10px;
+  color: #3e7fff;
+  font-size: 12px;
+  border-radius: 6px;
+  margin-left: 2px;
+  background: #edf2fd;
+  // margin-left: 68%;
+  // background-color: #BED2F8;
+}
+.catalog-cell-state1 {
+  height: 24px;
+  width: 58px;
+  line-height: 20px;
+  border: 0px dotted #edf2fd;
+  border-radius: 6px;
+  padding: 3px 10px;
+  color: #ff3e3e;
+  font-size: 12px;
+  margin-left: 2px;
+  background: #fff0f0;
+}
+.catalog {
+  height: 500px;
+  max-width: 500px;
+  overflow: auto;
+  .catalog-row {
+    margin: 0px;
+    padding: 0px 10px 10px 10px;
+    .title-type {
+      width: 36px;
+      height: 24px;
+      padding: 2px 5px;
+      color: #666666;
+      border: 1px solid #666666;
+      margin-right: 8px;
+    }
+    ul {
+      padding: 0px;
+      margin: 0px;
+      li {
+        padding: 6px 0;
+      }
+    }
+    .catalog-cell {
+      line-height: 32px;
+      cursor: pointer;
+      list-style: none;
+      margin: 0px;
+      padding-left: 20px;
+      color: #5c5c5c;
+    }
+  }
+}
+.video-div {
+  position: absolute;
+  z-index: 999999999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(101, 101, 101, 0.9);
+  .good {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 200px;
+    div {
+      line-height: 1;
+      margin: 0 15px;
+      .svg-icon {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    div:nth-of-type(2) {
+      .svg-icon {
+        transform: scaleX(-1);
+        transform: rotate(180deg);
+      }
+    }
+    // margin-bottom: 50px;
+    // line-height: 20px;
+    // .el-link{
+    //   font-size: 30px;
+    //   color: #70a5f4;
+    //   margin: 0 30px;
+    // }
+  }
+  // .score {
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   padding-top: 20px
+  // }
+}
+
+::v-deep .el-tag {
+    background-color: #ecf5ff;
+    border-color: #409EFF;
+    display: inline-block;
+    height: 28px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-size: 12px;
+    color: #3e7fff;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0px;
+    box-sizing: border-box;
+    white-space: nowrap;
+}
+::v-deep .teacher .teacher-avator .teacher-text{
+  background: none;
+  border: none;
+}
+.teacher {
+  background-color: #ffffff;
+  display: flex;
+   border-top: none;
+  padding: 10px 0px;
+  .teacher-avator {
+    ::v-deep .el-avatar {
+      width: 68px !important;
+      height: 68px !important;
+      border-radius: 0px;
+    }
+    .teacher-text {
+      width: 68px;
+      height: 68px;
+      div{
+        img{
+           width: 68px;
+           height: 68px;
+        }
+      }
+      // text-align: center;
+      // line-height: 68px;
+      // border-radius: 50%;
+      // color: #73adfe;
+      // border: 2px solid #73adfe;
+      // background: #d9e9ff;
+    }
+  }
+  .teacher-info {
+    flex: 1;
+    .teacher-name {
+      padding: 0px 5px 10px 10px;
+    }
+    .teacher-remark {
+      padding: 0px 5px 0 10px;
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+    }
+  }
+}
+.teachers {
+  background-color: #fff;
+  padding: 5px 15px 5px 10px;
+  margin-top: 0;
+  .top {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 50px;
+  }
+}
+.breadname {
+  margin-bottom: 15px;
+}
+//目录的样式更改
+::v-deep .el-collapse-item{
+  .el-collapse-item__header{
+    // position: relative;
+    direction:rtl;
+    display: flex;
+    // justify-content;
+    justify-content: space-between;
+    // .el-collapse-item__arrow{
+    //   float:right;
+    // }
+    // span{
+    //   float:right;
+    // }
+    i{
+      display:none
+    }
+  }
+}
 .course-units{
+   
      .units-info{
+          padding: 0 30px;
          height: 60px;
          line-height: 60px;
          font-size: 16px;
@@ -161,7 +1582,11 @@ export default {
         font-size: 14px;
         color: #333333;
         margin-right: 30px;
-       
+       img{
+           width: 20px;
+           height: 24px;
+           vertical-align: middle;
+       }
     }
 }
 .newcote-time{
@@ -190,7 +1615,7 @@ export default {
    box-sizing: border-box;
    padding: 35px 30px;
    height: 474px;
-   background-color: #F8F7F7;
+   background-color: #fff;
    .mycote-time{
        color: #666;
        font-size: 14px;
@@ -219,13 +1644,13 @@ export default {
    box-sizing: border-box;
    padding: 35px 30px;
    height: 474px;
-   background-color: #F8F7F7;
+   background-color: #F5F5F5 ;
    
    
 }
 .mynote{
-    width: 100%;
-
+    // width: 100%;
+      margin: 35px 30px;
     .mynote-tab{
         width: 180px;
         margin-top: 17px;
@@ -248,14 +1673,17 @@ export default {
 .coures-content{
     height: 745px;
     margin: 20px 80px;
-    background-color: #999;
+    background-color: #fff;
     display: flex;
-    .coures-info{
-        width: 500px;
-        background-color: #f0f0f0;
-        padding: 35px 30px;
+    .coures-infobox{
+       width: 500px;
+        .coures-info{
+        height: 745px;
+        background-color: #fff;
+       
         box-sizing: border-box;
         .hear-tab{
+            margin: 35px 30px;
             width: 300px;
             border-bottom: 1px solid #D8D8D8 ;
             display: flex;
@@ -270,8 +1698,11 @@ export default {
             }
         }
     }
+    }
+   
     .coures-play{
         flex: 1;
+        min-height: 745px;
     }
 }
 .coures-title{