.gambit-msg { position: relative; width: 100vw; margin-top: 34rpx; margin-bottom: 74rpx; } /* l为左对齐 r为右对齐 */ /* 用户头像 */ .user-img { position: absolute; width: 70rpx; height: 70rpx; top: 6rpx; border-radius: 50%; } .l .user-img { left: 30rpx; } .r .user-img { right: 30rpx; } /* 话题内容盒子 */ .contents-box { display: flex; flex-direction: column; position: absolute; width: 570rpx; background: #F6F7F8; border-radius: 10rpx; padding: 20rpx; padding-bottom: 0; box-sizing: border-box; top: 0; } .l .contents-box { align-items: flex-start; left: 120rpx; } .r .contents-box { align-items: flex-end; right: 120rpx; } /* 信息气泡样式 */ .msg-bubble { border-radius: 10rpx; font-size: 28rpx; background-color: #FFFFFF; padding: 20rpx; box-sizing: border-box; margin-bottom: 20rpx; word-break: break-all; white-space: pre-wrap; } .l .msg-bubble { background-color: #FFFFFF; color: #000000; } .r .msg-bubble { background-color: #4BBECF; color: #FFFFFF; } /* 附件信息 */ .msg-file { padding: 6rpx; border-radius: 10rpx; margin-bottom: 20rpx; padding-bottom: 0; } .r .msg-file { align-items: flex-end; } .msg-file .image { width: 168px; border-radius: 10rpx; } .msg-file .emoji { width: 50rpx; } /* 分割线 */ .hr { height: 2rpx; width: 100%; background: rgba(147, 147, 147, .1); padding-left: -10rpx; } .bottom { width: 100vw; height: 34rpx; line-height: 34rpx; font-size: 24rpx; color: rgba(0, 0, 0, .3); margin-top: 18rpx; margin-bottom: 20rpx; text-decoration: underline; } .r .bottom { text-align: right; } .contents-box .time { position: absolute; height: 34rpx; line-height: 34rpx; font-size: 24rpx; color: #000000; right: 20rpx; bottom: -40rpx; opacity: .39; }