更新

src/views/cloudTextbooks/chooseDialog.vue

@@ -194,25 +194,23 @@ function handlePaly(id: string) {
                      font-weight: 600;
                      font-size: 16px;
                      color: #333333;
-                     line-height: 22px;
+                     padding: 3px 0;
                   }
                   .text {
                      font-weight: 400;
                      font-size: 12px;
                      color: #777777;
-                     line-height: 17px;
+                     padding: 2px 0;
                   }
                }
                .play {
                   flex-shrink: 0;
-                  width: 64px;
-                  height: 24px;
                   background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%);
                   border-radius: 12px;
-                  line-height: 24px;
                   text-align: center;
                   font-weight: 500;
                   font-size: 12px;
+                  padding: 6px 18px;
                   color: #ffffff;
                   letter-spacing: 1px;
                   cursor: pointer;

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

@@ -5,7 +5,7 @@
 -->
 <template>
    <el-collapse class="courseCollapse" accordion v-model="activeCollapseId">
-      <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id">
+      <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id" :class="{ isChild: props.isChild }">
          <template #title>
             <div class="courseCollapseHead">
                <div class="courseCollapseHeadArrow">
@@ -37,7 +37,7 @@
                   </div>
                </div>
             </template>
-            <courseCollapse v-else :courseList="item.children || []" :activeCollapse="activeCollapse" @handleClick="handleClick" />
+            <courseCollapse v-else :isChild="true" :courseList="item.children || []" :activeCollapse="activeCollapse" @handleClick="handleClick" />
          </div>
       </el-collapse-item>
    </el-collapse>
