修改看板

src/views/board/index.vue

@@ -1,6 +1,43 @@
 <template>
   <main class="board-page">
-    <img class="board-device" src="@/assets/board/index/device.png" alt="" />
+    <section class="board-device-stage">
+      <img class="board-device" src="@/assets/board/index/device.png" alt="" />
+    </section>
+
+    <section class="board-chart-panel" aria-label="数据图表">
+      <article class="board-card">
+        <header class="board-card-title">实时数据</header>
+        <div class="bar-chart" aria-hidden="true">
+          <span style="--value: 56%"></span>
+          <span style="--value: 78%"></span>
+          <span style="--value: 42%"></span>
+          <span style="--value: 88%"></span>
+          <span style="--value: 64%"></span>
+          <span style="--value: 72%"></span>
+          <span style="--value: 50%"></span>
+          <span style="--value: 82%"></span>
+        </div>
+      </article>
+
+      <article class="board-card">
+        <header class="board-card-title">设备数据</header>
+        <svg class="line-chart" viewBox="0 0 420 120" role="img" aria-label="设备数据曲线图" preserveAspectRatio="none">
+          <defs>
+            <linearGradient id="deviceLine" x1="0" x2="1" y1="0" y2="0">
+              <stop offset="0%" stop-color="#61f1ff" />
+              <stop offset="100%" stop-color="#f9d56f" />
+            </linearGradient>
+            <linearGradient id="deviceArea" x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0%" stop-color="#61f1ff" stop-opacity="0.28" />
+              <stop offset="100%" stop-color="#61f1ff" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path class="line-chart-grid" d="M0 28H420M0 58H420M0 88H420" />
+          <path class="line-chart-area" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56 L420 120 L0 120 Z" />
+          <path class="line-chart-path" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56" />
+        </svg>
+      </article>
+    </section>
   </main>
 </template>
 
@@ -10,16 +47,123 @@
   inset: 0;
   z-index: 1002;
   display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: hidden;
+  padding: 24px 32px 28px;
+  background: url('@/assets/board/index/bg.jpg') center / cover no-repeat;
+}
+
+.board-device-stage {
+  display: flex;
+  flex: 1;
+  min-height: 0;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
-  background: url('@/assets/board/index/bg.jpg') center / cover no-repeat;
+  width: 100%;
 }
 
 .board-device {
   display: block;
   width: 95%;
-  max-height: 95vh;
+  max-height: 100%;
   object-fit: contain;
+  transform: translateY(28px);
+}
+
+.board-chart-panel {
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+  width: calc(100vw - 64px);
+  margin: 0 auto;
+}
+
+.board-card {
+  height: clamp(180px, 22vh, 280px);
+  padding: 16px 20px 18px;
+  overflow: hidden;
+  border: 1px solid rgb(130 231 255 / 28%);
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgb(8 29 47 / 62%), rgb(4 18 31 / 38%));
+  box-shadow: 0 18px 46px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 12%);
+  backdrop-filter: blur(8px);
+}
+
+.board-card-title {
+  color: rgb(226 248 255 / 94%);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.bar-chart {
+  display: flex;
+  height: calc(100% - 20px);
+  align-items: end;
+  gap: 16px;
+  padding: 14px 8px 0;
+  border-bottom: 1px solid rgb(185 240 255 / 18%);
+}
+
+.bar-chart span {
+  flex: 1;
+  min-width: 12px;
+  height: var(--value);
+  border-radius: 4px 4px 0 0;
+  background: linear-gradient(180deg, #f9d56f 0%, #52e0ff 55%, rgb(82 224 255 / 35%) 100%);
+  box-shadow: 0 0 18px rgb(82 224 255 / 28%);
+}
+
+.line-chart {
+  width: 100%;
+  height: calc(100% - 26px);
+  margin-top: 8px;
+}
+
+.line-chart-grid {
+  fill: none;
+  stroke: rgb(185 240 255 / 12%);
+  stroke-width: 1;
+}
+
+.line-chart-area {
+  fill: url('#deviceArea');
+}
+
+.line-chart-path {
+  fill: none;
+  stroke: url('#deviceLine');
+  stroke-linecap: round;
+  stroke-width: 4;
+  filter: drop-shadow(0 0 8px rgb(97 241 255 / 52%));
+}
+
+@media (max-width: 768px) {
+  .board-page {
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .board-chart-panel {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    width: calc(100vw - 32px);
+  }
+
+  .board-card {
+    height: clamp(140px, 20vh, 210px);
+    padding: 12px 14px;
+  }
+
+  .board-device {
+    transform: translateY(14px);
+  }
+
+  .bar-chart,
+  .line-chart {
+    height: calc(100% - 24px);
+  }
 }
 </style>