完善项目及大屏

src/views/ProjectScreen/index.vue

@@ -2,13 +2,13 @@
   <div class="large_screen">
     <Header :projectId="projectId" @changePage="handleChangePage" />
     <div class="nav">
-      <div class="nav_left" v-if="!isHide" :class="{ 'slide-out-left': isHiding }">
+      <div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
         <leftPage :projectId="projectId" />
       </div>
-      <div class="nav_center" :class="{ 'full-width': isHiding }">
-        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isHide" />
+      <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
+        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isFull" />
       </div>
-      <div class="nav_right" v-if="!isHide" :class="{ 'slide-out-right': isHiding }">
+      <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
         <rightPage :projectId="projectId" />
       </div>
     </div>
@@ -16,6 +16,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import Header from './components/header.vue';
 import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
@@ -24,16 +25,23 @@ import { useUserStoreHook } from '@/store/modules/user';
 
 const userStore = useUserStoreHook();
 const projectId = computed(() => userStore.selectedProject.id);
-const isHide = ref(false)
+const isFull = ref(false)
+const isHideOther = ref(false)
 const isHiding = ref(false)
 
+/**
+ * 切换中心页面全屏
+ */
 const handleChangePage = () => {
-  isHiding.value = true;
-
-  setTimeout(() => {
-    isHide.value = !isHide.value;
-    isHiding.value = false;
-  }, 500);
+  if (isFull.value) {
+    isFull.value = false;
+    setTimeout(() => {
+      isHideOther.value = false;
+    }, 500);
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+  }
 }
 </script>
 
@@ -49,9 +57,9 @@ const handleChangePage = () => {
 }
 
 .nav {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
+  position: relative;
+  display: grid;
+  place-items: center;
   width: calc(100vw - 30px);
   height: calc(100vh - 90px);
   margin: 0 auto;
@@ -61,15 +69,25 @@ const handleChangePage = () => {
 
 .nav_left,
 .nav_right {
-  width: 25vw;
-  transition: transform 1s ease, opacity 1s ease;
-  flex-shrink: 0;
+  position: absolute;
+  width: calc(25vw - 15px);
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.nav_left {
+  top: 0;
+  left: 0;
+}
+
+.nav_right {
+  top: 0;
+  right: 0;
 }
 
 .nav_center {
-  flex: 1 1 auto;
-  min-width: 0;
-  transition: all 1s ease;
+  height: 100%;
+  transition: all 0.5s ease;
 }
 
 /* 中间面板全屏动画 */
@@ -79,13 +97,13 @@ const handleChangePage = () => {
   flex: none;
 }
 
-.slide-out-left {
-  transform: translateX(-100%);
+.slide_left {
+  left: -25vw;
   opacity: 0;
 }
 
-.slide-out-right {
-  transform: translateX(100%);
+.slide_right {
+  right: -25vw;
   opacity: 0;
 }
 </style>