调整首页看板

src/views/Home/Index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { DESIGN_HEIGHT, DESIGN_WIDTH } from '@/utils/kb'
 import hsummary from './kb/hsummary.vue'
-import hmttr from './kb/hmttr.vue'
 import hdeviceType from './kb/hdeviceType.vue'
 import dayfinish from './kb/dayfinish.vue'
 import hsafe from './kb/hsafe.vue'
@@ -76,11 +75,10 @@ onUnmounted(() => {
         <div class="mt-3 px-5">
           <hsummary class="kb-stage-card kb-stage-card--1" />
           <div class="w-full h-96 grid grid-rows-2 grid-cols-3 gap-3 mt-3">
-            <hmttr class="kb-stage-card kb-stage-card--2" />
-
+            <!-- <hmttr class="kb-stage-card kb-stage-card--2" /> -->
+            <hsafe class="row-span-2 kb-stage-card kb-stage-card--3" />
             <hdeviceType class="row-span-2 kb-stage-card kb-stage-card--4" />
             <dayfinish class="row-span-2 kb-stage-card kb-stage-card--5" />
-            <hsafe class="kb-stage-card kb-stage-card--3" />
           </div>
           <div class="w-full h-107 grid grid-cols-2 gap-3 mt-3">
             <hdeviceStatus class="kb-stage-card kb-stage-card--6" />

src/views/Home/kb/hsafe.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 
 <template>
   <div class="panel flex flex-col">
-    <div class="panel-title h-10">
+    <div class="panel-title h-12">
       <div class="icon-decorator">
         <span></span>
         <span></span>
@@ -50,20 +50,23 @@ onMounted(() => {
       "
     >
       <div class="metric-panel__orbit metric-panel__orbit--outer"></div>
+      <div class="metric-panel__orbit metric-panel__orbit--inner"></div>
 
       <div class="metric-panel__top">
         <span class="metric-panel__tag">ALERT</span>
       </div>
 
-      <div class="metric-panel__center">
-        <div class="metric-panel__headline">当前预警物料</div>
-        <div class="metric-panel__value-row">
-          <CountTo
-            class="metric-panel__value"
-            :start-val="0"
-            :end-val="safeCount"
-            :duration="1200"
-          />
+      <div class="metric-panel__body">
+        <div class="metric-panel__center">
+          <div class="metric-panel__headline">当前预警物料</div>
+          <div class="metric-panel__value-row">
+            <CountTo
+              class="metric-panel__value"
+              :start-val="0"
+              :end-val="safeCount"
+              :duration="1200"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -75,39 +78,67 @@ onMounted(() => {
 
 .metric-panel {
   position: relative;
-  display: flex;
-  padding: 12px 12px 9px;
+  display: grid;
+  padding: 16px 14px 20px;
   overflow: hidden;
-  flex-direction: column;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
+}
+
+.metric-panel::before {
+  position: absolute;
+  inset: 54px 18px 16px;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at center,
+    rgb(255 255 255 / 20%) 0%,
+    rgb(255 255 255 / 0%) 72%
+  );
+  content: '';
 }
 
 .metric-panel__orbit {
   position: absolute;
+  top: 56%;
   left: 50%;
   border: 1px solid var(--metric-border);
   border-radius: 999px;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
 }
 
 .metric-panel__orbit--outer {
-  top: 20px;
-  width: 180px;
-  height: 180px;
+  width: 240px;
+  height: 240px;
+}
+
+.metric-panel__orbit--inner {
+  width: 188px;
+  height: 188px;
+  border-color: rgb(255 255 255 / 42%);
+  opacity: 0.55;
 }
 
 .metric-panel__top,
+.metric-panel__body,
 .metric-panel__center {
   position: relative;
   z-index: 1;
 }
 
+.metric-panel__body {
+  display: flex;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+}
+
 .metric-panel__tag {
   display: inline-flex;
-  padding: 4px 10px;
+  padding: 5px 12px;
   font-family: YouSheBiaoTiHei, sans-serif;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1;
-  letter-spacing: 1px;
+  letter-spacing: 2px;
   color: var(--metric-accent);
   background: var(--metric-tag-bg);
   border: 1px solid rgb(255 255 255 / 72%);
@@ -117,7 +148,7 @@ onMounted(() => {
 
 .metric-panel__center {
   display: flex;
-  margin: auto 0;
+  width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -125,24 +156,25 @@ onMounted(() => {
 }
 
 .metric-panel__headline {
-  font-size: 16px;
+  font-size: 22px;
   font-weight: 600;
-  letter-spacing: 1px;
+  letter-spacing: 2px;
   color: #4f678a;
+  text-shadow: 0 4px 12px rgb(255 255 255 / 35%);
 }
 
 .metric-panel__value-row {
   display: flex;
-  margin-top: 10px;
+  margin-top: 18px;
   align-items: flex-end;
   justify-content: center;
 }
 
 .metric-panel__value {
   font-family: YouSheBiaoTiHei, sans-serif;
-  font-size: 56px;
-  line-height: 0.92;
-  letter-spacing: 1px;
+  font-size: 90px;
+  line-height: 0.88;
+  letter-spacing: 2px;
   color: var(--metric-accent);
   text-shadow: 0 10px 18px var(--metric-glow);
 }