Просмотр исходного кода

style(student view): 优化作业检查框全屏交互样式与逻辑

新增全屏下作业工具栏展开收起状态,添加hover展开和点击切换效果,调整样式过渡动画,优化点击事件的冒泡处理和状态同步
lsc 3 дней назад
Родитель
Сommit
0f7182f88a
1 измененных файлов с 42 добавлено и 4 удалено
  1. 42 4
      src/views/Student/index.vue

+ 42 - 4
src/views/Student/index.vue

@@ -78,13 +78,13 @@
           left: isFullscreen ? '0' : `${(containerWidth - slideWidth * canvasScale) / 2}px`,
           top: isFullscreen ? '0' : `${(containerHeight - slideHeight * canvasScale) / 2}px`
         }" @mousemove="handleLaserMove">
-          <div class="homework-check-box" v-if="currentSlideHasIframe && !currentSlideHasBilibiliVideo && (props.type == '1' || (props.type == '2' && currentIsResultArray.can && !is_cast_screen))"  v-show="currentSlideHasIframe" :style="{
+          <div class="homework-check-box" :class="{ 'fullscreen-mode': isFullscreen, 'fs-expanded': hwBoxExpanded }" v-if="currentSlideHasIframe && !currentSlideHasBilibiliVideo && (props.type == '1' || (props.type == '2' && currentIsResultArray.can && !is_cast_screen))"  v-show="currentSlideHasIframe" :style="{
             top: isFullscreen ? '0' : `0`
-          }">
-            <div class="homework-check-box-item" @click="openChoiceQuestionDetail2(slideIndex)" :class="{'active': !choiceQuestionDetailDialogOpenList.includes(slideIndex)}">
+          }" @click="isFullscreen && (hwBoxExpanded = !hwBoxExpanded)">
+            <div class="homework-check-box-item" @click.stop="openChoiceQuestionDetail2(slideIndex); hwBoxExpanded = false" :class="{'active': !choiceQuestionDetailDialogOpenList.includes(slideIndex)}">
               <div class="homework-check-box-item-title">{{ lang.ssQuestion }}</div>
             </div>
-            <div class="homework-check-box-item" @click="openChoiceQuestionDetail3(slideIndex)" :class="{'active': choiceQuestionDetailDialogOpenList.includes(slideIndex)}">
+            <div class="homework-check-box-item" @click.stop="openChoiceQuestionDetail3(slideIndex); hwBoxExpanded = false" :class="{'active': choiceQuestionDetailDialogOpenList.includes(slideIndex)}">
               <div class="homework-check-box-item-title">{{ lang.ssResult }}</div>
             </div>
           </div>
@@ -514,6 +514,7 @@ const viewerCanvasRef = ref<HTMLElement>()
 // 放映相关的状态
 const canvasScale = ref(1) // 画布缩放比例
 const isFullscreen = ref(false) // 是否全屏
+const hwBoxExpanded = ref(false) // 全屏下作业工具栏展开状态
 const containerWidth = ref(0) // 容器宽度
 const containerHeight = ref(0) // 容器高度
 
@@ -5973,6 +5974,43 @@ const clearTimerState = () => {
   border-radius: 0 0 5px 5px;
   background: #fff;
   z-index: 999;
+  transition: max-height 0.3s ease, padding 0.3s ease, overflow 0s;
+
+  &.fullscreen-mode {
+    overflow: hidden;
+    max-height: 5px;
+    padding: 0;
+    background: #f6c82b;
+    border-radius: 0;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    cursor: pointer;
+
+    .homework-check-box-item-title{
+      display: none;
+    }
+
+    &:hover {
+      max-height: 80px;
+      padding: 8px;
+      background: #fff;
+      border-radius: 0 0 5px 5px;
+
+      .homework-check-box-item-title{
+        display: block;
+      }
+    }
+
+    &.fs-expanded {
+      max-height: 80px;
+      padding: 8px;
+      background: #fff;
+      border-radius: 0 0 5px 5px;
+
+      .homework-check-box-item-title{
+        display: block;
+      }
+    }
+  }
 
   .homework-check-box-item{
     padding: 10px 18px;