From 0a3e33c27e47b417c1f21a8a743b94c7524a3e07 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Sun, 9 Oct 2022 15:18:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=AF=A6=E7=BB=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/portal.scss         |    2 +-
 src/components/Portal/noteComment.vue |    2 +-
 src/views/portal/course/Micro.vue     |   25 +-
 src/views/study/coursenew.vue         | 3147 +++++++++++++------------
 4 files changed, 1680 insertions(+), 1496 deletions(-)

diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index 612a05d9..5b5d65bd 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -45,7 +45,7 @@ body {margin: 0px;padding: 0px;}
      }
      .banner-crumbs{
         color: #fff;
-        margin-top:50px;
+        margin-top:40px;
         .crumbs-first{
           font-size: 16px;
         }
diff --git a/src/components/Portal/noteComment.vue b/src/components/Portal/noteComment.vue
index 3fa35f60..17dfa60e 100644
--- a/src/components/Portal/noteComment.vue
+++ b/src/components/Portal/noteComment.vue
@@ -11,7 +11,7 @@
         <!--列表内容-->
         <div class="comments-items" v-show="listShow">
             <!--一个评论-->
-            <div class="zan-wu" v-if="list.length == 0">暂无评论～</div>
+            <div class="zan-wu" v-if="list.length == 0">暂无公开笔记～</div>
             <div class="comment" v-for="(com,comIdx) in list" :key="com.id">
                  <div class="comment-top">
                     <div class="comment-author">
diff --git a/src/views/portal/course/Micro.vue b/src/views/portal/course/Micro.vue
index 26e60f8c..d0c6da5e 100644
--- a/src/views/portal/course/Micro.vue
+++ b/src/views/portal/course/Micro.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
-    <portal-header current="course" :goSearch="1"></portal-header>
+    <div class="xpage-coures-banner">
+        <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+        <div class="xcontent">
+            <div class="banner-crumbs">
+               <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+               <span class="crumbs-line">  &gt; </span>
+               <span class="crumbs-last">课程详情</span>
+            </div>
+            <div class="bcourse-title">
+               <!-- <span>{{courseInfo.name}}</span> -->
+                <!-- <span>{{courseInfo.summary}}</span>  -->
+                <!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
+            </div>
+        </div>
+    </div>
     <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">
@@ -217,8 +225,7 @@
               </el-card>
             </el-col>
           </el-row>
-        </el-col>
-      </el-row>
+        
     </div>
     <portal-footer></portal-footer>
   </div>
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index cc27f976..7afa9996 100644
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -1,696 +1,800 @@
 <template>
-    <div>
-        <div class="coures-bg">
-             <portal-header current="course" :goSearch="1"></portal-header>
-               <el-breadcrumb style="margin-top:50px;margin-left:82px" separator-class="el-icon-arrow-right" class="breadcrumb-nav" >
-                    <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-                    <el-breadcrumb-item class="hear-nav">课程详情</el-breadcrumb-item>
-                </el-breadcrumb>
-                <div class="coures-title">
-                    <div>{{courseInfo.name}}</div>
-                    <!-- <span>{{courseInfo.summary}}</span>  -->
-                    <h6>评分{{toScore(courseInfo.score)}}分</h6>
-                </div>
+  <div>
+    <div class="xpage-coures-banner">
+      <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+      <div style="margin: 0px 80px;">
+        <div class="banner-crumbs">
+          <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+          <span class="crumbs-line"> &gt; </span>
+          <span class="crumbs-last">课程详情</span>
         </div>
-        <div class="coures-content">
-           <div class="coures-play">
-               <div  class="player" style="width: 100%;height: 100%;border: 1px solid #ffffff;background-color: #FFFFFF;overflow: auto;">
-                   <div>
-                <div v-if="resType == null || resType == 0">
-                  <!--先显示视频图片-->
-                  <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
+        <div class="bcourse-title">
+          <span>{{courseInfo.name}}</span>
+          <!-- <span>{{courseInfo.summary}}</span>  -->
+          <span class="bcourse-score" v-if="courseInfo.score>0">{{toScore(courseInfo.score)}} 分</span>
+          <span class="bcourse-score" v-else>无评分</span>
+        </div>
+      </div>
+    </div>
+    <div class="course-content">
+      <div class="course-playbox">
+        <div class="course-player">
+          <div>
+            <div v-if="resType == null || resType == 0">
+              <!--先显示视频图片-->
+              <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
+            </div>
+            <div v-if="resType == 10" style="position: relative;">
+              <videoPlayer id="myVideoPlayer" v-if="resType == 10" :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
+                :initTime="contentData.lastStudyTime" :notePlay="notePlay" @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="resType == 10" style="position: relative;">
-                  <videoPlayer  id="myVideoPlayer" v-if="resType == 10"
-                    :src="blobUrl"
-                    @onPlayerPlaying="onPlayerPlaying"
-                    :initTime="contentData.lastStudyTime"
-                    :notePlay="notePlay"
-                    @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 v-if="!scoreInfo.has" class="player-rate">
+                  <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff"
+                    @change="addScore"></el-rate>
+                </div>
+                <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
+                  <div class="player-rate" style="padding-left: 35px;">
+                    <el-rate disabled v-model="courseInfo.score" :allow-half="true"></el-rate>
+                  </div>
+                  <span class="score-text" style="margin-top:35px">
+                    <span style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</span>
+                    <span style="font-size: 12px;color: #fff">分</span>
+                  </span>
 
-                   </div>
-                  </div>
-                </div>
-                <div v-if="resType == 20">
-                  <div class="con-audio">
-                    <div class="con-audio-title">{{ contentData.contentName }}</div>
-                    <div class="con-audio-player">
-                      <audioPlayer
-                        v-if="resType == 20"
-                        :url="fileBaseUrl + curriculumData.url"
-                        :name="contentData.contentName"
-                        @onPlaying="audioPlaying"
-                        :isDrag="curriculumData.isDrag"
-                        @onPlay="audioPlay"
-                        @onPause="audioPause"
-                        @onPlayEnd="audioEnd"
-                      ></audioPlayer>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="resType == 40">
-                  <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus < 2 && !contentData.content">
-                    <div>此课程内容无法预览，请联系管理员</div>
-                  </div>
-                    <div style="padding: 10px;color: #ed0000;" v-if="curCFile.converStatus == 3 && !contentData.content">
-                        此课程内容无法预览，请联系管理员
-                    </div>
-                  <pdfPreview :autoScroll="true" v-if="resType == 40" :filePath="fileBaseUrl + contentData.content"></pdfPreview>
-                </div>
-                <div v-if="resType == 41"><div style="padding: 20px;" v-html="contentData.content"></div></div>
-                <div v-if="resType == 52">
-                  <div v-if="contentData.content != ''">
-                    <div class="hyper-link" v-if="conLink.openType == 2">
-                      <div class="hyper-link-row">{{ contentData.contentName }}</div>
-                      <div class="hyper-link-row">{{ conLink.url }}</div>
-                    </div>
-                    <div v-if="conLink.openType == 1"><iframe :src="conLink.url" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe></div>
-                  </div>
-                </div>
-                <div v-if="resType == 60"><homework v-if="resType == 60 && studyId != ''" :studyId="studyId" :content="contentData"></homework></div>
-                <div v-if="resType == 61"><exam v-if="resType == 61 && studyId != '' " :studyId="studyId" :content="contentData"></exam></div>
-                <div v-if="resType == 62" style="padding:5px">
-                  <assess v-if="resType == 62 && studyId != '' && contentData.id" :studyId="studyId" :content="contentData"></assess>
                 </div>
               </div>
-               </div>
-            <div style="margin: 24px 0px;background-color: #FFFFFF;" class="info">
-                <div class="coure-tab">
-                    <div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
-                    <div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
+            </div>
+            <div v-if="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 v-show="courestab" class="coures-comments" style="margin-left:17px">
-                   <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
+              </div>
+            </div>
+            <div v-if="resType == 40">
+              <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus < 2 && !contentData.content">
+                <div>此课程内容无法预览，请联系管理员</div>
+              </div>
+              <div style="padding: 10px;color: #ed0000;" v-if="curCFile.converStatus == 3 && !contentData.content">
+                此课程内容无法预览，请联系管理员
+              </div>
+              <pdfPreview :autoScroll="true" v-if="resType == 40" :filePath="fileBaseUrl + contentData.content">
+              </pdfPreview>
+            </div>
+            <div v-if="resType == 41">
+              <div style="padding: 20px;" v-html="contentData.content"></div>
+            </div>
+            <div v-if="resType == 52">
+              <div v-if="contentData.content != ''">
+                <div class="hyper-link" v-if="conLink.openType == 2">
+                  <div class="hyper-link-row">{{ contentData.contentName }}</div>
+                  <div class="hyper-link-row">{{ conLink.url }}</div>
                 </div>
-                <div v-show="!courestab" class="coures-note">
+                <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-control">
+            <div class="control-tab">
+              <div @click="heartabone" :class="tab == 1 ? 'control-tab-active' : ' '">
+                <i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元
+              </div>
+              <div @click="heartabtwo" :class="tab == 2 ? 'control-tab-active' : ' '">
+                <i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记
+              </div>
+            </div>
+            <!-- 课程单元  -->
+            <div class="course-units" v-if="tab == 1">
+              <div style="min-height: 500px;">
+                <div class="catalog" v-if="courseInfo.type == 20">
+                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
+                    <div class="units-info" :class="{'units-active':contentData.id == ele.id}"
+                      @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
+                      <img v-if="contentData.id == ele.id" src="../../../public/images/playicon.png" alt=""> 1.
+                      {{ ele.contentName }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="catalog">
+                  <!-- contentList -->
+                  <div class="units-info" v-for="(list, index) in contentList" :key="index" :name="index"
+                    @click="showRes(list,i,index)" :class="{'units-active':contentData.id == list.id}">
+                    <!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
+                    <img v-if="contentData.id == list.id" src="../../../public/images/playicon.png" alt=""> 1.
+                    {{ list.contentName }}
+                    <!-- </div> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 我的笔记 -->
+            <div class="mynote" v-show="tab == 2">
+              <my-note :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
+                :score="courseInfo.score"></my-note>
+            </div>
+        </div>
+      </div>
+      <div class="course-infobox">
+        <div class="course-info">
+          <div style="background-color: #fff;">
+                <div class="course-info-tab">
+                  <div @click="coutab(1)" :class="courestab == 1? 'course-info-tab-active' : ''">课程介绍<span class=""></span> </div>
+                  <div @click="coutab(2)" :class="courestab == 2? 'course-info-tab-active' : ''">课程评论<span class=""></span> </div>
+                  <div @click="coutab(3)" :class="courestab == 3? 'course-info-tab-active' : ''">课程笔记<span class=""></span> </div>
+                </div>
+                <div v-show="courestab==1" style="margin-left:17px;padding-top: 20px;">
+                    <div style="padding: 30px;">
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群：<div class="course-info-text">{{courseInfo.forUsers}}</div></div>
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值：<div class="course-info-text">{{courseInfo.value}}</div></div>
+                        <div class="course-info-row"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍：<div class="course-info-text"  v-html="courseInfo.summary"></div></div>
+                    </div>
+                </div>
+                <div v-show="courestab==2" class="coures-comments" style="margin-left:17px">
+                  <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id"
+                    :toUsers="toUsers"></comments>
+                </div>
+                <div v-show="courestab==3" class="coures-note">
                   <note-comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="6" :obj-id="courseInfo.id" :name="courseInfo.name"></note-comments>
                 </div>
-            </div>
-           </div>
-           <div class="coures-infobox">
-               <div class="coures-info">
-               <div class="hear-tab">
-                   <div @click="heartabone" :class="tab == 1 ? 'tab-active' : ' '"><i class="el-icon-reading" style="margin-right:9px;margin-left:9px"></i>课程单元</div>
-                   <div @click="heartabtwo" :class="tab == 2 ? 'tab-active' : ' '"><i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记</div>
-                   
-               </div>
-               <!-- 课程单元  -->
-               <div class="course-units" v-if="tab == 1">
-                <div style="min-height: 500px;">
-              <div class="catalog" v-if="courseInfo.type == 20">
-                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
-                      <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
-                        <img v-if="contentData.id == ele.id" src="../../../public/images/playicon.png" alt="">  1. {{ ele.contentName }}
-                      </div>
-                  </div>
-              </div>
-              <div v-else class="catalog">
-                <!-- contentList -->
-                <div class="units-info" v-for="(list, index) in contentList" :key="index" :name="index" @click="showRes(list,i,index)" :class="{'units-active':contentData.id == list.id}">
-                      <!-- <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i"> -->
-                        <img v-if="contentData.id == list.id" src="../../../public/images/playicon.png" alt="">  1. {{ list.contentName }}
-                      <!-- </div> -->
-                  </div>
-              </div>
-            </div>
-               </div>
-               <!-- 我的笔记 -->
-               <div class="mynote" v-show="tab == 2">
-                 <my-note :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo" :score="courseInfo.score"></my-note>
-               </div>
-           </div>
-           <div class="coures-tearch">
-                   <div class="tearch-top"><img src="../../../public/images/tearch-top.png" alt=""></div>
+          </div>
+        </div>
+        <div class="course-teacher">
+          <div class="cteacher-top">
+              <div class="cteacher-top"><img width="100%" height="15px" src="../../../public/images/tearch-top.png" alt=""></div>
+              <div class="cteacher-top-title">课程讲师</div>
+          </div>
 
-               <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 style="padding-top:15px">
-                    <el-button type="primary" @click="toFollow(item)" size="small">+ 关注</el-button>
-                  </div>
+          <div class="cteacher-list">
+            <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> -->
+                <div v-if="item.authorInfo.avatar !== ''">
+                  <el-avatar  :src="fileBaseUrl + item.authorInfo.avatar" shape="circle" :size="50"></el-avatar>
+                </div>
+                <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>
-            </el-card>
-           </div>
-           </div>
-         
+              <div class="teacher-info">
+                <div class="teacher-name">
+                    <span> {{ item.teacherName }}</span>
+                    <span style="font-size: 12px; color:#666666 ;">( {{item.authorInfo.orgInfo}} )</span>
+                </div>
+                <div class="teacher-remark" v-html="item.authorInfo.sign"></div>
+              </div>
+              <div style="padding-top:15px">
+                <el-button type="primary" @click="toFollow(item)" size="small">+ 关注</el-button>
+              </div>
+            </div>
+          </div>
+
         </div>
+      </div>
     </div>
+    <!-- <div><portal-footer></portal-footer></div> -->
+  </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
-import portalHeader from "@/components/PortalHeader.vue";
-import comments from "@/components/Portal/comments.vue";
-import noteComments from "@/components/Portal/noteComment.vue";
-import interactBar from "@/components/Portal/interactBar.vue";
-import audioPlayer from '@/components/AudioPlayer/index.vue';
-import videoPlayer from '@/components/VideoPlayer/index.vue';
-import hyperLink from '@/components/Course/hyperLink.vue';
-import studyUtil from '@/utils/study.js';
-import {encrypt} from '@/utils/jsencrypt.js';
-import cookies from 'vue-cookies';
-import apiStudy from '@/api/modules/courseStudy.js';
-import apiVideoStudy from "@/api/modules/videoStudy.js";
-import apiCourseGrade from '@/api/modules/courseGrade.js';
-import apiPraises from '@/api/modules/praises.js';
-import apiTrample from '@/api/modules/trample.js';
-import apiCoursePortal from '@/api/modules/coursePortal.js';
-import apiUser from '@/api/system/user.js';
-import apiCourseFile from '@/api/modules/courseFile.js';
-import { resListMap, resOwnerListMap, courseType, getType, toScore,userAvatarText } from '@/utils/tools.js';
-import pdfPreview from '@/components/PdfPreview/index.vue';
-import courseImage from '@/components/Course/courseImage.vue';
-import exam from '@/components/Course/exam';
-import homework from '@/components/Course/homework';
-import assess from '@/components/Course/assess';
-import myNote from '../../components/Course/myNote.vue';
-import apiFollow from "@/api/phase2/userfollow.js"
-export default {
-  name: "atticle",
-  components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote,noteComments },
-  data(){
-      return{
-        notePlay:null,
-        intTimeNote:'',
-        courestab:true,
-        curCFile:{
-        converStatus:4,
-      },
-      radio:'',
-      interactRuning:false,
-      playerBoxShow:false,
-      userAvatarText,
-      publicPath: process.env.VUE_APP_PUBLIC_PATH,
-      showiframe: false,
-      toScore,
-      courseId: '',//当前课程的id
-      studyId: '', //当前学习的id
-      initContentId: '', //初始化当前学习的内容节
-      blobUrl:'',//播放的文件地址，新添加，采用blob方式
-      contentData: {
-        studyItemId:'',
-        status:1
-      }, //当前的显示的内容
-      conLink: { openType: 1, url: '' }, //对于超连接的内容
-      curriculumData:{url:'',isDrag:true,completeSetup:0,setupTage:0,second:0},// 课件内容
-      courseInfo: { id: '', name: '' }, //课程信息
-      totalContent: 0, //课程内容数量
-      pageCount: 0,
-      currentPage: 0,
-      fileBaseUrl: this.$Constants.fileBaseUrl,
-      contentList: [],
-      sectionList: [],
-      teachers: [],
-      toUsers: [], //对于@教师的处理
-      getType: getType,
-      ctabName: 'catalog',
-      resType: null,
-      activeNames: [0, 1, 2, 3, 4,5,6,7,8,9],
-      scoreInfo: {
-        dlgShow: false,
-        score: 5,
-        has: false
-      },
-      isPraise: false,
-      isTrample: false,
-      appendStartTime: null, //记录追加的开始时间
-      appendHandle:null,
-      isAppendTime:false,//是否追加学习时长
-      appentId:'',//当前追加的学习时长的id
-      appentInterval:30000,//追加学习时间的间隔 30秒加一次
-      handleTimeout:null,
-      completed:[],
-        tab:1,
-        notetab:1,
-      }
-  },
-  mounted() {
-    this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
-    this.courseId = this.$route.query.id;
-    this.loadData();
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    catalogTree() {
-      let treeList = [];
-      this.completed = [];
-      let $this = this;
-      $this.sectionList.forEach(sec => {
-        let treeNode = { section: sec, children: [] };
-        sec.status = 1;
-        let finishCount = 0;
-        $this.contentList.forEach(c => {
-          if (c.csectionId == sec.id) {
-            if (c.status > 1) {
-              sec.status = 2;
-              if(c.status == 9){
-                finishCount++;
-              }
-            }
-            if(c.status == 9) {
-              $this.completed.push(c.id);
-            }
-            treeNode.children.push(c);
-          }
-        });
-        if (finishCount == treeNode.children.length) {
-          sec.status = 9;
-        }
-        treeList.push(treeNode);
-      });
-      return treeList;
-    }
-  },
-  methods: {
-    toFollow(item) {
-          apiFollow.save(item.teacherId).then(res=>{
-            if(res.status == 200) {
-              this.$message.success('关注成功！');
-            } else {
-              this.$message.error(res.message);
-            }
-          })
+  import { mapGetters } from 'vuex';
+  import portalHeader from "@/components/PortalHeader.vue";
+  import portalFooter from "@/components/PortalFooter.vue";
+  import comments from "@/components/Portal/comments.vue";
+  import noteComments from "@/components/Portal/noteComment.vue";
+  import interactBar from "@/components/Portal/interactBar.vue";
+  import audioPlayer from '@/components/AudioPlayer/index.vue';
+  import videoPlayer from '@/components/VideoPlayer/index.vue';
+  import hyperLink from '@/components/Course/hyperLink.vue';
+  import studyUtil from '@/utils/study.js';
+  import { encrypt } from '@/utils/jsencrypt.js';
+  import cookies from 'vue-cookies';
+  import apiStudy from '@/api/modules/courseStudy.js';
+  import apiVideoStudy from "@/api/modules/videoStudy.js";
+  import apiCourseGrade from '@/api/modules/courseGrade.js';
+  import apiPraises from '@/api/modules/praises.js';
+  import apiTrample from '@/api/modules/trample.js';
+  import apiCoursePortal from '@/api/modules/coursePortal.js';
+  import apiUser from '@/api/system/user.js';
+  import apiCourseFile from '@/api/modules/courseFile.js';
+  import {
+    resListMap,
+    resOwnerListMap,
+    courseType,
+    getType,
+    toScore,
+    userAvatarText
+  } from '@/utils/tools.js';
+  import pdfPreview from '@/components/PdfPreview/index.vue';
+  import courseImage from '@/components/Course/courseImage.vue';
+  import exam from '@/components/Course/exam';
+  import homework from '@/components/Course/homework';
+  import assess from '@/components/Course/assess';
+  import myNote from '../../components/Course/myNote.vue';
+  import apiFollow from "@/api/phase2/userfollow.js"
+  export default {
+    name: "atticle",
+    components: {
+      courseImage,
+      portalHeader,
+      hyperLink,
+      comments,
+      homework,
+      exam,
+      interactBar,
+      assess,
+      pdfPreview,
+      audioPlayer,
+      videoPlayer,
+      myNote,
+      noteComments,
+      portalFooter
+    },
+    data() {
+      return {
+        notePlay: null,
+        intTimeNote: '',
+        courestab: 2,//默认是课程评论
+        curCFile: {
+          converStatus: 4,
         },
+        radio: '',
+        interactRuning: false,
+        playerBoxShow: false,
+        userAvatarText,
+        publicPath: process.env.VUE_APP_PUBLIC_PATH,
+        showiframe: false,
+        toScore,
+        courseId: '', //当前课程的id
+        studyId: '', //当前学习的id
+        initContentId: '', //初始化当前学习的内容节
+        blobUrl: '', //播放的文件地址，新添加，采用blob方式
+        contentData: {
+          studyItemId: '',
+          status: 1
+        }, //当前的显示的内容
+        conLink: {
+          openType: 1,
+          url: ''
+        }, //对于超连接的内容
+        curriculumData: {
+          url: '',
+          isDrag: true,
+          completeSetup: 0,
+          setupTage: 0,
+          second: 0
+        }, // 课件内容
+        courseInfo: {
+          id: '',
+          name: ''
+        }, //课程信息
+        totalContent: 0, //课程内容数量
+        pageCount: 0,
+        currentPage: 0,
+        fileBaseUrl: this.$Constants.fileBaseUrl,
+        contentList: [],
+        sectionList: [],
+        teachers: [],
+        toUsers: [], //对于@教师的处理
+        getType: getType,
+        ctabName: 'catalog',
+        resType: null,
+        activeNames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+        scoreInfo: {
+          dlgShow: false,
+          score: 5,
+          has: false
+        },
+        isPraise: false,
+        isTrample: false,
+        appendStartTime: null, //记录追加的开始时间
+        appendHandle: null,
+        isAppendTime: false, //是否追加学习时长
+        appentId: '', //当前追加的学习时长的id
+        appentInterval: 30000, //追加学习时间的间隔 30秒加一次
+        handleTimeout: null,
+        completed: [],
+        tab: 1,
+        notetab: 1,
+      }
+    },
+    mounted() {
+      this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
+      this.courseId = this.$route.query.id;
+      this.loadData();
+    },
+    computed: {
+      ...mapGetters(['userInfo']),
+      catalogTree() {
+        let treeList = [];
+        this.completed = [];
+        let $this = this;
+        $this.sectionList.forEach(sec => {
+          let treeNode = {
+            section: sec,
+            children: []
+          };
+          sec.status = 1;
+          let finishCount = 0;
+          $this.contentList.forEach(c => {
+            if (c.csectionId == sec.id) {
+              if (c.status > 1) {
+                sec.status = 2;
+                if (c.status == 9) {
+                  finishCount++;
+                }
+              }
+              if (c.status == 9) {
+                $this.completed.push(c.id);
+              }
+              treeNode.children.push(c);
+            }
+          });
+          if (finishCount == treeNode.children.length) {
+            sec.status = 9;
+          }
+          treeList.push(treeNode);
+        });
+        return treeList;
+      }
+    },
+    methods: {
+      toFollow(item) {
+        apiFollow.save(item.teacherId).then(res => {
+          if (res.status == 200) {
+            this.$message.success('关注成功！');
+          } else {
+            this.$message.error(res.message);
+          }
+        })
+      },
       onPlayVideo(time) {
         this.playerBoxShow = false;
         this.notePlay = null;
-        setTimeout(()=>{
+        setTimeout(() => {
           this.notePlay = time;
-        },1000)
+        }, 1000)
       },
-    // 笔记功能
-      videoLocation() {// 记录笔记视频位置
+      // 笔记功能
+      videoLocation() { // 记录笔记视频位置
         this.$store.dispatch("SetIntTimeNote", this.intTimeNote);
       },
-      coutab(){
-         this.courestab = !this.courestab;
+      coutab(n) {
+        this.courestab =n;
       },
-         createPlayUrl(fid,u){
-      let nowDate=new Date();
-      let ctime=parseInt(nowDate.getTime()/1000);
-      let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+fid;
-      //console.log(beforeUrl,'beforeUrl');
-      let urlSign=encodeURIComponent(encrypt(beforeUrl));
-      //console.log(urlSign,'urlSign');
-      cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
-      //以下判断是为了区分本地环境和服务器环境
-      if(process.env.NODE_ENV == 'development'){
-        this.blobUrl=process.env.VUE_APP_FILE_BASE_URL+u;
-      }else{
-        this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/cware/resource?sign='+urlSign;
-      }
-      //console.log(this.blobUrl,'this.blobUrl');
-    },
-    widthOpen(url) {
-      window.open(url, '_blank');
-    },
-    showRes(r,i,index) {    //i:子节下标，index:章下标
-      if(i!=undefined && index!=undefined && r.status<9) {
-        if(this.courseInfo.orderStudy) {
-          //判断上个是否学完
-          if(i == 0) {
-            if(index > 0) { //第一章 第一节
-              let preCatalog=this.catalogTree[index-1];
-              let last=preCatalog.children[preCatalog.children.length-1];
-              if(last.status!=9){
+      createPlayUrl(fid, u) {
+        let nowDate = new Date();
+        let ctime = parseInt(nowDate.getTime() / 1000);
+        let beforeUrl = parseInt(nowDate.getTime() / 1000) + '/' + fid;
+        //console.log(beforeUrl,'beforeUrl');
+        let urlSign = encodeURIComponent(encrypt(beforeUrl));
+        //console.log(urlSign,'urlSign');
+        cookies.set('PLAYSIGN_TIME', ctime); //写客户端的cookie保存
+        //以下判断是为了区分本地环境和服务器环境
+        if (process.env.NODE_ENV == 'development') {
+          this.blobUrl = process.env.VUE_APP_FILE_BASE_URL + u;
+        } else {
+          this.blobUrl = process.env.VUE_APP_BASE_API + '/xboe/m/course/cware/resource?sign=' + urlSign;
+        }
+        //console.log(this.blobUrl,'this.blobUrl');
+      },
+      widthOpen(url) {
+        window.open(url, '_blank');
+      },
+      showRes(r, i, index) { //i:子节下标，index:章下标
+        if (i != undefined && index != undefined && r.status < 9) {
+          if (this.courseInfo.orderStudy) {
+            //判断上个是否学完
+            if (i == 0) {
+              if (index > 0) { //第一章 第一节
+                let preCatalog = this.catalogTree[index - 1];
+                let last = preCatalog.children[preCatalog.children.length - 1];
+                if (last.status != 9) {
+                  this.$message.warning('请按顺序学习！');
+                  return;
+                }
+              }
+            } else {
+              let pre = this.catalogTree[index].children[i - 1];
+              if (pre.status != 9) {
                 this.$message.warning('请按顺序学习！');
                 return;
               }
             }
-          }else{
-            let pre=this.catalogTree[index].children[i-1];
-            if(pre.status!=9){
-               this.$message.warning('请按顺序学习！');
-                return;
-            }
-          }
-          //判断是否是第一个未学完的
-          let isAllow=false;
-          let has=this.catalogTree.some(treeNode=>{
-             let hasNo=treeNode.children.some(child=>{
-                 if(child.status<9){
-                  if(child.id==r.id){
-                    isAllow=true;
+            //判断是否是第一个未学完的
+            let isAllow = false;
+            let has = this.catalogTree.some(treeNode => {
+              let hasNo = treeNode.children.some(child => {
+                if (child.status < 9) {
+                  if (child.id == r.id) {
+                    isAllow = true;
                   }
                   return true;
-                 }else{
+                } else {
                   return false;
-                 }
-                 
-             });
-             return hasNo;
-          });
-          if(has){
-            if(!isAllow){
-              this.$message.warning('请按顺序学习！');
-              return;
+                }
+
+              });
+              return hasNo;
+            });
+            if (has) {
+              if (!isAllow) {
+                this.$message.warning('请按顺序学习！');
+                return;
+              }
             }
           }
         }
-      }
 
-      this.playerBoxShow=false;
-      //显示内容部分
-      let $this = this;
-      this.resType = r.contentType;
-      this.contentData = r;
-      this.contentData.name = this.courseInfo.name;
-      this.saveStudyDuration();
+        this.playerBoxShow = false;
+        //显示内容部分
+        let $this = this;
+        this.resType = r.contentType;
+        this.contentData = r;
+        this.contentData.name = this.courseInfo.name;
+        this.saveStudyDuration();
 
-      if(r.contentType == 10 || r.contentType == 20) {
+        if (r.contentType == 10 || r.contentType == 20) {
           if (r.content.startsWith('\{')) {
-              this.curriculumData = JSON.parse(r.content);
-            } else {
-              this.curriculumData.url = r.content;
-            }
-            //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
-            //let url=this.fileBaseUrl+this.curriculumData.url;
-            this.createPlayUrl(r.contentRefId,this.curriculumData.url);
-      } else if (r.contentType == 40) {
-        // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
+            this.curriculumData = JSON.parse(r.content);
+          } else {
+            this.curriculumData.url = r.content;
+          }
+          //let url=process.env.VUE_APP_BASE_API+'/xboe/m/course/file/show?cf='+this.curriculumData.url;
+          //let url=this.fileBaseUrl+this.curriculumData.url;
+          this.createPlayUrl(r.contentRefId, this.curriculumData.url);
+        } else if (r.contentType == 40) {
+          // if (r.content != '' && r.content.indexOf('.pdf') == -1) {
           apiCourseFile.detail(r.contentRefId).then(cfrs => {
             if (cfrs.status == 200) {
               r.content = cfrs.result.previewFilePath;
               this.curCFile = cfrs.result;
-              if(cfrs.result.previewFilePath == '' && cfrs.result.filePath.indexOf('pdf') > -1) {
+              if (cfrs.result.previewFilePath == '' && cfrs.result.filePath.indexOf('pdf') > -1) {
                 r.content = cfrs.result.filePath;
-                this.curCFile.converStatus=2;
+                this.curCFile.converStatus = 2;
               }
-              if(r.content && r.content.indexOf('.pdf')>-1){
-                this.curCFile.converStatus=2;
+              if (r.content && r.content.indexOf('.pdf') > -1) {
+                this.curCFile.converStatus = 2;
               }
             } else {
               $this.$message.error('加载pdf课件文件失败');
             }
           });
-        // }
-      } else if (r.contentType == 52) {
-        this.isAppendTime=false;
-        if (r.content.startsWith('\{')) {
-          this.conLink = JSON.parse(r.content);
-        } else {
-          this.conLink.url = r.content;
-          this.conLink.openType = 1;
-        }
-        if (this.conLink.openType == 2) {
-          //直接设置完成状态
-          this.widthOpen(this.conLink.url);
-        }
-        //this.conLink=
-      } else if (r.contentType == 61) {
-        // 考试
-      } else if (r.contentType == 60) {
-        // 作业
-      } else if (r.contentType == 62) {
-        // 评估
-        //评估不需要查找，因为内容就是content中
-        console.log('评估处理');
-      }
-      if(this.contentData.status<2){
-         this.contentData.status=2;//进行中
-      }
-      if(this.contentData.contentType>20){ //非视频类的
-        this.isAppendTime=true;
-        this.appendStudyTime();
-        this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      }
-
-    },
-    // handleChange(val) {
-    //   console.log(val);
-    // },
-    loadScorePraiseAndTrample() {
-      //加载是否请过分
-      apiCourseGrade.has(this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.scoreInfo.has = true;
-        }
-      });
-      apiPraises.has(1, this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.isPraise = true;
-        }
-      });
-      apiTrample.has(this.courseId).then(rs => {
-        if (rs.status == 200 && rs.result) {
-          this.isTrample = true;
-        }
-      });
-    },
-    addScore() {
-      let that = this;
-      let postData = {
-        courseId: this.courseInfo.id,
-        studyId: this.studyId,
-        score: this.scoreInfo.score
-      };
-      if (this.scoreInfo.score > 0) {
-        apiCourseGrade.grade(postData).then(rs => {
-          if (rs.status == 200){
-            this.$message.success('打分成功，谢谢您的打分');
-            that.scoreInfo.has = true;
-            that.courseInfo.score = rs.result;
-            let event = {
-              key: "ScoreCourse",//后台的事件key  发布文章且审核通过
-              title: "完成课程评分",//事件的标题
-              parameters:"",//用户自定义参数 name:value,name:value
-              content: "给课程评分",//事件的内容
-              objId: this.courseInfo.id,//关联的id
-              objType: 1,//关联的类型
-              objInfo: this.courseInfo.name,
-              aid: this.userInfo.aid, //当前登录人的id
-              aname: this.userInfo.name,//当前人的姓名
-              status: 1 //状态，直接写1
-            }
-            this.$store.dispatch("userTrigger", event);
-
+          // }
+        } else if (r.contentType == 52) {
+          this.isAppendTime = false;
+          if (r.content.startsWith('\{')) {
+            this.conLink = JSON.parse(r.content);
           } else {
-            this.$message.error('打分处理失败，请稍后再试');
+            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;
           }
         });
-      }
-    },
-    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('点赞成功');
+        apiPraises.has(1, this.courseId).then(rs => {
+          if (rs.status == 200 && rs.result) {
             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('已踩');
+        apiTrample.has(this.courseId).then(rs => {
+          if (rs.status == 200 && rs.result) {
             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;
+      },
+      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;
+              let event = {
+                key: "ScoreCourse", //后台的事件key  发布文章且审核通过
+                title: "完成课程评分", //事件的标题
+                parameters: "", //用户自定义参数 name:value,name:value
+                content: "给课程评分", //事件的内容
+                objId: this.courseInfo.id, //关联的id
+                objType: 1, //关联的类型
+                objInfo: this.courseInfo.name,
+                aid: this.userInfo.aid, //当前登录人的id
+                aname: this.userInfo.name, //当前人的姓名
+                status: 1 //状态，直接写1
+              }
+              this.$store.dispatch("userTrigger", event);
+
+            } else {
+              this.$message.error('打分处理失败，请稍后再试');
+            }
+          });
         }
-        case 2: {
-          data = {
-            text: '进行中',
-            class: 'catalog-cell-state2'
-          };
-          break;
+      },
+      praiseContent() {
+        if(this.isTrample) {
+          this.$message.error('您已踩过了，不能再赞了');
+          return;
         }
-        case 9: {
-          data = {
-            text: '已完成',
-            class: 'catalog-cell-state9'
-          };
-          break;
+        if(this.interactRuning) {
+          return;
         }
-        default:
-          {
+        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;
-              }
+        }
+        return data;
+      },
+      loadAuthorInfo(list, ids) {
+        //加载作者信息，头像，机构信息
+        if (ids.length == 0) {
+          return;
+        }
+        apiUser.getByIds(ids).then(res => {
+          if (res.status == 200) {
+            list.forEach((item, index) => {
+              res.result.some(author => {
+                if (author.aid == item.teacherId) {
+                  item.authorInfo = author;
+                  return true;
+                } else {
+                  return false;
+                }
+              });
             });
-          });
-        } else {
-          //console.log('加载课程信息失败:'+res.error);
-          //this.$message.error(res.message);
-        }
-      });
-    },
-       ctabChange(e) {
-      //当前已经不再使用
-      //console.log(e);
-    },
+          } else {
+            //console.log('加载课程信息失败:'+res.error);
+            //this.$message.error(res.message);
+          }
+        });
+      },
+      ctabChange(e) {
+        //当前已经不再使用
+        //console.log(e);
+      },
       onPlayerPause() {
-      //console.log("暂停");
-    },
-    onPlayerEnded() {
-      this.playerBoxShow = true;
-      if(this.contentData.status<9){
-        this.finishStudyItem();
-      }
-    },
-    onPlayerPlaying(itme) {
-      this.isAppendTime=false;
-      this.appendStartTime=null;
-      this.intTimeNote = parseInt(itme);
-      //console.log("当前播放"+itme);
-      //console.log("当前播放11"+itme);
-      if (this.contentData.contentType && this.contentData.contentType == 10){
-        let intTime = parseInt(itme);
-        //判断是否完成
-        let completeType=this.curriculumData.completeSetup;
-        let completeSecond=this.curriculumData.second;
-        if(!completeSecond || completeType==0){
-          completeSecond=5;//如果没有就采用默认的时间了
+        //console.log("暂停");
+      },
+      onPlayerEnded() {
+        this.playerBoxShow = true;
+        if (this.contentData.status < 9) {
+          this.finishStudyItem();
         }
-        if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-            if(completeType==1){
-              let finishPercent=this.curriculumData.setupTage;
-              let videDuration=this.contentData.duration;
-              let percent =intTime*100/videDuration;
-              if(percent>=finishPercent){
-                  this.finishStudyItem();
+      },
+      onPlayerPlaying(itme) {
+        this.isAppendTime = false;
+        this.appendStartTime = null;
+        this.intTimeNote = parseInt(itme);
+        //console.log("当前播放"+itme);
+        //console.log("当前播放11"+itme);
+        if (this.contentData.contentType && this.contentData.contentType == 10) {
+          let intTime = parseInt(itme);
+          //判断是否完成
+          let completeType = this.curriculumData.completeSetup;
+          let completeSecond = this.curriculumData.second;
+          if (!completeSecond || completeType == 0) {
+            completeSecond = 5; //如果没有就采用默认的时间了
+          }
+          if (this.contentData.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+            if (completeType == 1) {
+              let finishPercent = this.curriculumData.setupTage;
+              let videDuration = this.contentData.duration;
+              let percent = intTime * 100 / videDuration;
+              if (percent >= finishPercent) {
+                this.finishStudyItem();
               }
-            }else{
-              if(intTime>=completeSecond){
-                 this.finishStudyItem();
+            } else {
+              if (intTime >= completeSecond) {
+                this.finishStudyItem();
               }
             }
+          }
+          //下面是每隔10秒记录一下次
+          let saveTime = Math.floor(intTime % 10);
+          if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
+            .studyItemId != '') {
+            this.contentData.lastStudyTime = intTime;
+            let postData = {
+              itemId: this.contentData.studyItemId,
+              videoTime: intTime
+            };
+            //console.log('记录播放时间')
+            apiStudy.studyVideoTime(postData).then(rs => {
+              if (rs.status != 200) {
+                console.log('记录播放时间错误');
+              }
+            });
+          }
+        }
+      },
+      audioPlaying(item, currentTime) {
+        //console.log("当前播放"+item);
+        let intTime = parseInt(currentTime);
+        //判断是否完成
+        let completeType = this.curriculumData.completeSetup;
+        let completeSecond = this.curriculumData.second;
+        if (!completeSecond || completeType == 0) {
+          completeSecond = 5; //如果没有就采用默认的时间了
+        }
+        if (this.contentData.status < 9) { //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
+          if (completeType == 1) {
+            let finishPercent = this.curriculumData.setupTage;
+            let videDuration = this.contentData.duration;
+            let percent = intTime * 100 / videDuration;
+            if (percent >= finishPercent) {
+              this.finishStudyItem();
+            }
+          } else {
+            if (intTime >= completeSecond) {
+              this.finishStudyItem();
+            }
+          }
         }
         //下面是每隔10秒记录一下次
         let saveTime = Math.floor(intTime % 10);
-        if (intTime > 10 && intTime!=this.contentData.lastStudyTime && saveTime == 0 && this.contentData.studyItemId != '') {
-          this.contentData.lastStudyTime=intTime;
+        if (intTime > 10 && intTime != this.contentData.lastStudyTime && saveTime == 0 && this.contentData
+          .studyItemId) {
+          this.contentData.lastStudyTime = intTime;
           let postData = {
             itemId: this.contentData.studyItemId,
             videoTime: intTime
@@ -702,765 +806,868 @@ export default {
             }
           });
         }
-      }
-    },
-    audioPlaying(item,currentTime) {
-      //console.log("当前播放"+item);
-      let intTime = parseInt(currentTime);
-      //判断是否完成
-      let completeType=this.curriculumData.completeSetup;
-      let completeSecond=this.curriculumData.second;
-      if(!completeSecond || completeType==0){
-        completeSecond=5;//如果没有就采用默认的时间了
-      }
-      if(this.contentData.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
-          if(completeType==1){
-            let finishPercent=this.curriculumData.setupTage;
-            let videDuration=this.contentData.duration;
-            let percent =intTime*100/videDuration;
-            if(percent>=finishPercent){
-                this.finishStudyItem();
+      },
+      audioPlay() {
+        //console.log("开始播放");
+        let $this = this;
+        // if(this.contentData.status!=9){
+        //   let completeType=this.curriculumData.completeSetup;
+        //   if(completeType==0){
+        //     //默认5秒后学习完成.
+        //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+        //   }else{
+        //     //先记录进行中的学习内容
+        //     this.saveStudyItem();
+        //   }
+        // }
+      },
+      audioPause() {
+        //console.log("暂停");
+      },
+      audioEnd() {
+        //console.log("播放结束");
+        if (this.contentData.status < 9) {
+          this.finishStudyItem();
+        }
+      },
+      loadData() {
+        apiCoursePortal.detail(this.courseId, false).then(rs => {
+          if (rs.status == 200) {
+            //设置必须的字段
+            if (rs.result.course.type == 20) {
+              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;
             }
-          }else{
-            if(intTime>=completeSecond){
-               this.finishStudyItem();
+            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,
+                  sign:''
+                };
+                userIds.push(item.teacherId);
+                ctoUsers.push({
+                  aid: item.teacherId,
+                  name: item.teacherName
+                });
+              });
+              this.toUsers = ctoUsers;
+              this.loadAuthorInfo(rs.result.teachers, userIds);
             }
-          }
-      }
-      //下面是每隔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('记录播放时间错误');
+            this.contentList = rs.result.contents;
+            this.totalContent = rs.result.contents.length;
+            //加载学习的数据
+            this.loadStudyData();
+          } else {
+            this.$message.error(rs.message);
           }
         });
-      }
-    },
-    audioPlay() {
-      //console.log("开始播放");
-      let $this=this;
-      // if(this.contentData.status!=9){
-      //   let completeType=this.curriculumData.completeSetup;
-      //   if(completeType==0){
-      //     //默认5秒后学习完成.
-      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      //   }else{
-      //     //先记录进行中的学习内容
-      //     this.saveStudyItem();
-      //   }
-      // }
-    },
-    audioPause() {
-      //console.log("暂停");
-    },
-    audioEnd() {
-       //console.log("播放结束");
-      if(this.contentData.status<9){
-        this.finishStudyItem();
-      }
-    },
-    loadData() {
-      apiCoursePortal.detail(this.courseId,false).then(rs => {
-        if (rs.status == 200) {
-          //设置必须的字段
-          if(rs.result.course.type == 20) {
-            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){
+      },
+      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");
                   }
-                  //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(this.courseInfo.type == 10) {
-              this.showRes(this.contentList[0]);
-            } else {
-              //如果没有，就定位第一项内容
-              if (playIndex === -1) {
-                // this.showRes(this.contentList[0]);
-                this.showRes(this.catalogTree[0].children[0])
+
+              if (this.courseInfo.type == 10) {
+                this.showRes(this.contentList[0]);
               } else {
-                this.showRes(this.contentList[playIndex]);
+                //如果没有，就定位第一项内容
+                if (playIndex === -1) {
+                  // this.showRes(this.contentList[0]);
+                  this.showRes(this.catalogTree[0].children[0])
+                } else {
+                  this.showRes(this.contentList[playIndex]);
+                }
               }
-            }
 
-          } else {
-            this.$message.error('您还未报名');
-            // if (this.courseInfo.type == 10) {
-            //   location.href = this.webBaseUrl + '/course/micro?id=' + this.courseId;
-            // } else {
+            } 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);
           }
-        } else {
-          this.$message.error(res.message);
+        });
+      },
+      saveStudyInfo() {
+        //记录课件学习信息
+        if (this.contentData.contentType >= 60) {
+          //只有在课件页面停留超过5秒才会记录
+          return;
         }
-      });
-    },
-    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);
+        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;
         }
-      });
-    },
-    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();
+        if (this.appendHandle != null) {
+          window.clearTimeout(this.appendHandle);
         }
