diff --git a/ruoyi-admin/src/main/resources/static/img/card.png b/ruoyi-admin/src/main/resources/static/img/card.png
index 6a9a41e..12ca16e 100644
Binary files a/ruoyi-admin/src/main/resources/static/img/card.png and b/ruoyi-admin/src/main/resources/static/img/card.png differ
diff --git a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
index 5e69328..118fcd0 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
@@ -9,22 +9,68 @@
 
 <style>
     body.gray-bg {
-        background: #000;
+        background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
+        color: #fff;
+    }
+
+    .ui-layout-center,
+    .container-div,
+    .search-collapse {
+        background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
         color: #fff;
     }
 
     .ui-layout-west,
-    .ui-layout-center,
-    .container-div,
-    .search-collapse,
-    .box,
-    .box-main,
-    .box-header,
-    .ui-layout-content {
+    .ui-layout-west .box,
+    .ui-layout-west .box-main,
+    .ui-layout-west .box-header,
+    .ui-layout-west .ui-layout-content {
         background: #012447;
         color: #fff;
     }
 
+    .monitor-header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        box-sizing: border-box;
+        height: 3.2vw;
+        min-height: 44px;
+        margin: 0 0 0.8vw;
+        padding: 0 1.4vw;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        background: rgba(1, 36, 71, 0.42);
+        color: #fff;
+        box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.12);
+    }
+
+    .monitor-header::after {
+        content: "";
+        position: absolute;
+        left: 1.2vw;
+        right: 1.2vw;
+        bottom: -1px;
+        height: 2px;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
+        box-shadow: 0 0 0.8vw rgba(255, 255, 255, 0.75);
+    }
+
+    .monitor-header-title {
+        font-size: 1.35vw;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .monitor-header-time {
+        font-size: 1vw;
+        line-height: 1;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.92);
+    }
+
     .box {
         border-color: #333;
     }
@@ -180,6 +226,11 @@
 </div>
 
 <div class="ui-layout-center">
+    <div class="monitor-header">
+        <div class="monitor-header-title">实时监控平台</div>
+        <div class="monitor-header-time" id="currentTime"></div>
+    </div>
+
     <div class="container-div">
         <div class="row">
             <div class="col-sm-12 search-collapse">
@@ -209,6 +260,8 @@
             panehHidden = true;
         }
         $('body').layout({initClosed: panehHidden, west__size: 245});
+        updateHeaderTime();
+        setInterval(updateHeaderTime, 1000);
         queryDeptTree();
     });
 
@@ -218,6 +271,21 @@
         return (value === null || value === undefined || value === "") ? "-" : value;
     }
 
+    function padTime(value) {
+        return value < 10 ? "0" + value : value;
+    }
+
+    function updateHeaderTime() {
+        var now = new Date();
+        var text = now.getFullYear() + "-"
+            + padTime(now.getMonth() + 1) + "-"
+            + padTime(now.getDate()) + " "
+            + padTime(now.getHours()) + ":"
+            + padTime(now.getMinutes()) + ":"
+            + padTime(now.getSeconds());
+        $("#currentTime").text(text);
+    }
+
     function queryDeptTree() {
         var url = ctx + "system/Monitor/treeData?monitorType=" + 20;
         var options = {
diff --git a/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html b/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
index 21f578c..b556b09 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TempertureData/DistributionCabinetMonitor.html
@@ -9,22 +9,68 @@
 
 <style>
     body.gray-bg {
-        background: #000;
+        background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
+        color: #fff;
+    }
+
+    .ui-layout-center,
+    .container-div,
+    .search-collapse {
+        background: linear-gradient(90deg, #365280 0%, #1B4CAF 50%, #202845 100%);
         color: #fff;
     }
 
     .ui-layout-west,
-    .ui-layout-center,
-    .container-div,
-    .search-collapse,
-    .box,
-    .box-main,
-    .box-header,
-    .ui-layout-content {
+    .ui-layout-west .box,
+    .ui-layout-west .box-main,
+    .ui-layout-west .box-header,
+    .ui-layout-west .ui-layout-content {
         background: #012447;
         color: #fff;
     }
 
+    .monitor-header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        box-sizing: border-box;
+        height: 3.2vw;
+        min-height: 44px;
+        margin: 0 0 0.8vw;
+        padding: 0 1.4vw;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        background: rgba(1, 36, 71, 0.42);
+        color: #fff;
+        box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.12);
+    }
+
+    .monitor-header::after {
+        content: "";
+        position: absolute;
+        left: 1.2vw;
+        right: 1.2vw;
+        bottom: -1px;
+        height: 2px;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
+        box-shadow: 0 0 0.8vw rgba(255, 255, 255, 0.75);
+    }
+
+    .monitor-header-title {
+        font-size: 1.35vw;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .monitor-header-time {
+        font-size: 1vw;
+        line-height: 1;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.92);
+    }
+
     .box {
         border-color: #333;
     }
@@ -60,8 +106,10 @@
     }
 
     .border {
-        min-height: 10.5vw;
+        min-height: 11.5vw;
         border: 0;
+        box-shadow: none;
+        filter: none;
         background-color: transparent;
         background-position: center;
         background-repeat: no-repeat;
@@ -100,6 +148,7 @@
         display: flex;
         align-items: center;
         gap: 0.65vw;
+        min-height: 6.6vw;
     }
 
     .chartDiv .card-image {
@@ -119,6 +168,8 @@
     .chartDiv .card-info {
         flex: 1;
         min-width: 0;
+        min-height: 7vw;
+        position: relative;
     }
 
     .chartDiv .mileage {
@@ -145,6 +196,59 @@
         text-overflow: ellipsis;
     }
 
+    .chartDiv .temperature-min,
+    .chartDiv .temperature-max {
+        position: absolute;
+        right: 0;
+        font-size: 0.75vw;
+        line-height: 1.1vw;
+        color: #d9d9d9;
+        white-space: nowrap;
+    }
+
+    .chartDiv .temperature-min {
+        top: 0;
+    }
+
+    .chartDiv .temperature-max {
+        bottom: 0;
+    }
+
+    .chartDiv .temperature-average {
+        position: absolute;
+        top: 30%;
+        left: 0%;
+        color: #fff;
+        font-size: 1.8vw;
+        line-height: 2vw;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+
+    .chartDiv .temperature-average .unit {
+        font-size: 0.85vw;
+        margin-left: 0.1vw;
+        font-weight: 400;
+    }
+
+    .chartDiv .temperature-progress {
+        position: absolute;
+        top: calc(56% + 1.25vw);
+        left: 0%;
+        width: 90%;
+        height: 0.42vw;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+        overflow: hidden;
+    }
+
+    .chartDiv .temperature-progress-bar {
+        height: 100%;
+        width: 0;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #f6c343, #ffd86b);
+    }
+
     .chartDiv .mileage .num {
         font-size: 1vw;
         margin: 0 0.1vw;
@@ -180,6 +284,11 @@
 </div>
 
 <div class="ui-layout-center">
+    <div class="monitor-header">
+        <div class="monitor-header-title">实时监控平台</div>
+        <div class="monitor-header-time" id="currentTime"></div>
+    </div>
+
     <div class="container-div">
         <div class="row">
             <div class="col-sm-12 search-collapse">
@@ -206,6 +315,8 @@
             panehHidden = true;
         }
         $('body').layout({initClosed: panehHidden, west__size: 245});
+        updateHeaderTime();
+        setInterval(updateHeaderTime, 1000);
         queryDeptTree();
     });
 
@@ -215,21 +326,56 @@
         return (value === null || value === undefined || value === "") ? "-" : value;
     }
 
