diff --git a/h5/index.html b/h5/index.html
index d99107a..f894bd5 100644
--- a/h5/index.html
+++ b/h5/index.html
@@ -4,87 +4,111 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>郑州智慧工地</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.min.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <div class="page">
-    <!-- 顶栏 -->
-    <header class="header">
-      <div class="header-title">
-        <span>郑州智慧工地</span>
-      </div>
-      <a href="profile.html" class="header-right">
-        <span>👤</span>
+    <!-- 顶栏 page-hd -->
+    <header class="page-hd">
+      <div class="page-hd__title">郑州智慧工地</div>
+      <a href="profile.html" class="page-hd__user">
+        <i class="ri-user-line"></i>
       </a>
     </header>
 
-    <div class="page-content">
-      <!-- 设备概况卡片 -->
-      <div class="card">
-        <div class="card-title">设备概况</div>
-        <div class="stat-grid">
-          <div class="stat-card">
-            <div class="stat-label">塔吊统计</div>
-            <div class="stat-value" id="tcCount">--</div>
-            <div class="stat-sub">在线 <span id="tcOnline">--</span> 台</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-label">升降机统计</div>
-            <div class="stat-value" id="elCount">--</div>
-            <div class="stat-sub">在线 <span id="elOnline">--</span> 台</div>
+    <div class="page-bd">
+      <!-- 设备概况卡片 weui-panel -->
+      <div class="weui-panel">
+        <div class="weui-panel__hd">设备概况</div>
+        <div class="weui-panel__bd">
+          <div class="stat-grid">
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="ri-hammer-line"></i>
+              </div>
+              <div class="stat-value" id="tcCount">--</div>
+              <div class="stat-sub">在线 <span id="tcOnline">--</span> 台</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-icon">
+                <i class="ri-arrow-up-down-line"></i>
+              </div>
+              <div class="stat-value" id="elCount">--</div>
+              <div class="stat-sub">在线 <span id="elOnline">--</span> 台</div>
+            </div>
           </div>
         </div>
       </div>
 
-      <!-- 今日预警卡片 -->
-      <div class="card">
-        <div class="card-title">今日预警</div>
-        <div class="stat-grid">
-          <div class="stat-card" style="border-left: 3px solid #f97316;">
-            <div class="stat-label">危险</div>
-            <div class="stat-value" id="dangerCount" style="color: #f97316;">--</div>
-          </div>
-          <div class="stat-card" style="border-left: 3px solid #eab308;">
-            <div class="stat-label">警告</div>
-            <div class="stat-value" id="warningCount" style="color: #eab308;">--</div>
+      <!-- 今日预警卡片 weui-panel -->
+      <div class="weui-panel">
+        <div class="weui-panel__hd">今日预警</div>
+        <div class="weui-panel__bd">
+          <div class="stat-grid">
+            <div class="stat-card stat-card--orange">
+              <div class="stat-icon stat-icon--orange">
+                <i class="ri-error-warning-line"></i>
+              </div>
+              <div class="stat-value" id="dangerCount">--</div>
+              <div class="stat-sub">危险</div>
+            </div>
+            <div class="stat-card stat-card--yellow">
+              <div class="stat-icon stat-icon--yellow">
+                <i class="ri-alert-line"></i>
+              </div>
+              <div class="stat-value" id="warningCount">--</div>
+              <div class="stat-sub">警告</div>
+            </div>
           </div>
         </div>
       </div>
 
-      <!-- 最新预警卡片 -->
-      <div class="card">
-        <div class="card-header">
-          <div class="card-title" style="margin-bottom: 0; padding-bottom: 0; border-bottom: none;">最新预警</div>
-          <a href="alerts.html" class="card-link">查看全部 ›</a>
+      <!-- 最新预警列表 weui-panel -->
+      <div class="weui-panel">
+        <div class="weui-panel__hd">
+          <span>最新预警</span>
+          <a href="alerts.html" class="panel-more">查看全部 <i class="ri-arrow-right-s-line"></i></a>
+        </div>
+        <div class="weui-panel__bd">
+          <div id="latestAlerts" class="alert-list"></div>
         </div>
-        <div id="latestAlerts"></div>
       </div>
     </div>
 
-    <!-- 底部Tab栏 -->
-    <nav class="tab-bar">
-      <a href="index.html" class="tab-item active">
-        <span>🏠</span>
-        <span>首页</span>
+    <!-- 底部Tabbar weui-tabbar -->
+    <div class="weui-tabbar">
+      <a href="index.html" class="weui-tabbar__item weui-bar__item_on">
+        <div class="weui-tabbar__icon">
+          <i class="ri-home-fill"></i>
+        </div>
+        <p class="weui-tabbar__label">首页</p>
       </a>
-      <a href="devices.html" class="tab-item">
-        <span>🏗️</span>
-        <span>设备</span>
+      <a href="devices.html" class="weui-tabbar__item">
+        <div class="weui-tabbar__icon">
+          <i class="ri-archive-line"></i>
+        </div>
+        <p class="weui-tabbar__label">设备</p>
       </a>
-      <a href="report.html" class="tab-item">
-        <span>📷</span>
-        <span>随手拍</span>
+      <a href="report.html" class="weui-tabbar__item">
+        <div class="weui-tabbar__icon">
+          <i class="ri-camera-line"></i>
+        </div>
+        <p class="weui-tabbar__label">随手拍</p>
       </a>
-      <a href="logs.html" class="tab-item">
-        <span>📋</span>
-        <span>日志</span>
+      <a href="logs.html" class="weui-tabbar__item">
+        <div class="weui-tabbar__icon">
+          <i class="ri-file-list-3-line"></i>
+        </div>
+        <p class="weui-tabbar__label">日志</p>
       </a>
-    </nav>
+    </div>
   </div>
 
   <script src="js/mock.js"></script>
-  <script src="js/app.js"></script>
   <script src="js/api.js"></script>
+  <script src="js/app.js"></script>
   <script>
     if (!requireAuth()) {}
 
@@ -111,14 +135,17 @@
       const latestAlertsEl = document.getElementById('latestAlerts');
       const latest3 = alerts.slice(0, 3);
       latestAlertsEl.innerHTML = latest3.map(alert => {
-        const icon = getAlertIcon(alert.level);
+        const levelClass = alert.level === 'danger' ? 'danger' : (alert.level === 'warning' ? 'warning' : 'handled');
+        const iconClass = alert.level === 'danger' ? 'ri-error-warning-line' : (alert.level === 'warning' ? 'ri-alert-line' : 'ri-checkbox-circle-line');
         const time = formatTime(alert.createdAt);
         return `
           <a href="alert.html?id=${alert.id}" class="alert-item">
-            <div class="alert-icon ${alert.level}">${icon}</div>
-            <div class="alert-content">
-              <div class="alert-title">${alert.message}</div>
-              <div class="alert-desc">${alert.deviceName} · ${time}</div>
+            <div class="alert-icon-wrap ${levelClass}">
+              <i class="${iconClass}"></i>
+            </div>
+            <div class="alert-body">
+              <div class="alert-title">${alert.message.length > 30 ? alert.message.substring(0, 30) + '...' : alert.message}</div>
+              <div class="alert-meta">${alert.deviceName} · ${time}</div>
             </div>
           </a>
         `;
