diff --git a/employee-app/health-monitor/environment/device-detail.html b/employee-app/health-monitor/environment/device-detail.html
index 484b96b..e7262c6 100644
--- a/employee-app/health-monitor/environment/device-detail.html
+++ b/employee-app/health-monitor/environment/device-detail.html
@@ -277,11 +277,11 @@ function genTrend(metricName, period) {
       isAQI: true, yMax: 200, yTicks: [200,150,100,50,0],
       limitUpper: null, limitLower: null,
       levelBands: [
-        {yMin:15,yMax:55,label:'清洁',color:'#13C2C2',opacity:.1},
-        {yMin:55,yMax:105,label:'未污染',color:'#52C41A',opacity:.1},
-        {yMin:105,yMax:135,label:'轻污染',color:'#FAAD14',opacity:.1},
-        {yMin:135,yMax:165,label:'中污染',color:'#FA541C',opacity:.1},
-        {yMin:165,yMax:chartBottom,label:'重污染',color:'#FF4D4F',opacity:.1}
+        {yMin:0,yMax:20,label:'清洁',color:'#13C2C2',opacity:.1},
+        {yMin:21,yMax:50,label:'未污染',color:'#52C41A',opacity:.1},
+        {yMin:51,yMax:100,label:'轻污染',color:'#FAAD14',opacity:.1},
+        {yMin:101,yMax:150,label:'中污染',color:'#FA541C',opacity:.1},
+        {yMin:151,yMax:200,label:'重污染',color:'#FF4D4F',opacity:.1}
       ],
       '24h': {points:[55,42,35,48,65,78,82,75,62,58,52,48]},
       '7d':  {barData:[
@@ -480,6 +480,18 @@ function renderTrend(metricName, period) {
   var yMax = cfg.yMax;
   var yTicks = cfg.yTicks;
 
+  // AQI 等级背景（先渲染，作为底层）
+  var levelBandsHtml = '';
+  if (cfg.isAQI && cfg.levelBands) {
+    for (var i = 0; i < cfg.levelBands.length; i++) {
+      var b = cfg.levelBands[i];
+      var bandY1 = valToY(b.yMax, yMax); // yMin value in data → SVG y
+      var bandY2 = valToY(b.yMin, yMax); // yMax value in data → SVG y (inverted)
+      levelBandsHtml += '<rect x="' + chartLeft + '" y="' + bandY1 + '" width="' + chartWidth + '" height="' + (bandY2 - bandY1) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
+      levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (bandY1 + (bandY2 - bandY1) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
+    }
+  }
+
   // 网格线
   var gridLines = '';
   for (var i = 0; i < yTicks.length; i++) {
@@ -497,16 +509,6 @@ function renderTrend(metricName, period) {
     }
   }
 
-  // AQI 等级背景
-  var levelBandsHtml = '';
-  if (cfg.isAQI && cfg.levelBands) {
-    for (var i = 0; i < cfg.levelBands.length; i++) {
-      var b = cfg.levelBands[i];
-      levelBandsHtml += '<rect x="' + chartLeft + '" y="' + b.yMin + '" width="' + chartWidth + '" height="' + (b.yMax - b.yMin) + '" fill="' + b.color + '" opacity="' + b.opacity + '"/>';
-      levelBandsHtml += '<text x="' + (chartLeft + 6) + '" y="' + (b.yMin + (b.yMax - b.yMin) / 2 + 4) + '" fill="' + b.color + '" font-size="9" font-weight="500">' + b.label + '</text>';
-    }
-  }
-
   // 超标区域和虚线
   var limitHtml = '';
   if (cfg.limitUpper) {
@@ -547,9 +549,10 @@ function renderTrend(metricName, period) {
     '<stop offset="0%" stop-color="#1aad8d" stop-opacity="0.25"/>' +
     '<stop offset="100%" stop-color="#1aad8d" stop-opacity="0.02"/>' +
     '</linearGradient></defs>' +
+    levelBandsHtml +
     gridLines + xLabelsHtml +
     '<line x1="' + chartLeft + '" y1="' + chartBottom + '" x2="' + chartRight + '" y2="' + chartBottom + '" class="chart-x-axis"/>' +
-    levelBandsHtml + limitHtml +
+    limitHtml +
     '<path class="chart-area-fill" d="' + pathD + '"/>' +
     '<polyline class="chart-line" points="' + polylinePoints.trim() + '"/>' +
     dotsHtml + '</svg>';