diff --git a/app/workorder/view/index/edit.html b/app/workorder/view/index/edit.html
index 8e55692..da53d87 100644
--- a/app/workorder/view/index/edit.html
+++ b/app/workorder/view/index/edit.html
@@ -263,121 +263,131 @@
   //调取用户沟通信息
   var order_id = getQueryParam('id') || "<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>";
   function loadUserMessages() {
-    if (!order_id) return;
-    fetch('/workorder/index/usermessagelist?order_id=' + order_id)
-      .then(response => response.json())
-      .then(res => {
-        var html = '';
-        if (res.code === 0 && Array.isArray(res.data)) {
-          res.data.forEach(function (msg) {
-            var who = '';
-            var color = '';
-            var labelClass = '';
-            if (msg.msgby == 1) {
-              who = '客户留言';
-              color = '#409eff';
-              labelClass = 'msgby-customer';
-            } else if (msg.msgby == 0) {
-              who = '平台回复';
-              color = '#67c23a';
-              labelClass = 'msgby-platform';
-            } else {
-              who = '未知';
-              color = '#aaa';
-              labelClass = '';
+  if (!order_id) return;
+  fetch('/workorder/index/usermessagelist?order_id=' + order_id)
+    .then(response => response.json())
+    .then(res => {
+      var html = '';
+      if (res.code === 0 && Array.isArray(res.data)) {
+        res.data.forEach(function (msg) {
+          var who = '';
+          var labelClass = '';
+          var avatarClass = '';
+          var avatarText = '';
+          var userMsgClass = 'user-message';
+          if (msg.msgby == 1) {
+            who = '客户留言';
+            labelClass = 'msgby-customer';
+            avatarClass = 'avatar msgby-customer';
+            avatarText = '客';
+            // 客户留言不加 platform 类
+          } else if (msg.msgby == 0) {
+            who = '平台回复';
+            labelClass = 'msgby-platform';
+            avatarClass = 'avatar msgby-platform';
+            avatarText = '平';
+            userMsgClass += ' platform'; // 平台回复加 platform 类
+          } else {
+            who = '未知';
+            labelClass = '';
+            avatarClass = 'avatar';
+            avatarText = '?';
+          }
+          html += '<div class="' + userMsgClass + '">';
+          html +=   '<div class="msg-main">';
+          html +=     '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span>';
+          html +=     '<span class="msg-time">' + (msg.create_time || '') + '</span></div>';
+          html +=     '<div class="msg-content">' + (msg.content || '') + '</div>';
+          html +=     '<div class="msg-actions">';
+          if (msg.msgby == 1) {
+            html += '<button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button>';
+          }
+          if (msg.msgby == 0) {
+            html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">删除</button>';
+          }
+          html +=     '</div>';
+          html +=   '</div>';
+          html += '</div>';
+        });
+      }
+      if (!html) html = '<div style="color:#888;">暂无沟通信息</div>';
+      document.getElementById('workorder-message').innerHTML = html;
+
+      // 绑定回复按钮事件
+      var replyBtns = document.querySelectorAll('.reply-btn');
+      replyBtns.forEach(function (btn) {
+        btn.onclick = function () {
+          var msgid = this.getAttribute('data-msgid');
+          var orderid = this.getAttribute('data-orderid');
+          layer.prompt({ title: '回复客户', formType: 2 }, function (value, index) {
+            if (!value) {
+              layer.msg('回复内容不能为空');
+              return;
             }
-            html += '<div class="user-message" style="margin-bottom:10px;padding:10px;border-bottom:1px solid #eee;">';
-            html += '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span> <strong>时间：</strong>' + (msg.create_time || '') + '</div>';
-            html += '<div><strong>内容：</strong>' + (msg.content || '') + '</div>';
-            // 客户留言下方加回复按钮
-            if (msg.msgby == 1) {
-              html += '<div style="margin-top:8px;"><button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button></div>';
-            }
-            // 平台回复下方加删除按钮
-            if (msg.msgby == 0) {
-              html += '<div style="margin-top:8px;"><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">删除</button></div>';
-            }
-            html += '</div>';
+            // 调用接口提交
+            fetch('/workorder/index/messageadd', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                order_id: orderid,
+                msg_id: msgid,
+                msgby: 0, // 平台回复
+                content: value
+              })
+            })
+              .then(res => res.json())
+              .then(resp => {
+                if (resp.code === 0) {
+                  layer.msg('回复成功');
+                  layer.close(index);
+                  loadUserMessages();
+                } else {
+                  layer.msg(resp.msg || '回复失败');
+                }
+              })
+              .catch(function () {
+                layer.msg('网络错误');
+              });
           });
-        }
-        if (!html) html = '<div style="color:#888;">暂无沟通信息</div>';
-        document.getElementById('workorder-message').innerHTML = html;
-
-        // 绑定回复按钮事件
-        var replyBtns = document.querySelectorAll('.reply-btn');
-        replyBtns.forEach(function (btn) {
-          btn.onclick = function () {
-            var msgid = this.getAttribute('data-msgid');
-            var orderid = this.getAttribute('data-orderid');
-            layer.prompt({ title: '回复客户', formType: 2 }, function (value, index) {
-              if (!value) {
-                layer.msg('回复内容不能为空');
-                return;
-              }
-              // 调用接口提交
-              fetch('/workorder/index/messageadd', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                  order_id: orderid,
-                  msg_id: msgid,
-                  msgby: 0, // 平台回复
-                  content: value
-                })
-              })
-                .then(res => res.json())
-                .then(resp => {
-                  if (resp.code === 0) {
-                    layer.msg('回复成功');
-                    layer.close(index);
-                    loadUserMessages();
-                  } else {
-                    layer.msg(resp.msg || '回复失败');
-                  }
-                })
-                .catch(function () {
-                  layer.msg('网络错误');
-                });
-            });
-          };
-        });
-
-        // 绑定删除按钮事件
-        var deleteBtns = document.querySelectorAll('.delete-btn');
-        deleteBtns.forEach(function (btn) {
-          btn.onclick = function () {
-            var msgid = this.getAttribute('data-msgid');
-            var order_id = this.getAttribute('data-orderid'); 
-            layer.confirm('确定要删除这条平台回复吗？', { icon: 3, title: '提示' }, function (index) {
-              fetch('/workorder/index/messagedel', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                  msg_id: msgid,
-                  order_id: order_id
-                })
-              })
-                .then(res => res.json())
-                .then(resp => {
-                  if (resp.code === 0) {
-                    layer.msg('删除成功');
-                    loadUserMessages();
-                  } else {
-                    layer.msg(resp.msg || '删除失败');
-                  }
-                })
-                .catch(function () {
-                  layer.msg('网络错误');
-                });
-              layer.close(index);
-            });
-          };
-        });
-      })
-      .catch(function () {
-        document.getElementById('workorder-message').innerHTML = '<div style="color:#888;">加载沟通信息失败</div>';
+        };
       });
