From 3bbf405ec1083b792d817bbd4c755bc3aa3abf14 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 01 十二月 2023 11:54:21 +0800
Subject: [PATCH] 左上统计组件

---
 src/components/cockpitPage/BackgroundBoardLayout.vue |   20 ++++++----
 src/views/cockpitPage/components/StatisticalBox.vue  |   65 ++++++++++++++++++++++++++++++++
 src/views/cockpitPage/index.vue                      |    5 ++
 3 files changed, 82 insertions(+), 8 deletions(-)

diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue
index 9345c5a..f049878 100644
--- a/src/components/cockpitPage/BackgroundBoardLayout.vue
+++ b/src/components/cockpitPage/BackgroundBoardLayout.vue
@@ -55,19 +55,23 @@
 // 涓婅竟鍥哄畾楂�
 $topBlockHeight: 100px;
 // 宸︿晶澶撮儴鏁版嵁楂樺害
-$leftHeaderHeight: 85px;
+$leftHeaderHeight: 8%;
+// 宸︿晶鍏叡鍙宠竟璺�
+$leftMarginRight: 25px;
 // 鏁翠綋鍐呭宸﹁竟璺�
 $leftMargin: 80px;
 // 鏁翠綋鍐呭鍙宠竟璺�
 $rightMargin: 65px;
 // 宸︿晶甯冨眬鍧楅珮搴�
-$leftBlockHeight: calc(100vh - 225px);
+$leftBlockHeight: calc(100vh - 245px);
 // 鍙充晶甯冨眬鍧楅珮搴�
 $rightBlockHeight: calc(100vh - 120px);
+// 宸︿笅涓婅竟璺�
+$leftBottomMarginTop: 40px;
 // 宸︿笅宸︿晶鍖哄煙瀹�
-$leftBottomLeftWidth: 35%;
+$leftBottomLeftWidth: 39%;
 // 宸︿笅鍙充晶鍖哄煙瀹�
-$leftBottomRightWidth: 65%;
+$leftBottomRightWidth: 61%;
 
 .dashboard-layout {
   background-image: url("/cockpit-bg.jpg");
@@ -116,17 +120,17 @@
 .left-header-block {
   height: $leftHeaderHeight;
   margin-top: $topBlockHeight;
-  background: #dd3535;
+  padding-right: $leftMarginRight;
 }
 .left-bottom-block {
-  margin-top: 20px;
+  margin-top: $leftBottomMarginTop;
   height: $leftBlockHeight;
   display: flex;
   .left-bottom-left-block {
     width: $leftBottomLeftWidth;
     height: 100%;
     .left-bottom-top-block {
-      height: 40%;
+      height: 41%;
       background: #9135dd;
     }
     .left-bottom-middle-block {
@@ -134,7 +138,7 @@
       background: #dd35a5;
     }
     .left-bottom-bottom-block {
-      height: 35%;
+      height: 34%;
       background: #dd355f;
     }
   }
diff --git a/src/views/cockpitPage/components/StatisticalBox.vue b/src/views/cockpitPage/components/StatisticalBox.vue
new file mode 100644
index 0000000..934dd76
--- /dev/null
+++ b/src/views/cockpitPage/components/StatisticalBox.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="statistical-box">
+    <div v-for="item in allList" class="all-bg">
+      <div class="box">
+        <div class="commom-title">{{ item.title }}</div>
+        <div class="commom-value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      allList: [
+        { title: "寮�鏈哄彴鏁�", value: 200 },
+        { title: "鎬讳骇閲�", value: 1200 },
+        { title: "鐢熶骇宸ュ崟鏁�", value: 200 },
+        { title: "寤舵湡浜や粯", value: 20 },
+        { title: "鐗╂枡涓嶈冻", value: 10 },
+        { title: "璁″垝杈炬垚鐜�", value: 2 },
+      ],
+    };
+  },
+  mounted() {},
+  watch: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.statistical-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .all-bg {
+    width: 15%;
+    height: 100%;
+    text-align: center;
+    border: 1px solid #00ffff;
+    background: linear-gradient(90deg, #09132c, #09374f);
+    color: #dcb018;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .box {
+      .commom-title {
+        font-size: 18px;
+        font-family: "Arial Normal", "Arial";
+        font-weight: 400;
+      }
+      .commom-value {
+        font-size: 28px;
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 700;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index b9dc0ea..248039c 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -1,5 +1,8 @@
 <template>
   <BackgroundBoardLayout>
+    <template #leftBlock1>
+      <StatisticalBox></StatisticalBox>
+    </template>
     <template #rightBlock3>
       <BarChart @should-reload="reloadAllData"></BarChart>
     </template>
@@ -7,10 +10,12 @@
 </template>
 
 <script>
+import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox";
 import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
 import BarChart from "@/components/cockpitPage/BarChart.vue";
 export default {
   components: {
+    StatisticalBox,
     BackgroundBoardLayout,
     BarChart,
   },

--
Gitblit v1.8.0