@@ -63,6 +63,7 @@ type courseListType = {
 const props = defineProps<{
    activeCollapse: undefined | Record<string, any>
    courseList: courseListType
+   isChild?: boolean
 }>()
 
 const emits = defineEmits<{
@@ -111,6 +112,7 @@ function handleClick(value: any) {
          > .courseCollapseHead {
             .courseCollapseHeadTit {
                color: #333333;
+               font-weight: 600;
             }
             .courseCollapseHeadArrow {
                > .headArrow {
@@ -122,6 +124,26 @@ function handleClick(value: any) {
             }
          }
       }
+      &.isChild {
+         .el-collapse-item__wrap {
+            border-bottom: none;
+         }
+         .el-collapse-item__header {
+            border-bottom: none;
+         }
+         .courseCollapseHead {
+            .courseCollapseHeadTit {
+               color: #333333;
+               font-size: 15px;
+            }
+            .courseCollapseHeadArrow {
+               .headArrow {
+                  background: url("@/img/coursewarePlay/jtr1.png") no-repeat;
+                  background-size: 100% 100%;
+               }
+            }
+         }
+      }
    }
    .courseCollapseHead {
       width: 100%;
@@ -173,6 +195,7 @@ function handleClick(value: any) {
             border-radius: 7px;
             .courseTitleCon {
                color: #f67146;
+               font-weight: 600;
                &.VIDEO .imgIcon {
                   background: url("@/img/coursewarePlay/VIDEO.png") no-repeat;
                   background-size: 100% 100%;
@@ -195,7 +218,7 @@ function handleClick(value: any) {
             display: flex;
             align-items: center;
             font-weight: 400;
-            font-size: 13px;
+            font-size: 14px;
             color: #333333;
             > .ellipsisBox {
                flex-grow: 1;

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

@@ -85,7 +85,7 @@ function handleCoursewarePlayTime(id: string, time: number) {
    }
    .time {
       font-weight: 400;
-      font-size: 22px;
+      font-size: 20px;
       color: #ffffff;
    }
 }

src/views/coursewarePlay/coursewarePlay.vue

@@ -292,7 +292,7 @@ function handleCoursewareEnd() {
       right: 30px;
       bottom: 15px;
       font-weight: 500;
-      font-size: 22px;
+      font-size: 20px;
       color: #ffffff;
       display: flex;
       align-items: flex-end;
@@ -322,7 +322,7 @@ function handleCoursewareEnd() {
       }
       .midMenu {
          font-weight: 500;
-         font-size: 22px;
+         font-size: 20px;
          color: #ffffff;
       }
    }

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -30,10 +30,17 @@
             <div class="leftPlayController">
                <img @click="handlePlay" :src="require(`./img/${playController.type === 'play' ? 'iconPause' : 'iconPlay'}.png`)" />
                <img @click="handleLoop" :src="require(`./img/${playController.loop ? 'iconLoopActive' : 'iconLoop'}.png`)" />
-               <el-popover placement="top" trigger="click" :teleported="false" popper-class="palySpeedPopover">
-                  <template #reference>
-                     <img src="./img//iconSpeed.png" />
-                  </template>
+               <img ref="btnSpendDom" src="./img//iconSpeed.png" />
+               <el-popover
+                  @show="handlePopoverTimeHide"
+                  ref="popoverSpendDom"
+                  :virtual-ref="btnSpendDom"
+                  trigger="click"
+                  placement="top"
+                  :teleported="false"
+                  popper-class="palySpeedPopover"
+                  virtual-triggering
+               >
                   <div class="sliderSpeedCon">
                      <img @click="handlePalySpeed(playController.speedStep)" src="./img/jia.png" />
                      <el-slider
@@ -62,7 +69,7 @@
 <script setup lang="ts">
 import TCPlayer from "tcplayer.js"
 import "tcplayer.js/dist/tcplayer.min.css"
-import { onMounted, onUnmounted, ref, reactive } from "vue"
+import { onMounted, onUnmounted, ref, reactive, watch } from "vue"
 import { UUID } from "@/libs/tools"
 import { formatTime } from "./tools"
 
@@ -85,6 +92,16 @@ const timeController = reactive({
    isDrag: false
 })
 /* 播放控制器 */
+const btnSpendDom = ref()
+const popoverSpendDom = ref()
+let _popoverSpendTime: any
+// 定时隐藏
+function handlePopoverTimeHide() {
+   _popoverSpendTime && clearTimeout(_popoverSpendTime)
+   _popoverSpendTime = setTimeout(() => {
+      popoverSpendDom.value?.hide()
+   }, 5000)
+}
 const playController = reactive<{
    type: "play" | "pause"
    loop: boolean
@@ -100,6 +117,13 @@ const playController = reactive<{
    speedStep: 0.1,
    palySpeed: 1
 })
+watch(
+   () => playController.palySpeed,
+   () => {
+      // 值变化 重新计算隐藏时间
+      handlePopoverTimeHide()
+   }
+)
 /* 是否显示控制器 */
 const isShowController = ref(true)
 let _showTimer: any
@@ -201,14 +225,12 @@ function handlePalySpeed(value: number) {
 }
 /* 是否显示控制器 */
 function handleVideoKeydown(e: KeyboardEvent) {
-   console.log("handleVideoKeydown")
    const key = e.key
    if (key === " ") {
       handlePlay()
    }
 }
 function handleVideoMousemove() {
-   console.log("handleVideoMousemove")
    showController()
 }
 function showController() {
@@ -260,7 +282,7 @@ defineExpose({
       transition: all 0.5s;
       .timeController {
          font-weight: 500;
-         font-size: 22px;
+         font-size: 20px;
          color: #ffffff;
          line-height: 30px;
       }
@@ -294,13 +316,13 @@ defineExpose({
             }
             & > :deep(.palySpeedPopover.el-popover.el-popper) {
                min-width: initial;
-               width: 65px !important;
-               height: 293px;
+               width: 59px !important;
+               height: 264px;
                background: url("./img/bg.png") no-repeat;
                background-size: 100% 100%;
                box-shadow: none;
                border: none;
-               padding: 15px 0 22px;
+               padding: 12px 0 20px;
                .el-popper__arrow {
                   display: none;
                }
@@ -314,15 +336,15 @@ defineExpose({
                   & > img {
                      cursor: pointer;
                      flex-shrink: 0;
-                     width: 33px;
-                     height: 35px;
+                     width: 30px;
+                     height: 31px;
                   }
                   .sliderSpeed.el-slider {
                      flex-grow: 1;
-                     padding: 14px 0;
-                     --el-slider-button-wrapper-offset: -10px;
-                     --el-slider-button-wrapper-size: 26px;
-                     --el-slider-button-size: 18px;
+                     padding: 10px 0;
+                     --el-slider-button-wrapper-offset: -9px;
+                     --el-slider-button-wrapper-size: 24px;
+                     --el-slider-button-size: 16px;
                      --el-slider-height: 6px;
                      --el-slider-border-radius: 4px;
                      --el-slider-main-bg-color: #ff8057;

src/views/curriculum/chooseCourseware.vue

@@ -267,25 +267,23 @@ function chooseCourseware(id: string) {
                      font-weight: 600;
                      font-size: 16px;
                      color: #333333;
-                     line-height: 22px;
+                     padding: 3px 0;
                   }
                   .text {
                      font-weight: 400;
                      font-size: 12px;
                      color: #777777;
-                     line-height: 17px;
+                     padding: 2px 0;
                   }
                }
                .play {
                   flex-shrink: 0;
-                  width: 64px;
-                  height: 24px;
                   background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%);
                   border-radius: 12px;
-                  line-height: 24px;
                   text-align: center;
                   font-weight: 500;
                   font-size: 12px;
+                  padding: 6px 18px;
                   color: #ffffff;
                   letter-spacing: 1px;
                   cursor: pointer;