-  }
+
+      // 绑定删除按钮事件
+      var deleteBtns = document.querySelectorAll('.delete-btn');
+      deleteBtns.forEach(function (btn) {
+        btn.onclick = function () {
+          var msgid = this.getAttribute('data-msgid');
+          var order_id = this.getAttribute('data-orderid'); 
+          layer.confirm('确定要删除这条平台回复吗？', { icon: 3, title: '提示' }, function (index) {
+            fetch('/workorder/index/messagedel', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                msg_id: msgid,
+                order_id: order_id
+              })
+            })
+              .then(res => res.json())
+              .then(resp => {
+                if (resp.code === 0) {
+                  layer.msg('删除成功');
+                  loadUserMessages();
+                } else {
+                  layer.msg(resp.msg || '删除失败');
+                }
+              })
+              .catch(function () {
+                layer.msg('网络错误');
+              });
+            layer.close(index);
+          });
+        };
+      });
+    })
+    .catch(function () {
+      document.getElementById('workorder-message').innerHTML = '<div style="color:#888;">加载沟通信息失败</div>';
+    });
+}
 
   // 页面加载时调用
   loadUserMessages();
@@ -429,13 +439,13 @@
   .yhgt-content,
   .wtbz {
     padding: 15px;
-    background-color: #f5f5f5;
+    background-color: #f8fafc;
   }
 
   .wtjs-box h4,
   .yhgt-box h4 {
     margin-bottom: 15px;
-    border-bottom: 1px solid #949494;
+    border-bottom: 1px solid #ddd;
     padding-bottom: 15px;
     color: #4b4b4b;
   }
@@ -457,4 +467,128 @@
     background: #f0f9eb;
     color: #67c23a;
   }
+  /* 留言区整体背景 */
+.yhgt-content {
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 24px;
+  min-height: 120px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+/* 单条留言卡片 */
+.user-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  padding: 16px 20px;
+  margin-bottom: 18px;
+  border: none;
+  position: relative;
+  transition: box-shadow 0.2s;
+}
+.user-message:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+}
+
+/* 气泡箭头 */
+.user-message::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -8px;
+  top: 24px;
+  width: 0;
+  height: 0;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #fff;
+}
+
+/* 平台回复三角标在右 */
+.user-message.platform {
+  flex-direction: row-reverse;
+}
+.user-message.platform::before {
+  left: auto;
+  right: -8px;
+  border-right: none;
+  border-left: 8px solid #fff;
+}
+.user-message.platform .avatar {
+  background: #f0f9eb;
+  color: #67c23a;
+  box-shadow: 0 1px 4px rgba(103,194,58,0.08);
+}
+
+/* 客户留言和平台回复头像 */
+.user-message .avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #e6f7ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #409eff;
+  font-weight: bold;
+  flex-shrink: 0;
+  box-shadow: 0 1px 4px rgba(64,158,255,0.08);
+}
+.user-message .msgby-platform.avatar {
+  background: #f0f9eb;
+  color: #67c23a;
+  box-shadow: 0 1px 4px rgba(103,194,58,0.08);
+}
+
+/* 留言内容主体 */
+.user-message .msg-main {
+  flex: 1;
+}
+.user-message .msgby-label {
+  font-size: 13px;
+  font-weight: 500;
+  margin-right: 8px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  vertical-align: middle;
+}
+.user-message .msgby-customer {
+  background: #e6f7ff;
+  color: #409eff;
+}
+.user-message .msgby-platform {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+.user-message .msg-time {
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+.user-message .msg-content {
+  font-size: 15px;
+  color: #333;
+  margin-bottom: 6px;
+  line-height: 1.7;
+  padding: 20px;
+  padding-left: 0;
+}
+
+/* 按钮区 */
+.user-message .msg-actions {
+  margin-top: 8px;
+}
+.user-message .layui-btn-xs {
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.layui-td-gray, .layui-td-gray-2, .layui-td-gray-3, .layui-td-gray-4{
+  background-color:#f8fafc ;
+}
 </style>
\ No newline at end of file