diff --git a/h5/css/style.css b/h5/css/style.css
index 871b939..c3a4916 100644
--- a/h5/css/style.css
+++ b/h5/css/style.css
@@ -812,3 +812,159 @@ textarea.form-input {
   background-color: var(--color-border);
   margin: 0 16px;
 }
+
+/* ========================================
+   设备详情页
+   ======================================== */
+.device-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.device-info-left {
+  display: flex;
+  gap: 12px;
+}
+
+.device-info-icon {
+  font-size: 40px;
+}
+
+.device-info-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.device-info-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.device-info-model {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.device-info-location {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.device-info-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.device-status-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.device-status-badge.online {
+  background-color: rgba(34, 197, 94, 0.12);
+  color: var(--color-online);
+}
+
+.device-status-badge.offline {
+  background-color: rgba(156, 163, 175, 0.12);
+  color: var(--color-offline);
+}
+
+.device-last-seen {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+/* ========================================
+   数据网格
+   ======================================== */
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.data-item {
+  background-color: var(--color-bg);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.data-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.data-unit {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  margin-left: 2px;
+}
+
+/* ========================================
+   告警横幅
+   ======================================== */
+.alert-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.alert-banner.hidden {
+  display: none;
+}
+
+.alert-banner.alert-danger {
+  background-color: rgba(249, 115, 22, 0.12);
+  color: var(--color-danger);
+}
+
+.alert-banner.alert-warning {
+  background-color: rgba(234, 179, 8, 0.12);
+  color: var(--color-warning);
+}
+
+.alert-banner-icon {
+  font-size: 16px;
+}
+
+.alert-banner-msg {
+  flex: 1;
+}
+
+/* ========================================
+   刷新栏
+   ======================================== */
+.refresh-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.refresh-time {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
diff --git a/h5/device.html b/h5/device.html
new file mode 100644
index 0000000..7b2e632
--- /dev/null
+++ b/h5/device.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>设备详情</title>
+  <link rel="stylesheet" href="css/variables.css">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="app">
+    <!-- 顶栏 -->
+    <header class="top-bar">
+      <a href="devices.html" class="top-bar-back">‹</a>
+      <h1 class="top-bar-title" id="pageTitle">设备详情</h1>
+      <span class="top-bar-empty"></span>
+    </header>
+
+    <!-- 页面内容 -->
+    <div class="page-content">
+      <!-- 基本信息卡片 -->
+      <div class="card" id="infoCard">
+        <div class="device-info">
+          <div class="device-info-left">
+            <span class="device-info-icon" id="deviceIcon">🏗️</span>
+            <div class="device-info-text">
+              <div class="device-info-name" id="deviceName">加载中...</div>
+              <div class="device-info-model" id="deviceModel">-</div>
+              <div class="device-info-location" id="deviceLocation">-</div>
+            </div>
+          </div>
+          <div class="device-info-right">
+            <span class="device-status-badge" id="statusBadge">-</span>
+            <div class="device-last-seen" id="lastSeen">-</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 告警Banner -->
+      <div class="alert-banner hidden" id="alertBanner">
+        <span class="alert-banner-icon" id="alertIcon">⚠️</span>
+        <span class="alert-banner-msg" id="alertMsg"></span>
+      </div>
+
+      <!-- 实时数据卡片 -->
+      <div class="card">
+        <div class="card-title">实时数据</div>
+        <div class="data-grid" id="dataGrid"></div>
+      </div>
+
+      <!-- 刷新栏 -->
+      <div class="refresh-bar">
+        <span class="refresh-time" id="refreshTime">-</span>
+        <button class="btn btn-secondary btn-sm" id="refreshBtn">手动刷新</button>
+      </div>
+    </div>
+
+    <!-- 底部Tab栏 -->
+    <nav class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span class="tab-icon">🏠</span>
+        <span class="tab-label">首页</span>
+      </a>
+      <a href="devices.html" class="tab-item active">
+        <span class="tab-icon">📋</span>
+        <span class="tab-label">设备</span>
+      </a>
+      <a href="capture.html" class="tab-item">
+        <span class="tab-icon">📷</span>
+        <span class="tab-label">随手拍</span>
+      </a>
+      <a href="log.html" class="tab-item">
+        <span class="tab-icon">📝</span>
+        <span class="tab-label">日志</span>
+      </a>
+    </nav>
+  </div>
+
+  <script src="js/variables.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    requireAuth();
+
+    // 塔吊数据项配置
+    const TOWER_CRANE_FIELDS = [
+      { key: 'weight', label: '载重', unit: 't' },
+      { key: 'windSpeed', label: '风速', unit: 'm/s' },
+      { key: 'range', label: '幅度', unit: 'm' },
+      { key: 'height', label: '起升高度', unit: 'm' },
+      { key: 'angle', label: '回转角度', unit: '°' },
+      { key: 'momentPercent', label: '力矩百分比', unit: '%' }
+    ];
+
+    // 升降机数据项配置
+    const ELEVATOR_FIELDS = [
+      { key: 'realtimeWeight', label: '载重', unit: 't' },
+      { key: 'realtimeSpeed', label: '运行速度', unit: 'm/s' },
+      { key: 'realtimeHeight', label: '当前楼层', unit: '层' },
+      { key: 'realtimeDipX', label: 'X轴倾角', unit: '°' },
+      { key: 'realtimeDipY', label: 'Y轴倾角', unit: '°' },
+      { key: 'outDoorStatus', label: '门状态', unit: '' }
+    ];
+
+    const DOOR_STATUS_MAP = { '0': '关闭', '1': '打开' };
+
+    const id = getQueryParam('id');
+    const deviceId = id; // alias for clarity
+    if (!id) location.href = 'devices.html';
+    let deviceInfo = null;
+
+    function renderRealtime(data, type) {
+      const dataGrid = document.getElementById('dataGrid');
+      const alertBanner = document.getElementById('alertBanner');
+      const fields = type === 'tower_crane' ? TOWER_CRANE_FIELDS : ELEVATOR_FIELDS;
+
+      dataGrid.innerHTML = fields.map(f => {
+        let val = f.key === 'outDoorStatus' ? DOOR_STATUS_MAP[data[f.key]] || data[f.key] : data[f.key];
+        return `<div class="data-item"><div class="data-label">${f.label}</div><div class="data-value">${val}<span class="data-unit">${f.unit}</span></div></div>`;
+      }).join('');
+
+      if (data.alert && data.alertMsg) {
+        alertBanner.classList.remove('hidden');
+        alertBanner.className = 'alert-banner alert-' + data.alert;
+        alertBanner.querySelector('.alert-banner-icon').textContent = data.alert === 'danger' ? '🔴' : '🟡';
+        alertBanner.querySelector('.alert-banner-msg').textContent = data.alertMsg;
+      } else {
+        alertBanner.classList.add('hidden');
+      }
+      document.getElementById('refreshTime').textContent = '刷新时间: ' + formatTime(new Date().toLocaleString('zh-CN'));
+    }
+
+    async function loadRealtime() {
+      const [devRes, rtRes] = await Promise.all([apiGetDevices(), apiGetDeviceRealtime(id)]);
+      if (!deviceInfo) {
+        deviceInfo = devRes.data.items.find(d => d.id === id);
+        if (!deviceInfo) { location.href = 'devices.html'; return; }
+        document.getElementById('pageTitle').textContent = deviceInfo.name;
+        document.getElementById('deviceIcon').textContent = getDeviceIcon(deviceInfo.type);
+        document.getElementById('deviceName').textContent = deviceInfo.name;
+        document.getElementById('deviceModel').textContent = deviceInfo.model;
+        document.getElementById('deviceLocation').textContent = '📍 ' + deviceInfo.location;
+        document.getElementById('statusBadge').textContent = getStatusText(deviceInfo.status);
+        document.getElementById('statusBadge').className = 'device-status-badge ' + getStatusClass(deviceInfo.status);
+        document.getElementById('lastSeen').textContent = '最后在线: ' + formatTime(deviceInfo.lastSeen);
+      }
+      renderRealtime(rtRes.data, deviceInfo.type);
+    }
+
+    document.getElementById('refreshBtn').addEventListener('click', loadRealtime);
+    loadRealtime();
+    setInterval(loadRealtime, 30000);
+  </script>
+</body>
+</html>
