bwj_wechat/pages/chatRoom/MsgBubble/index.wxss

/* 对面 */
.opposite-side {
    display: flex;
    width: 100vw;
    padding-left: 30rpx;
    box-sizing: border-box;
    margin-bottom: 78rpx;
}

.opposite-side .userImg {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.opposite-side .content {
    position: relative;
    max-width: 457rpx;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    padding: 20rpx 26rpx 20rpx 30rpx;
    background-color: #F6F7F8;
    border-radius: 10rpx;
    word-break:break-all;
}

.msg-time {
    position: absolute;
    width: 240rpx;
    height: 34rpx;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.39);
    line-height: 34rpx;
    bottom: -45rpx;
    right: 20rpx;
}

.opposite-side .msg-time {
    left: 20rpx;
    right: 0;
}

/* 自己 */
.my-msg {
    display: flex;
    justify-content: flex-end;
    width: 100vw;
    padding-right: 30rpx;
    box-sizing: border-box;
    margin-bottom: 78rpx;
}

.my-msg .userImg {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    margin-left: 20rpx;
}

.my-msg .content {
    position: relative;
    max-width: 457rpx;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    padding: 20rpx 26rpx 20rpx 30rpx;
    background-color: #F6F7F8;
    border-radius: 10rpx;
    word-break: break-all;
}