classroom/src/views/coursewarePlay/coursewarePlay.vue

<!--
* @FileDescription: 教程播放
* @Author: 黄琪勇
* @Date:2024-04-03 17:31:41
-->
<template>
   <div class="coursewarePlay" :class="[!isShowController && 'hideController', fileType === 'SONG' && 'fileType_song']">
      <div class="coursewarePlayCon" @mousemove="handleMousemove" @click="handleClick" @touchstart="handleClick">
         <videoPlay
            v-show="fileType === 'VIDEO'"
            ref="videoPlayDom"
            @ended="handleChangeCourseware(1)"
            @loadedmetadata="
               () => {
                  isTempAutoPlay = false
               }
            "
            :autoPlay="true"
            @playbackRate="showController"
            :disableEvents="true"
            :isShowController="isShowController"
         />
         <div class="imgPlayBox" v-if="fileType === 'IMG'">
            <ElImage :hide-on-click-modal="true" fit="contain" :src="activeCourseware?.content" class="imgPlay" />
         </div>
         <div class="songPlayBox" v-if="fileType === 'SONG'">
            <iframe ref="songPlayDom" class="songIframe" @mousemove="handleMousemove" :src="songPlaySrc" frameborder="0"></iframe>
         </div>
      </div>
      <div class="leftTools posTools">
         <div class="posBtn" @click="handleToolClick('menu')">
            <img src="@/img/coursewarePlay/menu.png" />
            <!-- <div>课程类型</div> -->
         </div>
         <div class="posBtn" @click="handleToolClick('point')">
            <img src="@/img/coursewarePlay/zhishidian.png" />
            <!-- <div>知识点</div> -->
         </div>
         <div
            :class="['posBtn', activeCoursewareIndex > 0 ? '' : 'disabled']"
            @click="
               () => {
                  if (activeCoursewareIndex > 0) {
                     handleChangeCourseware(-1)
                  }
               }
            "
         >
            <img src="@/img/coursewarePlay/shang.png" />
            <!-- <div>上一个</div> -->
         </div>
         <div
            :class="['posBtn', activeCoursewareIndex < flattenCoursewareList.length - 1 ? '' : 'disabled']"
            @click="
               () => {
                  if (activeCoursewareIndex < flattenCoursewareList.length - 1) {
                     handleChangeCourseware(1)
                  }
               }
            "
         >
            <img src="@/img/coursewarePlay/xia.png" />
            <!-- <div>下一个</div> -->
         </div>
      </div>
      <div
         v-if="activeCoursewareResourceId"
         @click="
            () => {
               handleVideoPause()
               handleGoPracticeBtn(activeCoursewareResourceId!)
            }
         "
         class="goPracticeBtn"
      ></div>
      <div class="topTools">
         <div class="leftMenu">
            <img @click="handleGoBack" class="backImg" src="@/img/coursewarePlay/back.png" />

            <div class="title-section">
               <div class="title">{{ activeCourseware?.parentData.name || "" }}</div>
               <div class="content">
                  <p>{{ activeCourseware?.name || "" }}</p>
                  <!-- <span v-if="activeCourseware?.phaseGoals" @click="onTitleTip('phaseGoals', activeCourseware?.phaseGoals)">阶段目标</span> -->
                  <span v-if="lessonTargetDetail" @click="onTitleTip('phaseGoals', lessonTargetDetail)">阶段目标</span>
                  <span v-if="activeCourseware?.checkItem" @click="onTitleTip('checkItem', activeCourseware?.checkItem)">检查事项</span>
               </div>
            </div>
         </div>
         <div class="midMenu">
            <playRecordTime
               v-if="route.query.modeId && coursewareTotalTime && userStoreHook.roles === 'GYT'"
               :modeId="route.query.modeId as string"
               :isCurrentCoursewareMenu="isCurrentCoursewareMenu"
               :coursewareTotalTime="coursewareTotalTime"
            />
         </div>
         <div class="rightMenu">
            <div class="posCloseBtn" @click="handleCoursewareEnd">
               <img src="@/img/coursewarePlay/jieshu.png" />
            </div>
         </div>
      </div>
      <el-drawer class="elDrawer" direction="ltr" v-model="drawerShow" :show-close="false">
         <template #header="{ close }">
            <img class="directory" src="@/img/coursewarePlay/kcml.png" />
            <div class="tit">知识点目录</div>
            <img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
         </template>
         <ElScrollbar class="elScrollbar">
            <courseCollapse :activeCollapse="activeCourseware" :courseList="coursewareList" @handleClick="handleCourseClick" />
         </ElScrollbar>
      </el-drawer>
      <el-drawer class="elDrawer elCourseMenu" direction="ltr" v-model="drawerMenuShow" :show-close="false">
         <template #header="{ close }">
            <img class="directory" src="@/img/coursewarePlay/menuActive.png" />
            <div class="tit">课程类型</div>
            <img class="close" @click="close" src="@/img/coursewarePlay/close.png" />
         </template>
         <ElScrollbar class="elScrollbar">
            <courseMenuCollapse :courseMenuList="coursewareMenuList" @handleClick="handleCourseMenuClick" />
         </ElScrollbar>
      </el-drawer>
      <practiceForm v-model="isPracticeShow" :practiceUrl="practiceUrl" @close="handlePracticeClose" />
   </div>
