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

fix(视图): 调整幻灯片底部空间计算和优化编辑器样式

修复幻灯片底部空间计算中硬编码的数值,使用更清晰的表达式
优化编辑器工具弹出框的样式和布局,添加下拉图标
统一CSS选择器的格式,修复样式文件结尾的空行问题
lsc 4 часов назад
Родитель
Сommit
6580d4f010
2 измененных файлов с 25 добавлено и 20 удалено
  1. 23 18
      src/views/Editor/CanvasTool/index2.vue
  2. 2 2
      src/views/Student/index.vue

+ 23 - 18
src/views/Editor/CanvasTool/index2.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <Popover trigger="click" v-model:value="toolVisible"
-        style="height: 100%;display: flex;align-items: center;" :offset="10" v-if="hasInteractiveTool">
+      <Popover trigger="click" v-model:value="toolVisible" style="height: 100%;display: flex;align-items: center;"
+        :offset="10" v-if="hasInteractiveTool">
         <template #content>
           <div class="popover-item" @click="editContent(45)" v-if="frametype != 45">
             <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -18,17 +18,25 @@
             <span>{{ lang.ssQandA }}</span>
           </div>
         </template>
-        <div class="handler-item" :class="{active: toolVisible}">
+        <div class="handler-item" :class="{ active: toolVisible }">
           <span class="svg-icon">
-            <svg v-if="frametype == 45" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg v-if="frametype == 45" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2">
               <circle cx="12" cy="12" r="10" />
               <path d="M12 16v-4m0-4h.01" />
             </svg>
-            <svg v-if="frametype == 15" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg v-if="frametype == 15" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2">
               <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
             </svg>
           </span>
           <span>{{ iframeLabel }}</span>
+          <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+            <path
+              d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
+              p-id="4736" fill="currentColor"></path>
+          </svg>
         </div>
       </Popover>
       <Popover trigger="click" v-model:value="textTypeSelectVisible"
@@ -105,15 +113,8 @@
     </Modal>
 
     <!-- 确认对话框 -->
-    <Modal
-      :visible="confirmDialogVisible"
-      :width="400"
-      :contentStyle="{ borderRadius: '15px' }"
-      :closeButton="false"
-      :closeOnClickMask="false"
-      :closeOnEsc="false"
-      @update:visible="val => confirmDialogVisible = val"
-    >
+    <Modal :visible="confirmDialogVisible" :width="400" :contentStyle="{ borderRadius: '15px' }" :closeButton="false"
+      :closeOnClickMask="false" :closeOnEsc="false" @update:visible="val => confirmDialogVisible = val">
       <div class="clear-confirm">
         <div class="clear-confirm__title">{{ lang.ssConfirmOperation }}</div>
         <div class="clear-confirm__content">
@@ -474,7 +475,7 @@ const editContent = (toolType: number) => {
     padding: 0 15px;
 
     &:not(.disable):hover,
-    &:not(.active):hover{
+    &:not(.active):hover {
       background-color: #f1f1f1;
     }
   }
@@ -511,6 +512,12 @@ const editContent = (toolType: number) => {
       margin-right: 5px;
       display: flex;
     }
+
+    .xia-icon {
+      margin-left: 5px;
+      width: 10px;
+      height: 10px;
+    }
   }
 }
 
@@ -585,7 +592,7 @@ const editContent = (toolType: number) => {
   }
 }
 
-.btn-c{
+.btn-c {
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
@@ -617,6 +624,4 @@ const editContent = (toolType: number) => {
     }
   }
 }
-
-
 </style>

+ 2 - 2
src/views/Student/index.vue

@@ -762,8 +762,8 @@ const calculateSlideSize = () => {
     tempWidth = winHeight2 / viewportRatio.value
   }
   // 检查底部空间
-  if (slideHeight.value - tempHeight < 85) {
-    tempHeight = Math.max(slideHeight.value - 85, 0)
+  if (slideHeight.value - tempHeight < (60 + 65 + 10)) {
+    tempHeight = Math.max(slideHeight.value - (60 + 65 + 10), 0)
     tempWidth = tempHeight > 0 ? tempHeight / viewportRatio.value : 0
   }
   slideWidth2.value = tempWidth