-        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 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,
+              id: this.appentId,
               studyId: this.studyId,
               courseId: this.courseInfo.id,
               contentId: this.contentData.id,
-              studyInfo:
-                this.courseInfo.name +
+              studyInfo: this.courseInfo.name +
                 "-" +
                 this.contentData.contentName,
               duration: duration
             };
             apiStudy.appendStudyTime(postData).then(rs => {
-              if (rs.status == 200){
-                $this.appentId=rs.result;
+              if (rs.status == 200) {
+                $this.appentId = rs.result;
                 $this.appendStartTime = new Date(); //重置开始时间
-                studyUtil.clearStudyDuration();//清除本地存储
+                studyUtil.clearStudyDuration(); //清除本地存储
                 //this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
               } else {
                 console.log(rs.message);
               }
             });
+          }
+        } else {
+          $this.appendStartTime = new Date(); //重置开始时间
+          studyUtil.setStudyDuration(duration); //添加到本地存储中
         }
-      } else {
-        $this.appendStartTime = new Date(); //重置开始时间
-        studyUtil.setStudyDuration(duration);//添加到本地存储中
-      }
-      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
-    },
+        this.appendHandle = setTimeout(function() {
+          $this.appendStudyTime();
+        }, $this.appentInterval);
+      },
       onPlayerPlay() {
-      //console.log("开始播放");
-      this.playerBoxShow = false;
-      let $this=this;
-      //console.log(this.contentData.status,'this.contentData.status');
-      // if(this.contentData.status<9){
-      //   let completeType=this.curriculumData.completeSetup;
-      //   //console.log(completeType,'completeType');
-      //   if(completeType==0){
-      //     //默认5秒后学习完成.
-      //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
-      //   }else{
-      //     //先记录进行中的学习内容
-      //     this.saveStudyItem();
-      //   }
-      // }
-    },
-       onFullscreen(full){
-      let divId='videowatermark';
-      var div = document.getElementById('myVideoPlayer')
-      if(full){
-      	var div3 = document.createElement("div");
-        div3.id =divId;
-        div3.setAttribute("class", "fullmark");
-      	div3.innerHTML='';
-        //从父组件传过来的水印内容
-        //div3.innerText =this.userInfo.name+this.userInfo.code;
-      	for(var i=0;i<8;i++){
-      		div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.loginName+'</div>';
-      	}
-        div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
-      	div.appendChild(div3);
-      }else{
-      	var markDiv=div.querySelector("#"+divId);
-      	if(markDiv){
-      		div.removeChild(markDiv);
-      	}
-      }
-    },
-       finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
-        if(!this.contentData.studyItemId){
+        //console.log("开始播放");
+        this.playerBoxShow = false;
+        let $this = this;
+        //console.log(this.contentData.status,'this.contentData.status');
+        // if(this.contentData.status<9){
+        //   let completeType=this.curriculumData.completeSetup;
+        //   //console.log(completeType,'completeType');
+        //   if(completeType==0){
+        //     //默认5秒后学习完成.
+        //     $this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
+        //   }else{
+        //     //先记录进行中的学习内容
+        //     this.saveStudyItem();
+        //   }
+        // }
+      },
+      onFullscreen(full) {
+        let divId = 'videowatermark';
+        var div = document.getElementById('myVideoPlayer')
+        if (full) {
+          var div3 = document.createElement("div");
+          div3.id = divId;
+          div3.setAttribute("class", "fullmark");
+          div3.innerHTML = '';
+          //从父组件传过来的水印内容
+          //div3.innerText =this.userInfo.name+this.userInfo.code;
+          for (var i = 0; i < 8; i++) {
+            div3.innerHTML +=
+              '<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">' +
+              this.userInfo.name + this.userInfo.loginName + '</div>';
+          }
+          div3.style.cssText =
+            "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
+          div.appendChild(div3);
+        } else {
+          var markDiv = div.querySelector("#" + divId);
+          if (markDiv) {
+      	     div.removeChild(markDiv);
+          }
+        }
+      },
+      finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
+        if (!this.contentData.studyItemId) {
           //这种可能没有，不过这里也是为了万中那个1
           this.saveStudyInfo();
-        }else{
-          let params={
-            itemId:this.contentData.studyItemId,
-            studyId:this.studyId,
-            courseId:this.courseId,
-            cnum:this.totalContent
+        } 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);
-              }
+          apiVideoStudy.finishStudyItem(params).then(res => {
+            if (res.status == 200) {
+              this.contentData.status = 9;
+              this.contentData.progress = 100;
+            } else {
+              console.log("记录完成学习失败:" + res.message + "，" + res.error);
+            }
           });
         }
