135 lines
2.2 KiB
Vue
135 lines
2.2 KiB
Vue
<template>
|
||
<a-layout class="app-wrapper" :class="layoutClass">
|
||
<!-- 默认布局：左侧双栏布局 -->
|
||
<template v-if="layoutMode === 'default'">
|
||
<a-layout-sider theme="dark" width="70"></a-layout-sider>
|
||
<a-layout-sider theme="light"></a-layout-sider>
|
||
<a-layout>
|
||
<a-layout-header class="app-header">
|
||
<breadcrumb />
|
||
</a-layout-header>
|
||
<a-layout-content><router-view></router-view></a-layout-content>
|
||
</a-layout>
|
||
</template>
|
||
|
||
<!-- Menu布局：左侧菜单栏布局 -->
|
||
<template v-else-if="layoutMode === 'menu'">
|
||
</template>
|
||
|
||
<!-- Top布局：顶部菜单栏布局 -->
|
||
<template v-else-if="layoutMode === 'top'">
|
||
</template>
|
||
</a-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { RouterView } from 'vue-router'
|
||
import breadcrumb from './components/breadcrumb.vue';
|
||
|
||
const layoutMode = ref('default')
|
||
const layoutClass = ref('layout-default')
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
|
||
.app-header {
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
padding-inline: 20px;
|
||
height: 50px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 默认布局 */
|
||
&.layout-default {
|
||
flex-direction: row;
|
||
|
||
.main-container {
|
||
margin-left: 200px;
|
||
|
||
&.has-sidebar {
|
||
margin-left: 200px;
|
||
}
|
||
|
||
.fixed-header {
|
||
width: calc(100% - 200px);
|
||
}
|
||
}
|
||
|
||
&.is-collapse {
|
||
.main-container {
|
||
margin-left: 64px;
|
||
|
||
.fixed-header {
|
||
width: calc(100% - 64px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Menu布局 */
|
||
&.layout-menu {
|
||
.main-container {
|
||
margin-left: 200px;
|
||
|
||
&.has-sidebar {
|
||
margin-left: 200px;
|
||
}
|
||
|
||
.fixed-header {
|
||
width: calc(100% - 200px);
|
||
}
|
||
}
|
||
|
||
&.is-collapse {
|
||
.main-container {
|
||
margin-left: 64px;
|
||
|
||
.fixed-header {
|
||
width: calc(100% - 64px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Top布局 */
|
||
&.layout-top {
|
||
.top-layout-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.top-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1002;
|
||
}
|
||
|
||
.top-main {
|
||
padding-top: 50px;
|
||
|
||
.top-userbar {
|
||
position: fixed;
|
||
top: 50px;
|
||
right: 0;
|
||
z-index: 1001;
|
||
width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.app-main {
|
||
padding-top: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|