From b4a603e7e1c123195f5515aa7c3b247e1784fb76 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 24 一月 2024 14:53:00 +0800
Subject: [PATCH] 1
---
src/components/DashboardLayout.vue | 49 ++++++++++++++++++++++++++++++++++++-------------
1 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index 692c86f..9c8e024 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>
@@ -38,12 +38,12 @@
<div class="header-block padding-4">
<slot name="rightBlock1"></slot>
</div>
- <div class="base-block padding-4">
+ <div class="top-block padding-4">
<div class="card">
<slot name="rightBlock2"></slot>
</div>
</div>
- <div class="base-block padding-4">
+ <div class="bottom-block padding-4">
<div class="card">
<slot name="rightBlock3"></slot>
</div>
@@ -67,7 +67,14 @@
$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;
@@ -100,14 +107,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;
@@ -121,6 +138,12 @@
height: 100%;
background-color: #153e94;
border-radius: 6px;
- padding: 10px 16px;
+ padding: 10px 10px;
+}
+.scroll-card {
+ padding: 0;
+}
+.scroller {
+ padding: 10px 10px;
}
</style>
--
Gitblit v1.8.0