diff --git a/src/views/portal/case/Index.vue b/src/views/portal/case/Index.vue
index f9c1eabf..957afcd6 100644
--- a/src/views/portal/case/Index.vue
+++ b/src/views/portal/case/Index.vue
@@ -144,27 +144,92 @@
          </el-row>
       </div>
       <div style="width: 245px;margin-left: 5px;">
-        <div id="fixd-box">
-           <el-card class="ranking-card">
-            <div slot="header">
-              <span>排行榜</span>
-            </div>
-            <div>
-              <el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
-                <el-col :span="6">
+        <div>
+           <div id="fixd-box">
+             <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in ankingList" :key="index" >
+                  <el-col :span="6" style="height:34px">
                     <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                     <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                     <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
-                </el-col>
-                <el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
-                <!-- <el-col class="center" :span="7">{{''}}</el-col>
-                <el-col class="center" :span="7">{{item.counts}}</el-col> -->
-              </el-row>
-            </div>
-          </el-card>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+                <div style="height: 10px;"></div>
+              <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in Popularity" :key="index" >
+                  <el-col :span="6" style="height:34px">
+                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
+                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
+                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+             <div style="height: 10px;"></div>
+              <el-card class="ranking-card" >
+              <div slot="header">
+                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
+              </div>
+              <div style="padding-bottom:10px">
+                <el-row class="ranking-title">
+                  <!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
+                  <!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
+                </el-row>
+                <el-row class="ranking-title  bacolor" v-for="(item, index) in Positive" :key="index" >
+                  <el-col :span="6" style="height:34px">
+                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
+                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
+                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
+                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
+                  </el-col>
+                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
+                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
+                  </el-tooltip>
+                  <!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
+                </el-row>
+              </div>
+            </el-card>
+
+
+           </div>
+
+
         </div>
+        
+
          
+
+
       </div>
+      
       <el-row :gutter="10">
       </el-row>
       <div style="height: 50px;"></div>
@@ -198,6 +263,7 @@ import author from '@/components/Portal/authorInfo.vue';
 import apiCase from '@/api/modules/cases.js';
 import apiUser from '@/api/system/user.js';
 import apiSearchterm from "@/api/modules/searchterm.js";