</template>

<script setup lang="ts">
import videoPlay from "./videoPlay"
import { getLessonCourseDetail_gym, getLessonCoursewareDetail_gyt, getLessonCourseDetail_klx } from "@/api/cloudTextbooks.api"
import { checkWebCourse_gyt, refLevel_gym, refLevel_gyt, refLevel_klx } from "@/api/coursewarePlay.api"
import { httpAjaxErrMsg, httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
import userStore from "@/store/modules/user"
import { useRoute, useRouter } from "vue-router"
import { shallowRef, ref, computed, onUnmounted, onMounted, watch, nextTick } from "vue"
import { ElMessageBox } from "element-plus"
import courseCollapse from "./components/courseCollapse"
import courseMenuCollapse from "./components/courseMenuCollapse"
import playRecordTime from "./components/playRecordTime"
import practiceForm from "@/businessComponents/practiceForm"
import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
import { getToken } from "@/libs/auth"
import { URL_TEACH_GYT, URL_TEACH_GYM, URL_TEACH_KLX } from "@/config"
import { handleFullscreen } from "@/libs/fullscreen"
import useCoursewarePlayTip from "./components/useCoursewarePlayTip"
import useDialogConfirm from "@/hooks/useDialogConfirm"
import LoadingBar from "@/plugin/loadingBar"
import { isPlay, penShow, toolOpen, whitePenShow } from "@/businessComponents/globalTools/globalTools"
import { closeAllModalFrame } from "@/plugin/modalFrame"

const route = useRoute()
const router = useRouter()
const userStoreHook = userStore()
/* 获取资源 */
const videoPlayDom = ref<InstanceType<typeof videoPlay>>()
const songPlayDom = ref<any>() // 曲谱对象
const lessonTargetDetail = ref<string>("") // 阶段目标
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 isTempAutoPlay = ref(false)
// 选中的知识点
const activeCourseware = computed<undefined | Record<string, any>>(() => {
   return flattenCoursewareList.value[activeCoursewareIndex.value]
})
// 文件类型
const fileType = computed<"VIDEO" | "IMG" | "SONG">(() => {
   return activeCourseware.value?.typeCode || activeCourseware.value?.type
})
const songPlaySrc = computed<string>(() => {
   if (fileType.value !== "SONG") {
      return ""
   }
   //  GYM,GYT,KLX 区分   云教练
   const urlObj = {
      GYT: `${URL_TEACH_GYT}?id=${activeCourseware.value?.content}&modelType=practice&modeType=json&Authorization=${getToken()}&isYjt=1`,
      GYM: `${URL_TEACH_GYM}#/?id=${
         activeCourseware.value?.content
      }&Authorization=${getToken()}&platform=pc&isHideBack=true&isHideMusicList=true&isYjt=1&systemType=teacher`,
      KLX: `${URL_TEACH_KLX}#/?id=${
         activeCourseware.value?.content
      }&Authorization=${getToken()}&platform=pc&isHideBack=true&isHideMusicList=true&isYjt=1&systemType=teacher`
   }
   return urlObj[userStoreHook.roles!]
})
// 视频是否自动播放
// const videoIsAutoPlay = computed<boolean>(() => {
//    // 如果为视频且有阶段目前则不自动播放
//    console.log(fileType.value, isTempAutoPlay.value, "isTempAutoPlay")
//    return (fileType.value === "VIDEO" && activeCourseware.value?.phaseGoals) || isTempAutoPlay.value ? false : true
// })
const activeCoursewareIndex = ref(0)
const drawerShow = ref(false)
const drawerMenuShow = ref(false)
// 课程总时间
const coursewareTotalTime = ref(0)
// 监控播放
watch(activeCourseware, () => {
   fileType.value === "VIDEO" &&
      nextTick(() => {
         handlePlayVideo({
            src: activeCourseware.value?.content,
            name: activeCourseware.value?.name
         })
      })
   showController()
})
getCoursewareList()
async function getCoursewareList(id?: string) {
   //  GYM,GYT,KLX 区分   查询接口
   const LessonCoursewareDetailApi = {
      GYT: getLessonCoursewareDetail_gyt,
      GYM: getLessonCourseDetail_gym,
      KLX: getLessonCourseDetail_klx
   }
   await httpAjaxErrMsg(LessonCoursewareDetailApi[userStoreHook.roles!], id || (route.params.id as string)).then(res => {
      if (res.code === 200) {
         const { lockFlag, knowledgePointList, lessonTargetDesc } = res.data || {}
         if (lockFlag) {
            ElMessageBox.alert("课件已锁定", "温馨提示", {
               confirmButtonText: "退出",
               type: "error"
            })
               .then(() => {
                  handleGoBack()
               })
               .catch(() => {
                  handleGoBack()
               })
            return
         }
         if ((knowledgePointList || []).length < 1) {
            ElMessageBox.alert("没有找到课件", "温馨提示", {
               confirmButtonText: "退出",
               type: "error"
            })
               .then(() => {
                  handleGoBack()
               })
               .catch(() => {
                  handleGoBack()
               })
            return
         }
         lessonTargetDetail.value = lessonTargetDesc ? lessonTargetDesc.replace(/\n/g, "<br />") : ""
         // 处理返回的数据
         handlePointList(knowledgePointList)
      }
   })
}
getCoursewareMenuList()
function getCoursewareMenuList(id?: string) {
   //  GYM,GYT,KLX 区分   查询接口
   const LessonCoursewareMenuDetailApi = {
      GYT: refLevel_gyt,
      GYM: refLevel_gym,
      KLX: refLevel_klx
   }

   httpAjaxErrMsg(LessonCoursewareMenuDetailApi[userStoreHook.roles!], {
      lessonCoursewareDetailId: id || route.params.id,
      courseScheduleId: route.query.modeId as any
   } as any).then(res => {
      if (res.code === 200) {
         coursewareMenuList.value = res.data || []
      }
   })
}
let flattenCoursewareListData: any = [] // 临时扁平化数据
function handlePointList(pointList: any[]) {
   // 重置数据
   coursewareTotalTime.value = 0
   coursewareList.value = filterPointList(pointList)
   // 如果url里面有materialId 代表指定资料播放
   if (route.query.materialId) {
      const index = flattenCoursewareListData.findIndex((item: any) => {
         return route.query.materialId === item.id + "" && route.query.knowledgePointId === item.knowledgePointId + ""
      })
      index > -1 && (activeCoursewareIndex.value = index)
   }
   flattenCoursewareList.value = flattenCoursewareListData
}
function filterPointList(pointList: any[], parentData?: { ids: string[]; name: string }): any[] {
   // 设置父级及以上id数组和父级name
   return pointList.map(point => {
      if (point.children) {
         return Object.assign(point, {
            children: filterPointList(point.children, { ids: [...(parentData?.ids || []), point.id], name: point.name })
         })
      } else {
         coursewareTotalTime.value += point.totalMaterialTimeSecond
         return Object.assign(point, {
            materialList: point.materialList.map((item: any) => {
               item.parentData = {
                  ids: [...(parentData?.ids || []), point.id],
                  name: point.name
               }
               flattenCoursewareListData.push(item)
               return item
            })
         })
      }
   })
}
function handleChangeCourseware(index: -1 | 1) {
   handleVideoPause()
   handleSongPause()
   const newIndex = index + activeCoursewareIndex.value
   if (newIndex < 0 || newIndex > flattenCoursewareList.value.length - 1) {
      return
   }
   activeCoursewareIndex.value = newIndex
}
function handleCourseClick(value: any) {
   activeCoursewareIndex.value = flattenCoursewareList.value.findIndex((item: any) => {
      return value.id === item.id && value.knowledgePointId === item.knowledgePointId
   })
   drawerShow.value = false
}
async function handleCourseMenuClick(value: any) {
   // 判断是否为当前课程类型
   if (currentId.value === value.id) {
      return
   }
   LoadingBar.loading(true)
   currentId.value = value.id
   isCurrentCoursewareMenu.value = value.id === route.params.id ? true : false
   flattenCoursewareListData = [] // 重置数据
   isTempAutoPlay.value = true
   await getCoursewareList(value.id)
   getCoursewareMenuList(value.id)
   drawerMenuShow.value = false
   activeCoursewareIndex.value = 0
   nextTick(() => {
      //    if (!activeCourseware.value?.phaseGoals) {
      // 切换之后默认打开课程目录
      drawerShow.value = true
      //    }
   })
   LoadingBar.loading(false)
}

/** 曲目相关 */
// 暂停曲目播放
function handleSongPause() {
   songPlayDom.value?.contentWindow?.postMessage({ api: "setPlayState" }, "*")
   showController()
}

/* 播放器相关 */
// 视频播放或者暂停
function handleVideoPlay() {
   videoPlayDom.value?.handlePlay()
   showController()
}
// 视频快进快退
function handleVideoSpeedCurrentTime(type: "fast" | "slow") {
   videoPlayDom.value?.speedCurrentTime(type)
   showController()
}
// 视频暂停
function handleVideoPause() {
   videoPlayDom.value?.pauseVideo()
   showController()
}
// 播放视频
function handlePlayVideo({ src, name }: { src: string; name: string }) {
   videoPlayDom.value?.playVideo({
      src,
      name
   })
   showController()
}

// 全屏显示
handleFullscreen(true, false)
/* 按键事件相关 */
onMounted(() => {
   document.addEventListener("keydown", handleKeydown)
   document.addEventListener("contextmenu", preventDefaultContextmenu)
   showController()
})
onUnmounted(() => {
   document.removeEventListener("keydown", handleKeydown)
   document.removeEventListener("contextmenu", preventDefaultContextmenu)
})
function preventDefaultContextmenu(event: MouseEvent) {
   event.preventDefault()
}
function handleKeydown(e: KeyboardEvent) {
   const key = e.key

   if (key === " ") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoPlay()
   } else if (key === "ArrowLeft") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoSpeedCurrentTime("slow")
   } else if (key === "ArrowRight") {
      closeAllModalFrame()
      drawerShow.value = false
      // 视频类型的时候才触发
      fileType.value === "VIDEO" && handleVideoSpeedCurrentTime("fast")
   } else if (key === "ArrowDown") {
      closeAllModalFrame()
      drawerShow.value = false
      handleChangeCourseware(1)
   } else if (key === "ArrowUp") {
      closeAllModalFrame()
      drawerShow.value = false
      handleChangeCourseware(-1)
   }
}
function handleToolClick(type: string) {
   fileType.value === "VIDEO" && handleVideoPause()
   if (type === "menu") {
      drawerMenuShow.value = true
   } else if (type === "point") {
      drawerShow.value = true
   }
}
function handleMousemove() {
   showController()
}
function handleClick() {
   fileType.value === "VIDEO" && isShowController.value && handleVideoPlay()
   showController()
}
// 是否显示控制器
const isShowController = ref(true)
let _showTimer: any
function showController() {
   isShowController.value = true
   _showTimer && clearTimeout(_showTimer)
   _showTimer = setTimeout(hideController, 3000)
}
function hideController() {
   // 取消暂停的时候收起
   // if (fileType.value === "VIDEO" && videoPlayDom.value?.playType === "pause") {
   //    return
   // }
   isShowController.value = false
}
/* 结束课程 */
function handleGoBack() {
   // window.open("about:blank", "_self")
   // window.close()
   router.go(-1)
}
function handleCoursewareEnd() {
   if (route.query.modeId) {
      if (userStoreHook.roles === "GYM") {
         httpAjaxLoadingErrMsg(getRecentCourseSchedule_gym, route.query.modeId as string).then(res => {
            if (res.code === 200) {
               if (res.data?.signOutStatusEnum === 3) {
                  useDialogConfirm({
                     headImg: require("@/img/coursewarePlay/ts.png"),
                     text: `请确认是否结束课程，结束后请到APP进行签退。`,
                     btnShow: [true, true],
                     onOk() {
                        handleGoBack()
                     }
                  })
               } else {
                  handleGoBack()
               }
            }
         })
      } else if (userStoreHook.roles === "GYT") {
         httpAjaxLoadingErrMsg(checkWebCourse_gyt, route.query.modeId as string).then(res => {
            if (res.code === 200) {
               if (res.data?.signOut === false) {
                  useDialogConfirm({
                     headImg: require("@/img/coursewarePlay/ts.png"),
                     text: `请确认是否结束课程，结束后请到APP进行签退。`,
                     btnShow: [true, true],
                     onOk() {
                        handleGoBack()
                     }
                  })
               } else {
                  handleGoBack()
               }
            }
         })
      }
   } else {
      handleGoBack()
   }
}
// 是否收起
watch(
   () => isShowController.value,
   () => {
      if (isShowController.value) {
         isPlay.value = false
      } else {
         isPlay.value = true
         toolOpen.value = false
      }
   }
)
// 白板的批注打开时暂停播放
watch(
   () => [whitePenShow.value, penShow.value],
   () => {
      if (whitePenShow.value || penShow.value) {
         handleVideoPause()
         handleSongPause()
      }
   }
)
// 去练习
const activeCoursewareResourceId = computed<string | undefined>(() => {
   const materialRefs = activeCourseware.value?.materialRefs
   return materialRefs ? (["GYM", "KLX"].includes(userStoreHook.roles!) ? materialRefs[0]?.resourceIdStr : materialRefs[0]?.resourceId) : undefined
})
const isPracticeShow = ref(false)
const practiceUrl = ref("")
function handleGoPracticeBtn(activeCoursewareResourceId: string) {
   //  GYM,GYT,KLX 区分   云教练
   const urlObj = {
      GYT: `${URL_TEACH_GYT}?id=${activeCoursewareResourceId}&modelType=practice&modeType=json&Authorization=${getToken()}&isYjt=1&&isHideBack=false`,
      GYM: `${URL_TEACH_GYM}#/?id=${activeCoursewareResourceId}&Authorization=${getToken()}&platform=pc&isYjt=1&systemType=teacher&isHideMusicList=true`,
      KLX: `${URL_TEACH_KLX}#/?id=${activeCoursewareResourceId}&Authorization=${getToken()}&platform=pc&isYjt=1&systemType=teacher&isHideMusicList=true`
   }
   isPracticeShow.value = true
   practiceUrl.value = urlObj[userStoreHook.roles!]
   //window.open(urlObj[userStoreHook.roles!], "_blank")
}
function handlePracticeClose() {
   isPracticeShow.value = false
   practiceUrl.value = ""
}

