添加选中效果样式

src/pages/course/preview/index.vue

@@ -59,7 +59,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>
@@ -108,7 +110,8 @@ export default {
             currentPage: 0, // pdf文件页码
             pageCount: 0, // pdf文件总页数
             fileType: "pdf", // 文件类型
-            desShrink: false
+            desShrink: false,
+            curLink: "", // 当前选中
         };
     },
     components: { pdf },
@@ -147,7 +150,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 = "";
@@ -375,6 +379,9 @@ $height: 700px;
                 color: rgba(0, 0, 0, 0.65);
                 cursor: pointer;
                 @include ellipsis;
+                &.active{
+                    color: #9278FF;
+                }
             }
         }
     }