115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
<template>
|
|
<div class="base-layout">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="base-layout__topbar"></div>
|
|
|
|
<!-- 主体区域 -->
|
|
<div class="base-layout__main">
|
|
<!-- 侧边栏 -->
|
|
<div class="base-layout__sidebar">
|
|
<!-- 侧边栏内容 -->
|
|
<div class="base-layout__sidebar-content"></div>
|
|
<!-- 侧边栏底部固定区域 -->
|
|
<div class="base-layout__sidebar-bottom">
|
|
<div class="base-layout__sidebar-bottom-inner">
|
|
<UserBar />
|
|
</div>
|
|
</div>
|
|
<!-- 拖拽调整宽度的手柄 -->
|
|
<div class="base-layout__resize-handle"></div>
|
|
</div>
|
|
|
|
<!-- 主内容区域 -->
|
|
<div class="base-layout__content"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UserBar from '@/components/User/UserBar.vue'
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.base-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100lvh;
|
|
width: 100lvw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.base-layout__topbar {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 30px;
|
|
background-color: #fde68a; // amber-200
|
|
}
|
|
|
|
.base-layout__main {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.base-layout__sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 400px;
|
|
height: 100%;
|
|
padding: 8px;
|
|
background-color: #fcd34d; // amber-300
|
|
}
|
|
|
|
.base-layout__sidebar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-bottom: 72px;
|
|
background-color: #f59e0b; // amber-500
|
|
}
|
|
|
|
.base-layout__sidebar-bottom {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
height: 72px;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 8px;
|
|
}
|
|
|
|
.base-layout__sidebar-bottom-inner {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background-color: #92400e; // amber-800
|
|
}
|
|
|
|
.base-layout__resize-handle {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
cursor: ew-resize;
|
|
|
|
&:hover {
|
|
background-color: #d1d5db; // gray-300
|
|
}
|
|
}
|
|
|
|
.base-layout__content {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fbbf24; // amber-400
|
|
}
|
|
</style>
|