1

src/views/ProjectScreen/index.vue

@@ -1,45 +1,111 @@
 <template>
-  <div class="large-screen">
-    <Header />
+  <div class="large_screen">
+    <Header :projectId="projectId" :isFull="isFull" @changePage="handleChangePage" />
     <div class="nav">
-      <leftPage />
-      <centerPage />
-      <rightPage />
+      <div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
+        <leftPage :projectId="projectId" />
+      </div>
+      <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
+        <centerPage :projectId="projectId" :isHide="isFull" />
+      </div>
+      <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
+        <rightPage :projectId="projectId" />
+      </div>
     </div>
   </div>
 </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';
 import rightPage from './components/rightPage.vue';
+<<<<<<< HEAD
+=======
+import { useUserStoreHook } from '@/store/modules/user';
+
+const userStore = useUserStoreHook();
+const projectId = computed(() => userStore.selectedProject.id);
+const isFull = ref(false)
+const isHideOther = ref(false)
+
+/**
+ * 切换中心页面全屏
+ */
+const handleChangePage = () => {
+  if (isFull.value) {
+    isFull.value = false;
+    setTimeout(() => {
+      isHideOther.value = false;
+    }, 500);
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+  }
+}
+>>>>>>> 290fc16c320aeeee8ecb31af446b0ad7d555e954
 </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);
+  position: relative;
+  display: grid;
+  place-items: center;
+  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;
+  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 {
-  margin-bottom: 15px;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+/* 中间面板全屏动画 */
+.full-width {
+  /* 取消flex增长，使用固定宽度 */
+  width: calc(100vw - 30px);
+  flex: none;
+}
+
+.slide_left {
+  left: -25vw;
+  opacity: 0;
+}
+
+.slide_right {
+  right: -25vw;
+  opacity: 0;
 }
 </style>