+import apiDict from "@/api/modules/dict.js";
 export default {
   name: 'index',
   components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
@@ -219,6 +285,8 @@ export default {
         list:[]
       },
       ankingList:[],
+      Popularity:[],
+      Positive:[],
       protocolDialogVisible: false,
       protocolConfirmButton:true,
       queryCondition:{
@@ -244,7 +312,9 @@ export default {
     }
     this.keyWord = this.$route.query.keyword;
     this.getAnkingData()
+    this.getPopularity()
     this.searchterm()
+    this.getPositive()
     this.getCaseData();
     window.addEventListener(
       "scroll",
@@ -377,17 +447,78 @@ export default {
       });
     },
     getAnkingData(){
-      apiCase.usernameList(10).then(res=>{
+      apiCase.usernameList(5).then(res=>{
         if(res.status==200){
           this.ankingList=res.result
+        //  console.log(res)
         }
       })
+    },
+    getPopularity(){
+      apiCase.queryPraises(5).then(res=>{
+        if(res.status==200){
+          this.Popularity=res.result
+          // console.log(this.Popularity)
+        }
+      })
+    },
+    getPositive(){
+      apiCase.queryComments(5).then(res=>{
+        if(res.status==200){
+          this.Positive=res.result
+           console.log(res)
+        }
+      })
+    },
+
+    jumpRouter(item){
+        this.$router.push(`/case/detail?id=${item.id}`);
+
     }
+
+
   }
 };
 </script>
 
 <style scoped lang="scss">
+.ranking-title {
+     line-height: 34px;
+    font-size: 15px;
+    color: #333333;
+    .center-titlt{
+      font-size: 15px;
+      color: #333333;
+    }
+    .center{
+      text-align: right;
+    }
+    img{
+      margin-top: 5px;
+    }
+  }
+::v-deep .title-line-ellipsis{
+  // width: 100%;
+   display: -webkit-box;
+   overflow: hidden;
+  text-overflow:ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  box-sizing: border-box;
+  word-break:break-all;
+}
+::v-deep .el-card__body{
+  padding: 0;
+}
+::v-deep .bacolor:nth-child(odd){
+  background-color: #fff;
+  padding: 0 5px;
+}
+::v-deep .bacolor:nth-child(even){
+  background-color: #f6f6f6;
+  padding: 0 5px;
+
+}
 ::v-deep .el-card{
   border: none;
   border-radius: 0px;
@@ -598,8 +729,7 @@ export default {
       text-align: center;
     }
   }
-  .ranking-title {
-  }
+  
   .aligh-title{
     font-size: 14px;
     color: #333333;
diff --git a/src/views/portal/course/Micro.vue b/src/views/portal/course/Micro.vue
index b3d5d35b..da23d7ff 100644
--- a/src/views/portal/course/Micro.vue
+++ b/src/views/portal/course/Micro.vue
@@ -1,1677 +1,1685 @@
-<template>
-  <div>
-    <portal-header current="course" :goSearch="1"></portal-header>
-    <div class="portal-content xcontent">
-      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
-        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-card :body-style="{ padding: '0px', 'min-height': '500px' }">
-            <el-row class="detail">
-              <el-col :span="18">
-                <el-tabs v-model="activeName" @tab-click="changeTab">
-                  <el-tab-pane label="课件" name="courseware">
-                    <div>
-                      <div class="courseware-div" v-if="enrollStutas == 1" style="max-height: 400px;">
-                        <course-image :course="courseInfo" class="courseware-img"></course-image>
-                       <!-- <el-button type="warning"  @click="submitEnroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button> -->
-                      </div>
-                      <div class="courseware-div" v-else>
-                       <div v-if="coursewareInfo.content.contentType == 10" style="position: relative;">
-                           <videoPlayer id="myVideoPlayer" :src="fileBaseUrl+curriculumData.url" style="width: 100%;"
-                            @onPlayerPlaying="onPlayerPlaying"
-                            @onPlayerPlay="onPlayerPlay"
-                            :initTime="videoPlayingTime"
-                            :isDrag="curriculumData.isDrag"
-                            @onPlayerPause="onPlayerPause"
-                            @onFullscreen="onFullscreen"
-                            @onPlayerEnded="onPlayerEnded">
-                        </videoPlayer>
-                         <!-- v-if="playerBoxShow" -->
-                         <div class="player-box" v-if="playerBoxShow">
-                        <div class="player-praise">
-                          <div @click="praiseContent" style="cursor: pointer;">
-                            <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="coursewareInfo.content.contentType == 20">
-                        <div class="con-audio">
-                          <div class="con-audio-player">
-                            <audioPlayer :url="fileBaseUrl+curriculumData.url"
-                              :name="coursewareInfo.content.contentName"
-                                @onPlaying="audioPlaying"
-                                @onPlay="audioPlay"
-                                :isDrag="curriculumData.isDrag"
-                                @onPause="audioPause"
-                                @onPlayEnd="audioEnd">
-                            </audioPlayer>
-                          </div>
-                        </div>
-                      </div>
-                      <div v-if="coursewareInfo.content.contentType == 30">
-                        <img :src="fileBaseUrl+coursewareInfo.content.content" alt="图片">
-                      </div>
-                      <div v-if="coursewareInfo.content.contentType == 40">
-                        <pdfPreview :autoScroll="true" v-if="coursewareInfo.content.contentType == 40" :filePath="fileBaseUrl+coursewareInfo.content.content"></pdfPreview>
-                      </div>
-                      <div v-if="coursewareInfo.content.contentType == 41">
-                        <div class="couretitle" style="padding: 20px;text-align: left;" v-html="coursewareInfo.content.content"></div>
-                        </div>
-                      <div v-if="coursewareInfo.content.contentType == 52">
-                          <div class="hyper-link" v-if="conLink.openType==2">
-                              <div class="hyper-link-row">课程内容是外部连接</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;border:0px" border="0" frameborder="0"></iframe>
-                          </div>
-                      </div>
-                    </div>
-                  </div>
-                  </el-tab-pane>
-                  <el-tab-pane v-if="homeworkInfo.has" :disabled="enrollStutas == 1" label="作业" name="homework">
-                    <homework v-if="studyId!=''" :studyId="studyId" :content="homeworkInfo.content" ></homework>
-                  </el-tab-pane>
-                  <el-tab-pane v-if="examInfo.has" :disabled="enrollStutas == 1" label="考试" name="test">
-                    <exam v-if="studyId!=''" :studyId="studyId" :content="examInfo.content"></exam>
-                  </el-tab-pane>
-                  <el-tab-pane v-if="assessInfo.has" :disabled="enrollStutas == 1" label="评估" name="assess">
-                    <assess v-if="studyId!=''" :studyId="studyId" :content="assessInfo.content"></assess>
-                  </el-tab-pane>
-                </el-tabs>
-                <div style="display: flex;justify-content: space-between;padding: 10px;align-items: center;">
-                  <div class="score">
-                    <!-- <el-rate disabled v-model="courseInfo.score" :max="5" :allow-half="true" show-score score-template="{value}"></el-rate> -->
-                    <div v-if="enrollStutas == 1 && !scoreInfo.has">
-                      <div v-if="courseInfo.score">
-                          <el-rate disabled v-model="courseInfo.score"></el-rate>
-                          <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
-                      </div>
-                      <div v-else class="score-no">未评分</div>
-                    </div>
-
-                   <div v-if="enrollStutas == 2" style="display: flex;justify-content: center; align-items: center;">
-                      <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top: 15px;">
-                                <el-rate  v-model="scoreInfo.score"  @change="addScore"></el-rate>
-                      </div>
-                      <div v-else style="padding-top: 10px;display: flex;margin-left: 10px">
-                        <div style="padding-top: 5px;">
-                        <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
-                        </div>
-                        <div><span class="score-text">{{toScore(courseInfo.score)}}</span><span style="font-size: 14px;">分</span></div>
-                      </div>
-                   </div>
-                  </div>
-                  <div style="display: flex;align-items: center;padding-top: 15px;">
-                    <div @click="praiseContent" style="cursor: pointer;">
-                      <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/praise.png')"><span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.praises}}</span>
-                    </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/trample.png')"><span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.trampleCount}}</span>
-                    </div>
-                  </div>
-                </div>
-              </el-col>
-              <el-col :span="6" class="cont">
-                <interactBar :readonly="enrollStutas==1" :type="1" :data="courseInfo" :views="false" :praises="false" :comments="false"></interactBar>
-                <div class="title title-index">{{courseInfo.name}}</div>
-                <div class="study-count"><span class="num">{{courseInfo.studys}}人学习</span></div>
-                <!-- <div class="course-info-tools-btns">
-                    <span style="color: #f8a114;font-size: 36px;">{{toScore(courseInfo.score)}}</span>
-                    <span style="font-size: 14px;color: #787878;">分</span>
-                </div> -->
-                <!-- <div class="label"><el-tag class="label-item" effect="plain">了解公司</el-tag></div> -->
-                <div class="label"><el-tag class="label-item" effect="plain">录播课</el-tag></div>
-                <div class="label" v-if="tags.length >0">
-                  <el-tag class="label-item" effect="plain" v-for="(item, index) in tags" :key="index">{{item}}</el-tag>
-                  <!-- <el-tag class="label-item" effect="plain">中心长</el-tag> -->
-                </div>
-                <div v-if="enrollStutas != 2" class="score"  style="padding-top: 135px;justify-content: flex-start;">
-                    <!-- <el-rate style="display: inline-block; " disabled v-model="courseInfo.score" score-template="{value}" show-score text-color="#ff8e00"></el-rate>
-                    <span style="font-size: 14px;color: #f7ba2a;">分</span> -->
-                    <div v-if="courseInfo.score">
-                    <el-rate disabled v-model="courseInfo.score"></el-rate>
-                    <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
-                    </div>
-                    <div v-else class="score-no">未评分</div>
-                    <!-- <el-rate style="display: inline-block; " disabled v-model="courseInfo.score" text-color="#ff8e00"></el-rate>
-                    <span style="font-size: 14px;color: #f7ba2a;">{{courseInfo.score}}分</span> -->
-                </div>
-                <!-- <div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div> -->
-                <!--资源归属是一共有三级，这里只显示三级-->
-                <!-- <div class="study-count">资源归属：{{courseInfo.resOwner}}</div> -->
-                <!-- <div class="btn-div" style="padding-top: 70px;">
-                  <el-button class="btn" type="primary" v-if="enrollStutas == 1" @click="submitEnroll">立即报名</el-button>
-                </div> -->
-                <!-- 二维码 -->
-                <!-- <div class="qr-code" style="padding-top: 10px;">
-                  <div id="qrcode" ref="qrcode" class="qrcode" ></div>
-                  <div>手机扫码观看</div>
-                </div> -->
-               <!-- <div style="width: 100px;height:300px" v-if="courseInfo.device == 2 || courseInfo.device == 3"> -->
-                  <img class="detail-img" v-show="!showQrcode && (courseInfo.device == 2 || courseInfo.device == 3)" @click="showQrcode = true" src="../../../assets/images/qr.png" alt="" srcset="">
-                  <div class="qr-code" v-show="showQrcode && ((courseInfo.device == 2 || courseInfo.device == 3))" style="padding-top: 10px;">
-                    <div id="qrcode" ref="qrcode" class="qrcode" @click="showQrcode = false"></div>
-                    <!-- <div style="margin-left: 27px">手机扫码观看</div> -->
-                  </div>
-                <!-- </div> -->
-              </el-col>
-              <!-- 11 -->
-            </el-row>
-          </el-card>
-          <el-row :gutter="10">
-            <el-col :span="18">
-              <div class="el-tab-pane-boxContent" style="background-color: #FFFFFF;padding: 20px;margin-top: 10px;">
-                 <el-tabs v-model="bootTabActive">
-                    <el-tab-pane label="课程介绍" name="info">
-                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群</div>
-                      <div class="content-text" >{{courseInfo.forUsers}}</div>
-                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值</div>
-                      <div class="content-text">{{courseInfo.value}}</div>
-                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍</div>
-                      <div class="content-text" v-html="courseInfo.summary"></div>
-                    </el-tab-pane>
-                    <el-tab-pane :label="'评论('+commentsTtoal+')'" name="commnets">
-                      <comments v-if="courseInfo.id!=''"
-                        :readonly="enrollStutas==1"
-                        :showTop="false"
-                        @writeTotal="showCommentsTotal"
-                        @success="addCommentSuccess"
-                        @delSuccess="delCommentSuccess"
-                        :obj-type="1"
-                        :to-users="toUsers"
-                        :obj-id="courseInfo.id"
-                        :obj-title="courseInfo.name">
-                      </comments>
-                    </el-tab-pane>
-                  </el-tabs>
-                </div>
-            </el-col>
-            <el-col :span="6">
-              <el-card :body-style="{ padding: '0px' }" class="teachers">
-                <div class="top">授课讲师</div>
-                <div>
-                  <div class="teacher" v-for="(item, idx) in teachers" :key="idx" >
-                    <div class="teacher-avator">
-                      <el-avatar v-if="item.avatar !== ''" :src="item.avatar" shape="circle" :size="50"></el-avatar>
-                      <!-- <div class="teacher-text" v-if="item.avatar !== '' "></div> -->
-                      <!-- <el-avatar v-if="item.avatar && item.avatar!=''" icon="el-icon-user" shape="square" :size="50"></el-avatar> -->
-                       <div class="teacher-text" v-else>
-                         <div v-if="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>
-            </el-col>
-          </el-row>
-        </el-col>
-      </el-row>
-    </div>
-    <portal-footer></portal-footer>
-  </div>
-</template>
-
-<script>
-import QRCode from 'qrcodejs2';
-import { mapGetters,mapActions} from 'vuex';
-import portalHeader from "@/components/PortalHeader.vue";
-import comments from "@/components/Portal/comments.vue";
-import portalFooter from "@/components/PortalFooter.vue";
-import interactBar from "@/components/Portal/interactBar.vue";
-import apiCourse from "@/api/modules/course.js";
-import apiCourseFile from "@/api/modules/courseFile.js";
-import apiCoursePortal from "@/api/modules/coursePortal.js";
-import apiUser from '@/api/system/user.js';
-import exam from '@/components/Course/exam';
-import homework from '@/components/Course/homework';
-import assess from '@/components/Course/assess';
-import {
-  formatDate,
-  resListMap,
-  toScore,
-  courseType,
-  getType,
-  numberToLetter,
-  correctJudgment,
-  userAvatarText
-} from "@/utils/tools.js";
-import apicourseStudy 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 FileUpload from "@/components/FileUpload/index.vue";
-import pdfPreview from "@/components/PdfPreview/index.vue";
-// import {resOwnerIndexName} from '@/utils/type.js';
-import { setTimeout } from "timers";
-import videoPlayer from '@/components/VideoPlayer/index.vue';
-import audioPlayer from '@/components/AudioPlayer/index.vue';
-import courseImage from "@/components/Course/courseImage.vue";
-import studyUtil from '@/utils/study.js';
-import {encrypt} from '@/utils/jsencrypt.js';
-import cookies from 'vue-cookies'
-export default {
-  name: "micro",
-  components: {
-    portalHeader,
-    portalFooter,
-    interactBar,
-    FileUpload,
-    comments,
-    pdfPreview,
-    videoPlayer,
-    audioPlayer,
-    courseImage,
-    homework,
-    exam,
-    assess
-  },
-  computed: {
-    ...mapGetters(['resOwnerMap','sysTypeMap','userInfo']),
-  },
-  data() {
-    return {
-      sex:null,
-      playerBoxShow:false,
-      userAvatarText,
-      showQrcode:false,
-      qrcode: '',
-      showiframe: false,//用于超连接的
-      toScore,
-      correctJudgment:correctJudgment,
-      show:0,
-      studyId: "",
-      tags: [],
-      numberToLetter: numberToLetter,
-      // resOwnerListMap: resOwnerIndexName,
-      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
-      blobUrl:'',//播放的文件地址，新添加，采用blob方式
-      getType: getType,
-      courseType,
-      activeName: "courseware",
-      courseInfo: {
-        id: "",
-        type: 10,
-        name: "",
-        favorites: 0,
-        comments: 0,
-        shares: 0,
-        praises: 0,
-        views: 0
-      },
-      toUsers:[],//可以@的用户列表
-      teachers: [],
-      totalContent: 4, //微课默认是4项
-      conLink:{openType:1,url:''},//对于超连接的内容
-      curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
-      coursewareInfo: {
-        content: {},
-        finish: false,
-        process:0,
-        status:1,
-        studyItemId: ""
-      },
-      homeworkInfo: {
-        has: false,
-        content: {},
-        info: {},
-        studyItemId: "",
-        filePath: ""
-      },
-      examInfo: {
-        has: false,
-        content: {},
-        info: {},
-        paper: [],
-        studyItemId: ""
-      },
-      assessInfo: {
-        has: false,
-        allowSubmit: true,
-        content: {},
-        info: {},
-        studyItemId: ""
-      },
-      enrollStutas: 1, // 1 :未报名，2:已报名
-      dialogVisible: false,
-      testStart: false,
-      courseRate: 5,
-      videoPlayingTime:0,//当前视频的耿入的时间点
-      appendStartTime: null, //记录追加的开始时间
-      scoreInfo: {
-        score: 5,
-        has: false
-      },
-      interactRuning:false,
-      isPraise: false,
-      isTrample: false,
-      bootTabActive:'info',
-      commentsTtoal:0,
-      appendHandle:null,//追加时长时间对象
-      isAppendTime:false,//是否追加学习时长
-      appentId:'',//当前追加的学习时长的id
-      appentInterval:30000,//追加学习时间的间隔 30秒加一次
-    };
-  },
-  mounted() {
-    this.showQrimage();
-    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
-    this.loadResOwners();
-    let id = this.$route.query.id;
-    this.courseInfo.id = id;
-    let $this = this;
-    //页面只支取一次，所以先直接写在这里面
-    apiCoursePortal.detail(id).then(rs => {
-      if (rs.status == 200) {
-        this.courseInfo = rs.result.course;
-        // this.courseInfo.score = this.toScore(rs.result.course.score);
-        if(rs.result.course.tags != '') this.tags = rs.result.course.tags.split(",");
-        this.teachers = rs.result.teachers;
-
-        if(rs.result.teachers && rs.result.teachers.length > 0){
-          let userIds=[];
-          let ctoUsers=[];
-          rs.result.teachers.forEach(item=>{
-            item.avatar = "";
-            userIds.push(item.teacherId);
-            ctoUsers.push({aid:item.teacherId,name:item.teacherName,});
-          })
-          this.toUsers=ctoUsers;
-          this.loadAuthorInfo(rs.result.teachers,userIds)
-        }
-        this.totalContent = rs.result.contents.length; //计算总内容数
-        if (!rs.result.course.resOwner3) {
-          this.courseInfo.resOwner = this.resOwnerName(
-            rs.result.course.resOwner2
-          );
-        } else {
-          this.courseInfo.resOwner = this.resOwnerName(
-            rs.result.course.resOwner3
-          );
-        }
-        rs.result.contents.forEach(con => {
-          if (con.sortIndex == 1) {
-            $this.coursewareInfo.content = con;
-            if(con.contentType == 10 || con.contentType == 20) {
-                if(con.content.startsWith('\{')){
-                 this.curriculumData=JSON.parse(con.content);
-              }else{
-                 this.curriculumData.url=con.content;
-              }
-              //对url进行加密处理
-              $this.createPlayUrl(this.curriculumData.url);
-
-            } else if (con.contentType == 40) {
-              //需要读取pdf的路径
-              if($this.coursewareInfo.content.content!='' && $this.coursewareInfo.content.content.indexOf('.pdf')==-1){
-                  apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
-                    if(cfrs.status==200){
-                       $this.coursewareInfo.content.content=cfrs.result.previewFilePath;
-                    }else{
-                       $this.$message.error('加载pdf课件文件失败');
-                    }
-                  });
-              }
-              //let url = this.fileBaseUrl + r.content;
-            }else if(con.contentType ==52){
-              if(con.content.startsWith('\{')){
-                 this.conLink=JSON.parse(con.content);
-              }else{
-                 this.conLink.url=con.content;
-                 this.conLink.openType=1;
-              }
-              if(this.conLink.openType==2){
-                //直接设置完成状态
-                this.widthOpen(this.conLink.url);
-              }
-            }
-            // //加载课件的学习情况
-          } else if (con.sortIndex == 2) {
-            $this.homeworkInfo.content = con;
-            $this.homeworkInfo.has = true;
-            //查询作业信息，并显示
-          } else if (con.sortIndex == 3) {
-            $this.examInfo.has = true;
-            $this.examInfo.content = con;
-            //查询考试信息并显示
-            //$this.loadExamInfo();
-          } else if (con.sortIndex == 4) {
-            $this.assessInfo.has = true;
-            $this.assessInfo.content = con;
-            //转化文本为json内容
-          }
-        });
-        //study info
-        this.loadStudyInfo();
-      } else {
-        this.$message.error(rs.message);
-      }
-    });
-  },
-  methods: {
-     createPlayUrl(u){
-       let nowDate=new Date();
-       let ctime=parseInt(nowDate.getTime()/1000);
-       let beforeUrl=parseInt(nowDate.getTime()/1000)+u;
-       //console.log(beforeUrl,'beforeUrl');
-       let urlSign=encodeURIComponent(encrypt(beforeUrl));
-       //console.log(urlSign,'urlSign');
-       cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
-       this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/play/resource?sign='+urlSign;
-
-     },
-     createVideoBlob(url){
-       let $this=this;
-       let xhr = new  XMLHttpRequest;
-       xhr.open("GET",url,true);
-       xhr.responseType = 'blob';
-       //xhr.onload：只有 4 状态会触发
-       xhr.onreadystatechange = function() {
-           if (xhr.readyState==4 && xhr.status == 200) {//请求成功
-               //获取blob对象
-               let blob = xhr.response;
-               //获取blob对象地址，并把值赋给容器
-               let urlObj = window.URL.createObjectURL(blob);
-               $this.blobUrl=urlObj;
-           }
-       };
-       xhr.send();
-     },
-     showQrimage(row){
-       let urlPre=window.location.protocol+'//'+window.location.host;
-      // https://u.boe.com/mobile/pages/resource/microDetail?id=963456709515939840
-      // this.qrcode = this.webBaseUrl+'/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
-        this.qrcode =urlPre+ '/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
-        //console.log(this.qrcode,'qrcode');
-        this.$nextTick(() => {
-        this.crateQrcode();
-      });
-     },
-    crateQrcode(){
-       this.qr = new QRCode('qrcode', {
-        width: 80,
-        height: 80, // 高度
-        text: this.qrcode // 二维码内容
-        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
-        // background: '#f0f'
-        // foreground: '#ff0'
-      });
-    },
-    ...mapActions({
-      getResOwnerTree:'resOwner/getResOwnerTree',
-      loadResOwners:'resOwner/loadResOwners',
-      getSysTypeTree:'sysType/getSysTypeTree',
-      loadSysTypes:'sysType/loadSysTypes'
-    }),
-    resOwnerName(code){
-      if(code==''){return '';}
-      return this.resOwnerMap.get(code);
-    },
-    widthOpen(url) {
-      window.open(this.webBaseUrl+url,'_blank');
-    },
-    showCommentsTotal(total){
-      this.commentsTtoal=total;
-    },
-    addCommentSuccess(comm){
-      this.commentsTtoal++;
-    },
-    delCommentSuccess() {
-      this.commentsTtoal--;
-    },
-    saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
-      if(this.coursewareInfo.finish || this.coursewareInfo.studyItemId) {
-        return;//已记录学习记录的不再保存
-      }
-      let params = {
-        studyId: this.studyId, //学习id,
-        courseId: this.courseInfo.id, //课程id,
-        contentId: this.coursewareInfo.content.id, //内容id,
-        contentType:this.coursewareInfo.content.contentType, //内容id,
-        contentName: this.coursewareInfo.content.contentName, //内容名称
-        progress: 0,
-        lastStudyTime:0,
-        status:2,
-        studyDuration:0,
-        contentTotal: this.totalContent
-      };
-      apiVideoStudy.saveStudyItem(params).then(res=>{
-          if(res.status == 200){
-            this.coursewareInfo.studyItemId=res.result.id;
-            this.coursewareInfo.finish = false;
-            this.coursewareInfo.status = 2;
-            this.coursewareInfo.progress = 1;
-          }else{
-            console.log("记录学习失败:" + res.message + "，" + res.error);
-          }
-      });
-    },
-    finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
-        let params={
-          itemId:this.coursewareInfo.studyItemId,
-          studyId:this.studyId,
-          courseId:this.courseInfo.id,
-          cnum:this.totalContent
-        }
-        apiVideoStudy.finishStudyItem(params).then(res=>{
-            if(res.status == 200){
-              this.coursewareInfo.finish = true;
-              this.coursewareInfo.status = 9;
-              this.coursewareInfo.progress = 100;
-            }else{
-              console.log("记录完成学习失败:" + res.message + "，" + res.error);
-            }
-        });
-    },
-    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);
-        //console.log(markDiv,'markDiv');
-      	if(markDiv){
-      		div.removeChild(markDiv);
-      	}
-      }
-    },
-    onPlayerPlay(){
-      this.playerBoxShow = false;
-      //console.log("开始播放");
-      this.isAppendTime=false;
-
-      //视频类的内容，开始播放时才会记录完成情况
-      //2022-05-24修改，判断播放的
-      let $this=this;
-      //console.log(this.curriculumData,'this.curriculumData');
-      //完成类型 completeSetup 0表默认，打开后5秒算学完，1表按进度，2表按时间
-      //完成值（非默认情况下起作用） setupTage
-      if(!$this.coursewareInfo.finish){
-        let completeType=this.curriculumData.completeSetup;
-        if(completeType==0){
-          //默认5秒后学习完成.
-          setTimeout(() => {$this.saveStudyInfo();}, 5000);
-        }else{
-          //先记录进行中的学习内容
-          this.saveStudyItem();
-        }
-      }
-    },
-    onPlayerPause(){
-      //console.log("暂停");
-    },
-    onPlayerEnded(){
-       //this.onFullscreen(false);//退出全屏
-       this.playerBoxShow = true;
-       this.isAppendTime=true;//开始追加学习时间
-       //this.saveStudyDuration();//保存添加学习时长
-       if(!this.coursewareInfo.finish){
-         this.finishStudyItem();
-       }
-    },
-    onPlayerPlaying(itme){
-      this.isAppendTime=false;//禁止追加学习时间
-      this.appendStartTime=null;
-      //console.log("当前播放11"+itme);
-      let intTime=parseInt(itme);
-      //console.log(intTime,'intTime');
-      this.videoPlayingTime=intTime;
-      //判断是否完成
-      let completeType=this.curriculumData.completeSetup;
-      let completeSecond=this.curriculumData.second;
-      if(!completeSecond){
-        completeSecond=5;//如果没有就采用默认的时间了
-      }
-
-      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-          if(completeType==1){
-            let finishPercent=this.curriculumData.setupTage;
-            let videDuration=this.coursewareInfo.content.duration;
-            let percent =intTime*100/videDuration;
-            if(percent>=finishPercent){
-                this.finishStudyItem();
-            }
-          }else if(completeType==2){
-            if(intTime>completeSecond){
-               this.finishStudyItem();
-            }
-          }
-
-      }
-      //以下是每10秒记录一次学习时长
-      let saveTime=Math.floor(intTime%10);
-      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
-        //记录播放时间
-        //console.log('记录播放时间:'+intTime);
-        let postData={
-          itemId:this.coursewareInfo.studyItemId,
-          videoTime:intTime
-        }
-        apicourseStudy.studyVideoTime(postData).then(rs=>{
-           if(rs.status!=200){
-             console.log('记录播放时间错误');
-           }
-        })
-      }
-
-    },
-    audioPlaying(item,currentTime){
-      let intTime=parseInt(currentTime);//秒
-      //console.log("当前播放时间="+item+',currentTime='+intTime);
-      //判断是否完成
-      let completeType=this.curriculumData.completeSetup;
-      let completeSecond=this.curriculumData.second;
-      if(!completeSecond){
-        completeSecond=5;//如果没有就采用默认的时间了
-      }
-
-      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-          if(completeType==1){
-            let finishPercent=this.curriculumData.setupTage;
-            let videDuration=this.coursewareInfo.content.duration;
-            let percent =intTime*100/videDuration;
-            if(percent>=finishPercent){
-                this.finishStudyItem();
-            }
-          }else if(completeType==2){
-            if(intTime>=completeSecond){
-               this.finishStudyItem();
-            }
-          }
-
-      }
-      //以下是每5秒记录一次学习时长
-      let saveTime=Math.floor(intTime%10);
-      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
-        //记录播放时间
-        //console.log('记录播放时间:'+intTime);
-        let postData={
-          itemId:this.coursewareInfo.studyItemId,
-          videoTime:intTime
-        }
-        apicourseStudy.studyVideoTime(postData).then(rs=>{
-           if(rs.status!=200){
-             console.log('记录播放时间错误');
-           }
-        })
-      }
-    },
-    audioPlay(){
-      //console.log("开始播放");
-      let $this=this;
-      if (!$this.coursewareInfo.finish) {
-        let completeType=this.curriculumData.completeSetup;
-        //console.log(completeType,"completeType");
-        if(completeType==0){
-          //默认5秒后学习完成.
-          setTimeout(() => {$this.saveStudyInfo();}, 5000);
-        }else{
-          //先记录进行中的学习内容
-          this.saveStudyItem();
-        }
-      }
-    },
-    audioPause(){
-      //console.log("暂停");
-    },
-    audioEnd(){
-      // this.playerBoxShow = true;
-      //console.log("播放结束");
-      if(!this.coursewareInfo.finish){
-        this.finishStudyItem();
-      }
-    },
-    changeTab(tab){
-      this.playerBoxShow = false;
-      this.saveStudyDuration();//保存一次学习时长，在切换时
-      let $this = this;
-      if (tab.name == "homework") {
-
-      } else if (tab.name == "test") {
-
-      } else if (tab.name == "assess") {
-        // //console.log('加载评估信息');,评估只会有一个，所以主直接取
-        // let params = {
-        //   studyId: this.studyId,
-        //   contentId: this.assessInfo.content.id
-        // };
-        // apicourseStudy.myAssessList(params).then(res => {
-        //   if (res.status == 200) {
-        //     if (res.result.length > 0) {
-        //       this.assessInfo.allowSubmit = false;
-        //       this.assessInfo.info = JSON.parse(res.result[0].asContent);
-        //     }
-        //   } else {
-        //     this.$message.error(res.message);
-        //   }
-        // });
-      } else {
-        //在课件页面，记录开始时间
-        //对于视频类的，是在点击开始播放后执行的
-        if(this.coursewareInfo.content.contentType>10){
-          this.isAppendTime=true;
-          this.appendStudyTime(false);
-          if(!this.coursewareInfo.finish){
-             setTimeout(() => {$this.saveStudyInfo();}, 5000);
-          }
-        }else{
-          this.isAppendTime=false;
-        }
-      }
-    },
-    saveStudyInfo() {
-      //记录课件学习信息
-      if (this.activeName != "courseware") {
-        //只有在课件页面停留超过5秒才会记录
-        return;
-      }
-      if (this.coursewareInfo.finish) {
-        return;
-      }
-      let params = {
-        studyId: this.studyId, //学习id,
-        courseId: this.coursewareInfo.content.courseId, //课程id,
-        contentId: this.coursewareInfo.content.id, //内容id,
-        contentType:this.coursewareInfo.content.contentType, //内容id,
-        contentName: this.coursewareInfo.content.contentName, //内容名称
-        progress: 100,
-        status:9,
-        contentTotal: this.totalContent
-      };
-      apicourseStudy.studyContent(params).then(res => {
-        if (res.status == 200) {
-          this.coursewareInfo.studyItemId=res.result;
-          this.coursewareInfo.finish = true; //课件内容已学习，记录状态
-        } 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.coursewareInfo.content.id,
-             studyInfo:
-               this.courseInfo.name +
-               "-" +
-               this.coursewareInfo.content.contentName,
-             duration: duration
-           };
-           apicourseStudy.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.isAppendTime){
-        //如果不追加时间，把追加开始时间设置为null
-        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); //计算秒数
-
-      //console.log(duration,'duration')
-      //console.log(sen,'sen')
-      duration=duration+sen;
-      if(flag){
-         //这个时候才进行存储 ，否则只能是存储在本地
-         if(duration>0){
-            let postData = {
-              id:this.appentId,
-              studyId: this.studyId,
-              courseId: this.courseInfo.id,
-              contentId: this.coursewareInfo.content.id,
-              studyInfo:
-                this.courseInfo.name +
-                "-" +
-                this.coursewareInfo.content.contentName,
-              duration: sen
-            };
-            apicourseStudy.appendStudyTime(postData).then(rs => {
-              if (rs.status == 200){
-                $this.appentId=rs.result;
-                $this.appendStartTime = new Date(); //重置开始时间
-                studyUtil.clearStudyDuration();//清除本地存储
-              } else {
-                console.log(rs.message);
-              }
-            });
-         }
-
-      }else{
-        $this.appendStartTime = new Date(); //重置开始时间
-        studyUtil.setStudyDuration(duration);//添加到本地存储中
-      }
-      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
-    },
-    loadStudyInfo() {
-      //获取学习信息
-      let $this = this;
-      this.loadScorePraiseAndTrample();
-      apicourseStudy.studyInfo(this.courseInfo.id).then(res => {
-        if (res.status == 200) {
-          res.result.signup ? (this.enrollStutas = 2) : (this.enrollStutas = 1);
-          if(res.result.signup) {
-            //this.bootTabActive = 'commnets';//系统自动报名，这里不进行切换了
-            this.studyId = res.result.studyId; //设置学习id
-
-            //需要判断此内容是否已学习完成，如果已学习完成，不需要再请不说了
-            res.result.contents.forEach(con => {
-              if (con.contentId == $this.coursewareInfo.content.id) {
-                  $this.coursewareInfo.studyItemId=con.id;
-                  $this.coursewareInfo.status=con.status;
-                  $this.coursewareInfo.progress=con.progress;
-
-                  if(con.contentType==10 || con.contentType==20){
-                    if(con.progress==100 || con.status==9){
-                      $this.coursewareInfo.finish = true;
-                    }else{
-                      $this.coursewareInfo.finish = false;
-                    }
-                  }else{
-                    $this.coursewareInfo.finish = true; //课件已学习
-                  }
-
-                  if(con.lastStudyTime){
-                    //如果上次课件已经播放完成，此处应该是$this.coursewareInfo.content.duration
-                    //也就是从头开开始
-                    $this.videoPlayingTime=con.lastStudyTime;
-                  }
-                //console.log()
-              }else if (con.contentId == $this.homeworkInfo.content.id) {
-                  $this.homeworkInfo.studyItemId = con.id;
-              }else if (con.contentId ==$this.examInfo.content.id) {
-                  $this.examInfo.studyItemId = con.id;
-              }else if (con.contentId == $this.assessInfo.content.id) {
-                  $this.assessInfo.studyItemId = con.id;
-              }
-            });
-            //存储上一次学习时长，主要用于上次未存储的学习时长
-            this.saveStudyDuration();
-            if(!$this.coursewareInfo.finish && $this.coursewareInfo.content.contentType>20) {
-              //未完居，并且类型不是视频的，直接设计5秒后学习完成
-                setTimeout(() => {$this.saveStudyInfo();}, 5000); //5秒后记录学习
-                //开始记录学习时长
-                $this.isAppendTime=true;
-                $this.appendStudyTime(false);
-            }
-          }else{
-            //signup 没有报名的情况下，直接报名
-            this.submitEnroll();
-          }
-        } else {
-          this.$message.error(res.message);
-        }
-      });
-    },
-    submitEnroll() { //提交报名
-      let pamars = {
-        courseId: this.courseInfo.id,
-        courseName: this.courseInfo.name,
-        courseType: this.courseInfo.type,
-        signType: 1,
-        signInfo: ""
-      };
-      let $this = this;
-      apicourseStudy.signup(pamars).then(res => {
-        if (res.status == 200) {
-          //this.$message({ type: "success", message: "报名成功" });
-          this.enrollStutas = 2;
-          this.studyId=res.result.studyId;//设置学习的ID
-          //this.loadStudyInfo();
-          if($this.coursewareInfo.content.contentType>20){
-              this.isAppendTime=true;
-              this.appendStudyTime(false); //报名成功记录开始时间
-              //报名成功后，就直接记录课件学习情况，5秒后
-              setTimeout(() => {$this.saveStudyInfo();}, 5000);
-          }else{
-             //对于视频类的处理，用户手动点击播放，不做处理
-          }
-        } else {
-          this.$message.error(res.message);
-        }
-      });
-    },
-    loadScorePraiseAndTrample() {
-      //加载是否打过分
-      //if(this.enrollStutas>1){
-        apiCourseGrade.has(this.courseInfo.id).then(rs => {
-          if (rs.status == 200 && rs.result) {
-            this.scoreInfo.has = true;
-          }
-          //console.log(rs.result,'rs.result');
-        });
-      //}
-      apiPraises.has(1, this.courseInfo.id).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.isPraise = true;
-        }
-      });
-      apiTrample.has(this.courseInfo.id).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.enrollStutas==1){
-        this.$message.error("报名学习之后才可以点赞");
-        return;
-      }
-      if(this.isTrample){
-        this.$message.error("您已踩过了，不能再赞了");
-        return;
-      }
-      if(this.interactRuning){
-				return;
-			}
-			this.interactRuning=true;
-      let postData = {
-        objType: 1,
-        objId: this.courseInfo.id,
-        title: this.courseInfo.name
-      };
-      if(this.isPraise){
-         apiPraises.remove(1,this.courseInfo.id).then(res=>{
-           this.interactRuning=false;
-           if (res.status == 200){
-             if(this.courseInfo.praises>0){
-               this.courseInfo.praises--;
-             }
-             this.$message.info("已取消点赞");
-             this.isPraise = false;
-           } else {
-             this.$message.error("取消点赞失败,请稍后再试");
-           }
-          });
-      }else{
-        apiPraises.save(postData).then(rs => {
-          this.interactRuning=false;
-          if (rs.status == 200) {
-            this.courseInfo.praises++;
-            this.$message.success("点赞成功");
-            this.isPraise = true;
-          } else {
-            this.$message.error("点赞失败,请稍后再试");
-          }
-        });
-      }
-
-    },
-    treadContent() {
-      if(this.enrollStutas==1){
-        this.$message.error("只有报名学习后才可以踩");
-        return;
-      }
-      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) {
-            if(this.courseInfo.trampleCount>0){
-              this.courseInfo.trampleCount--;
-            }
-            this.$message.info("已取消踩");
-            this.isTrample = false;
-          } else {
-            this.$message.error("取消失败,请稍后再试");
-          }
-        });
-      }else{
-        apiTrample.trample(this.courseInfo.id).then(rs => {
-          this.interactRuning=false;
-          if (rs.status == 200) {
-            this.courseInfo.trampleCount++;
-            this.$message.success("已踩");
-            this.isTrample = true;
-          } else {
-            this.$message.error("踩失败,请稍后再试");
-          }
-        });
-      }
-
-    },
-    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){
-                if(author.avatar){
-                  item.avatar=this.fileBaseUrl + author.avatar;
-                }
-                this.sex = author.sex
-                return true;
-              }else{
-                return false;
-              }
-            })
-          });
-        }else{
-          //console.log('加载课程信息失败:'+res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-  }
-};
-</script>
-
-<style scoped lang="scss" scoped>
-.couretitle{
-  word-break: break-all;
-}
-::v-deep .teacher .teacher-avator .teacher-text {
-  background: none;
-  border: none;
-}
-
-
-.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: 39px;
-  }
-}
-::v-deep .el-tabs__nav-wrap::after {
-    // content: "";
-    // position: absolute;
-    // left: 0;
-    // bottom: 0;
-    // width: 100%;
-    // height: 2px;
-    background-color: #fff;
-    // z-index: 1;
-}
-::v-deep .el-tabs__nav-wrap::after {
-    // content: "";
-    // position: absolute;
-    // left: 0;
-    // bottom: 0;
-    // width: 100%;
-    // height: 2px;
-    background-color: #fff;
-    // z-index: 1;
-}
-.qrcode{
-    display: inline-block;
-    img {
-        width: 132px;
-        height: 132px;
-        background-color: #fff; //设置白色背景色
-        padding: 6px; // 利用padding的特性，挤出白边
-        box-sizing: border-box;
-    }
-}
-.ref-score{
-  // background: #e4e4e4;
-  // width: 64px;
-  // height: 32px;
-  // border-radius: 17px;
-  // line-height: 32px;
-  // // opacity: 0.24;
-  // color: #000;
-  // font-size: 14px;
-  // border: none;
-  // text-align: center;
-}
-.portal-content ::v-deep .el-rate__icon{
-  font-size: 24px !important;
-}
-::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;
-}
-.content{
-  padding: 10px 0;
-    font-size: 18px;
-    color: #343434;
- img{
-   width: 18px;
- }
-}
-.content-text{
-  margin: 10px 0;
-  font-size: 14px;
-  text-indent: 2em;
-  color: #666666;
-  word-break:break-all;
-}
-   ::v-deep .el-tabs__item.is-active {
-    color: #409EFF;
-    font-size: 18px;
-  }
-  .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;
-    }
-  }
-.red{
-  background: red;
-   background-image: linear-gradient(to bottom right, rgb(245, 30, 30) , rgb(241, 227, 21));
-}
-.paper-item-answer{
-  line-height: 30px;
-  border-bottom: 1px solid #ccc;
-  margin-bottom: 10px;
-}
-.paper-item-opts{
-   .el-radio {
-        display: block;
-      }
-  .el-checkbox {
-       display: block;
-      }
-}
-.detail {
-  background-color: #fff;
-  padding: 5px 20px 10px 20px;
-  position: relative;
-    .detail-img{
-  cursor: pointer;
-   position: absolute;
-   bottom: 0;
-   right: 0;
-  }
-  .courseware-div {
-    border: 1px solid #f0f0f0;
-    min-height: 400px;
-
-    // width: 876px;
-    // font-size: 30px;
-    text-align: center;
-    // line-height: 100px;
-    position: relative;
-    .courseware-img {
-      vertical-align: middle;
-      width: 100%;
-      height: 100%;
-    }
-    .courseware-enroll-btn {
-      position: absolute;
-      width: 270px;
-      height: 68px;
-      font-size: 22px;
-      left: 230px;
-      top: 165px;
-      opacity: 0.3;
-      background: #000000;
-      border-radius: 21px;
-    }
-    .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;
-
-        .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;
-        }
-      }
-  .homework-div {
-    border: 1px solid #bcbcbc;
-    min-height: 500px;
-    padding: 20px;
-    font-size: 14px;
-    .homework-title {
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-    .homework-content {
-      color: #666;
-      margin-bottom: 10px;
-    }
-  }
-  .test-div {
-    border: 1px solid #bcbcbc;
-    min-height: 500px;
-    padding: 20px;
-    font-size: 16px;
-
-    .test-info {
-      margin-bottom: 10px;
-      .el-radio {
-        display: block;
-      }
-    }
-  }
-  .assess-div {
-    border: 1px solid #bcbcbc;
-    min-height: 500px;
-    padding: 20px;
-    font-size: 14px;
-    .assess-info {
-      margin-bottom: 10px;
-    }
-  }
-  .cont {
-    padding: 10px 25px 25px 25px;
-    height: 540px;
-    .title {
-      font-size: 20px;
-      font-weight: 600;
-      line-height: 36px;
-      word-break:break-all;
-    }
-    .course-info-tools-btns {
-      ::v-deep .interact-bar-btns {
-        justify-content: flex-start !important;
-      }
-      .course-info-tools-btn {
-        margin: 0 15px 0 0;
-      }
-      margin-bottom: 15px;
-    }
-    .label {
-      margin-bottom: 15px;
-      .label-item {
-        margin-right: 5px;
-        margin-bottom: 5px;
-      }
-    }
-    .keyword {
-      margin-bottom: 15px;
-      .label-item {
-        margin-right: 5px;
-      }
-    }
-    .study-count {
-      padding: 20px 0;
-      .num {
-        color:  #444444;
-        font-size: 16px;
-
-      }
-      margin-bottom: 15px;
-    }
-    .btn-div {
-      margin-top: 30px;
-      .btn{
-        border-radius: 0px;
-        font-size: 16px;
-      }
-    }
-    .qr-code {
-      cursor: pointer;
-      text-align: right;
-      position: absolute;
-      bottom: 0;
-      right: 4px;
-      div {
-        text-align: center;
-        font-size: 14px;
-      }
-    }
-    .view-summary {
-      position: absolute;
-      margin-bottom: 10px;
-      margin-left: 18px;
-    }
-  }
-}
-.summary-div {
-  .summary-content {
-    font-size: 14px;
-    line-height: 25px;
-  }
-}
-.info {
-  background-color: #fff;
-  margin-top: 20px;
-  padding: 0 10px;
-  .content {
-    color: #666;
-    line-height: 25px;
-    text-indent: 2em;
-    padding: 5px 10px;
-  }
-  .pinglun-div {
-    background-color: #fff;
-    padding: 0px 20px 10px 20px;
-    .title {
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 50px;
-      border-bottom: 1px solid #dfdfdf;
-      .tip {
-        color: #666;
-        font-size: 12px;
-        margin: 0 10px;
-      }
-    }
-    .submit-div {
-      margin: 15px 0;
-    }
-    .bottom {
-      text-align: right;
-    }
-
-    .data {
-      margin-top: 10px;
-      background-color: #fff;
-      padding: 5px 20px 10px 20px;
-      .data-item {
-        border-bottom: 1px solid #dfdfdf;
-        margin-top: 10px;
-        .top {
-          font-size: 18px;
-          font-weight: 600;
-          span {
-            font-size: 14px;
-            color: #666;
-            font-weight: normal;
-          }
-        }
-        .text {
-          margin: 15px 0 5px 0;
-          padding-left: 40px;
-          line-height: 35px;
-        }
-        .huifu {
-          padding-left: 40px;
-          padding-bottom: 10px;
-          border-bottom: 1px solid #dfdfdf;
-        }
-        .result-div {
-          padding-left: 40px;
-          padding-top: 10px;
-          .top {
-            font-size: 16px;
-          }
-        }
-        .up-div {
-          padding: 0 15px;
-          .up-btn {
-            padding: 8px 20px;
-            color: #000;
-          }
-        }
-        img {
-          margin-right: 10px;
-          width: 30px;
-          border: 1px solid #eee;
-          border-radius: 50%;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-}
-::v-deep .el-tabs__header{
-	.el-tabs__item{
-		font-size: 15px;
-	}
-	.is-active{
-		font-size: 16px;
-		font-weight: 600;
-	}
-}
-.teacher {
-  background-color: #ffffff;
-  display: flex;
-  border-top: 1px solid #e7e7e7;
-  padding: 10px 0px;
-  // .teacher-avator {
-
-  // }
-  .teacher-info {
-    flex: 1;
-    .teacher-name {
-      padding: 0px 5px 10px 10px;
-    }
-    .teacher-remark {
-      padding: 0px 5px 0px 10px;
-      font-size: 12px;
-      color: #797979;
-    }
-  }
-}
-.teachers {
-  background-color: #fff;
-  margin-top: 10px;
-  padding: 5px 15px 5px 10px;
-  .top {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 50px;
-  }
-   div{
-      img{
-        width: 68px;
-        height: 68px;
-      }
-    }
-}
-</style>
-<style scoped>
-.assessRadio1 /deep/ .el-radio-button__inner {
-  padding-left: 36px;
-  padding-right: 36px;
-}
-/* ::v-deep .el-tab-pane-boxContent{
-	.el-tabs__nav{
-		.el-tabs{
-			.el-tabs__header{
-				.el-tabs__nav{
-					.is-active{
-						font-size: 25px!important;
-					}
-				}
-			}
-		}
-	}
-} */
-</style>
+<template>
+  <div>
+    <portal-header current="course" :goSearch="1"></portal-header>
+    <div class="portal-content xcontent">
+      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
+        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
+        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-card :body-style="{ padding: '0px', 'min-height': '500px' }">
+            <el-row class="detail">
+              <el-col :span="18">
+                <el-tabs v-model="activeName" @tab-click="changeTab">
+                  <el-tab-pane label="课件" name="courseware">
+                    <div>
+                      <div class="courseware-div" v-if="enrollStutas == 1" style="max-height: 400px;">
+                        <course-image :course="courseInfo" class="courseware-img"></course-image>
+                       <!-- <el-button type="warning"  @click="submitEnroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button> -->
+                      </div>
+                      <div class="courseware-div" v-else>
+                       <div v-if="coursewareInfo.content.contentType == 10" style="position: relative;">
+                           <videoPlayer id="myVideoPlayer" :src="fileBaseUrl+curriculumData.url" style="width: 100%;"
+                            @onPlayerPlaying="onPlayerPlaying"
+                            @onPlayerPlay="onPlayerPlay"
+                            :initTime="videoPlayingTime"
+                            :isDrag="curriculumData.isDrag"
+                            @onPlayerPause="onPlayerPause"
+                            @onFullscreen="onFullscreen"
+                            @onPlayerEnded="onPlayerEnded">
+                        </videoPlayer>
+                         <!-- v-if="playerBoxShow" -->
+                         <div class="player-box" v-if="playerBoxShow">
+                        <div class="player-praise">
+                          <div @click="praiseContent" style="cursor: pointer;">
+                            <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="coursewareInfo.content.contentType == 20">
+                        <div class="con-audio">
+                          <div class="con-audio-player">
+                            <audioPlayer :url="fileBaseUrl+curriculumData.url"
+                              :name="coursewareInfo.content.contentName"
+                                @onPlaying="audioPlaying"
+                                @onPlay="audioPlay"
+                                :isDrag="curriculumData.isDrag"
+                                @onPause="audioPause"
+                                @onPlayEnd="audioEnd">
+                            </audioPlayer>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="coursewareInfo.content.contentType == 30">
+                        <img :src="fileBaseUrl+coursewareInfo.content.content" alt="图片">
+                      </div>
+                      <div v-if="coursewareInfo.content.contentType == 40">
+                        <div style="padding: 10px;color: #767676; " v-if="curCFile.converStatus < 2">
+                          <div>此课程内容无法预览，请联系管理员</div>
+                        </div>
+                          <div style="padding: 10px;color: #767676;" v-if="curCFile.converStatus == 3">
+                              此课程内容无法预览，请联系管理员
+                          </div>
+                        <pdfPreview :autoScroll="true" v-if="coursewareInfo.content.contentType == 40" :filePath="fileBaseUrl+coursewareInfo.content.content"></pdfPreview>
+                      </div>
+                      <div v-if="coursewareInfo.content.contentType == 41">
+                        <div class="couretitle" style="padding: 20px;text-align: left;" v-html="coursewareInfo.content.content"></div>
+                        </div>
+                      <div v-if="coursewareInfo.content.contentType == 52">
+                          <div class="hyper-link" v-if="conLink.openType==2">
+                              <div class="hyper-link-row">课程内容是外部连接</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;border:0px" border="0" frameborder="0"></iframe>
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                  </el-tab-pane>
+                  <el-tab-pane v-if="homeworkInfo.has" :disabled="enrollStutas == 1" label="作业" name="homework">
+                    <homework v-if="studyId!=''" :studyId="studyId" :content="homeworkInfo.content" ></homework>
+                  </el-tab-pane>
+                  <el-tab-pane v-if="examInfo.has" :disabled="enrollStutas == 1" label="考试" name="test">
+                    <exam v-if="studyId!=''" :studyId="studyId" :content="examInfo.content"></exam>
+                  </el-tab-pane>
+                  <el-tab-pane v-if="assessInfo.has" :disabled="enrollStutas == 1" label="评估" name="assess">
+                    <assess v-if="studyId!=''" :studyId="studyId" :content="assessInfo.content"></assess>
+                  </el-tab-pane>
+                </el-tabs>
+                <div style="display: flex;justify-content: space-between;padding: 10px;align-items: center;">
+                  <div class="score">
+                    <!-- <el-rate disabled v-model="courseInfo.score" :max="5" :allow-half="true" show-score score-template="{value}"></el-rate> -->
+                    <div v-if="enrollStutas == 1 && !scoreInfo.has">
+                      <div v-if="courseInfo.score">
+                          <el-rate disabled v-model="courseInfo.score"></el-rate>
+                          <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
+                      </div>
+                      <div v-else class="score-no">未评分</div>
+                    </div>
+
+                   <div v-if="enrollStutas == 2" style="display: flex;justify-content: center; align-items: center;">
+                      <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top: 15px;">
+                                <el-rate  v-model="scoreInfo.score"  @change="addScore"></el-rate>
+                      </div>
+                      <div v-else style="padding-top: 10px;display: flex;margin-left: 10px">
+                        <div style="padding-top: 5px;">
+                        <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
+                        </div>
+                        <div><span class="score-text">{{toScore(courseInfo.score)}}</span><span style="font-size: 14px;">分</span></div>
+                      </div>
+                   </div>
+                  </div>
+                  <div style="display: flex;align-items: center;padding-top: 15px;">
+                    <div @click="praiseContent" style="cursor: pointer;">
+                      <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/praise.png')"><span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.praises}}</span>
+                    </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/trample.png')"><span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.trampleCount}}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6" class="cont">
+                <interactBar :readonly="enrollStutas==1" :type="1" :data="courseInfo" :views="false" :praises="false" :comments="false"></interactBar>
+                <div class="title title-index">{{courseInfo.name}}</div>
+                <div class="study-count"><span class="num">{{courseInfo.studys}}人学习</span></div>
+                <!-- <div class="course-info-tools-btns">
+                    <span style="color: #f8a114;font-size: 36px;">{{toScore(courseInfo.score)}}</span>
+                    <span style="font-size: 14px;color: #787878;">分</span>
+                </div> -->
+                <!-- <div class="label"><el-tag class="label-item" effect="plain">了解公司</el-tag></div> -->
+                <div class="label"><el-tag class="label-item" effect="plain">录播课</el-tag></div>
+                <div class="label" v-if="tags.length >0">
+                  <el-tag class="label-item" effect="plain" v-for="(item, index) in tags" :key="index">{{item}}</el-tag>
+                  <!-- <el-tag class="label-item" effect="plain">中心长</el-tag> -->
+                </div>
+                <div v-if="enrollStutas != 2" class="score"  style="padding-top: 135px;justify-content: flex-start;">
+                    <!-- <el-rate style="display: inline-block; " disabled v-model="courseInfo.score" score-template="{value}" show-score text-color="#ff8e00"></el-rate>
+                    <span style="font-size: 14px;color: #f7ba2a;">分</span> -->
+                    <div v-if="courseInfo.score">
+                    <el-rate disabled v-model="courseInfo.score"></el-rate>
+                    <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
+                    </div>
+                    <div v-else class="score-no">未评分</div>
+                    <!-- <el-rate style="display: inline-block; " disabled v-model="courseInfo.score" text-color="#ff8e00"></el-rate>
+                    <span style="font-size: 14px;color: #f7ba2a;">{{courseInfo.score}}分</span> -->
+                </div>
+                <!-- <div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div> -->
+                <!--资源归属是一共有三级，这里只显示三级-->
+                <!-- <div class="study-count">资源归属：{{courseInfo.resOwner}}</div> -->
+                <!-- <div class="btn-div" style="padding-top: 70px;">
+                  <el-button class="btn" type="primary" v-if="enrollStutas == 1" @click="submitEnroll">立即报名</el-button>
+                </div> -->
+                <!-- 二维码 -->
+                <!-- <div class="qr-code" style="padding-top: 10px;">
+                  <div id="qrcode" ref="qrcode" class="qrcode" ></div>
+                  <div>手机扫码观看</div>
+                </div> -->
+               <!-- <div style="width: 100px;height:300px" v-if="courseInfo.device == 2 || courseInfo.device == 3"> -->
+                  <img class="detail-img" v-show="!showQrcode && (courseInfo.device == 2 || courseInfo.device == 3)" @click="showQrcode = true" src="../../../assets/images/qr.png" alt="" srcset="">
+                  <div class="qr-code" v-show="showQrcode && ((courseInfo.device == 2 || courseInfo.device == 3))" style="padding-top: 10px;">
+                    <div id="qrcode" ref="qrcode" class="qrcode" @click="showQrcode = false"></div>
+                    <!-- <div style="margin-left: 27px">手机扫码观看</div> -->
+                  </div>
+                <!-- </div> -->
+              </el-col>
+              <!-- 11 -->
+            </el-row>
+          </el-card>
+          <el-row :gutter="10">
+            <el-col :span="18">
+              <div class="el-tab-pane-boxContent" style="background-color: #FFFFFF;padding: 20px;margin-top: 10px;">
+                 <el-tabs v-model="bootTabActive">
+                    <el-tab-pane label="课程介绍" name="info">
+                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群</div>
+                      <div class="content-text" >{{courseInfo.forUsers}}</div>
+                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值</div>
+                      <div class="content-text">{{courseInfo.value}}</div>
+                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍</div>
+                      <div class="content-text" v-html="courseInfo.summary"></div>
+                    </el-tab-pane>
+                    <el-tab-pane :label="'评论('+commentsTtoal+')'" name="commnets">
+                      <comments v-if="courseInfo.id!=''"
+                        :readonly="enrollStutas==1"
+                        :showTop="false"
+                        @writeTotal="showCommentsTotal"
+                        @success="addCommentSuccess"
+                        @delSuccess="delCommentSuccess"
+                        :obj-type="1"
+                        :to-users="toUsers"
+                        :obj-id="courseInfo.id"
+                        :obj-title="courseInfo.name">
+                      </comments>
+                    </el-tab-pane>
+                  </el-tabs>
+                </div>
+            </el-col>
+            <el-col :span="6">
+              <el-card :body-style="{ padding: '0px' }" class="teachers">
+                <div class="top">授课讲师</div>
+                <div>
+                  <div class="teacher" v-for="(item, idx) in teachers" :key="idx" >
+                    <div class="teacher-avator">
+                      <el-avatar v-if="item.avatar !== ''" :src="item.avatar" shape="circle" :size="50"></el-avatar>
+                      <!-- <div class="teacher-text" v-if="item.avatar !== '' "></div> -->
+                      <!-- <el-avatar v-if="item.avatar && item.avatar!=''" icon="el-icon-user" shape="square" :size="50"></el-avatar> -->
+                       <div class="teacher-text" v-else>
+                         <div v-if="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>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+    <portal-footer></portal-footer>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2';
+import { mapGetters,mapActions} from 'vuex';
+import portalHeader from "@/components/PortalHeader.vue";
+import comments from "@/components/Portal/comments.vue";
+import portalFooter from "@/components/PortalFooter.vue";
+import interactBar from "@/components/Portal/interactBar.vue";
+import apiCourse from "@/api/modules/course.js";
+import apiCourseFile from "@/api/modules/courseFile.js";
+import apiCoursePortal from "@/api/modules/coursePortal.js";
+import apiUser from '@/api/system/user.js';
+import exam from '@/components/Course/exam';
+import homework from '@/components/Course/homework';
+import assess from '@/components/Course/assess';
+import {
+  formatDate,
+  resListMap,
+  toScore,
+  courseType,
+  getType,
+  numberToLetter,
+  correctJudgment,
+  userAvatarText
+} from "@/utils/tools.js";
+import apicourseStudy 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 FileUpload from "@/components/FileUpload/index.vue";
+import pdfPreview from "@/components/PdfPreview/index.vue";
+// import {resOwnerIndexName} from '@/utils/type.js';
+import { setTimeout } from "timers";
+import videoPlayer from '@/components/VideoPlayer/index.vue';
+import audioPlayer from '@/components/AudioPlayer/index.vue';
+import courseImage from "@/components/Course/courseImage.vue";
+import studyUtil from '@/utils/study.js';
+import {encrypt} from '@/utils/jsencrypt.js';
+import cookies from 'vue-cookies'
+export default {
+  name: "micro",
+  components: {
+    portalHeader,
+    portalFooter,
+    interactBar,
+    FileUpload,
+    comments,
+    pdfPreview,
+    videoPlayer,
+    audioPlayer,
+    courseImage,
+    homework,
+    exam,
+    assess
+  },
+  computed: {
+    ...mapGetters(['resOwnerMap','sysTypeMap','userInfo']),
+  },
+  data() {
+    return {
+      curCFile:{},
+      sex:null,
+      playerBoxShow:false,
+      userAvatarText,
+      showQrcode:false,
+      qrcode: '',
+      showiframe: false,//用于超连接的
+      toScore,
+      correctJudgment:correctJudgment,
+      show:0,
+      studyId: "",
+      tags: [],
+      numberToLetter: numberToLetter,
+      // resOwnerListMap: resOwnerIndexName,
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      blobUrl:'',//播放的文件地址，新添加，采用blob方式
+      getType: getType,
+      courseType,
+      activeName: "courseware",
+      courseInfo: {
+        id: "",
+        type: 10,
+        name: "",
+        favorites: 0,
+        comments: 0,
+        shares: 0,
+        praises: 0,
+        views: 0
+      },
+      toUsers:[],//可以@的用户列表
+      teachers: [],
+      totalContent: 4, //微课默认是4项
+      conLink:{openType:1,url:''},//对于超连接的内容
+      curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
+      coursewareInfo: {
+        content: {},
+        finish: false,
+        process:0,
+        status:1,
+        studyItemId: ""
+      },
+      homeworkInfo: {
+        has: false,
+        content: {},
+        info: {},
+        studyItemId: "",
+        filePath: ""
+      },
+      examInfo: {
+        has: false,
+        content: {},
+        info: {},
+        paper: [],
+        studyItemId: ""
+      },
+      assessInfo: {
+        has: false,
+        allowSubmit: true,
+        content: {},
+        info: {},
+        studyItemId: ""
+      },
+      enrollStutas: 1, // 1 :未报名，2:已报名
+      dialogVisible: false,
+      testStart: false,
+      courseRate: 5,
+      videoPlayingTime:0,//当前视频的耿入的时间点
+      appendStartTime: null, //记录追加的开始时间
+      scoreInfo: {
+        score: 5,
+        has: false
+      },
+      interactRuning:false,
+      isPraise: false,
+      isTrample: false,
+      bootTabActive:'info',
+      commentsTtoal:0,
+      appendHandle:null,//追加时长时间对象
+      isAppendTime:false,//是否追加学习时长
+      appentId:'',//当前追加的学习时长的id
+      appentInterval:30000,//追加学习时间的间隔 30秒加一次
+    };
+  },
+  mounted() {
+    this.showQrimage();
+    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
+    this.loadResOwners();
+    let id = this.$route.query.id;
+    this.courseInfo.id = id;
+    let $this = this;
+    //页面只支取一次，所以先直接写在这里面
+    apiCoursePortal.detail(id).then(rs => {
+      if (rs.status == 200) {
+        this.courseInfo = rs.result.course;
+        // this.courseInfo.score = this.toScore(rs.result.course.score);
+        if(rs.result.course.tags != '') this.tags = rs.result.course.tags.split(",");
+        this.teachers = rs.result.teachers;
+
+        if(rs.result.teachers && rs.result.teachers.length > 0){
+          let userIds=[];
+          let ctoUsers=[];
+          rs.result.teachers.forEach(item=>{
+            item.avatar = "";
+            userIds.push(item.teacherId);
+            ctoUsers.push({aid:item.teacherId,name:item.teacherName,});
+          })
+          this.toUsers=ctoUsers;
+          this.loadAuthorInfo(rs.result.teachers,userIds)
+        }
+        this.totalContent = rs.result.contents.length; //计算总内容数
+        if (!rs.result.course.resOwner3) {
+          this.courseInfo.resOwner = this.resOwnerName(
+            rs.result.course.resOwner2
+          );
+        } else {
+          this.courseInfo.resOwner = this.resOwnerName(
+            rs.result.course.resOwner3
+          );
+        }
+        rs.result.contents.forEach(con => {
+          if (con.sortIndex == 1) {
+            $this.coursewareInfo.content = con;
+            if(con.contentType == 10 || con.contentType == 20) {
+                if(con.content.startsWith('\{')){
+                 this.curriculumData=JSON.parse(con.content);
+              }else{
+                 this.curriculumData.url=con.content;
+              }
+              //对url进行加密处理
+              $this.createPlayUrl(this.curriculumData.url);
+
+            } else if (con.contentType == 40) {
+              //需要读取pdf的路径
+              if($this.coursewareInfo.content.content!='' && $this.coursewareInfo.content.content.indexOf('.pdf')==-1){
+                  apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
+                    if(cfrs.status==200){
+                      this.curCFile = cfrs.result;
+                      $this.coursewareInfo.content.content=cfrs.result.previewFilePath;
+                    }else{
+                       $this.$message.error('加载pdf课件文件失败');
+                    }
+                  });
+              }
+              //let url = this.fileBaseUrl + r.content;
+            }else if(con.contentType ==52){
+              if(con.content.startsWith('\{')){
+                 this.conLink=JSON.parse(con.content);
+              }else{
+                 this.conLink.url=con.content;
+                 this.conLink.openType=1;
+              }
+              if(this.conLink.openType==2){
+                //直接设置完成状态
+                this.widthOpen(this.conLink.url);
+              }
+            }
+            // //加载课件的学习情况
+          } else if (con.sortIndex == 2) {
+            $this.homeworkInfo.content = con;
+            $this.homeworkInfo.has = true;
+            //查询作业信息，并显示
+          } else if (con.sortIndex == 3) {
+            $this.examInfo.has = true;
+            $this.examInfo.content = con;
+            //查询考试信息并显示
+            //$this.loadExamInfo();
+          } else if (con.sortIndex == 4) {
+            $this.assessInfo.has = true;
+            $this.assessInfo.content = con;
+            //转化文本为json内容
+          }
+        });
+        //study info
+        this.loadStudyInfo();
+      } else {
+        this.$message.error(rs.message);
+      }
+    });
+  },
+  methods: {
+     createPlayUrl(u){
+       let nowDate=new Date();
+       let ctime=parseInt(nowDate.getTime()/1000);
+       let beforeUrl=parseInt(nowDate.getTime()/1000)+u;
+       //console.log(beforeUrl,'beforeUrl');
+       let urlSign=encodeURIComponent(encrypt(beforeUrl));
+       //console.log(urlSign,'urlSign');
+       cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
+       this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/play/resource?sign='+urlSign;
+
+     },
+     createVideoBlob(url){
+       let $this=this;
+       let xhr = new  XMLHttpRequest;
+       xhr.open("GET",url,true);
+       xhr.responseType = 'blob';
+       //xhr.onload：只有 4 状态会触发
+       xhr.onreadystatechange = function() {
+           if (xhr.readyState==4 && xhr.status == 200) {//请求成功
+               //获取blob对象
+               let blob = xhr.response;
+               //获取blob对象地址，并把值赋给容器
+               let urlObj = window.URL.createObjectURL(blob);
+               $this.blobUrl=urlObj;
+           }
+       };
+       xhr.send();
+     },
+     showQrimage(row){
+       let urlPre=window.location.protocol+'//'+window.location.host;
+      // https://u.boe.com/mobile/pages/resource/microDetail?id=963456709515939840
+      // this.qrcode = this.webBaseUrl+'/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
+        this.qrcode =urlPre+ '/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
+        //console.log(this.qrcode,'qrcode');
+        this.$nextTick(() => {
+        this.crateQrcode();
+      });
+     },
+    crateQrcode(){
+       this.qr = new QRCode('qrcode', {
+        width: 80,
+        height: 80, // 高度
+        text: this.qrcode // 二维码内容
+        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+        // background: '#f0f'
+        // foreground: '#ff0'
+      });
+    },
+    ...mapActions({
+      getResOwnerTree:'resOwner/getResOwnerTree',
+      loadResOwners:'resOwner/loadResOwners',
+      getSysTypeTree:'sysType/getSysTypeTree',
+      loadSysTypes:'sysType/loadSysTypes'
+    }),
+    resOwnerName(code){
+      if(code==''){return '';}
+      return this.resOwnerMap.get(code);
+    },
+    widthOpen(url) {
+      window.open(this.webBaseUrl+url,'_blank');
+    },
+    showCommentsTotal(total){
+      this.commentsTtoal=total;
+    },
+    addCommentSuccess(comm){
+      this.commentsTtoal++;
+    },
+    delCommentSuccess() {
+      this.commentsTtoal--;
+    },
+    saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
+      if(this.coursewareInfo.finish || this.coursewareInfo.studyItemId) {
+        return;//已记录学习记录的不再保存
+      }
+      let params = {
+        studyId: this.studyId, //学习id,
+        courseId: this.courseInfo.id, //课程id,
+        contentId: this.coursewareInfo.content.id, //内容id,
+        contentType:this.coursewareInfo.content.contentType, //内容id,
+        contentName: this.coursewareInfo.content.contentName, //内容名称
+        progress: 0,
+        lastStudyTime:0,
+        status:2,
+        studyDuration:0,
+        contentTotal: this.totalContent
+      };
+      apiVideoStudy.saveStudyItem(params).then(res=>{
+          if(res.status == 200){
+            this.coursewareInfo.studyItemId=res.result.id;
+            this.coursewareInfo.finish = false;
+            this.coursewareInfo.status = 2;
+            this.coursewareInfo.progress = 1;
+          }else{
+            console.log("记录学习失败:" + res.message + "，" + res.error);
+          }
+      });
+    },
+    finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
+        let params={
+          itemId:this.coursewareInfo.studyItemId,
+          studyId:this.studyId,
+          courseId:this.courseInfo.id,
+          cnum:this.totalContent
+        }
+        apiVideoStudy.finishStudyItem(params).then(res=>{
+            if(res.status == 200){
+              this.coursewareInfo.finish = true;
+              this.coursewareInfo.status = 9;
+              this.coursewareInfo.progress = 100;
+            }else{
+              console.log("记录完成学习失败:" + res.message + "，" + res.error);
+            }
+        });
+    },
+    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);
+        //console.log(markDiv,'markDiv');
+      	if(markDiv){
+      		div.removeChild(markDiv);
+      	}
+      }
+    },
+    onPlayerPlay(){
+      this.playerBoxShow = false;
+      //console.log("开始播放");
+      this.isAppendTime=false;
+
+      //视频类的内容，开始播放时才会记录完成情况
+      //2022-05-24修改，判断播放的
+      let $this=this;
+      //console.log(this.curriculumData,'this.curriculumData');
+      //完成类型 completeSetup 0表默认，打开后5秒算学完，1表按进度，2表按时间
+      //完成值（非默认情况下起作用） setupTage
+      if(!$this.coursewareInfo.finish){
+        let completeType=this.curriculumData.completeSetup;
+        if(completeType==0){
+          //默认5秒后学习完成.
+          setTimeout(() => {$this.saveStudyInfo();}, 5000);
+        }else{
+          //先记录进行中的学习内容
+          this.saveStudyItem();
+        }
+      }
+    },
+    onPlayerPause(){
+      //console.log("暂停");
+    },
+    onPlayerEnded(){
+       //this.onFullscreen(false);//退出全屏
+       this.playerBoxShow = true;
+       this.isAppendTime=true;//开始追加学习时间
+       //this.saveStudyDuration();//保存添加学习时长
+       if(!this.coursewareInfo.finish){
+         this.finishStudyItem();
+       }
+    },
+    onPlayerPlaying(itme){
+      this.isAppendTime=false;//禁止追加学习时间
+      this.appendStartTime=null;
+      //console.log("当前播放11"+itme);
+      let intTime=parseInt(itme);
+      //console.log(intTime,'intTime');
+      this.videoPlayingTime=intTime;
+      //判断是否完成
+      let completeType=this.curriculumData.completeSetup;
+      let completeSecond=this.curriculumData.second;
+      if(!completeSecond){
+        completeSecond=5;//如果没有就采用默认的时间了
+      }
+
+      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+          if(completeType==1){
+            let finishPercent=this.curriculumData.setupTage;
+            let videDuration=this.coursewareInfo.content.duration;
+            let percent =intTime*100/videDuration;
+            if(percent>=finishPercent){
+                this.finishStudyItem();
+            }
+          }else if(completeType==2){
+            if(intTime>completeSecond){
+               this.finishStudyItem();
+            }
+          }
+
+      }
+      //以下是每10秒记录一次学习时长
+      let saveTime=Math.floor(intTime%10);
+      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
+        //记录播放时间
+        //console.log('记录播放时间:'+intTime);
+        let postData={
+          itemId:this.coursewareInfo.studyItemId,
+          videoTime:intTime
+        }
+        apicourseStudy.studyVideoTime(postData).then(rs=>{
+           if(rs.status!=200){
+             console.log('记录播放时间错误');
+           }
+        })
+      }
+
+    },
+    audioPlaying(item,currentTime){
+      let intTime=parseInt(currentTime);//秒
+      //console.log("当前播放时间="+item+',currentTime='+intTime);
+      //判断是否完成
+      let completeType=this.curriculumData.completeSetup;
+      let completeSecond=this.curriculumData.second;
+      if(!completeSecond){
+        completeSecond=5;//如果没有就采用默认的时间了
+      }
+
+      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+          if(completeType==1){
+            let finishPercent=this.curriculumData.setupTage;
+            let videDuration=this.coursewareInfo.content.duration;
+            let percent =intTime*100/videDuration;
+            if(percent>=finishPercent){
+                this.finishStudyItem();
+            }
+          }else if(completeType==2){
+            if(intTime>=completeSecond){
+               this.finishStudyItem();
+            }
+          }
+
+      }
+      //以下是每5秒记录一次学习时长
+      let saveTime=Math.floor(intTime%10);
+      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
+        //记录播放时间
+        //console.log('记录播放时间:'+intTime);
+        let postData={
+          itemId:this.coursewareInfo.studyItemId,
+          videoTime:intTime
+        }
+        apicourseStudy.studyVideoTime(postData).then(rs=>{
+           if(rs.status!=200){
+             console.log('记录播放时间错误');
+           }
+        })
+      }
+    },
+    audioPlay(){
+      //console.log("开始播放");
+      let $this=this;
+      if (!$this.coursewareInfo.finish) {
+        let completeType=this.curriculumData.completeSetup;
+        //console.log(completeType,"completeType");
+        if(completeType==0){
+          //默认5秒后学习完成.
+          setTimeout(() => {$this.saveStudyInfo();}, 5000);
+        }else{
+          //先记录进行中的学习内容
+          this.saveStudyItem();
+        }
+      }
+    },
+    audioPause(){
+      //console.log("暂停");
+    },
+    audioEnd(){
+      // this.playerBoxShow = true;
+      //console.log("播放结束");
+      if(!this.coursewareInfo.finish){
+        this.finishStudyItem();
+      }
+    },
+    changeTab(tab){
+      this.playerBoxShow = false;
+      this.saveStudyDuration();//保存一次学习时长，在切换时
+      let $this = this;
+      if (tab.name == "homework") {
+
+      } else if (tab.name == "test") {
+
+      } else if (tab.name == "assess") {
+        // //console.log('加载评估信息');,评估只会有一个，所以主直接取
+        // let params = {
+        //   studyId: this.studyId,
+        //   contentId: this.assessInfo.content.id
+        // };
+        // apicourseStudy.myAssessList(params).then(res => {
+        //   if (res.status == 200) {
+        //     if (res.result.length > 0) {
+        //       this.assessInfo.allowSubmit = false;
+        //       this.assessInfo.info = JSON.parse(res.result[0].asContent);
+        //     }
+        //   } else {
+        //     this.$message.error(res.message);
+        //   }
+        // });
+      } else {
+        //在课件页面，记录开始时间
+        //对于视频类的，是在点击开始播放后执行的
+        if(this.coursewareInfo.content.contentType>10){
+          this.isAppendTime=true;
+          this.appendStudyTime(false);
+          if(!this.coursewareInfo.finish){
+             setTimeout(() => {$this.saveStudyInfo();}, 5000);
+          }
+        }else{
+          this.isAppendTime=false;
+        }
+      }
+    },
+    saveStudyInfo() {
+      //记录课件学习信息
+      if (this.activeName != "courseware") {
+        //只有在课件页面停留超过5秒才会记录
+        return;
+      }
+      if (this.coursewareInfo.finish) {
+        return;
+      }
+      let params = {
+        studyId: this.studyId, //学习id,
+        courseId: this.coursewareInfo.content.courseId, //课程id,
+        contentId: this.coursewareInfo.content.id, //内容id,
+        contentType:this.coursewareInfo.content.contentType, //内容id,
+        contentName: this.coursewareInfo.content.contentName, //内容名称
+        progress: 100,
+        status:9,
+        contentTotal: this.totalContent
+      };
+      apicourseStudy.studyContent(params).then(res => {
+        if (res.status == 200) {
+          this.coursewareInfo.studyItemId=res.result;
+          this.coursewareInfo.finish = true; //课件内容已学习，记录状态
+        } 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.coursewareInfo.content.id,
+             studyInfo:
+               this.courseInfo.name +
+               "-" +
+               this.coursewareInfo.content.contentName,
+             duration: duration
+           };
+           apicourseStudy.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.isAppendTime){
+        //如果不追加时间，把追加开始时间设置为null
+        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); //计算秒数
+
+      //console.log(duration,'duration')
+      //console.log(sen,'sen')
+      duration=duration+sen;
+      if(flag){
+         //这个时候才进行存储 ，否则只能是存储在本地
+         if(duration>0){
+            let postData = {
+              id:this.appentId,
+              studyId: this.studyId,
+              courseId: this.courseInfo.id,
+              contentId: this.coursewareInfo.content.id,
+              studyInfo:
+                this.courseInfo.name +
+                "-" +
+                this.coursewareInfo.content.contentName,
+              duration: sen
+            };
+            apicourseStudy.appendStudyTime(postData).then(rs => {
+              if (rs.status == 200){
+                $this.appentId=rs.result;
+                $this.appendStartTime = new Date(); //重置开始时间
+                studyUtil.clearStudyDuration();//清除本地存储
+              } else {
+                console.log(rs.message);
+              }
+            });
+         }
+
+      }else{
+        $this.appendStartTime = new Date(); //重置开始时间
+        studyUtil.setStudyDuration(duration);//添加到本地存储中
+      }
+      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
+    },
+    loadStudyInfo() {
+      //获取学习信息
+      let $this = this;
+      this.loadScorePraiseAndTrample();
+      apicourseStudy.studyInfo(this.courseInfo.id).then(res => {
+        if (res.status == 200) {
+          res.result.signup ? (this.enrollStutas = 2) : (this.enrollStutas = 1);
+          if(res.result.signup) {
+            //this.bootTabActive = 'commnets';//系统自动报名，这里不进行切换了
+            this.studyId = res.result.studyId; //设置学习id
+
+            //需要判断此内容是否已学习完成，如果已学习完成，不需要再请不说了
+            res.result.contents.forEach(con => {
+              if (con.contentId == $this.coursewareInfo.content.id) {
+                  $this.coursewareInfo.studyItemId=con.id;
+                  $this.coursewareInfo.status=con.status;
+                  $this.coursewareInfo.progress=con.progress;
+
+                  if(con.contentType==10 || con.contentType==20){
+                    if(con.progress==100 || con.status==9){
+                      $this.coursewareInfo.finish = true;
+                    }else{
+                      $this.coursewareInfo.finish = false;
+                    }
+                  }else{
+                    $this.coursewareInfo.finish = true; //课件已学习
+                  }
+
+                  if(con.lastStudyTime){
+                    //如果上次课件已经播放完成，此处应该是$this.coursewareInfo.content.duration
+                    //也就是从头开开始
+                    $this.videoPlayingTime=con.lastStudyTime;
+                  }
+                //console.log()
+              }else if (con.contentId == $this.homeworkInfo.content.id) {
+                  $this.homeworkInfo.studyItemId = con.id;
+              }else if (con.contentId ==$this.examInfo.content.id) {
+                  $this.examInfo.studyItemId = con.id;
+              }else if (con.contentId == $this.assessInfo.content.id) {
+                  $this.assessInfo.studyItemId = con.id;
+              }
+            });
+            //存储上一次学习时长，主要用于上次未存储的学习时长
+            this.saveStudyDuration();
+            if(!$this.coursewareInfo.finish && $this.coursewareInfo.content.contentType>20) {
+              //未完居，并且类型不是视频的，直接设计5秒后学习完成
+                setTimeout(() => {$this.saveStudyInfo();}, 5000); //5秒后记录学习
+                //开始记录学习时长
+                $this.isAppendTime=true;
+                $this.appendStudyTime(false);
+            }
+          }else{
+            //signup 没有报名的情况下，直接报名
+            this.submitEnroll();
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    submitEnroll() { //提交报名
+      let pamars = {
+        courseId: this.courseInfo.id,
+        courseName: this.courseInfo.name,
+        courseType: this.courseInfo.type,
+        signType: 1,
+        signInfo: ""
+      };
+      let $this = this;
+      apicourseStudy.signup(pamars).then(res => {
+        if (res.status == 200) {
+          //this.$message({ type: "success", message: "报名成功" });
+          this.enrollStutas = 2;
+          this.studyId=res.result.studyId;//设置学习的ID
+          //this.loadStudyInfo();
+          if($this.coursewareInfo.content.contentType>20){
+              this.isAppendTime=true;
+              this.appendStudyTime(false); //报名成功记录开始时间
+              //报名成功后，就直接记录课件学习情况，5秒后
+              setTimeout(() => {$this.saveStudyInfo();}, 5000);
+          }else{
+             //对于视频类的处理，用户手动点击播放，不做处理
+          }
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    loadScorePraiseAndTrample() {
+      //加载是否打过分
+      //if(this.enrollStutas>1){
+        apiCourseGrade.has(this.courseInfo.id).then(rs => {
+          if (rs.status == 200 && rs.result) {
+            this.scoreInfo.has = true;
+          }
+          //console.log(rs.result,'rs.result');
+        });
+      //}
+      apiPraises.has(1, this.courseInfo.id).then(rs => {
+        if (rs.status == 200 && rs.result) {
+          this.isPraise = true;
+        }
+      });
+      apiTrample.has(this.courseInfo.id).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.enrollStutas==1){
+        this.$message.error("报名学习之后才可以点赞");
+        return;
+      }
+      if(this.isTrample){
+        this.$message.error("您已踩过了，不能再赞了");
+        return;
+      }
+      if(this.interactRuning){
+				return;
+			}
+			this.interactRuning=true;
+      let postData = {
+        objType: 1,
+        objId: this.courseInfo.id,
+        title: this.courseInfo.name
+      };
+      if(this.isPraise){
+         apiPraises.remove(1,this.courseInfo.id).then(res=>{
+           this.interactRuning=false;
+           if (res.status == 200){
+             if(this.courseInfo.praises>0){
+               this.courseInfo.praises--;
+             }
+             this.$message.info("已取消点赞");
+             this.isPraise = false;
+           } else {
+             this.$message.error("取消点赞失败,请稍后再试");
+           }
+          });
+      }else{
+        apiPraises.save(postData).then(rs => {
+          this.interactRuning=false;
+          if (rs.status == 200) {
+            this.courseInfo.praises++;
+            this.$message.success("点赞成功");
+            this.isPraise = true;
+          } else {
+            this.$message.error("点赞失败,请稍后再试");
+          }
+        });
+      }
+
+    },
+    treadContent() {
+      if(this.enrollStutas==1){
+        this.$message.error("只有报名学习后才可以踩");
+        return;
+      }
+      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) {
+            if(this.courseInfo.trampleCount>0){
+              this.courseInfo.trampleCount--;
+            }
+            this.$message.info("已取消踩");
+            this.isTrample = false;
+          } else {
+            this.$message.error("取消失败,请稍后再试");
+          }
+        });
+      }else{
+        apiTrample.trample(this.courseInfo.id).then(rs => {
+          this.interactRuning=false;
+          if (rs.status == 200) {
+            this.courseInfo.trampleCount++;
+            this.$message.success("已踩");
+            this.isTrample = true;
+          } else {
+            this.$message.error("踩失败,请稍后再试");
+          }
+        });
+      }
+
+    },
+    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){
+                if(author.avatar){
+                  item.avatar=this.fileBaseUrl + author.avatar;
+                }
+                this.sex = author.sex
+                return true;
+              }else{
+                return false;
+              }
+            })
+          });
+        }else{
+          //console.log('加载课程信息失败:'+res.error);
+          //this.$message.error(res.message);
+        }
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss" scoped>
+.couretitle{
+  word-break: break-all;
+}
+::v-deep .teacher .teacher-avator .teacher-text {
+  background: none;
+  border: none;
+}
+
+
+.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: 39px;
+  }
+}
+::v-deep .el-tabs__nav-wrap::after {
+    // content: "";
+    // position: absolute;
+    // left: 0;
+    // bottom: 0;
+    // width: 100%;
+    // height: 2px;
+    background-color: #fff;
+    // z-index: 1;
+}
+::v-deep .el-tabs__nav-wrap::after {
+    // content: "";
+    // position: absolute;
+    // left: 0;
+    // bottom: 0;
+    // width: 100%;
+    // height: 2px;
+    background-color: #fff;
+    // z-index: 1;
+}
+.qrcode{
+    display: inline-block;
+    img {
+        width: 132px;
+        height: 132px;
+        background-color: #fff; //设置白色背景色
+        padding: 6px; // 利用padding的特性，挤出白边
+        box-sizing: border-box;
+    }
+}
+.ref-score{
+  // background: #e4e4e4;
+  // width: 64px;
+  // height: 32px;
+  // border-radius: 17px;
+  // line-height: 32px;
+  // // opacity: 0.24;
+  // color: #000;
+  // font-size: 14px;
+  // border: none;
+  // text-align: center;
+}
+.portal-content ::v-deep .el-rate__icon{
+  font-size: 24px !important;
+}
+::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;
+}
+.content{
+  padding: 10px 0;
+    font-size: 18px;
+    color: #343434;
+ img{
+   width: 18px;
+ }
+}
+.content-text{
+  margin: 10px 0;
+  font-size: 14px;
+  text-indent: 2em;
+  color: #666666;
+  word-break:break-all;
+}
+   ::v-deep .el-tabs__item.is-active {
+    color: #409EFF;
+    font-size: 18px;
+  }
+  .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;
+    }
+  }
+.red{
+  background: red;
+   background-image: linear-gradient(to bottom right, rgb(245, 30, 30) , rgb(241, 227, 21));
+}
+.paper-item-answer{
+  line-height: 30px;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 10px;
+}
+.paper-item-opts{
+   .el-radio {
+        display: block;
+      }
+  .el-checkbox {
+       display: block;
+      }
+}
+.detail {
+  background-color: #fff;
+  padding: 5px 20px 10px 20px;
+  position: relative;
+    .detail-img{
+  cursor: pointer;
+   position: absolute;
+   bottom: 0;
+   right: 0;
+  }
+  .courseware-div {
+    border: 1px solid #f0f0f0;
+    min-height: 400px;
+
+    // width: 876px;
+    // font-size: 30px;
+    text-align: center;
+    // line-height: 100px;
+    position: relative;
+    .courseware-img {
+      vertical-align: middle;
+      width: 100%;
+      height: 100%;
+    }
+    .courseware-enroll-btn {
+      position: absolute;
+      width: 270px;
+      height: 68px;
+      font-size: 22px;
+      left: 230px;
+      top: 165px;
+      opacity: 0.3;
+      background: #000000;
+      border-radius: 21px;
+    }
+    .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;
+
+        .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;
+        }
+      }
+  .homework-div {
+    border: 1px solid #bcbcbc;
+    min-height: 500px;
+    padding: 20px;
+    font-size: 14px;
+    .homework-title {
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+    .homework-content {
+      color: #666;
+      margin-bottom: 10px;
+    }
+  }
+  .test-div {
+    border: 1px solid #bcbcbc;
+    min-height: 500px;
+    padding: 20px;
+    font-size: 16px;
+
+    .test-info {
+      margin-bottom: 10px;
+      .el-radio {
+        display: block;
+      }
+    }
+  }
+  .assess-div {
+    border: 1px solid #bcbcbc;
+    min-height: 500px;
+    padding: 20px;
+    font-size: 14px;
+    .assess-info {
+      margin-bottom: 10px;
+    }
+  }
+  .cont {
+    padding: 10px 25px 25px 25px;
+    height: 540px;
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 36px;
+      word-break:break-all;
+    }
+    .course-info-tools-btns {
+      ::v-deep .interact-bar-btns {
+        justify-content: flex-start !important;
+      }
+      .course-info-tools-btn {
+        margin: 0 15px 0 0;
+      }
+      margin-bottom: 15px;
+    }
+    .label {
+      margin-bottom: 15px;
+      .label-item {
+        margin-right: 5px;
+        margin-bottom: 5px;
+      }
+    }
+    .keyword {
+      margin-bottom: 15px;
+      .label-item {
+        margin-right: 5px;
+      }
+    }
+    .study-count {
+      padding: 20px 0;
+      .num {
+        color:  #444444;
+        font-size: 16px;
+
+      }
+      margin-bottom: 15px;
+    }
+    .btn-div {
+      margin-top: 30px;
+      .btn{
+        border-radius: 0px;
+        font-size: 16px;
+      }
+    }
+    .qr-code {
+      cursor: pointer;
+      text-align: right;
+      position: absolute;
+      bottom: 0;
+      right: 4px;
+      div {
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+    .view-summary {
+      position: absolute;
+      margin-bottom: 10px;
+      margin-left: 18px;
+    }
+  }
+}
+.summary-div {
+  .summary-content {
+    font-size: 14px;
+    line-height: 25px;
+  }
+}
+.info {
+  background-color: #fff;
+  margin-top: 20px;
+  padding: 0 10px;
+  .content {
+    color: #666;
+    line-height: 25px;
+    text-indent: 2em;
+    padding: 5px 10px;
+  }
+  .pinglun-div {
+    background-color: #fff;
+    padding: 0px 20px 10px 20px;
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 50px;
+      border-bottom: 1px solid #dfdfdf;
+      .tip {
+        color: #666;
+        font-size: 12px;
+        margin: 0 10px;
+      }
+    }
+    .submit-div {
+      margin: 15px 0;
+    }
+    .bottom {
+      text-align: right;
+    }
+
+    .data {
+      margin-top: 10px;
+      background-color: #fff;
+      padding: 5px 20px 10px 20px;
+      .data-item {
+        border-bottom: 1px solid #dfdfdf;
+        margin-top: 10px;
+        .top {
+          font-size: 18px;
+          font-weight: 600;
+          span {
+            font-size: 14px;
+            color: #666;
+            font-weight: normal;
+          }
+        }
+        .text {
+          margin: 15px 0 5px 0;
+          padding-left: 40px;
+          line-height: 35px;
+        }
+        .huifu {
+          padding-left: 40px;
+          padding-bottom: 10px;
+          border-bottom: 1px solid #dfdfdf;
+        }
+        .result-div {
+          padding-left: 40px;
+          padding-top: 10px;
+          .top {
+            font-size: 16px;
+          }
+        }
+        .up-div {
+          padding: 0 15px;
+          .up-btn {
+            padding: 8px 20px;
+            color: #000;
+          }
+        }
+        img {
+          margin-right: 10px;
+          width: 30px;
+          border: 1px solid #eee;
+          border-radius: 50%;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+::v-deep .el-tabs__header{
+	.el-tabs__item{
+		font-size: 15px;
+	}
+	.is-active{
+		font-size: 16px;
+		font-weight: 600;
+	}
+}
+.teacher {
+  background-color: #ffffff;
+  display: flex;
+  border-top: 1px solid #e7e7e7;
+  padding: 10px 0px;
+  // .teacher-avator {
+
+  // }
+  .teacher-info {
+    flex: 1;
+    .teacher-name {
+      padding: 0px 5px 10px 10px;
+    }
+    .teacher-remark {
+      padding: 0px 5px 0px 10px;
+      font-size: 12px;
+      color: #797979;
+    }
+  }
+}
+.teachers {
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 5px 15px 5px 10px;
+  .top {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 50px;
+  }
+   div{
+      img{
+        width: 68px;
+        height: 68px;
+      }
+    }
+}
+</style>
+<style scoped>
+.assessRadio1 /deep/ .el-radio-button__inner {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+/* ::v-deep .el-tab-pane-boxContent{
+	.el-tabs__nav{
+		.el-tabs{
+			.el-tabs__header{
+				.el-tabs__nav{
+					.is-active{
+						font-size: 25px!important;
+					}
+				}
+			}
+		}
+	}
+} */
+</style>
diff --git a/src/views/study/PortalIndex.vue b/src/views/study/PortalIndex.vue
index b5459e7b..b4b702e4 100644
--- a/src/views/study/PortalIndex.vue
+++ b/src/views/study/PortalIndex.vue
@@ -1,1440 +1,1451 @@
-<template>
-  <div>
-    <!-- 课程详情点击应该传参的 -->
-    <portal-header current="course" :goSearch="1"></portal-header>
-    <div class="portal-content xcontent">
-      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadname">
-        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: `/course/detail?id=${courseId}` }">课程详情</el-breadcrumb-item>
-        <el-breadcrumb-item>课程学习</el-breadcrumb-item>
-      </el-breadcrumb>
-      <!-- <span style="display:block;margin-bottom:10px">课程列表 > 课程详情 > 课程学习</span> -->
-      <div style="background-color: #FFFFFF; border-bottom:1px solid #eee; display: flex;justify-content: space-between;">
-        <div class="portal-content-title">{{ courseInfo.name }}</div>
-        <div style="padding-top: 15px;padding-right: 30px;"><interactBar :type="1" :data="courseInfo" :comments="false" :praises="false" :views="false"></interactBar></div>
-      </div>
-      <el-row>
-        <el-col :span="16">
-          <div style="min-height: 450px;">
-            <!-- <div style="background-color: #FFFFFF;font-weight: 600;border-bottom:1px solid #d0d0d0 ;padding: 10px;font-size: 22px;color: #333333;">{{ courseInfo.name }}</div> -->
-            <!--课程资源内容播放-->
-            <div class="player" style="width: 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="fileBaseUrl+curriculumData.url"
-                    @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"><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 class="course-interact">
-              <div class="score" style="display: flex;">
-                <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;">
-                  <!-- <el-popover placement="top" width="300" trigger="hover"> -->
-                    <!-- <div style="text-align:center;line-height:50px;padding:20px 0px">
-
-                      <div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div>
-                    </div> -->
-                      <el-rate v-model="scoreInfo.score" @change="addScore"></el-rate>
-                    <!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> -->
-                  <!-- </el-popover> -->
-                </div>
-                <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
-                   <div style="padding-top: 0px;">
-                    <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
-                  </div>
-                  <div>
-                        <span class="score-text">{{ toScore(courseInfo.score) }}</span>
-                        <span style="font-size: 14px;">分</span>
-                  </div>
-                </div>
-              </div>
-              <div style="display: flex;justify-content: flex-end;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/praise.png')" />
-                  {{ courseInfo.praises }}
-                </div>
-                <div style="margin-left: 15px;" @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/trample.png')" />
-                  {{ courseInfo.trampleCount }}
-                </div>
-              </div>
-            </div>
-            <div style="padding-left:5px;margin: 14px 0px;background-color: #FFFFFF;" class="info">
-              <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="catalog-box" style="min-height: 450px;">
-            <!-- <p class="title">课程目录</p> -->
-            <!-- <el-tabs type="border-card" v-model="ctabName" @tab-click="ctabChange">
-              <el-tab-pane label="课程目录" name="catalog"> -->
-            <div style="min-height: 500px;">
-              <div class="catalog">
-                <el-collapse style="border-top:none" class="catalog-row" v-model="activeNames" @change="handleChange">
-
-                  <el-collapse-item v-for="(item, index) in catalogTree" :key="index" :name="index">
-                    <!-- <template class="collapse-title" slot="title" > -->
-                    <div style="display:flex;margin-bottom:18px;">
-                      
-
-                    <!-- 标题 -->
-                    <div style="flex:1;line-height:20px" class="mltit">
-                       <el-tooltip class="item" effect="light" :content="item.section.name" placement="top-start">
-                          <span   style="font-size:16px;font-weight: 700;color: #343434;margin-left: 15px;">
-                              {{ item.section.name }}</span>
-                            </el-tooltip>
-                      
-                    </div>
-                      <!-- 状态 -->
-                    <div style="text-align: right;">
-                      <span :class="statusToContent(item.section.status).class">{{ statusToContent(item.section.status).text }}</span>
-                       
-                    </div>
-                    </div>
-                   
-                      
-                    <!-- </template> -->
-                    <ul>
-                      <li @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i" class="catalog-cell" style="display: flex;justify-content: space-between;">
-                        <!-- <span :class="statusToContent(ele.status).class">{{ statusToContent(ele.status).text }}</span> -->
-                        <div class="catalog-text">
-                          <span :class="['title-type', contentData.id == ele.id ? 'type-click' : '', 'type-kuang']">{{ getType(ele.contentType) }}</span>
-
-                            <el-tooltip class="item" effect="light" :content=" ele.contentName" placement="top-start">
-                                <span :style="{ color: contentData.id == ele.id ? '#ffaa00' : '' }">{{ ele.contentName }}</span>
-                            </el-tooltip>
-
-                        </div>
-                        <div>
-                          <!-- <span style="margin-right: 5px;color: #6c6c6c; " v-if="ele.duration>0">{{parseInt(ele.lastStudyTime/60)}}/{{parseInt(ele.duration/60)}}</span> -->
-                          <!--状态 有问题,未切换为正在进行的状态-->
-                          <span :class="statusToContent(ele.status).class">{{ statusToContent(ele.status).text }}</span>
-                        </div>
-                      </li>
-                    </ul>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
-            </div>
-            <!-- </el-tab-pane>
-            </el-tabs> -->
-          </div>
-          <div style="margin-top: 11px;margin-left:18px">
-            <el-card :body-style="{ padding: '0px' }" class="teachers">
-              <div class="top">授课讲师</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>
-        </el-col>
-      </el-row>
-    </div>
-    <portal-footer></portal-footer>
-  </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 courseImage from '@/components/Course/courseImage.vue';
-import exam from '@/components/Course/exam';
-import homework from '@/components/Course/homework';
-import assess from '@/components/Course/assess';
-import interactBar from '@/components/Portal/interactBar.vue';
-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 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';
-export default {
-  name: 'ucStudyIndex',
-  components: { courseImage, portalHeader, portalFooter, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer },
-  data() {
-    return {
-      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: process.env.VUE_APP_FILE_BASE_URL,
-      contentList: [],
-      sectionList: [],
-      teachers: [],
-      toUsers: [], //对于@教师的处理
-      getType: getType,
-      ctabName: 'catalog',
-      resType: null,
-      activeNames: [0, 1, 2, 3, 4],
-      scoreInfo: {
-        dlgShow: false,
-        score: 5,
-        has: false
-      },
-      isPraise: false,
-      isTrample: false,
-      appendStartTime: null, //记录追加的开始时间
-      appendHandle:null,
-      isAppendTime:false,//是否追加学习时长
-      appentId:'',//当前追加的学习时长的id
-      appentInterval:30000,//追加学习时间的间隔 30秒加一次
-      handleTimeout:null
-    };
-  },
-  mounted() {
-    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
-    this.courseId = this.$route.query.id;
-    this.loadData();
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    catalogTree() {
-      let treeList = [];
-      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++;
-              }
-            }
-            treeNode.children.push(c);
-          }
-        });
-        if (finishCount == treeNode.children.length) {
-          sec.status = 9;
-        }
-        treeList.push(treeNode);
-      });
-      return treeList;
-    }
-  },
-  methods: {
-    createVideoBlob(url){
-      let $this=this;
-      let xhr = new  XMLHttpRequest;
-      xhr.open("GET",url,true);
-      xhr.responseType = 'blob';
-      //xhr.onload：只有 4 状态会触发
-      xhr.onreadystatechange = function() {
-          if (xhr.readyState==4 && xhr.status == 200) {//请求成功
-              //获取blob对象
-              let blob = xhr.response;
-              //获取blob对象地址，并把值赋给容器
-              let urlObj = window.URL.createObjectURL(blob);
-              $this.blobUrl=urlObj;
-          }
-      };
-      xhr.send();
-    },
-    widthOpen(url) {
-      window.open(url, '_blank');
-    },
-    formatTime(duration){
-      let min=0;
-      if(duration>0){
-        min=parseInt(duration/60);
-      }
-      return min;
-    },
-    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);
-          }
-      });
-    },
-    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);
-              }
-          });
-        }
-    },
-    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);
-      	}
-      }
-    },
-    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();
-        }
-      }
-    },
-    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){
-          completeSecond=5;//如果没有就采用默认的时间了
-        }
-        if(completeType>0 && 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(completeType==2){
-              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){
-        completeSecond=5;//如果没有就采用默认的时间了
-      }
-      if(completeType>0 && 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(completeType==2){
-            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).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]);
-            } 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);
-    },
-    ctabChange(e) {
-      //当前已经不再使用
-      //console.log(e);
-    },
-    showRes(r,i,index) {//i:子节下标，index:章下标
-      if(i!=undefined && index!=undefined) {
-        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;
-              }
-          }
-        }
-      }
-
-      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.createVideoBlob(url);
-      } else if (r.contentType == 40) {
-        //let url = this.fileBaseUrl + r.content;
-        if (r.content != '' && r.content.indexOf('.pdf') == -1) {
-          apiCourseFile.detail(r.contentRefId).then(cfrs => {
-            if (cfrs.status == 200) {
-              r.content = cfrs.result.previewFilePath;
-              //console.log(r.content);
-            } 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);
-        }
-      });
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.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: 1px solid #e7e7e7;
-  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;
-  margin-top: 10px;
-  padding: 5px 15px 5px 10px;
-  .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
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <!-- 课程详情点击应该传参的 -->
+    <portal-header current="course" :goSearch="1"></portal-header>
+    <div class="portal-content xcontent">
+      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadname">
+        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: `/course/detail?id=${courseId}` }">课程详情</el-breadcrumb-item>
+        <el-breadcrumb-item>课程学习</el-breadcrumb-item>
+      </el-breadcrumb>
+      <!-- <span style="display:block;margin-bottom:10px">课程列表 > 课程详情 > 课程学习</span> -->
+      <div style="background-color: #FFFFFF; border-bottom:1px solid #eee; display: flex;justify-content: space-between;">
+        <div class="portal-content-title">{{ courseInfo.name }}</div>
+        <div style="padding-top: 15px;padding-right: 30px;"><interactBar :type="1" :data="courseInfo" :comments="false" :praises="false" :views="false"></interactBar></div>
+      </div>
+      <el-row>
+        <el-col :span="16">
+          <div style="min-height: 450px;">
+            <!-- <div style="background-color: #FFFFFF;font-weight: 600;border-bottom:1px solid #d0d0d0 ;padding: 10px;font-size: 22px;color: #333333;">{{ courseInfo.name }}</div> -->
+            <!--课程资源内容播放-->
+            <div class="player" style="width: 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="fileBaseUrl+curriculumData.url"
+                    @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: #767676; " v-if="curCFile.converStatus < 2">
+                    <div>此课程内容无法预览，请联系管理员</div>
+                  </div>
+                    <div style="padding: 10px;color: #767676;" v-if="curCFile.converStatus == 3">
+                        此课程内容无法预览，请联系管理员
+                    </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 class="course-interact">
+              <div class="score" style="display: flex;">
+                <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;">
+                  <!-- <el-popover placement="top" width="300" trigger="hover"> -->
+                    <!-- <div style="text-align:center;line-height:50px;padding:20px 0px">
+
+                      <div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div>
+                    </div> -->
+                      <el-rate v-model="scoreInfo.score" @change="addScore"></el-rate>
+                    <!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> -->
+                  <!-- </el-popover> -->
+                </div>
+                <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
+                   <div style="padding-top: 0px;">
+                    <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
+                  </div>
+                  <div>
+                        <span class="score-text">{{ toScore(courseInfo.score) }}</span>
+                        <span style="font-size: 14px;">分</span>
+                  </div>
+                </div>
+              </div>
+              <div style="display: flex;justify-content: flex-end;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/praise.png')" />
+                  {{ courseInfo.praises }}
+                </div>
+                <div style="margin-left: 15px;" @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/trample.png')" />
+                  {{ courseInfo.trampleCount }}
+                </div>
+              </div>
+            </div>
+            <div style="padding-left:5px;margin: 14px 0px;background-color: #FFFFFF;" class="info">
+              <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="catalog-box" style="min-height: 450px;">
+            <!-- <p class="title">课程目录</p> -->
+            <!-- <el-tabs type="border-card" v-model="ctabName" @tab-click="ctabChange">
+              <el-tab-pane label="课程目录" name="catalog"> -->
+            <div style="min-height: 500px;">
+              <div class="catalog">
+                <el-collapse style="border-top:none" class="catalog-row" v-model="activeNames" @change="handleChange">
+
+                  <el-collapse-item v-for="(item, index) in catalogTree" :key="index" :name="index">
+                    <!-- <template class="collapse-title" slot="title" > -->
+                    <div style="display:flex;margin-bottom:18px;">
+                      
+
+                    <!-- 标题 -->
+                    <div style="flex:1;line-height:20px" class="mltit">
+                       <el-tooltip class="item" effect="light" :content="item.section.name" placement="top-start">
+                          <span   style="font-size:16px;font-weight: 700;color: #343434;margin-left: 15px;">
+                              {{ item.section.name }}</span>
+                            </el-tooltip>
+                      
+                    </div>
+                      <!-- 状态 -->
+                    <div style="text-align: right;">
+                      <span :class="statusToContent(item.section.status).class">{{ statusToContent(item.section.status).text }}</span>
+                       
+                    </div>
+                    </div>
+                   
+                      
+                    <!-- </template> -->
+                    <ul>
+                      <li @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i" class="catalog-cell" style="display: flex;justify-content: space-between;">
+                        <!-- <span :class="statusToContent(ele.status).class">{{ statusToContent(ele.status).text }}</span> -->
+                        <div class="catalog-text">
+                          <span :class="['title-type', contentData.id == ele.id ? 'type-click' : '', 'type-kuang']">{{ getType(ele.contentType) }}</span>
+
+                            <el-tooltip class="item" effect="light" :content=" ele.contentName" placement="top-start">
+                                <span :style="{ color: contentData.id == ele.id ? '#ffaa00' : '' }">{{ ele.contentName }}</span>
+                            </el-tooltip>
+
+                        </div>
+                        <div>
+                          <!-- <span style="margin-right: 5px;color: #6c6c6c; " v-if="ele.duration>0">{{parseInt(ele.lastStudyTime/60)}}/{{parseInt(ele.duration/60)}}</span> -->
+                          <!--状态 有问题,未切换为正在进行的状态-->
+                          <span :class="statusToContent(ele.status).class">{{ statusToContent(ele.status).text }}</span>
+                        </div>
+                      </li>
+                    </ul>
+                  </el-collapse-item>
+                </el-collapse>
+              </div>
+            </div>
+            <!-- </el-tab-pane>
+            </el-tabs> -->
+          </div>
+          <div style="margin-top: 11px;margin-left:18px">
+            <el-card :body-style="{ padding: '0px' }" class="teachers">
+              <div class="top">授课讲师</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>
+        </el-col>
+      </el-row>
+    </div>
+    <portal-footer></portal-footer>
+  </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 courseImage from '@/components/Course/courseImage.vue';
+import exam from '@/components/Course/exam';
+import homework from '@/components/Course/homework';
+import assess from '@/components/Course/assess';
+import interactBar from '@/components/Portal/interactBar.vue';
+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 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';
+export default {
+  name: 'ucStudyIndex',
+  components: { courseImage, portalHeader, portalFooter, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer },
+  data() {
+    return {
+      curCFile:{},
+      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: process.env.VUE_APP_FILE_BASE_URL,
+      contentList: [],
+      sectionList: [],
+      teachers: [],
+      toUsers: [], //对于@教师的处理
+      getType: getType,
+      ctabName: 'catalog',
+      resType: null,
+      activeNames: [0, 1, 2, 3, 4],
+      scoreInfo: {
+        dlgShow: false,
+        score: 5,
+        has: false
+      },
+      isPraise: false,
+      isTrample: false,
+      appendStartTime: null, //记录追加的开始时间
+      appendHandle:null,
+      isAppendTime:false,//是否追加学习时长
+      appentId:'',//当前追加的学习时长的id
+      appentInterval:30000,//追加学习时间的间隔 30秒加一次
+      handleTimeout:null
+    };
+  },
+  mounted() {
+    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
+    this.courseId = this.$route.query.id;
+    this.loadData();
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    catalogTree() {
+      let treeList = [];
+      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++;
+              }
+            }
+            treeNode.children.push(c);
+          }
+        });
+        if (finishCount == treeNode.children.length) {
+          sec.status = 9;
+        }
+        treeList.push(treeNode);
+      });
+      return treeList;
+    }
+  },
+  methods: {
+    createVideoBlob(url){
+      let $this=this;
+      let xhr = new  XMLHttpRequest;
+      xhr.open("GET",url,true);
+      xhr.responseType = 'blob';
+      //xhr.onload：只有 4 状态会触发
+      xhr.onreadystatechange = function() {
+          if (xhr.readyState==4 && xhr.status == 200) {//请求成功
+              //获取blob对象
+              let blob = xhr.response;
+              //获取blob对象地址，并把值赋给容器
+              let urlObj = window.URL.createObjectURL(blob);
+              $this.blobUrl=urlObj;
+          }
+      };
+      xhr.send();
+    },
+    widthOpen(url) {
+      window.open(url, '_blank');
+    },
+    formatTime(duration){
+      let min=0;
+      if(duration>0){
+        min=parseInt(duration/60);
+      }
+      return min;
+    },
+    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);
+          }
+      });
+    },
+    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);
+              }
+          });
+        }
+    },
+    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);
+      	}
+      }
+    },
+    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();
+        }
+      }
+    },
+    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){
+          completeSecond=5;//如果没有就采用默认的时间了
+        }
+        if(completeType>0 && 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(completeType==2){
+              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){
+        completeSecond=5;//如果没有就采用默认的时间了
+      }
+      if(completeType>0 && 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(completeType==2){
+            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).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]);
+            } 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);
+    },
+    ctabChange(e) {
+      //当前已经不再使用
+      //console.log(e);
+    },
+    showRes(r,i,index) {//i:子节下标，index:章下标
+      if(i!=undefined && index!=undefined) {
+        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;
+              }
+          }
+        }
+      }
+
+      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.createVideoBlob(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;
+              }
+            } 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);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.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: 1px solid #e7e7e7;
+  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;
+  margin-top: 10px;
+  padding: 5px 15px 5px 10px;
+  .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
+    }
+  }
+}
+</style>