diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
index e668b83..a68d78d 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
@@ -8,23 +8,28 @@ export const option = {
   header: ['所属企业', '设备类型', '设备名称'],
   headerTextColor: '#ffffff',
   textColor: '#ffffff',
-  headerBackgroundColor: '#1A385A',
-  itemBackgroundColor: '#0F233E',
+  headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
+  itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
   timeColor: '#FF4D4F',
   headerHeight: 40,
   itemHeight: 35,
   fontSize: 14,
   title: '设备实时在线概况',
-  titleSize: 18,
+  titleSize: 20,
   titleColor: '#ffffff',
   iconColor: '#00E5FF',
   onlineRate: 75,
   onlineDevice: 23,
-  totalDevice: 100
+  totalDevice: 100,
+  headerBgColor1: '#0059c9',
+  headerBgColor2: '#003a8c',
+  legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
+  progressColor: '#00E5FF',
+  progressBgColor: '#1A385A'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = DeviceStatusConfig.key
   public chartConfig = DeviceStatusConfig
   public option = option
-}
\ No newline at end of file
+}
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
index 7d85ff8..7acd301 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
@@ -1,29 +1,50 @@
 <template>
   <div class="go-device-status">
     <div class="header">
-      <div class="title">
-        <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+      <div class="header-left">
+        <div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
+          <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
+        </div>
+        <div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
+          <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+        </div>
+      </div>
+      <div class="header-right">
+        <div class="legend">
+          <div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
+        </div>
+        <div class="device-count">
+          <span class="online">{{ option.onlineDevice }}</span>
+          <span class="total">/ {{ option.totalDevice }}</span>
+        </div>
       </div>
     </div>
     <div class="status-section">
       <div class="online-rate">
-        <div class="rate-circle">
-          <span class="rate-text">{{ option.onlineRate }}%</span>
+        <div class="rate-circle-bg">
+          <div
+            class="rate-circle"
+            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
+          >
+            <div class="rate-text-wrapper">
+              <span class="rate-text">{{ option.onlineRate }}</span>
+              <span class="rate-percent">%</span>
+            </div>
+          </div>
         </div>
         <span class="rate-label">设备在线率</span>
       </div>
-      <div class="progress-bar">
-        <div class="progress" :style="{ width: option.onlineRate + '%' }"></div>
-      </div>
-      <div class="device-count">
-        <span>{{ option.onlineDevice }}</span> / <span>{{ option.totalDevice }}</span>
+      <div class="progress-bar-wrapper">
+        <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
+          <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
+        </div>
       </div>
     </div>
     <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
       <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
         {{ header }}
       </div>
+      <div class="header-item"></div>
     </div>
     <div class="table-body">
       <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
@@ -56,21 +77,62 @@ const option = computed(() => props.chartConfig.option)
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #0F233E;
+  background-color: #041126;
   color: #ffffff;
-  padding: 10px;
+  padding: 15px;
   box-sizing: border-box;
 
   .header {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
-    .title {
+    justify-content: space-between;
+    margin-bottom: 15px;
+
+    .header-left {
       display: flex;
       align-items: center;
-      .title-icon {
-        font-size: 24px;
+      .title-icon-bg {
+        width: 50px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
+        .title-icon {
+          font-size: 28px;
+        }
+      }
+      .title-text-bg {
+        height: 40px;
+        padding: 0 20px 0 30px;
+        margin-left: -10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      .legend {
+        display: flex;
         margin-right: 10px;
+        .legend-item {
+          width: 15px;
+          height: 8px;
+          margin-left: 5px;
+        }
+      }
+      .device-count {
+        font-size: 20px;
+        .online {
+          color: #00e5ff;
+        }
+        .total {
+          color: #ffffff;
+        }
       }
     }
   }
@@ -78,73 +140,126 @@ const option = computed(() => props.chartConfig.option)
   .status-section {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     .online-rate {
       display: flex;
       align-items: center;
+      margin-right: 15px;
+      .rate-circle-bg {
+        position: relative;
+        width: 60px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &::after {
+          content: '';
+          position: absolute;
+          top: -5px;
+          left: -5px;
+          right: -5px;
+          bottom: -5px;
+          border-radius: 50%;
+          filter: blur(5px);
+          background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
+        }
+      }
       .rate-circle {
-        width: 50px;
-        height: 50px;
-        border: 2px solid #00E5FF;
+        width: 60px;
+        height: 60px;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 10px;
-        .rate-text {
-          color: #00E5FF;
-          font-size: 16px;
+        position: relative;
+        z-index: 1;
+        &::before {
+          content: '';
+          width: 48px;
+          height: 48px;
+          background-color: #041126;
+          border-radius: 50%;
+        }
+        .rate-text-wrapper {
+          position: absolute;
+          color: #00e5ff;
+          .rate-text {
+            font-size: 22px;
+            font-weight: bold;
+          }
+          .rate-percent {
+            font-size: 12px;
+            margin-left: 2px;
+          }
         }
       }
       .rate-label {
-        font-size: 14px;
+        font-size: 16px;
+        margin-left: 10px;
       }
     }
-    .progress-bar {
+    .progress-bar-wrapper {
       flex: 1;
-      height: 10px;
-      background-color: #1A385A;
-      border-radius: 5px;
-      margin: 0 10px;
+    }
+    .progress-bar {
+      width: 100%;
+      height: 12px;
+      border-radius: 6px;
       overflow: hidden;
       .progress {
         height: 100%;
-        background-color: #00E5FF;
+        border-radius: 6px;
       }
     }
-    .device-count {
-      font-size: 14px;
-    }
   }
 
   .table-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: 0 10px;
+    border-radius: 5px;
     .header-item {
-      flex: 1;
-      text-align: center;
+      text-align: left;
+      padding-left: 10px;
+      &:nth-child(1) { flex: 2; }
+      &:nth-child(2) { flex: 2; }
+      &:nth-child(3) { flex: 3; }
+      &:nth-child(4) { flex: 1; }
     }
   }
 
   .table-body {
     flex: 1;
     overflow-y: auto;
+    margin-top: 5px;
     .table-row {
       display: flex;
-      justify-content: space-between;
       align-items: center;
       padding: 0 10px;
-      border-bottom: 1px solid #1A385A;
+      margin-bottom: 5px;
+      border-radius: 5px;
+      &:last-child {
+        border-bottom: none;
+      }
       .row-item {
-        flex: 1;
-        text-align: center;
+        text-align: left;
+        padding-left: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:nth-child(1) { flex: 2; }
+        &:nth-child(2) { flex: 2; }
+        &:nth-child(3) { flex: 3; }
+        &:nth-child(4) {
+          flex: 1;
+          text-align: right;
+          padding-right: 10px;
+        }
         &.time {
-          color: #FF4D4F;
+          color: #ff4d4f;
         }
       }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>