添加屏幕扩展动画

src/views/ProjectScreen/index.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="large-screen">
-    <Header />
+  <div class="large_screen">
+    <Header :projectId="projectId" @changePage="handleChangePage" />
     <div class="nav">
-      <leftPage />
-      <centerPage />
-      <rightPage />
+      <div class="nav_left" v-if="!isHide" :class="{ 'slide-out-left': isHiding }">
+        <leftPage :projectId="projectId" />
+      </div>
+      <div class="nav_center" :class="{ 'full-width': isHiding }">
+        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isHide" />
+      </div>
+      <div class="nav_right" v-if="!isHide" :class="{ 'slide-out-right': isHiding }">
+        <rightPage :projectId="projectId" />
+      </div>
     </div>
   </div>
 </template>
@@ -14,33 +20,72 @@ import Header from './components/header.vue';
 import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
 import rightPage from './components/rightPage.vue';
+import { useUserStoreHook } from '@/store/modules/user';
 
+const userStore = useUserStoreHook();
+const projectId = computed(() => userStore.selectedProject.id);
+const isHide = ref(false)
+const isHiding = ref(false)
+
+const handleChangePage = () => {
+  isHiding.value = true;
+
+  setTimeout(() => {
+    isHide.value = !isHide.value;
+    isHiding.value = false;
+  }, 500);
+}
 </script>
 
 <style lang="scss" scoped>
-.large-screen {
+.large_screen {
   width: 100vw;
   height: 100vh;
   background: url('@/assets/large/bg.png') no-repeat;
   background-size: 100% 100%;
+  background-attachment: fixed;
   background-color: rgba(4, 7, 17, 1);
+  overflow: hidden;
 }
 
 .nav {
   display: flex;
-  gap: 15rpx;
-  width: 100%;
-  height: calc(100vh - 100px);
+  justify-content: center;
+  gap: 15px;
+  width: calc(100vw - 30px);
+  height: calc(100vh - 90px);
+  margin: 0 auto;
   box-sizing: border-box;
   color: #fff;
 }
 
 .nav_left,
 .nav_right {
-  margin: 0 15px 15px 15px;
+  width: 25vw;
+  transition: transform 1s ease, opacity 1s ease;
+  flex-shrink: 0;
 }
 
 .nav_center {
-  margin-bottom: 15px;
+  flex: 1 1 auto;
+  min-width: 0;
+  transition: all 1s ease;
+}
+
+/* 中间面板全屏动画 */
+.full-width {
+  /* 取消flex增长，使用固定宽度 */
+  width: calc(100vw - 30px);
+  flex: none;
+}
+
+.slide-out-left {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-out-right {
+  transform: translateX(100%);
+  opacity: 0;
 }
 </style>