课程列表侧边栏修改 课程详情评分修改 课程详情章节目录修改

src/views/portal/course/Index.vue

@@ -39,16 +39,14 @@
                 :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
                 @mouseenter.stop="changeIndex(twoList.id)">
                 <!-- 三级分类 -->
-                <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
+                  <el-menu> 
-                  :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
+                    <el-submenu :index="String(twoIndex)" v-if="twoList.children && twoList.children.length > 0">
-                  :visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
+                      <template slot="title">  
-                  <div class="course-two-content" slot="reference">{{
+                      <div class="course-two-content">
-                    twoList.name }}</div>
-                  <!-- 内容 -->
-                  <div class="course-three-box">
-                    <div class="course-three-box-title">
                         {{ twoList.name }}
                       </div>
+                      </template>
+                      <el-menu-item-group>
                         <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
                           <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
                             :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
@@ -56,8 +54,13 @@
                             <span>{{ threeList.name }}</span>
                           </div>
                         </div>
-                  </div>
+                      </el-menu-item-group>
-                </el-popover>
+                    </el-submenu>
+                    <el-menu-item :index="String(twoIndex)" v-else>
+                      <div slot="title" class="course-two-content"> {{ twoList.name }}</div>
+                    </el-menu-item>         
+                  </el-menu>
+                <!-- </el-popover> -->
               </div>
             </div>
           </div>
@@ -613,6 +616,7 @@ export default {
   },
   data() {
     return {
+      menuActiveIndex: '-1', //无默认选中
       newData: false,//线上品牌系列隐藏
       navTitle: [],
       // 设置高亮
@@ -1569,6 +1573,38 @@ console.log(res.result.list,'data')
 </script>
 
 <style scoped lang="scss">
+
+ 
+    .course-three-box-title{
+      font-size: 16px;
+      font-weight: 600;
+      height: 68px;
+      line-height: 80px;
+      background: linear-gradient(180deg, rgba(78,166,255,0.2) 0%,
+       rgba(78,166,255,0) 100%);padding-left: 40px;
+    }
+    .course-three{
+      border-radius: 6px;
+      border: 1px solid #C7CBD2;display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 10px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      color: rgb(48, 49, 51);
+
+      &:hover{
+        color: #387DF7;
+        border: 1px solid #387DF7 !important;
+      }
+     }
+
+    .threeActive{
+      color: #387DF7;
+      border: 1px solid #387DF7 !important;
+    }
+  
 .couser-list-content {
   min-height: 110%;
 }
@@ -1629,10 +1665,29 @@ console.log(res.result.list,'data')
   }
 }
 
+
+
 // 三级列表
 .course-list {
   background-color: #fff;
 
+  ::v-deep .el-submenu__title, .el-menu-item {
+    height: 38px;
+    padding: 0  5px!important;
+  }
+
+
+  ::v-deep .el-menu-item.is-active {
+    background-color: inherit;
+    color: inherit;
+  }
+
+  ::v-deep .el-submenu__title {
+    background-color: inherit;
+    color: inherit;
+  }
+  
+
   .course-one {
     position: relative;
 
@@ -1646,7 +1701,7 @@ console.log(res.result.list,'data')
 
     // 二级的高亮
     .courseTwoActive {
-      color: #387DF7;
+      color: #387DF7 !important;
       border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
     }
 

src/views/study/coursenew.vue

@@ -123,13 +123,20 @@
           <div>
             <div class="course-interact">
               <div class="score" style="display: flex;">
-                <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:18px">
+                <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:10px;display: flex;align-items: center;">
                   <!-- <el-popover placement="top" width="300" trigger="hover"> -->
                     <!-- <div style="text-align:center;line-height:50px;padding:20px 0px">
 
                       <div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div>
                     </div> -->
-                      <el-rate v-model="scoreInfo.score" @change="addScore"></el-rate>
+                      <p style="margin-right:10px">告诉我们您的喜欢程度</p>
+                      <el-rate v-model="scoreInfo.score"  @change="showConfirmScore" :allow-half="true"></el-rate>
+                      <div v-if="isShowScoreConfirm">
+                        <span class="score-text">{{ toScore(scoreInfo.score) }}</span>
+                        <span style="font-size: 18px;">分</span>
+                        <el-button style="margin-left:10px" type="primary" size="mini" @click="addScore" >确定</el-button>
+                        <el-button  size="mini" @click="handleCancelScore">取消</el-button>
+                      </div>
                     <!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> -->
                   <!-- </el-popover> -->
                 </div>
@@ -188,7 +195,7 @@
                       class="el-menu-vertical-demo"
                       @open="handleOpen"
                       @close="handleClose">
-                      <el-submenu :index="item.section.id">
+                      <el-submenu :index="item.section.id" v-if="catalogTree.length > 1">
                         <template slot="title">
                           <div style="display: flex;justify-content: space-between;">
                             <div style="width: 240px;font-weight: 700;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.section.name">{{item.section.name}}</div>
@@ -215,6 +222,27 @@
                           </div>
                         </el-menu-item-group>
                       </el-submenu>
+                      <div v-else>
+                      <el-menu-item-group v-for="(ele, i) in item.children" :key="i">
+                        <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index,item)">
+                          <el-menu-item :index="ele.id" style="padding: 0;padding-left: 10px;">
+                            <div style="display: flex;justify-content: space-between;">
+                              <div style="width: 200px;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="ele.contentName">{{i+1}}. {{ ele.contentName }}</div>
+                              <div>
+                                <span v-if="contentData.id == ele.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
+                                <!-- <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> -->
+                                <img v-if="contentData.id == ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
+                                <img v-if="contentData.id == ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
+                                <img v-if="contentData.id == ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
+                                <img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
+                                <img v-if="contentData.id != ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
+                                <img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
+                              </div>
+                            </div>
+                        </el-menu-item>
+                        </div>
+                      </el-menu-item-group>
+                      </div>
                     </el-menu>
                   </div>
                   <!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
@@ -390,6 +418,7 @@
     },
     data() {
       return {
+        isShowScoreConfirm: false,
         protocolDialogVisible: false,
         tentative: false,
         isContentTypeTwo: null,
@@ -533,6 +562,13 @@
       }
     },
     methods: {
+      handleCancelScore() {
+        this.isShowScoreConfirm = false;
+        this.scoreInfo.score = 5
+      },
+      showConfirmScore() {
+        this.isShowScoreConfirm = true;
+      },
       handleOpen(key,path){
         if(this.isFalse){
           this.defaultOpeneds = [key]