From 1c22b65361d81ef23bd76d0f76a3dce7ef72fd99 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 31 十月 2023 10:06:56 +0800
Subject: [PATCH] 拉代码
---
src/components/DashboardLayout.vue | 40 ++++++++++++++++++++++++++++++----------
1 files changed, 30 insertions(+), 10 deletions(-)
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index 692c86f..e3d5309 100644
--- a/src/components/DashboardLayout.vue
+++ b/src/components/DashboardLayout.vue
@@ -5,8 +5,8 @@
<slot name="leftBlock1"></slot>
</div>
<div class="double-height-block padding-4">
- <div class="card">
- <el-scrollbar always>
+ <div class="card scroll-card">
+ <el-scrollbar always class="scroller">
<slot name="leftBlock2"></slot>
</el-scrollbar>
</div>
@@ -16,18 +16,18 @@
<div class="header-block padding-4">
<slot name="middleBlock1"></slot>
</div>
- <div class="base-block padding-4">
+ <div class="top-block padding-4">
<div class="card">
<slot name="middleBlock2"></slot>
</div>
</div>
- <div class="block-container">
- <div class="base-block padding-4">
+ <div class="bottom-block">
+ <div class="bottom-block-item padding-4">
<div class="card">
<slot name="middleBlock3"></slot>
</div>
</div>
- <div class="base-block padding-4">
+ <div class="bottom-block-item padding-4">
<div class="card">
<slot name="middleBlock4"></slot>
</div>
@@ -67,6 +67,10 @@
$baseBlockHeight: calc((100vh - 2 * $layoutPadding - $headerBlockHeight) / 2);
// 鍙屽�嶉珮甯冨眬鍧楅珮搴�
$doubleBlockHeight: calc($baseBlockHeight * 2);
+// 涓婅竟鍥哄畾楂�
+$topBlocHeight: 400px;
+// 涓嬭竟楂樺害
+$bottomBlockHeight: calc(100vh - 2 * $layoutPadding - $headerBlockHeight - $topBlocHeight);
.dashboard-layout {
display: flex;
align-items: center;
@@ -100,14 +104,24 @@
.padding-4 {
padding: 6px;
}
-.block-container {
+
+.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;
}
-.base-block {
- height: $baseBlockHeight;
- flex-grow: 1;
+.bottom-block-item {
+ height: $bottomBlockHeight;
+ flex: 1;
}
.header-block {
height: $headerBlockHeight;
@@ -123,4 +137,10 @@
border-radius: 6px;
padding: 10px 16px;
}
+.scroll-card {
+ padding: 0;
+}
+.scroller {
+ padding: 10px 16px;
+}
</style>
--
Gitblit v1.8.0