添加选中效果样式

src/pages/course/details/index.vue

@@ -57,7 +57,9 @@
                                 <div class="chapter" v-for="(item,index) in videoList" :key="index">
                                     <div class="chapterName">{{item.name}}</div>
                                     <div class="section" v-if="item.subsectionList.length">
-                                        <div class="sectionName" v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section)">{{section.name}}</div>
+                                        <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                                            <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
+                                        </div>
                                     </div>
                                 </div>
                             </template>
@@ -103,7 +105,8 @@ export default {
             currentPage: 0, // pdf文件页码
             pageCount: 0, // pdf文件总页数
             fileType: 'pdf', // 文件类型
-            desShrink: false
+            desShrink: false,
+            curLink: "", // 当前选中
         };
     },
     computed: {
@@ -149,7 +152,8 @@ export default {
             if('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(ext)) return '视频'
             return ext
         },
-        preview(row){
+        preview(row, chapterName){
+            this.curLink = `${chapterName}${row.name}`;
             this.player = null
             this.playauth = ''
             this.coverUrl = ''
@@ -357,6 +361,9 @@ $height: 700px;
                 color: rgba(0, 0, 0, 0.65);
                 cursor: pointer;
                 @include ellipsis;
+                &.active{
+                    color: #9278FF;
+                }
             }
         }
     }

src/pages/station/preview/index.vue

@@ -57,8 +57,8 @@
                                 <div class="chapter" v-for="(item,index) in chapterList" :key="index">
                                     <div class="chapterName">{{ item.name }}</div>
                                     <div class="section" v-if="item.subsectionList.length">
-                                        <div class="sectionName" v-for="(section,i) in item.subsectionList" :key="i"
+                                        <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
-                                             @click="preview(section)">{{ section.name }}
+                                            <p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
                                         </div>
                                     </div>
                                 </div>
@@ -109,7 +109,7 @@ export default {
             briefIntroduction: "", // 课程简介
             teachingObjectives: "", // 课程目标
             assessmentList: "", // 考核列表
-
+            curLink: "", // 当前选中
             playAuth: "",
             player: null,
             previewImg: "",
@@ -159,7 +159,7 @@ export default {
             this.chapterList = res.chapterList;
             if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) {
                 // console.log(this.chapterList[0].subsectionList[0]);
-                this.preview(this.chapterList[0].subsectionList[0]);
+                this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name);
             }
         },
         // 插入阿里云播放器脚本
@@ -185,7 +185,8 @@ export default {
             if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
             return ext;
         },
-        preview(row) {
+        preview(row, chapterName) {
+            this.curLink = `${chapterName}${row.name}`; // 章节名称+小节名称，小节名称有重复的情况，如果只用小节名称判断，会有同时选中多个的情况
             this.player = null;
             this.playauth = "";
             this.coverUrl = "";
@@ -438,6 +439,9 @@ $height: 700px;
                 color: rgba(0, 0, 0, 0.65);
                 cursor: pointer;
                 @include ellipsis;
+                &.active{
+                    color: #9278FF;
+                }
             }
         }
     }