From b0bfdbe89eda26315b836042f63ef699a00e7819 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期三, 20 三月 2024 09:55:10 +0800 Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/zgyw-ui --- src/views/system/vehicle-data-monitor/index.vue | 87 +++++++++++++++++++++++++++++-------------- 1 files changed, 59 insertions(+), 28 deletions(-) diff --git a/src/views/system/vehicle-data-monitor/index.vue b/src/views/system/vehicle-data-monitor/index.vue index 76ce1d1..44cac60 100644 --- a/src/views/system/vehicle-data-monitor/index.vue +++ b/src/views/system/vehicle-data-monitor/index.vue @@ -1,6 +1,6 @@ <template> <div class="app-container"> - <div class="top"> + <!-- <div class="top"> <el-row type="flex" justify="space-between" style="width: 60%;"> <el-col :span="6"> <el-card class="card"> @@ -37,7 +37,43 @@ </el-col> </el-row> - </div> + </div> --> + + + <el-card class="box-card"> + <el-row type="flex" align="middle" justify="space-between"> + <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6"> + <div class="icon-container" style="background-color: #5599F7;font-size: 50px;color: #FFF;"> + <i class="el-icon-wind-power"></i> + </div> + </el-col> + <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16"> + <div class="dashboard"> + <div class="dashboard-item"> + <h3 style="color: #5C9BF8">{{ totalKiosks }}</h3> + <p>鍗″彛鎬绘暟</p> + </div> + <div class="dashboard-item"> + <h3>{{ uniqueKiosks }}</h3> + <p>涓嶅敮涓�鍗″彛鏁�</p> + </div> + <div class="dashboard-item"> + <div style="width: 1px;height: 55px;border: 1px solid #D7EBFA;"></div> + </div> + <div class="dashboard-item"> + <h3 style="color: #5C9BF8">{{ totalCarData }}</h3> + <p>杩囪溅鏁版嵁鎬婚噺</p> + </div> + <div class="dashboard-item"> + <h3>{{ uniqueCarData }}</h3> + <p>涓嶅敮涓�鏁版嵁閲�</p> + </div> + </div> + </el-col> + </el-row> + </el-card> + + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="鍗″彛缂栧彿" prop="bayonetNumber"> @@ -276,41 +312,36 @@ }; </script> <style scoped> -.top { - height: 150px; +.box-card { + background-color: #F5F9FE; + width: 100%; margin-bottom: 20px; - background-color: #F2F9FF; - border: 1px solid #77befd; + height: 120px } -.container { - max-width: 1000px; - margin: auto; +.icon-container { + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + width: 20%; + height: 80px; + margin-left: 5%; } -.number { - font-size: 36px; - font-weight: bold; - color: #00A5FE; +.el-icon-refresh-left { + font-size: 50px; + color: #FFFFFF; } -.numberTwo { - font-size: 36px; - font-weight: bold; - color: #505051; +.dashboard { + display: flex; + gap: 10%; + align-items: center; + margin-left: -50%; } -.card { - width: 100px; - height: 100px; +.dashboard-item { text-align: center; - background-color: #00A5FE; - color: aliceblue; - border-radius: 10%; - margin: 25px; -} - -.mod { - margin-top: 40px; } </style> \ No newline at end of file -- Gitblit v1.8.0