From 1e437cc5d7facf68363f1da69910c5edf38af4c0 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Mon, 11 Sep 2023 18:08:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=95=E4=BC=9A=E5=A4=A7=E5=B1=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/MicroExhibition/index.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue
index d1c6cd1..d787082 100644
--- a/src/views/MicroExhibition/index.vue
+++ b/src/views/MicroExhibition/index.vue
@@ -26,15 +26,16 @@
             <div class="center">
                 <div class="ct">
                     <div class="top-item">
-                        <h2>设备总数</h2>
+                        <h2>设备在线</h2>
                         <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
-                            <!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
-                            <h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5>
+                            <div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
+                            <div class="dev-center"></div>
+                            <div class="dev-bottom">{{ store.devnum.all }}</div>
                         </div>
                     </div>
                     <div class="top-item">
                         <h2>网关状态</h2>
-                        <div class="div_p">
+                        <div class="div_p" style="transform: translate(0px, 10px);">
                             <i :class="true
                                 ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
                                 : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
@@ -404,4 +405,20 @@ h2 {
     border-left: 109px solid transparent;
     border-right: 110px solid transparent;
 }
+
+.dev-center {
+  width: 3px;
+  height: 60px;
+  background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
+  background-color: #5067BC;
+  transform: rotate(40deg) translate(7px, -6px);
+}
+.dev-top {
+    transform: translate(-6px, -10px);
+    font-size: 30px;
+}
+.dev-bottom {
+    transform: translate(15px, 15px);
+    font-size: 30px;
+}
 </style>