td_official/src/views/ProjectScreen/index.vue

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