109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
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>
|