修复问题

src/assets/index.scss

@@ -42,7 +42,7 @@ body {
    }
    .el-message__content {
       font-weight: 500;
-      font-size: 17px;
+      font-size: 19px;
       color: #ffffff;
    }
 }

src/businessComponents/globalTools/globalTools.ts

@@ -8,3 +8,10 @@ export const penShow = ref(false)
 export const whitePenShow = ref(false)
 // 是否正在播放
 export const isPlay = ref(false)
+// 是否隐藏
+export const isHidden = ref(true)
+
+/** 是否隐藏工具栏 */
+export const handleHidden = (status = true) => {
+   isHidden.value = status
+}

src/businessComponents/globalTools/globalTools.vue

@@ -4,11 +4,10 @@
 * @Date:2024年10月14日10:03:11
 -->
 <template>
-   <div class="globalTools" :class="isPlay ? 'isPlay' : ''">
+   <div class="globalTools" :class="[isPlay ? 'isPlay' : '', isHidden ? 'isHidden' : '']">
       <div :class="['iconTools', toolOpen ? 'hideTools' : '']" ref="iconToolsDom">
          <img @click="openTool" src="@/img/layout/icon-tool.png" />
       </div>
-
       <div :class="['expendTools', toolOpen ? 'showTools' : '']" ref="expendToolsDom">
          <img @click="openType('note')" src="@/img/layout/icon-note.png" />
          <img @click="openType('whiteboard')" class="iconWhiteboard" src="@/img/layout/icon-whiteboard.png" />
@@ -19,6 +18,7 @@
       :close="
          () => {
             penShow = false
+            isHidden = false
          }
       "
       v-model="penShow"
@@ -28,6 +28,7 @@
       :close="
          () => {
             whitePenShow = false
+            isHidden = false
          }
       "
       v-model="whitePenShow"
@@ -37,9 +38,17 @@
 <script setup lang="ts">
 import { baseSize, baseWidth, size } from "@/libs/rem"
 import pen from "@/views/coursewarePlay/components/pen"
-import { toolOpen, whitePenShow, penShow, isPlay } from "./globalTools"
-import { onMounted, ref } from "vue"
+import { toolOpen, whitePenShow, penShow, isPlay, isHidden } from "./globalTools"
+import { onMounted, onUnmounted, ref, watch } from "vue"
+import { useRoute } from "vue-router"
 
+const route = useRoute()
+watch(
+   () => route.path,
+   () => {
+      handleStatus()
+   }
+)
 const iconToolsDom = ref<HTMLDivElement>()
 const expendToolsDom = ref<HTMLDivElement>()
 
@@ -49,15 +58,21 @@ function openTool() {
 }
 
 function openType(type: "note" | "whiteboard") {
-   console.log(type, "type")
    if (isLock) return
    if (type === "note") {
       penShow.value = true
+
+      isHidden.value = true
    } else if (type === "whiteboard") {
       whitePenShow.value = true
+      isHidden.value = true
    }
 }
 
