移动端 ppt 预览

src/router/routers.ts

@@ -17,6 +17,11 @@ export const constRoutes: Array<RouteRecordRaw> = [
     component: () => import("@/views/pptScreen")
   },
   {
+    path: "/mobileScreen",
+    name: "mobile",
+    component: () => import("@/views/mobileScreen")
+  },
+  {
     path: "/login",
     name: "login",
     component: () => import("@/viewsframe/login")

src/store/screen.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia"
 
 export interface ScreenState {
-  mode: "pptEditor" | "pptScreen" // 编辑模式还是 ppt预览模式
+  mode: "pptEditor" | "pptScreen" | "mobileScreen" // 编辑模式还是 ppt预览模式
   screening: boolean
 }
 

src/views/Screen/BaseView.vue

@@ -23,7 +23,13 @@
       <IconRightTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execNext()" />
     </div>
 
-    <div class="tools-right" :class="{ visible: rightToolsVisible }" @mouseleave="rightToolsVisible = false" @mouseenter="rightToolsVisible = true">
+    <div
+      class="tools-right"
+      v-if="screenStore.mode !== 'mobileScreen'"
+      :class="{ visible: rightToolsVisible }"
+      @mouseleave="rightToolsVisible = false"
+      @mouseenter="rightToolsVisible = true"
+    >
       <div class="content">
         <div class="tool-btn page-number" @click="slideThumbnailModelVisible = true">幻灯片 {{ slideIndex + 1 }} / {{ slides.length }}</div>
         <IconWrite class="tool-btn" v-tooltip="'画笔工具'" @click="writingBoardToolVisible = true" />

src/views/mobileScreen/index.ts

@@ -0,0 +1,2 @@
+import mobileScreen from "./mobileScreen.vue"
+export default mobileScreen

src/views/mobileScreen/mobileScreen.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="mobileScreen">
-    <Screen v-if="!initLoading" />
+  <div class="mobileScreen" @click="toolVisible = false">
+    <template v-if="!initLoading">
+      <Screen />
+      <MobileThumbnails v-if="toolVisible" class="thumbnails" />
+      <IconListView class="tool-icon" @click.stop="toolVisible = !toolVisible" />
+    </template>
   </div>
 </template>
 
@@ -9,9 +13,12 @@ import { ref } from "vue"
 import Screen from "../Screen/index.vue"
 import usePptWork from "@/store/pptWork"
 import { useScreenStore } from "@/store"
+import MobileThumbnails from "../Mobile/MobileThumbnails.vue"
+
 const screenStore = useScreenStore()
 
 const initLoading = ref(true)
+const toolVisible = ref(false)
 
 const usePptWorkHook = usePptWork()
 
@@ -26,5 +33,32 @@ usePptWorkHook.initPPTData().then(() => {
 .mobileScreen {
   width: 100%;
   height: 100%;
+  .thumbnails {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    background-color: rgba($color: #1d1d1d, $alpha: 0.7);
+    overflow: auto !important;
+    animation: slideInUp 0.15s;
+  }
+
+  @keyframes slideInUp {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  .tool-icon {
+    position: fixed;
+    bottom: 8px;
+    right: 8px;
+    font-size: 25px;
+    color: #666;
+    z-index: 10;
+  }
 }
 </style>