diff --git a/pages/demo/index.vue b/pages/demo/index.vue
index 37f1562..416e6d4 100644
--- a/pages/demo/index.vue
+++ b/pages/demo/index.vue
@@ -16,7 +16,7 @@
×
-
+
×
-
+
+
消息日志
@@ -175,8 +176,20 @@
>
{{log.time}}
{{log.type === 'received' ? '接收' : log.type === 'sent' ? '发送' : '系统'}}
- 主题:{{log.topic}}
- 内容:{{log.message}}
+
+
+ 主题:
+
+ {{log.topic}}
+
+
+
+
+ 内容:
+
+ {{log.message}}
+
+
@@ -664,21 +677,19 @@ export default {
border-bottom: 1px solid #eee;
margin-bottom: 5px;
font-size: 14px;
+ border-radius: 4px;
}
.log-item.received {
background-color: #e8f5e9;
- border-radius: 4px;
}
.log-item.sent {
background-color: #e3f2fd;
- border-radius: 4px;
}
.log-item.system {
background-color: #fff8e1;
- border-radius: 4px;
}
.log-time {
@@ -692,12 +703,41 @@ export default {
margin-bottom: 3px;
}
-.log-topic {
- color: #666;
+/* 日志行容器 - 标签+滚动内容 */
+.log-row {
+ display: flex;
+ align-items: flex-start;
margin-bottom: 3px;
+ width: 100%;
}
-.log-message {
+/* 日志标签(主题:/内容:) */
+.log-label {
+ color: #666;
+ flex-shrink: 0; /* 标签不收缩 */
+ margin-right: 5px;
+}
+
+/* 日志内容滚动容器 */
+.log-content-scroll {
+ flex: 1;
+ white-space: nowrap; /* 不换行 */
+ overflow-x: auto; /* 横向滚动 */
+ -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
+ padding-bottom: 2px;
color: #333;
+ /* 隐藏滚动条但保留滚动功能 */
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* 隐藏Chrome等浏览器的滚动条 */
+.log-content-scroll::-webkit-scrollbar {
+ display: none;
+}
+
+/* 修复之前的样式冲突 */
+.log-topic, .log-message {
+ display: none;
}
\ No newline at end of file