-    },
-   
-      saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
-      if(this.contentData.studyItemId) {
-        return;//已经有记录的，不需要再保存了
-      }
-      let params = {
-        studyId: this.studyId, //学习id,
-        courseId: this.courseId, //课程id,
-        contentId: this.contentData.id, //内容id,
-        contentType:this.contentData.contentType, //内容id,
-        contentName: this.contentData.contentName, //内容名称
-        progress: 0,
-        lastStudyTime:0,
-        status:2,
-        studyDuration:0,
-        contentTotal: this.totalContent
-      };
-      apiVideoStudy.saveStudyItem(params).then(res=>{
-          if(res.status == 200){
-            this.contentData.studyItemId=res.result.id;
-            this.contentData.status = 2;//进行中状态
-          }else{
+      },
+
+      saveStudyItem() { //先保存学习的内容,针对于音视频的内容
+        if (this.contentData.studyItemId) {
+          return; //已经有记录的，不需要再保存了
+        }
+        let params = {
+          studyId: this.studyId, //学习id,
+          courseId: this.courseId, //课程id,
+          contentId: this.contentData.id, //内容id,
+          contentType: this.contentData.contentType, //内容id,
+          contentName: this.contentData.contentName, //内容名称
+          progress: 0,
+          lastStudyTime: 0,
+          status: 2,
+          studyDuration: 0,
+          contentTotal: this.totalContent
+        };
+        apiVideoStudy.saveStudyItem(params).then(res => {
+          if (res.status == 200) {
+            this.contentData.studyItemId = res.result.id;
+            this.contentData.status = 2; //进行中状态
+          } else {
             console.log("记录学习失败:" + res.message + "，" + res.error);
           }
-      });
+        });
+      },
+      formatTime(duration) {
+        let min = 0;
+        if (duration > 0) {
+          min = parseInt(duration / 60);
+        }
+        return min;
+      },
+      heartabone() {
+        this.tab = 1
+      },
+      heartabtwo() {
+        this.tab = 2
+      },
+      notetab1(num) {
+        this.notetab = num
+      },
     },
