diff --git a/LTEMvcApp/Views/Home/Logs.cshtml b/LTEMvcApp/Views/Home/Logs.cshtml index 1c1c035..1f749a6 100644 --- a/LTEMvcApp/Views/Home/Logs.cshtml +++ b/LTEMvcApp/Views/Home/Logs.cshtml @@ -522,6 +522,48 @@ .column-option.disabled:hover { background-color: transparent; } + + /* 自适应列宽优化 */ + .log-item > span, .log-list-header > span { + box-sizing: border-box; + position: relative; + } + + /* 为不同列设置不同的文本对齐方式 */ + .log-timestamp, .log-layer, .log-direction, .log-ueid, .log-rnti, .log-cell, .log-channel, .log-info { + text-align: center; /* 居中对齐 */ + } + + .log-message { + text-align: left; /* 左对齐 */ + padding-left: 4px; /* 增加左边距 */ + } + + /* 确保列之间有适当的间距 */ + .log-item > span:not(:last-child), .log-list-header > span:not(:last-child) { + margin-right: 4px; + } + + /* 响应式调整:在小屏幕上进一步优化 */ + @media (max-width: 1200px) { + .log-timestamp { min-width: 120px; max-width: 160px; } + .log-layer { min-width: 60px; max-width: 100px; } + .log-direction { min-width: 50px; max-width: 80px; } + .log-ueid, .log-rnti, .log-cell { min-width: 50px; max-width: 80px; } + .log-channel { min-width: 60px; max-width: 100px; } + .log-info { min-width: 50px; max-width: 80px; } + .log-message { min-width: 150px; } + } + + @media (max-width: 768px) { + .log-timestamp { min-width: 100px; max-width: 140px; } + .log-layer { min-width: 50px; max-width: 80px; } + .log-direction { min-width: 40px; max-width: 60px; } + .log-ueid, .log-rnti, .log-cell { min-width: 40px; max-width: 60px; } + .log-channel { min-width: 50px; max-width: 80px; } + .log-info { min-width: 40px; max-width: 60px; } + .log-message { min-width: 120px; } + }