td_official/src/views/ProjectScreen/index.vue

<template>
  <div class="large_screen">
    <Header :projectId="projectId" @changePage="handleChangePage" />
    <div class="nav">
      <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>

<script setup lang="ts">
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 {
  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;
  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 {
  width: 25vw;
  transition: transform 1s ease, opacity 1s ease;
  flex-shrink: 0;
}

.nav_center {
  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>