+function handleStatus() {
+   isHidden.value = route.path === "/login" ? true : false
+}
+
 function computePos(type: "width" | "height", value: number | string) {
    const clientNum = type == "width" ? baseWidth : document.documentElement.clientHeight
    return typeof value === "string"
@@ -76,6 +91,7 @@ function computePos(type: "width" | "height", value: number | string) {
 
 /* 拖拽还没有兼容rem */
 let isLock = false
+let toolMoveY = 0 // 移动的距离
 function drag(el: HTMLElement) {
    function mousedown(e: MouseEvent) {
       e.stopPropagation()
@@ -83,7 +99,7 @@ function drag(el: HTMLElement) {
       isLock = false
       const parentElement = el
       const parentElementRect = parentElement.getBoundingClientRect()
-      // const downX = e.clientX
+      const downX = e.clientX
       const downY = e.clientY
       // const clientWidth = document.documentElement.clientWidth
       const clientHeight = document.documentElement.clientHeight
@@ -97,8 +113,17 @@ function drag(el: HTMLElement) {
          // let moveY = e.clientY - downY
          // moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX
          moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY
+         toolMoveY = moveY
          document.documentElement.style.setProperty("--toolTranslateY", `${moveY}px`)
-         isLock = true
+
+         // 计算移动的距离
+         const cX = e.clientX - downX
+         const cY = e.clientY - downY
+
+         // 如果移动距离超过一定阈值，则认为是拖动
+         if (Math.abs(cX) > 3 || Math.abs(cY) > 3) {
+            isLock = true // 设置为拖动状态
+         }
       }
       function onMouseup() {
          document.removeEventListener("mousemove", onMousemove)
@@ -116,7 +141,15 @@ function refreshPos() {
       document.documentElement.style.setProperty("--toolTranslateY", `${posHeight.pos}px`)
    }
 }
-
+let rect: any
+function onResize() {
+   rect = rect ? rect : iconToolsDom.value?.getBoundingClientRect()
+   const clientHeight = document.documentElement.clientHeight
+   const maxTop = clientHeight - rect.height
+   if (toolMoveY >= maxTop) {
+      document.documentElement.style.setProperty("--toolTranslateY", `${maxTop}px`)
+   }
+}
 onMounted(() => {
    drag(iconToolsDom.value!)
    drag(expendToolsDom.value!)
@@ -125,6 +158,11 @@ onMounted(() => {
    iconToolsDom.value!.onclick = (e: any) => {
       e.stopPropagation()
    }
+   window.addEventListener("resize", onResize)
+})
+
+onUnmounted(() => {
+   window.removeEventListener("resize", onResize)
 })
 </script>
 
@@ -136,6 +174,13 @@ onMounted(() => {
          opacity: $opacity-disabled;
       }
    }
+   &.isHidden {
+      .iconTools,
+      .expendTools {
+         opacity: 0;
+         display: none;
+      }
+   }
    .iconTools,
    .expendTools {
       position: fixed;
@@ -144,16 +189,19 @@ onMounted(() => {
       transform: translateY(var(--toolTranslateY));
       // margin-top: -29px;
       z-index: 2999;
-      padding: 8px 14px 8px 16px;
+      padding: 0 5px;
       background: rgba(0, 0, 0, 0.4);
       border-radius: 200px 0px 0px 200px;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-right-width: 0;
       cursor: pointer;
+      font-size: 0;
       // transition: transform 0.2s ease;
       img {
-         width: 34px;
-         height: 34px;
+         padding: 8px 15px;
+         width: 36px;
+         height: 36px;
+         box-sizing: content-box;
          -moz-user-select: none;
          /* 火狐浏览器 */
          -webkit-user-drag: none;
@@ -166,6 +214,10 @@ onMounted(() => {
          /* 通用 */
          -webkit-touch-callout: none;
          /* iOS Safari */
+
+         &:hover {
+            opacity: $opacity-hover;
+         }
       }
    }
 
@@ -180,9 +232,10 @@ onMounted(() => {
          cursor: pointer;
       }
       .iconWhiteboard {
-         margin: 0 30px;
+         // margin: 0 30px;
       }
       .iconArrow {
+         padding: 12px 15px;
          width: 28px;
          height: 28px;
       }

src/components/ellipsisScroll/ellipsisScroll.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from "vue"
+import { ref, onMounted, onUnmounted, nextTick, watch } from "vue"
 
 const props = defineProps<{
    title: string
@@ -62,7 +62,7 @@ function handleLeaveScroll() {
 
 <style lang="scss" scoped>
 .ellipsisScroll {
-   width: 100%;
+   width: 99%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

src/views/coursewarePlay/components/courseCollapse/courseCollapse.vue

@@ -248,6 +248,7 @@ function handleClick(value: any) {
             }
          }
          .iconArrow {
+            display: flex;
             flex-shrink: 0;
             width: 13px;
             height: 13px;

src/views/coursewarePlay/components/courseMenuCollapse/courseMenuCollapse.vue

@@ -1,6 +1,13 @@
 <template>
    <div class="courseMenuCollapse">
-      <div class="courseMenuItem" v-for="item in props.courseMenuList" :key="item.id" :name="item.id" @click="handleClick(item)">
+      <div
+         class="courseMenuItem"
+         :class="item.useFlag ? 'current' : ''"
+         v-for="item in props.courseMenuList"
+         :key="item.id"
+         :name="item.id"
+         @click="handleClick(item)"
+      >
          <div class="cover">
             <img :src="item.coverImg" />
             <div class="current" v-if="item.useFlag">当前</div>
@@ -47,6 +54,11 @@ function handleClick(value: any) {
       margin-left: 24px;
       box-sizing: content-box;
       cursor: pointer;
+      &.current {
+         .text {
+            color: #131415;
+         }
+      }
       .cover {
          position: relative;
          width: 100%;

src/views/coursewarePlay/components/playRecordTime/playRecordTime.vue

@@ -51,7 +51,6 @@ function getCoursewarePlayTime() {
    })
 }
 // 判断如果为同一个则计时
-console.log(props.isCurrentCoursewareMenu, "props.isCurrentCoursewareMenu")
 if (props.isCurrentCoursewareMenu) {
    timerCount()
 }
@@ -94,7 +93,7 @@ function handleCoursewarePlayTime(id: string, time: number) {
       width: 8px;
       height: 8px;
       background: #f73434;
-      animation: loadFade 1s ease-in-out infinite;
+      // animation: loadFade 1s ease-in-out infinite;
       border-radius: 50%;
       @keyframes loadFade {
          0% {

src/views/coursewarePlay/components/useCoursewarePlayTip/coursewarePlayTip.vue

@@ -8,7 +8,9 @@
       <div class="close" @click="close"></div>
       <img class="headImg" v-if="props.modalData.headImg" :src="props.modalData.headImg" />
       <div class="textCon">
-         <div class="text" v-html="props.modalData.text"></div>
+         <ElScrollbar class="elScrollbar">
+            <div class="text" v-html="props.modalData.text"></div>
+         </ElScrollbar>
       </div>
       <div v-if="filterBtnShow" class="dialogBtn">
          <img v-if="props.modalData.btnShow[1]" @click="cancel" src="@/img/useDialogConfirm/cancel.png" />

src/views/coursewarePlay/coursewarePlay.vue

@@ -155,6 +155,7 @@ 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()
@@ -277,6 +278,8 @@ function getCoursewareMenuList(id?: string) {
 }
 let flattenCoursewareListData: any = [] // 临时扁平化数据
 function handlePointList(pointList: any[]) {
+   // 重置数据
+   coursewareTotalTime.value = 0
    coursewareList.value = filterPointList(pointList)
    // 如果url里面有materialId 代表指定资料播放
    if (route.query.materialId) {
@@ -338,9 +341,15 @@ async function handleCourseMenuClick(value: any) {
    activeCoursewareIndex.value = -1
    await getCoursewareList(value.id)
    getCoursewareMenuList(value.id)
+
    drawerMenuShow.value = false
    activeCoursewareIndex.value = 0
-
+   nextTick(() => {
+      if (!activeCourseware.value?.phaseGoals) {
+         // 切换之后默认打开课程目录
+         drawerShow.value = true
+      }
+   })
    LoadingBar.loading(false)
 }
 
@@ -396,8 +405,10 @@ function handleKeydown(e: KeyboardEvent) {
       // 视频类型的时候才触发
       fileType.value === "VIDEO" && handleVideoSpeedCurrentTime("fast")
    } else if (key === "ArrowDown") {
+      closeAllModalFrame()
       handleChangeCourseware(1)
    } else if (key === "ArrowUp") {
+      closeAllModalFrame()
       handleChangeCourseware(-1)
    }
 }
@@ -597,7 +608,7 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
       top: 0;
       left: 0;
       width: 100%;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 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;
@@ -654,6 +665,12 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
             img {
                width: 34px;
                height: 34px;
+               padding: 6px;
+               box-sizing: content-box;
+               &:hover {
+                  background-color: rgba(255, 255, 255, 0.2);
+                  border-radius: 6px;
+               }
             }
          }
       }
@@ -674,7 +691,7 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
       .posBtn {
          // background: rgba(0, 0, 0, 0.3);
          // border-radius: 8px;
-         padding: 20px 12px;
+         padding: 14px 6px;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
@@ -682,15 +699,21 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
          flex-direction: column;
          align-items: center;
          cursor: pointer;
-         &:hover {
-            opacity: $opacity-hover;
-         }
+         // &: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;
+            }
          }
       }
    }

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -354,8 +354,8 @@ defineExpose({
       width: 100%;
       left: 0;
       bottom: 0;
-      padding: 35px 32px 22px;
-      background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
+      padding: 45px 32px 22px;
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
       color: #fff;
       transition: all 0.5s;
       // &:hover {   //取消鼠标移入不隐藏
@@ -385,15 +385,21 @@ defineExpose({
       .playController {
          display: flex;
          justify-content: space-between;
-         padding-top: 10px;
+         padding-top: 4px;
          .leftPlayController {
-            margin-left: -10px;
+            margin-left: -16px;
             display: flex;
             & > img {
                cursor: pointer;
                width: 48px;
                height: 48px;
                margin-right: 30px;
+               padding: 6px;
+               box-sizing: content-box;
+               &:hover {
+                  background-color: rgba(255, 255, 255, 0.2);
+                  border-radius: 6px;
+               }
             }
             .loopImg {
                width: 56px;