diff --git a/src/views/system/jd-instruction/index.vue b/src/views/system/jd-instruction/index.vue index cecc9aa..ec6d6b8 100644 --- a/src/views/system/jd-instruction/index.vue +++ b/src/views/system/jd-instruction/index.vue @@ -31,23 +31,23 @@
- -
+ +
完整消息 复制全部
-
- +
+
- -
+ +
消息列表(共 {{ resultList.length }} 条)
-
+
@@ -552,12 +552,12 @@ export default { /* 响应容器 */ .response-container { display: flex; - gap: 20px; + flex-direction: column; + gap: 16px; margin-top: 8px; } -.response-column { - flex: 1; +.response-section { border: 1px solid #DCDFE6; border-radius: 4px; overflow: hidden; @@ -565,14 +565,6 @@ export default { flex-direction: column; } -.response-column-full { - flex: 1.2; -} - -.response-column-list { - flex: 0.8; -} - .response-header { display: flex; align-items: center; @@ -585,31 +577,36 @@ export default { font-size: 14px; } -.response-content { - padding: 16px; - background-color: #FFFFFF; - flex: 1; - overflow-y: auto; -} - -.response-column-full .response-content { +/* 完整消息区域 */ +.response-content-full { padding: 0; + background-color: #FFFFFF; display: flex; flex-direction: column; } -.response-column-full .response-content ::v-deep .el-textarea { +.response-content-full ::v-deep .el-textarea { flex: 1; display: flex; flex-direction: column; } -.response-column-full .response-content ::v-deep .el-textarea__inner { +.response-content-full ::v-deep .el-textarea__inner { border: none; border-radius: 0; resize: none; - flex: 1; - min-height: 500px; + min-height: 400px; + font-family: 'Courier New', monospace; + font-size: 13px; + line-height: 1.6; +} + +/* 消息列表区域 */ +.response-content-list { + padding: 16px; + background-color: #FFFFFF; + max-height: 600px; + overflow-y: auto; } /* 消息列表样式 */ @@ -637,6 +634,8 @@ export default { justify-content: space-between; align-items: center; margin-bottom: 8px; + flex-wrap: wrap; + gap: 8px; } .message-index { @@ -651,29 +650,39 @@ export default { line-height: 1.6; white-space: pre-wrap; word-break: break-word; + font-family: 'Courier New', monospace; +} + +/* 滚动条美化 */ +.response-content-list::-webkit-scrollbar { + width: 8px; +} + +.response-content-list::-webkit-scrollbar-track { + background: #F5F7FA; +} + +.response-content-list::-webkit-scrollbar-thumb { + background: #DCDFE6; + border-radius: 4px; +} + +.response-content-list::-webkit-scrollbar-thumb:hover { + background: #C0C4CC; } /* 移动端响应容器优化 */ @media (max-width: 768px) { .response-container { - flex-direction: column; gap: 12px; } - .response-column { - width: 100%; + .response-content-full ::v-deep .el-textarea__inner { + min-height: 250px; + font-size: 12px; } - .response-column-full, - .response-column-list { - flex: 1; - } - - .response-column-full .response-content ::v-deep .el-textarea__inner { - min-height: 300px; - } - - .response-column-list .response-content { + .response-content-list { max-height: 400px; padding: 12px; } @@ -685,6 +694,15 @@ export default { .message-content { font-size: 12px; } + + .message-item-header { + margin-bottom: 6px; + } + + .response-header { + padding: 10px 12px; + font-size: 13px; + } } .msg-block { margin-bottom: 12px; }