-      formatTime(duration){
-      let min=0;
-      if(duration>0){
-        min=parseInt(duration/60);
-      }
-      return min;
-    },
-      heartabone(){
-          this.tab = 1
-      },
-      heartabtwo(){
-          this.tab = 2
-      },
-       notetab1(num){
-          this.notetab = num
-      },
-  },
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.tearch-top{
-  margin-top: 10px;
-    width: 100%;
-    height: 15px;
-    img{
-        width: 100%;
+  //内容块样式定义
+  .course-content {
+    min-height: 745px;
+    margin: 20px 80px;
+    .course-playbox {
+      background-color: #fff;
+      min-height: 745px;
+      display: flex;
+      justify-content: space-between;
+      .course-player{ //内容播放区域
+        flex:1;
+        min-width: 700px;
+        width: 65%;
         height: 100%;
+        border: 1px solid #ffffff;
+        padding-right: 20px;
+        overflow: auto;
+      }
+      .course-control{ //内容控制区域
+         min-width: 400px;
+         width: 35%;
+      }
     }
-}
-.coures-note{
+    .course-infobox {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      .course-info {
+        flex:1;
+        min-width: 700px;
+        width: 65%;
+        min-height: 710px;
+        box-sizing: border-box;
+        padding-right: 20px;
+      }
+      .course-teacher{
+        min-width: 400px;
+        width: 35%;
+      }
+    }
+  }
+
+  .control-tab {
+    margin: 35px 30px 10px 30px;
+
+    border-bottom: 1px solid #D8D8D8;
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 12px;
+    div {
+      color: #666666;
+      cursor: pointer;
+    }
+    .control-tab-active {
+      color: #333333;
+      font-weight: 600;
+    }
+  }
+
+  .course-info-tab {
+    display: flex;
+    padding-top: 30px;
+    margin-left: 47px;
+    div {
+      color: #333333;
+      font-size: 18px;
+      cursor: pointer;
+      margin-right: 50px;
+    }
+
+    .course-info-tab-active {
+      color: #333333;
+      font-weight: 600;
+      position: relative;
+      span {
+        display: inline-block;
+        width: 69px;
+        height: 4px;
+        background: #387DF7;
+        border-radius: 5px;
+        position: absolute;
+        left: 0;
+        top: 128%;
+      }
+
+    }
+
+  }
+
+ .course-info-row{
+   padding: 10px 0;
+   font-size: 18px;
+   color: #343434;
+   img{
+     width:18px
+   }
+   .course-info-text{
+      margin: 10px 0;
+      font-size: 14px;
+      text-indent: 2em;
+      color: #666666;
+      word-break: break-all;
+   }
+ }
+  //右侧老师部分头部及标题
+  .cteacher-top {
+    background-color: #fff;
+    margin-top: 0px;
+    .cteacher-top-bar{
+      width: 100%;
+      height: 15px;
+    }
+    .cteacher-top-title{
+      padding-left:30px;
+      padding-top:20px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 50px;
+    }
+
+  }
+  //右侧老师部分 老师列表
+  .cteacher-list {
+    background-color: #fff;
+    padding: 36px;
+  }
+
+  .coures-note {
     min-height: 500px;
     padding-left: 17px;
     padding-top: 10px;
-    .note-tole{
+
+    .note-tole {
       color: #333333;
       font-size: 18px;
       font-weight: 600;
     }
-    .note-info{
 
-    }
-}
-.coures-tearch{
-  margin-top: 24px;
-  margin-left: 20px;
-}
-.coure-tab{
-    display: flex;
+    .note-info {}
+  }
+
+  .coures-tearch {
+    margin-top: 24px;
+    margin-left: 20px;
+  }
+
+
+  .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;
-    padding-top: 30px;
-    margin-left: 47px;
-    div{
-        flex: 1;
-        color: #333333;
-        font-size: 18px;
-    }
-    .coureactive{
-        color: #333333;
-        font-weight: 600;
-        position: relative;
-        span{
-            display: inline-block;
-            width: 69px;
-            height: 4px;
-            background: #387DF7;
-            border-radius: 5px;
-            position: absolute;
-            left: 0;
-            top: 128%;
-        }
-
-  }
-
-}
-.mltit{
-
-  // width: 70%;
-  // width: ;
-  word-break:break-all;
-  // line-height: 25px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.catalog-text{
-  width: 70%;
-  overflow: hidden;
-  word-break:break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  height: 40px;
-}
-.player-box{
-  position: absolute;
-  // top: 62px;
-  // left: 184px;
-  width: 300px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  height: 187px;
-  background: rgba(74, 74, 74,.5);
-  border-radius: 33px;
-  text-align: center;
-  padding: 20px;
-  box-sizing: border-box;
-  .player-praise{
-    margin-top: 25px;
-    display: flex;
-    // justify-items: center;
-    justify-content: center;
-  }
-  .player-rate{
-    margin-top: 35px;
-  }
-}
-.score {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .el-rate {
-    display: inline-block;
-  }
-  .score-text {
-    font-size: 28px;
-    color: #ffb30f;
-    font-family: 'Arial';
-    margin-left: 23px;
-    // font-weight: 600;
-  }
-  // margin-bottom: 19px;
-  .score-no {
-    color: #ffb30f;
-    padding: 5px 0;
-    background: #efefef;
-    border-radius: 20px;
-    width: 65px;
-    font-size: 12px;
-    font-weight: 600;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 187px;
+    background: rgba(74, 74, 74, .5);
+    border-radius: 33px;
     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;
-}
+    box-sizing: border-box;
 
-.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;
+    .player-praise {
+      margin-top: 25px;
+      display: flex;
+      // justify-items: center;
+      justify-content: center;
     }
-  }
-  .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;
+    .player-rate {
+      margin-top: 35px;
     }
   }
-}
-.video-div {
-  position: absolute;
-  z-index: 999999999;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(101, 101, 101, 0.9);
-  .good {
+
+  .score {
     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 {
+    .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);
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-tag {
     background-color: #ecf5ff;
     border-color: #409EFF;
     display: inline-block;
@@ -1474,191 +1681,161 @@ export default {
     border-radius: 0px;
     box-sizing: border-box;
     white-space: nowrap;
-}
-::v-deep .teacher .teacher-avator .teacher-text{
-  background: none;
-  border: none;
-}
-.teacher {
-  background-color: #ffffff;
-  display: flex;
-   border-top: none;
-  padding: 10px 0px;
-  .teacher-avator {
-    ::v-deep .el-avatar {
-      width: 60px !important;
-      height: 60px !important;
-      border-radius: 50%;
-    }
-    .teacher-text {
-      width: 68px;
-      height: 68px;
-      div{
-        img{
-           width: 68px;
-           height: 68px;
+  }
+
+  ::v-deep .teacher .teacher-avator .teacher-text {
+    background: none;
+    border: none;
+  }
+
+  .teacher {
+    background-color: #ffffff;
+    display: flex;
+    border-top: none;
+    padding: 10px 0px;
+    .teacher-avator {
+      ::v-deep .el-avatar {
+        width: 60px !important;
+        height: 60px !important;
+        border-radius: 50%;
+      }
+      .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: 5px 5px 10px 10px;
+      }
+      .teacher-remark {
+        padding: 0px 5px 0 10px;
+        font-size: 14px;
+        color: #666666;
+        line-height: 20px;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+      }
     }
   }
-  .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;
+
+
+
+  .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
+      }
     }
   }
-}
-.teachers {
-  background-color: #fff;
-  padding: 36px;
-  margin-top: 0;
-  .top {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 50px;
-  }
-}
-.breadname {
-  margin-bottom: 15px;
-}
-//目录的样式更改
-::v-deep .el-collapse-item{
-  .el-collapse-item__header{
-    // position: relative;
-    direction:rtl;
-    display: flex;
-    // justify-content;
-    justify-content: space-between;
-    // .el-collapse-item__arrow{
-    //   float:right;
-    // }
-    // span{
-    //   float:right;
-    // }
-    i{
-      display:none
+
+  .course-units {
+
+    .units-info {
+      padding: 0 30px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+    }
+
+    .units-active {
+      background: #F6F6F6;
+      color: #387DF7;
+      font-weight: 600;
+
+      img {
+        width: 18px;
+        height: 20px;
+        vertical-align: middle;
+        margin-right: 20px;
+      }
     }
   }
-}
-.course-units{
-   
-     .units-info{
-          padding: 0 30px;
-         height: 60px;
-         line-height: 60px;
-         font-size: 16px;
-     }
-     .units-active{
-         background: #F6F6F6;
-         color: #387DF7;
-         font-weight: 600;
-         img{
-             width: 18px;
-             height: 20px;
-             vertical-align: middle;
-             margin-right: 20px;
-         }
-     }
-}
-.more{
+
+  .more {
     float: right;
-}
+  }
 
-
-
-
-.coures-content{
-    height: 745px;
-    margin: 20px 80px;
-    background-color: #fff;
-    display: flex;
-    .coures-infobox{
-       width: 500px;
-        .coures-info{
-        height: 710px;
-        background-color: #fff;
-       
-        box-sizing: border-box;
-        .hear-tab{
-            margin: 35px 30px 10px 30px;
-            width: 300px;
-            border-bottom: 1px solid #D8D8D8 ;
-            display: flex;
-            padding-bottom: 12px;
-            div{
-                flex: 1;
-                color: #666666;
-            }
-            .tab-active{
-                color: #333333;
-                font-weight: 600;
-            }
-        }
-    }
-    }
-   
-    .coures-play{
-        flex: 1;
-        min-height: 745px;
-    }
-}
-.coures-title{
-        margin-left:82px;
-        font-size: 20px;
-        font-weight: 600;
-        color: #FFFFFF; 
-        margin-top: 25px;
-        div{
-            float: left;
-            font-size: 20px;
-            font-weight: 600;
-            color: #FFFFFF; 
-            line-height: 20px;
-
-        }
-    span{
-        float: left;
-        font-size: 16px;
-        font-weight: 400;
-        color: #FFFFFF;
-        margin-left: 27px;
-    }
-    h6{
-        float: left;
-        font-size: 16px;
-        font-weight: 600;
-        color: #FFFFFF;
-        margin: 0 20px;
-
-    }
-}
-::v-deep.el-breadcrumb__item:first-child .el-breadcrumb__inner a, .el-breadcrumb__inner .is-link {
-    color: #fff !important;
-}
-::v-deep.el-breadcrumb__item:last-child .el-breadcrumb__inner{
-    color: #fff !important;
-}
-::v-deep.hear-nav{
-  color: #fff !important;
-}
-.breadcrumb-nav{
+  .coures-title {
+    margin-left: 82px;
+    font-size: 20px;
+    font-weight: 600;
     color: #FFFFFF;
-}
- .coures-bg{
-     width: 100%;
-     height: 200px;
-     background: url('../../../public/images/couresdetail.png');
- }
-</style>
\ No newline at end of file
+    margin-top: 25px;
+
+    div {
+      float: left;
+      font-size: 20px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 20px;
+
+    }
+
+    span {
+      float: left;
+      font-size: 16px;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: 27px;
+    }
+
+    h6 {
+      float: left;
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      margin: 0 20px;
+
+    }
+  }
+
+  ::v-deep.el-breadcrumb__item:first-child .el-breadcrumb__inner a,
+  .el-breadcrumb__inner .is-link {
+    color: #fff !important;
+  }
+
+  ::v-deep.el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    color: #fff !important;
+  }
+
+  ::v-deep.hear-nav {
+    color: #fff !important;
+  }
+
+  .breadcrumb-nav {
+    color: #FFFFFF;
+  }
+
+  .coures-bg {
+    width: 100%;
+    height: 200px;
+    background: url('../../../public/images/couresdetail.png');
+  }
+</style>