function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
   useCoursewarePlayTip({
      headImg: require(`@/img/coursewarePlay/${type === "phaseGoals" ? "ts3" : "ts4"}.png`),
      text,
      btnShow: [false, false]
   })
   handleVideoPause()
}
</script>

<style lang="scss" scoped>
.coursewarePlay {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
   &.hideController {
      .leftTools {
         opacity: 0;
         transform: translate(-100%, -50%);
      }
      .topTools {
         opacity: 0;
         transform: translateY(-100%);
      }
      .goPracticeBtn {
         transform: translateY(74px);
      }
   }
   &.fileType_song.hideController {
      .leftTools {
         opacity: initial;
         transform: translateY(-50%);
      }
      .goPracticeBtn {
         transform: initial;
      }
   }
   .coursewarePlayCon {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .imgPlayBox {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         .imgPlay {
            width: 84%;
            height: 100%;
         }
      }
      .songPlayBox {
         width: 100%;
         height: 100%;
         .songIframe {
            display: block;
            width: 100%;
            height: 100%;
         }
      }
   }
   .topTools {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
      transition: all 0.5s;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px 30px 40px;
      .leftMenu {
         display: flex;
         align-items: flex-start;
         .backImg {
            cursor: pointer;
            width: 22px;
            padding-top: 5px;
            &:hover {
               opacity: $opacity-hover;
            }
         }
         .title-section {
            font-weight: 500;
            font-size: 22px;
            color: #ffffff;
            line-height: 30px;
            padding-left: 20px;
            .content {
               padding-top: 6px;
               font-weight: 500;
               font-size: 18px;
               color: #ffffff;
               line-height: 26px;
               display: flex;
               align-items: center;

               p {
                  line-height: 1;
                  padding-top: 1px;
               }

               span {
                  background: rgba(0, 0, 0, 0.1);
                  border-radius: 16px;
                  border: 1px solid rgba(255, 255, 255, 0.7);
                  font-size: 14px;
                  color: #ffffff;
                  line-height: 22px;
                  padding: 2px 10px;
                  margin-left: 10px;
                  cursor: pointer;
               }
            }
         }
      }
      .midMenu {
         position: absolute;
         left: 50%;
         top: 23px;
         // transform: translate(-50%, -50%);
         transform: translateX(-50%);
      }
      .rightMenu {
         .posCloseBtn {
            cursor: pointer;
            img {
               width: 34px;
               height: 34px;
               padding: 6px;
               box-sizing: content-box;
               &:hover {
                  background-color: rgba(255, 255, 255, 0.2);
                  border-radius: 6px;
               }
            }
         }
      }
   }
   .posTools {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s;
      &.leftTools {
         background: rgba(0, 0, 0, 0.4);
         border-radius: 8px;
         left: 32px;
      }
      .posBtn {
         padding: 14px 6px;
         font-weight: 500;
         font-size: 16px;
         color: #ffffff;
         display: flex;
         flex-direction: column;
         align-items: center;
         cursor: pointer;
         // &:hover {
         //    opacity: $opacity-hover;
         // }
         &.disabled {
            opacity: $opacity-disabled;
         }
         > img {
            width: 34px;
            height: 34px;
            padding: 6px;
            box-sizing: content-box;
            &:hover {
               background-color: rgba(255, 255, 255, 0.2);
               border-radius: 6px;
            }
         }
      }
   }
   .goPracticeBtn {
      position: absolute;
      right: 32px;
      bottom: 24px;
      width: 143px;
      height: 50px;
      background: url("@/img/coursewarePlay/goPracticeBtn.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
         opacity: $opacity-hover;
      }
   }
   &:deep(.elDrawer.el-drawer) {
      width: 348px !important;
      .el-drawer__header {
         height: 54px;
         background: #ededed;
         padding: 0 20px;
         margin-bottom: 0;
         .directory {
            flex-grow: 0;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
         }
         .tit {
            flex-grow: 1;
            margin-left: 10px;
            font-weight: 600;
            font-size: 18px;
            color: #333333;
         }
         .close {
            cursor: pointer;
            width: 14px;
            flex-shrink: 0;
            &:hover {
               opacity: $opacity-hover;
            }
         }
      }
      .el-drawer__body {
         padding: 0;
         overflow: hidden;
         & > .elScrollbar {
            .el-scrollbar__view {
               padding: 0 22px;
               width: 100%;
            }
            .el-scrollbar__wrap {
               overflow-x: hidden;
            }
         }
      }
   }

   &:deep(.elCourseMenu.el-drawer) {
      width: 363px !important;
      .el-drawer__body {
         & > .elScrollbar {
            .el-scrollbar__view {
               padding: 0;
            }
         }
      }
   }
}
</style>