修改 通知详情样式 和 即时通讯

src/views/admin/system/notice/index.vue

@@ -89,17 +89,21 @@
         </div>
       </template>
     </ElDialog>
-    <ElDialog v-model="dialogVisiblexq" title="通知详情" align-center>
-      <div class="detail-info-table">
-        <div class="row">
-          <div>发送人：{{ noticeDetail.sender_name }}</div>
+    <ElDialog v-model="dialogVisiblexq" title="通知详情" align-center width="640px">
+      <div class="detail-dialog">
+        <div class="section">
+          <div class="info-grid">
+            <div class="label">发送人</div>
+            <div class="value">{{ noticeDetail.sender_name || '-' }}</div>
+          </div>
+          <div class="info-grid">
+            <div class="label">通知标题</div>
+            <div class="value">{{ noticeDetail.title || '-' }}</div>
+          </div>
         </div>
-        <div class="row">
-          <div>通知标题：{{ noticeDetail.title }}</div>
-        </div>
-        <div class="row">
-          <div>
-            通知内容：
+        <div class="section">
+          <div class="label" style="margin-bottom: 8px">通知内容</div>
+          <div class="content-box">
             <div class="message-text" v-html="noticeDetail.content"></div>
           </div>
         </div>
@@ -264,7 +268,42 @@
   }
   .message-text {
     padding: 10px 14px;
-    line-height: 1.4;
+    line-height: 1.7;
     white-space: pre-line;
+    word-break: break-word;
+  }
+  .detail-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .section {
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 8px;
+    padding: 12px 14px;
+  }
+  .info-grid {
+    display: grid;
+    grid-template-columns: 96px 1fr;
+    gap: 6px 12px;
+    align-items: center;
+    padding: 6px 0;
+  }
+  .label {
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+  }
+  .value {
+    color: var(--el-text-color-primary);
+    font-size: 14px;
+  }
+  .content-box {
+    background: var(--el-fill-color-lighter);
+    border: 1px dashed var(--el-border-color);
+    border-radius: 8px;
+    padding: 10px 12px;
+    max-height: 320px;
+    overflow: auto;
   }
 </style>