From d2ed11f733b6ccd6a2ead1948f2669f686dafe6f Mon Sep 17 00:00:00 2001 From: root <295172551@qq.com> Date: Tue, 24 Jun 2025 01:51:40 +0800 Subject: [PATCH] 11213 --- LTEMvcApp/Views/Home/Logs.cshtml | 73 ++++++++++++++++++++++++++------ 1 file changed, 59 insertions(+), 14 deletions(-) diff --git a/LTEMvcApp/Views/Home/Logs.cshtml b/LTEMvcApp/Views/Home/Logs.cshtml index 06ab598..6a0ebf9 100644 --- a/LTEMvcApp/Views/Home/Logs.cshtml +++ b/LTEMvcApp/Views/Home/Logs.cshtml @@ -37,8 +37,10 @@ border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; - justify-content: space-between; - white-space: nowrap; + justify-content: flex-start; /* 改为左对齐 */ + align-items: flex-start; /* 顶部对齐,支持多行内容 */ + min-height: 24px; /* 最小高度 */ + transition: background-color 0.2s; } .log-item:hover { @@ -52,21 +54,64 @@ .log-item > span, .log-list-header > span { text-overflow: ellipsis; overflow: hidden; - padding-right: 15px; + padding-right: 8px; + white-space: nowrap; /* 保持单行显示 */ + word-break: keep-all; /* 防止单词被截断 */ } - /* 列宽定义:固定与弹性结合 */ - .log-timestamp { flex: 0 0 170px; } /* 固定宽度 */ - .log-layer { flex: 0 0 100px; } /* 固定宽度 */ - .log-direction { flex: 0 0 120px; } /* 固定宽度 */ - .log-ueid { flex: 0 0 80px; } /* 固定宽度 */ - .log-rnti { flex: 0 0 80px; } /* 固定宽度 */ - .log-cell { flex: 0 0 80px; } /* 固定宽度 */ - .log-channel { flex: 0 0 100px; } /* 固定宽度 */ - .log-info { flex: 0 0 80px; } /* 固定宽度 */ + /* 列宽定义:自适应宽度 */ + .log-timestamp { + flex: 0 0 auto; + min-width: 150px; + max-width: 200px; + } + .log-layer { + flex: 0 0 auto; + min-width: 80px; + max-width: 120px; + } + .log-direction { + flex: 0 0 auto; + min-width: 60px; + max-width: 100px; + } + .log-ueid { + flex: 0 0 auto; + min-width: 60px; + max-width: 100px; + } + .log-rnti { + flex: 0 0 auto; + min-width: 60px; + max-width: 100px; + } + .log-cell { + flex: 0 0 auto; + min-width: 60px; + max-width: 100px; + } + .log-channel { + flex: 0 0 auto; + min-width: 80px; + max-width: 120px; + } + .log-info { + flex: 0 0 auto; + min-width: 60px; + max-width: 100px; + } .log-message { - flex: 1 1 0; /* 弹性增长和收缩,占据剩余空间 */ - min-width: 150px; /* 保证最小宽度 */ + flex: 1 1 auto; /* 弹性增长和收缩,占据剩余空间 */ + min-width: 200px; /* 保证最小宽度 */ + max-width: none; /* 不限制最大宽度 */ + white-space: normal; /* 允许换行 */ + word-break: break-word; /* 长单词可以换行 */ + line-height: 1.4; /* 增加行高 */ + max-height: 3.2em; /* 最多显示2行 */ + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; /* 限制显示行数 */ + -webkit-box-orient: vertical; } /* 日志列表标题栏 */