+    function padTime(value) {
+        return value < 10 ? "0" + value : value;
+    }
+
+    function updateHeaderTime() {
+        var now = new Date();
+        var text = now.getFullYear() + "-"
+            + padTime(now.getMonth() + 1) + "-"
+            + padTime(now.getDate()) + " "
+            + padTime(now.getHours()) + ":"
+            + padTime(now.getMinutes()) + ":"
+            + padTime(now.getSeconds());
+        $("#currentTime").text(text);
+    }
+
+    function parseTemperature(value) {
+        var num = parseFloat(value);
+        return isNaN(num) ? null : num;
+    }
+
+    function getTemperatureProgress(min, max, avg) {
+        if (min === null || max === null || avg === null) {
+            return 0;
+        }
+        if (max === min) {
+            return 50;
+        }
+        var progress = (avg - min) / (max - min) * 100;
+        return Math.max(0, Math.min(100, progress));
+    }
+
     function renderMonitorCards(data) {
         $("#chartDivs").html("");
         data.forEach(function (v) {
             var cardImg = ctx + "img/card.png";
             var cabinetImg = ctx + "img/dg.png";
+            var minTemperature = parseTemperature(v.humidity);
+            var maxTemperature = parseTemperature(v.illuminance);
+            var avgTemperature = parseTemperature(v.tempreture);
+            var progress = getTemperatureProgress(minTemperature, maxTemperature, avgTemperature);
             var html = ""
                 + "<div class=\"chartDiv border\" style=\"background-image: url('" + cardImg + "');\">"
                 + "<div class=\"title\">" + (v.monitorName || v.monitorId || "-") + "</div>"
                 + "<div class=\"card-body\">"
                 + "<div class=\"card-image\"><img src=\"" + cabinetImg + "\" alt=\"配电柜\"></div>"
                 + "<div class=\"card-info\">"
-                + "<div class=\"time\">" + formatValue(v.collectTime) + "</div>"
-                + "<div class=\"text1\">最低温度：" + formatValue(v.humidity) + "℃</div>"
-                + "<div class=\"text1\">最高温度：" + formatValue(v.illuminance) + "℃</div>"
-                + "<div class=\"text1\">平均温度：" + formatValue(v.tempreture) + "℃</div>"
+                + "<div class=\"temperature-min\">最低温度：" + formatValue(v.humidity) + "℃</div>"
+                + "<div class=\"temperature-average\">" + formatValue(v.tempreture) + "<span class=\"unit\">℃</span></div>"
+                + "<div class=\"temperature-progress\"><div class=\"temperature-progress-bar\" style=\"width: " + progress + "%;\"></div></div>"
+                + "<div class=\"temperature-max\">最高温度：" + formatValue(v.illuminance) + "℃</div>"
                 + "</div>"
                 + "</div>"
                 + "</div>";