chore:H5所有气泡都统一

This commit is contained in:
2026-09-24 11:59:50 +08:00
parent 3e2ae9b7ca
commit 0197224c75

View File

@@ -4239,8 +4239,10 @@ _handleStreamError(msg) {
- 内边距加大 -> 气泡比文字大, 文字与气泡边缘留出间距
- 宽度 auto + inline-block -> 气泡宽度贴着内容, 不拉满整行
- 只调整气泡自身, 气泡内文字字号不变
- 用 :not() 排除图片/配文/文件/视频/音频气泡, 避免影响它们原有的紧凑样式 */
.user-message .message-content .message-bubble:not(.user-image-bubble):not(.image-caption-bubble):not(.user-file-bubble):not(.user-video-bubble):not(.user-audio-bubble) {
- 用 :not() 排除图片/文件/视频/音频气泡, 避免影响它们原有的紧凑样式
PR-FIX-CAPTION-BUBBLE-SIZE (2026-09-24): 不再排除 .image-caption-bubble ——
图文一起发时的配文气泡要和普通文字气泡一样大(之前被排除 → 内边距只有 30rpx) */
.user-message .message-content .message-bubble:not(.user-image-bubble):not(.user-file-bubble):not(.user-video-bubble):not(.user-audio-bubble) {
padding: 10rpx 30rpx !important;
border-radius: 16rpx !important;
display: inline-block !important;
@@ -5037,10 +5039,11 @@ _handleStreamError(msg) {
/* 用户消息气泡: 覆盖上面的 padding:0
- H5: 气泡要明显比文字大(与小程序一致), 只改气泡, 不改文字字号;
用 :not() 排除图片/配文/文件/视频/音频气泡
- 小程序: 保持原有浅灰气泡 + 加大内边距(不动) */
用 :not() 排除图片/文件/视频/音频气泡
- 小程序: 保持原有浅灰气泡 + 加大内边距(不动)
PR-FIX-CAPTION-BUBBLE-SIZE (2026-09-24): 同上层, 配文气泡不再排除, 与普通文字气泡同尺寸 */
/* #ifdef H5 */
.user-message .message-content .message-bubble:not(.user-image-bubble):not(.image-caption-bubble):not(.user-file-bubble):not(.user-video-bubble):not(.user-audio-bubble) {
.user-message .message-content .message-bubble:not(.user-image-bubble):not(.user-file-bubble):not(.user-video-bubble):not(.user-audio-bubble) {
padding: 20rpx 40rpx !important;
border-radius: 16rpx !important;
display: inline-block !important;
@@ -5532,19 +5535,16 @@ _handleStreamError(msg) {
}
}
/* 图片消息配文气泡 (图文一起发出时, 独立气泡显示在图片下方) */
/* 图片消息配文气泡 (图文一起发出时, 独立气泡显示在图片下方)
PR-FIX-CAPTION-BUBBLE-SIZE (2026-09-24): 这里原先单独定义了
background/border-radius/padding/max-width/字号, 使配文气泡比普通文字气泡小一圈
(H5 下又被 :not() 规则排除, 内边距只有 30rpx)。
现在只保留"与图片的间距 + 右对齐", 其余(内边距/圆角/背景/字号)全部复用普通文字气泡,
保证图文消息下方的问题气泡和纯文字消息的气泡一样大。 */
.image-caption-bubble {
margin-top: 10rpx;
background: #f5f5f5;
border-radius: 20rpx;
padding: 14rpx 22rpx;
max-width: 460rpx;
.message-text {
font-size: 28rpx;
color: #111827;
line-height: 1.5;
word-break: break-all;
}
align-self: flex-end;
width: auto;
}
/* 输入框内待发送图片缩略图: 位于文字输入行上方, 出现时输入框自动向上撑高 */