.chat { background-color: white; } .chat .content { height: 100vh; padding: 0rpx 30rpx; box-sizing: border-box; } .chat .content .base { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42rpx; margin-top: 20rpx; } .chat .content .base .contentBox { flex: 1; } .chat .content .base .contentBox .time { width: 200rpx; margin-bottom: 10rpx; font-size: 22rpx; color: #969696; } .chat .content .base .contentBox .message { max-width: 80%; padding: 20rpx; box-sizing: border-box; display: inline-block; font-size: 28rpx; line-height: 42rpx; border-radius: 14rpx; background-color: #F2F6FC; word-break: break-all; } .chat .content .base .contentBox .msgImg { max-width: 200rpx; } .chat .content .base .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #eeeeee; } .chat .content .someone { justify-content: flex-start; } .chat .content .someone .avatar { margin-right: 30rpx; } .chat .content .self { justify-content: flex-end; } .chat .content .self .contentBox { display: flex; flex-direction: column; align-items: flex-end; } .chat .content .self .contentBox .time { text-align: right; } .chat .content .self .contentBox .message { display: inline-block; background-color: #3DD076; color: white; } .chat .content .self .avatar { margin-left: 30rpx; } .chat .inputBox { position: fixed; left: 0px; bottom: 0px; width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 20rpx 26rpx; background-color: #EEEDED; } .chat .inputBox .input { height: 80rpx; flex: 1; padding-left: 20rpx; border-radius: 10rpx; background-color: white; } .chat .inputBox .sendImg { width: 32rpx; height: 32rpx; border: 4rpx solid #3DD076; margin: 0rpx 24rpx; padding: 10rpx; border-radius: 50%; } .chat .inputBox .submit { padding: 14rpx 10rpx 14rpx 0rpx; color: #0091FF; font-size: 38rpx; } .chat .iosPadding { padding-bottom: 40rpx; }