From 2bddfac6c817356c92afa0a9faffbe24620eb5e0 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期三, 20 三月 2024 09:45:22 +0800
Subject: [PATCH] 车辆过卡口数据一致性样式统一
---
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