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