55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
|
<!--
|
||
|
|
* @Description: layout
|
||
|
|
* @Author: zenghua.wang
|
||
|
|
* @Date: 2024-01-26 20:13:37
|
||
|
|
* @LastEditors: zenghua.wang
|
||
|
|
* @LastEditTime: 2024-02-05 16:03:31
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="basic-layout"
|
||
|
|
:class="{
|
||
|
|
hideSider: !SettingStore.isCollapse,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<Sider />
|
||
|
|
<div class="basic-layout-container">
|
||
|
|
<Header />
|
||
|
|
<Main />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="layout">
|
||
|
|
import { useSettingStore } from '@/store/modules/setting';
|
||
|
|
|
||
|
|
import Sider from './component/Sider';
|
||
|
|
import Header from './component/Header';
|
||
|
|
import Main from './component/Main';
|
||
|
|
const SettingStore = useSettingStore();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.basic-layout {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 1200px;
|
||
|
|
height: 100%;
|
||
|
|
&.hideSider {
|
||
|
|
:deep(.layout-sider) {
|
||
|
|
width: 60px !important;
|
||
|
|
}
|
||
|
|
.basic-layout-container {
|
||
|
|
margin-left: 60px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-container {
|
||
|
|
position: relative;
|
||
|
|
margin-left: 210px;
|
||
|
|
height: 100%;
|
||
|
|
transition: margin-left 0.28s;
|
||
|
|
box-sizing: border-box;
|
||
|
|
@include flex-column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|