调整登录背景

添加首页设备统计

src/layout/components/DeviceStat.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="device_stat">
+        <span>总设备数：{{ device_total }} 台</span>
+        <span>在线率：{{ online_rate }} %</span>
+        <span style="color: rgb(36, 45, 54);font-size: 18px;font-weight: bold;">|</span>
+        <span><img src="/images/camer.png">在线：{{ device_online }}</span>
+        <span><img src="/images/camer.png">离线：{{ device_offline }}</span>
+        <span><img src="/images/camer.png">告警：{{ device_alarm }}</span>
+        <span><img src="/images/camer.png">故障：{{ device_exption }}</span>
+    </div>
+</template>
+<script setup>
+const device_total=ref(10)
+const online_rate=ref(90)
+const device_online = ref(9)
+const device_offline = ref(1)
+const device_alarm = ref(1)
+const device_exption = ref(0)
+</script>
+<style>
+.device_stat{
+    position: fixed;
+    right: 50px;
+    top: 0;
+    height: 60px;
+    line-height: 60px;
+    display: flex;
+    color: #fff;
+    z-index: 10;
+    font-size: 12px;
+    span{
+        margin-right: 10px;
+        img{
+            margin-right: 2px;
+            opacity: 0.4;
+            vertical-align: sub;
+        }
+    }
+}
+</style>

src/layout/components/index.js

@@ -2,3 +2,4 @@ export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
 export { default as TagsView } from './TagsView/index.vue'
+export { default as DeviceStat } from './DeviceStat'

src/layout/index.vue

@@ -6,6 +6,7 @@
         <navbar @setLayout="setLayout" />
       </div>
       <app-main />
+      <device-stat></device-stat>
       <settings ref="settingRef" />
     </div>
   </div>
@@ -14,7 +15,7 @@
 <script setup>
 import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
+import { AppMain, Navbar, Settings, TagsView,DeviceStat } from './components'
 import defaultSettings from '@/settings'
 
 import useAppStore from '@/store/modules/app'

src/views/index.vue

@@ -806,6 +806,7 @@ onMounted(() => {
   width: 380px;
   height: 260px;
   border-radius: 5px;
+  background: #0000003b;
   .camername{
         height: 26px;
         width: auto;

src/views/login.vue

@@ -168,7 +168,8 @@ getCookie();
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("/images/login_bg.png");
+  background-color: #08121c;
   background-size: cover;
 }
 .title {