42 lines
922 B
Vue
42 lines
922 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import { ElConfigProvider } from 'element-plus'
|
||
|
|
import Sidebar from '@/components/Sidebar.vue'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const showSidebar = computed(() => route.path !== '/')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ElConfigProvider :z-index="3000">
|
||
|
|
<div class="flex min-h-screen bg-dark-900">
|
||
|
|
<!-- 左侧侧边栏 (除了登录页) -->
|
||
|
|
<Sidebar v-if="showSidebar" />
|
||
|
|
|
||
|
|
<!-- 右侧内容区 -->
|
||
|
|
<main :class="showSidebar ? 'ml-64' : ''" class="flex-1 min-h-screen">
|
||
|
|
<router-view class="page-content" />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</ElConfigProvider>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 页面进入动画 */
|
||
|
|
.page-content {
|
||
|
|
animation: page-enter 0.3s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes page-enter {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|