<template>
|
<div class="dashboard-layout">
|
<div class="left">
|
<div class="header-block padding-4">
|
<slot name="leftBlock1"></slot>
|
</div>
|
<div class="double-height-block padding-4">
|
<div class="card scroll-card">
|
<el-scrollbar always class="scroller">
|
<slot name="leftBlock2"></slot>
|
</el-scrollbar>
|
</div>
|
</div>
|
</div>
|
<div class="middle">
|
<div class="header-block padding-4">
|
<slot name="middleBlock1"></slot>
|
</div>
|
<div class="top-block padding-4">
|
<div class="card">
|
<slot name="middleBlock2"></slot>
|
</div>
|
</div>
|
<div class="bottom-block">
|
<div class="bottom-block-item padding-4">
|
<div class="card">
|
<slot name="middleBlock3"></slot>
|
</div>
|
</div>
|
<div class="bottom-block-item padding-4">
|
<div class="card">
|
<slot name="middleBlock4"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="header-block padding-4">
|
<slot name="rightBlock1"></slot>
|
</div>
|
<div class="top-block padding-4">
|
<div class="card">
|
<slot name="rightBlock2"></slot>
|
</div>
|
</div>
|
<div class="bottom-block padding-4">
|
<div class="card">
|
<slot name="rightBlock3"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts"></script>
|
|
<style scoped lang="scss">
|
// 两侧区域宽
|
$sideWidth: 25%;
|
// 中间主区域宽
|
$mainWidth: 50%;
|
// 整体内边距
|
$layoutPadding: 12px;
|
// 头部布局块高度
|
$headerBlockHeight: 80px;
|
// 基础布局块高度
|
$baseBlockHeight: calc((100vh - 2 * $layoutPadding - $headerBlockHeight) / 2);
|
// 双倍高布局块高度
|
$doubleBlockHeight: calc($baseBlockHeight * 2);
|
// 上边固定高
|
$topBlocHeight: 400px;
|
// 下边高度
|
$bottomBlockHeight: calc(100vh - 2 * $layoutPadding - $headerBlockHeight - $topBlocHeight);
|
.dashboard-layout {
|
background-image: url('/header-bg.png');
|
background-position-x: center;
|
background-repeat: no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 100vh;
|
width: 100vw;
|
padding: $layoutPadding;
|
&.debug {
|
& > div {
|
border: 1px solid red;
|
& > div {
|
border: 1px solid red;
|
}
|
}
|
}
|
}
|
|
.left,
|
.right {
|
width: $sideWidth;
|
}
|
|
.middle {
|
width: $mainWidth;
|
}
|
.left,
|
.right,
|
.middle {
|
height: 100%;
|
}
|
.padding-4 {
|
padding: 6px;
|
}
|
|
.base-block {
|
height: $baseBlockHeight;
|
flex: 1;
|
}
|
.top-block {
|
height: $topBlocHeight;
|
flex: 0;
|
}
|
.bottom-block {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: $bottomBlockHeight;
|
}
|
.bottom-block-item {
|
height: $bottomBlockHeight;
|
flex: 1;
|
}
|
.header-block {
|
height: $headerBlockHeight;
|
}
|
.double-height-block {
|
height: $doubleBlockHeight;
|
}
|
|
.card {
|
width: 100%;
|
height: 100%;
|
background-color: #153e94;
|
border-radius: 6px;
|
padding: 10px 10px;
|
}
|
.scroll-card {
|
padding: 0;
|
}
|
.scroller {
|
padding: 10px 10px;
|
}
|
</style>
|
