diff --git a/src/pages/ChatMain/ChatCardAi/index.vue b/src/pages/ChatMain/ChatCardAi/index.vue index a358876..f73b629 100644 --- a/src/pages/ChatMain/ChatCardAi/index.vue +++ b/src/pages/ChatMain/ChatCardAi/index.vue @@ -1,19 +1,22 @@ diff --git a/src/pages/ChatMain/ChatCardAi/styles/index.scss b/src/pages/ChatMain/ChatCardAi/styles/index.scss index e123f84..1e0cc94 100644 --- a/src/pages/ChatMain/ChatCardAi/styles/index.scss +++ b/src/pages/ChatMain/ChatCardAi/styles/index.scss @@ -1,19 +1,30 @@ -.container { +.chat-ai-row { + width: 100%; + box-sizing: border-box; display: flex; - flex-direction: column; - max-width: 100%; // ✅ 限制最大宽度 - overflow-x: hidden; // ✅ 防止横向撑开 - padding-bottom: 12px; + align-items: center; /* 垂直居中气泡 */ + justify-content: flex-start; /* 默认左对齐 */ +} - .chat-ai { - margin: 6px 0; - padding: 0 12px; // 消息内容的内边距 左右20px - min-width: 100px; - max-width: 100%; // ✅ 限制最大宽度 - overflow: hidden; // ✅ 超出内容被切掉 - word-wrap: break-word; // ✅ 长单词自动换行 - word-break: break-all; // ✅ 强制换行 - } +.container { + /* 气泡容器:内联块按内容自适应 */ + display: inline-block; + box-sizing: border-box; + vertical-align: middle; + width: auto; + max-width: 100%; + overflow-x: hidden; +} + +.chat-ai { + margin: 6px 0; + padding: 0 12px; // 消息内容的内边距 左右12px + min-width: 0; + width: auto; + max-width: 100%; + overflow: hidden; + word-wrap: break-word; + word-break: break-all; } .container-content { diff --git a/src/pages/ChatMain/ChatCardMine/index.vue b/src/pages/ChatMain/ChatCardMine/index.vue index adef34d..71ffe2d 100644 --- a/src/pages/ChatMain/ChatCardMine/index.vue +++ b/src/pages/ChatMain/ChatCardMine/index.vue @@ -1,7 +1,10 @@ diff --git a/src/pages/ChatMain/ChatCardMine/styles/index.scss b/src/pages/ChatMain/ChatCardMine/styles/index.scss index 2eb4d92..ed0beca 100644 --- a/src/pages/ChatMain/ChatCardMine/styles/index.scss +++ b/src/pages/ChatMain/ChatCardMine/styles/index.scss @@ -1,10 +1,20 @@ +.chat-mine-row { + width: 100%; + box-sizing: border-box; + display: flex; + justify-content: flex-end; +} + .chat-mine { margin: 0 12px 6px; padding: 8px 16px; border-radius: 15px; - display: flex; - flex-direction: column; - max-width: 100%; // ✅ 限制最大宽度 - overflow-x: hidden; // ✅ 防止横向撑开 + /* 气泡为内联块,按内容宽度自适应;外层 `.chat-mine-row` 控制排列 */ + display: inline-block; + box-sizing: border-box; + vertical-align: top; + width: auto; + max-width: 100%; + overflow-x: hidden; } diff --git a/src/pages/ChatModule/DetailCardCompontent/index.vue b/src/pages/ChatModule/DetailCardCompontent/index.vue index d707896..c699c74 100644 --- a/src/pages/ChatModule/DetailCardCompontent/index.vue +++ b/src/pages/ChatModule/DetailCardCompontent/index.vue @@ -1,5 +1,5 @@