修改图标

src/views/study/coursenew.vue

@@ -170,13 +170,51 @@
 
               <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-openeds="defaultOpeneds"
+                      :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;">
+                            <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>
+                            <div style="margin-right: 23px;font-weight: 700;font-size: 16px;">({{ item.children.filter(item=>item.status == 9).length }}/{{ item.children.length }})</div>
+                          </div>
+                        </template>
+                        <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>
+                      </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 +358,9 @@
     },
     data() {
       return {
+        activeId: '',
+        isFalse: false,
+        defaultOpeneds: [],
         sendEventProgress: 0,
         trueFalse: true,
         audiences:'',
@@ -455,6 +496,16 @@
       this.stopStudyTime();
     },
     methods: {
+      handleOpen(key,path){
+        // console.log(key,path,'handleOpen')
+        if(this.isFalse){
+          this.defaultOpeneds = [key]
+        }
+        this.isFalse = false
+      },
+      handleClose(key,path){
+        // console.log(key,path,'handleClose')
+      },
       toUserHome(tea){
         this.$router.push({path:this.$xpage.getHomePath(tea.teacherId)})
       },
@@ -593,7 +644,7 @@
         window.open(url, '_blank');
       },
       //替换播放区域
-      changePlayRes(r){
+      changePlayRes(r,item){
 
         if(this.appendStudyOtherHandle!=null){
           window.clearTimeout(this.appendStudyOtherHandle);
@@ -604,6 +655,11 @@
         let $this = this;
         this.resType = r.contentType;
         this.contentData = r;
+        this.activeId = this.contentData.id
+        if(item){
+          this.isFalse = true
+          this.handleOpen(item.section.id,[item.section.id])
+        }
         this.contentData.name = this.courseInfo.name;
         this.saveStudyDuration();
 
@@ -738,7 +794,7 @@
             //console.log(h,$this.controlHeight,'$this.controlHeight');
         })
       },
-      showRes(r, i, index) { //i:子节下标，index:章下标
+      showRes(r, i, index,item) { //i:子节下标，index:章下标
         // 无权限查看不能点击
         if(!this.isCrowd){
           return
@@ -786,7 +842,7 @@
             }
           }
         }
-        this.changePlayRes(r);
+        this.changePlayRes(r,item);
       },
       loadScorePraiseAndTrample() {
         //加载是否请过分
@@ -1537,7 +1593,7 @@
 
       finishStudyItem() { //设置完成学习的内容,针对于音视频的内容
         if (!this.contentData.studyItemId) {
-          // 这种可能没有，不过这里也是为了万中那个1
+          //这种可能没有，不过这里也是为了万中那个1
           this.saveStudyInfo();
         } else {
           let params = {
@@ -1618,7 +1674,31 @@
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-icon-arrow-down{
+  color: #000;
+  font-weight: 900;
+  font-size: 16px;
+}
+.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 +2289,7 @@
         width: 18px;
         height: 20px;
         vertical-align: middle;
-        margin-right: 20px;
+        // margin-right: 20px;
       }
     }
   }