在线课程修改

src/views/study/coursenew.vue

@@ -170,13 +170,47 @@
 
               <div :style="`height: ${controlHeight}px;overflow-y: auto;`">
                 <div class="catalog" v-if="courseInfo.type == 20">
-                  <div v-for="(item, index) in catalogTree" :key="index" :name="index">
+                  <div  v-for="(item, index) in catalogTree" :key="index" :name="index">
+                    <el-menu
+                      ref="menu"
+                      :default-active="activeId"
+                      :unique-opened="true"
+                      class="el-menu-vertical-demo"
+                      @open="handleOpen"
+                      @close="handleClose">
+                      <el-submenu :index="item.section.id">
+                        <template slot="title">
+                          <div style="display: flex;justify-content: space-between;">
+                            <span>{{item.section.name}}</span>
+                            <div style="margin-right: 23px;">({{ item.children.filter(item=>item.status == 9).length }}/{{ item.children.length }})</div>
+                          </div>
+                        </template>
+                        <el-menu-item-group>
+                          <div class="units-info" :class="{'units-active':contentData.id == ele.id}" v-for="(ele, i) in item.children" :key="i" @click="showRes(ele,i,index)">
+                            <el-menu-item :index="ele.id">
+                              <div style="display: flex;justify-content: space-between;">
+                                <div> {{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/not.png" alt="">
+                                  <img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban.png" alt="">
+                                </div>
+                              </div>
+                          </el-menu-item>
+                          </div>
+                        </el-menu-item-group>
+                      </el-submenu>
+                    </el-menu>
+                  </div>
+                  <!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
                     <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
                     <div class="units-info" :class="{'units-active':contentData.id == ele.id}"  v-for="(ele, i) in item.children" :key="i" @click="showRes(ele,i,index)">
                       <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{i+1}}.
                       <span>{{ ele.contentName }}</span>
                     </div>
-                  </div>
+                  </div> -->
                 </div>
                 <div v-else class="catalog">
                   <!-- contentList -->
@@ -320,6 +354,8 @@
     },
     data() {
       return {
+        KeyIndex: '',
+        activeId: '',
         sendEventProgress: 0,
         trueFalse: true,
         audiences:'',
@@ -455,6 +491,13 @@
       this.stopStudyTime();
     },
     methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath,'handleOpen');
+        this.KeyIndex = key;
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath,'handleClose');
+      },
       toUserHome(tea){
         this.$router.push({path:this.$xpage.getHomePath(tea.teacherId)})
       },
@@ -604,6 +647,7 @@
         let $this = this;
         this.resType = r.contentType;
         this.contentData = r;
+        this.activeId = this.contentData.id
         this.contentData.name = this.courseInfo.name;
         this.saveStudyDuration();
 
@@ -1618,7 +1662,26 @@
 </script>
 
 <style lang="scss" scoped>
+.el-menu,
+.el-menu-item,
+.el-submenu__title {
+  background-color: transparent !important; /* 设置背景色为透明，以移除默认的背景颜色变化 */
+  color: inherit !important; /* 确保文字颜色不变，如果需要的话 */
+}
 
+/* 取消选中效果 */
+.el-menu-item.is-active,
+.el-submenu__title.is-active {
+  background-color: transparent !important; /* 移除选中时的背景色 */
+  color: inherit !important; /* 保持文字颜色与未选中时一致，如果需要的话 */
+}
+
+/* 如果有特定的 hover 样式，也可以取消 */
+.el-menu-item:hover,
+.el-submenu__title:hover {
+  background-color: transparent !important; /* 移除鼠标悬停时的背景色变化 */
+  color: inherit !important; /* 保持文字颜色不变 */
+}
   //内容块样式定义
   .course-content {
     min-height: 745px;
@@ -2209,7 +2272,7 @@
         width: 18px;
         height: 20px;
         vertical-align: middle;
-        margin-right: 20px;
+        // margin-right: 20px;
       }
     }
   }