修改样式

src/assets/index.scss

@@ -29,3 +29,20 @@ body {
       appearance: textfield;
    }
 }
+
+.defaultMessage {
+   --el-message-bg-color: rgba(0, 0, 0, 0.7) !important;
+   border: none !important;
+   --el-message-text-color: #fff !important;
+   border-radius: 6px !important;
+   top: 50% !important;
+   transform: translate(-50%, -50%) !important;
+   .el-icon {
+      display: none;
+   }
+   .el-message__content {
+      font-weight: 500;
+      font-size: 17px;
+      color: #ffffff;
+   }
+}

src/views/coursewarePlay/coursewarePlay.vue

@@ -165,6 +165,7 @@ const coursewareMenuList = shallowRef<any[]>([]) // 课程类型
 const coursewareList = shallowRef<any[]>([]) // 知识点
 const flattenCoursewareList = ref<any[]>([]) // 扁平化coursewareList
 const isCurrentCoursewareMenu = shallowRef(true) // 是否为当前选的课程类型
+const currentId = ref<any>(route.params.id)
 // 选中的知识点
 const activeCourseware = computed<undefined | Record<string, any>>(() => {
    return flattenCoursewareList.value[activeCoursewareIndex.value]
@@ -322,14 +323,19 @@ function handleCourseClick(value: any) {
    drawerShow.value = false
 }
 async function handleCourseMenuClick(value: any) {
+   if (currentId.value === value.id) {
+      return
+   }
+
    LoadingBar.loading(true)
-   flattenCoursewareListData = []
-   activeCoursewareIndex.value = -1
+   currentId.value = value.id
    if (value.id === route.params.id) {
       isCurrentCoursewareMenu.value = true
    } else {
       isCurrentCoursewareMenu.value = false
    }
+   flattenCoursewareListData = []
+   activeCoursewareIndex.value = -1
    await getCoursewareList(value.id)
    getCoursewareMenuList(value.id)
    drawerMenuShow.value = false

src/views/coursewarePlay/index.ts

@@ -1,2 +1,2 @@
 import coursewarePlay from "./coursewarePlay.vue"
-export default coursewarePlay
+export default coursewarePlay

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -83,6 +83,7 @@ import { onMounted, onUnmounted, ref, reactive, watch, toRef, watchEffect } from
 import { UUID } from "@/libs/tools"
 import { formatTime } from "./tools"
 import { NSlider } from "naive-ui"
+import { ElMessage } from "element-plus"
 
 const props = defineProps<{
    disableEvents?: boolean
@@ -248,9 +249,30 @@ function pauseVideo() {
    showController()
 }
 // 循环播放
+let message: any = null
 function handleLoop() {
    playController.loop ? playerVm.loop(false) : playerVm.loop(true)
    playController.loop = playerVm.loop()
+
+   if (playController.loop) {
+      if (message) {
+         message.close()
+      }
+      message = ElMessage({
+         message: "已打开循环播放",
+         icon: "",
+         customClass: "defaultMessage"
+      })
+   } else {
+      if (message) {
+         message.close()
+      }
+      message = ElMessage({
+         message: "已关闭循环播放",
+         icon: "",
+         customClass: "defaultMessage"
+      })
+   }
 }
 // 播放速度
 function handlePalySpeedChange(value: number) {
@@ -332,7 +354,7 @@ defineExpose({
       width: 100%;
       left: 0;
       bottom: 0;
-      padding: 0 32px 22px;
+      padding: 35px 32px 22px;
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
       color: #fff;
       transition: all 0.5s;