feat(对话框样式): 重构对话框样式并添加详细信息展示

- 调整对话框布局和样式，增加顶部对齐
- 添加设备状态、运行信息等详细展示区域
- 实现不同状态的颜色区分显示
- 默认隐藏对话框，改为点击触发显示

src/assets/styles/dialog.scss

@@ -1,8 +1,12 @@
 #custom-dialog {
     padding: 0;
+    top: 0;
 
     .el-dialog__header {
-        display: none;
+        // display: none;
+        border: none;
+        padding: 0;
+        margin: 0;
     }
 
     .el-dialog__body {
@@ -10,7 +14,100 @@
     }
 
     .alert-content {
-        padding: 80px;
         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 20px;
+        padding-right: 50px;
+
+        .info {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-size: 20px;
+                font-weight: bold;
+            }
+
+            .name {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+            }
+
+            .icon {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+
+                .last-update {
+                    // font-size: ;
+                    color: rgba(113, 128, 150, 1);
+                    margin-left: 15px;
+                }
+
+                svg {
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .text {
+                    font-size: 12px;
+                    margin-left: 10px;
+                }
+
+
+            }
+
+
+        }
+
+        .img {
+            width: 240px;
+            height: 240px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+
+        .info-box {
+            font-size: 12px;
+            display: flex;
+            gap: 40px;
+            margin-left: 30px;
+
+            .item {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .title {
+                color: rgba(113, 128, 150, 1);
+                margin-bottom: 10px;
+            }
+
+            .text {
+                font-weight: bold;
+                color: rgba(0, 30, 59, 1);
+            }
+        }
+    }
+
+    .alert-content .success {
+        color: rgba(0, 184, 122, 1) !important;
+    }
+
+    .alert-content .orange {
+        color: rgba(255, 153, 0, 1) !important;
+    }
+
+    .alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
     }
 }