9/28

1. 修改登录页面中：星期展示方法
2. 登录页面
3. 首页

src/views/index/compontents/areaDevices.vue

@@ -0,0 +1,98 @@
+<script lang="ts" name="AreaDevices" setup>
+import {ref} from 'vue';
+import {ElProgress} from 'element-plus';
+
+const list = ref([
+  {
+    areaName: '华东区',
+    num: '3002台',
+    percent: 23,
+  },
+  {
+    areaName: '华北区',
+    num: '8002台',
+    percent: 50,
+  },
+])
+</script>
+
+<template>
+  <div class="Box">
+    <div class="NavBox">
+      <div class="TypeNavBox">区域设备分布</div>
+      <div class="subTypeNavBox">共 12,860 台在线设备</div>
+    </div>
+    <div class="ChartBox">
+      <div v-for="(item,index) in list" :key="index" style="margin-bottom: 18px">
+        <div class="flex justify-between progressInfo">
+          <div>{{ item.areaName }}</div>
+          <div class="flex">
+            <div class="num">{{ item.num }}</div>
+            <div class="percent">{{ item.percent }}%</div>
+          </div>
+        </div>
+        <el-progress :percentage="item.percent" :show-text="false"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.Box {
+  padding: 25px;
+  height: 372px;
+  border-radius: 16px 16px 16px 16px;
+  border: 1px solid rgba(238, 240, 243, 1);
+
+  .NavBox {
+    height: 36px;
+    margin-bottom: 20px;
+
+    .TypeNavBox {
+      height: 22px;
+      line-height: 22px;
+      border-radius: 0;
+      background-color: rgba(0, 0, 0, 0);
+      color: rgba(17, 24, 39, 1);
+      font-size: 16px;
+    }
+
+    .subTypeNavBox {
+      height: 16px;
+      line-height: 16px;
+      border-radius: 0;
+      background-color: rgba(0, 0, 0, 0);
+      color: rgba(156, 163, 175, 1);
+      font-size: 12px;
+    }
+  }
+
+  .ChartBox {
+    height: 310px;
+    overflow-y: auto;
+
+    .progressInfo {
+      margin-bottom: 8px;
+
+      .num {
+        height: 16px;
+        line-height: 16px;
+        border-radius: 0;
+        background-color: rgba(0, 0, 0, 0);
+        color: rgba(156, 163, 175, 1);
+        font-size: 13px;
+        text-align: left;
+      }
+
+      .percent {
+        margin-left: 12px;
+        height: 16px;
+        line-height: 16px;
+        background-color: rgba(0, 0, 0, 0);
+        color: rgba(17, 24, 39, 1);
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>