feat 分层架构

2026-08-31 16:17:28 +08:00
parent 08da3b171a
commit 689e10d3b3
8 changed files with 837 additions and 615 deletions
--- a/src/components/home/warning.vue
+++ b/src/components/home/warning.vue
@@ -0,0 +1,120 @@
+<template>
+  <view class="card">
+    <view class="card-header">
+      <text class="card-title">
+        异常警告
+      </text>
+      <text class="card-link">
+        查看全部
+      </text>
+    </view>
+    <view class="card-body">
+      <view class="warning-item">
+        <view class="warning-icon" />
+        <view class="warning-info">
+          <text class="warning-title">
+            钢轮温度过高
+          </text>
+          <text class="warning-desc">
+            徐工XS65H #01 钢轮温度达90°C,超过國值85°C
+          </text>
+        </view>
+        <text class="warning-time">
+          10分钟前
+        </text>
+      </view>
+      <view class="warning-item">
+        <view class="warning-icon warning-rtk" />
+        <view class="warning-info">
+          <text class="warning-title">
+            RTK信号弱
+          </text>
+          <text class="warning-desc">
+            三一SSZ600AC #002 RTK定位精度下降, 请注意
+          </text>
+        </view>
+        <text class="warning-time">
+          10分钟前
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.card {
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.card-link {
+  font-size: 12px;
+  color: #4685FD;
+}
+
+.card-body {
+  padding: 12px 16px;
+}
+
+.warning-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.warning-item:last-child {
+  border-bottom: none;
+}
+
+.warning-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #fff2e8;
+  margin-right: 12px;
+}
+
+.warning-rtk {
+  background-color: #e6f7ff;
+}
+
+.warning-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.warning-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.warning-desc {
+  font-size: 12px;
+  color: #999999;
+}
+
+.warning-time {
+  font-size: 12px;
+  color: #cccccc;
+}
+</style>