<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">
|
<el-scrollbar always>
|
<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="base-block padding-4">
|
<div class="card">
|
<slot name="middleBlock2"></slot>
|
</div>
|
</div>
|
<div class="block-container">
|
<div class="base-block padding-4">
|
<div class="card">
|
<slot name="middleBlock3"></slot>
|
</div>
|
</div>
|
<div class="base-block 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="base-block padding-4">
|
<div class="card">
|
<slot name="rightBlock2"></slot>
|
</div>
|
</div>
|
<div class="base-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);
|
.dashboard-layout {
|
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;
|
}
|
.block-container {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.base-block {
|
height: $baseBlockHeight;
|
flex-grow: 1;
|
}
|
.header-block {
|
height: $headerBlockHeight;
|
}
|
.double-height-block {
|
height: $doubleBlockHeight;
|
}
|
|
.card {
|
width: 100%;
|
height: 100%;
|
background-color: #153e94;
|
border-radius: 6px;
|
padding: 10px 16px;
|
}
|
</style>
|
