93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<a-layout class="main-content">
|
|
<a-layout-sider
|
|
:collapsed="collapsed"
|
|
theme="light"
|
|
:trigger="null"
|
|
collapsible
|
|
>
|
|
<div v-if="!collapsed" class="title flex-center">
|
|
<div>超级后台</div>
|
|
</div>
|
|
<div v-else class="logo flex-center">
|
|
<img src="@/assets/vue.svg" title="超级后台" alt="xx">
|
|
</div>
|
|
<SystemMenus/>
|
|
</a-layout-sider>
|
|
<a-layout>
|
|
<a-layout-header
|
|
class="layout-header"
|
|
>
|
|
<layout-header v-model:collapsed="collapsed"/>
|
|
</a-layout-header>
|
|
<a-layout-content
|
|
class="layout-content"
|
|
>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition appear name="fade-transform" mode="out-in">
|
|
<keep-alive :include="keepAliveNames">
|
|
<component :is="Component" :key="route.fullPath"/>
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
import LayoutHeader from "@/components/layout/header/LayoutHeader.vue";
|
|
import SystemMenus from "@/components/layout/SystemMenus.vue";
|
|
|
|
const collapsed = ref<boolean>(false);
|
|
|
|
const keepAliveNames = ref<string[]>([])
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main-content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.layout-header {
|
|
background: #ffffff;
|
|
padding: 0;
|
|
}
|
|
|
|
.layout-content {
|
|
margin: 10px;
|
|
padding: 4px;
|
|
background: #f5f7fd;
|
|
min-height: 280px;
|
|
border-radius: 5px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
height: 32px;
|
|
width: 168px;
|
|
transition: width 2ms linear 2ms;
|
|
margin: 16px;
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 20px
|
|
}
|
|
|
|
.logo {
|
|
margin: 16px;
|
|
|
|
img {
|
|
width: 50px;
|
|
height: 50px
|
|
}
|
|
}
|
|
|
|
.site-layout .site-layout-background {
|
|
background: #ffffff;
|
|
}
|
|
</style>
|