.chat { background-color: white; } .chat .content { padding: 20rpx 30rpx 150rpx; } .chat .content .base { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42rpx; } .chat .content .base .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #eeeeee; } .chat .content .base .message { flex: 1; padding: 20rpx; box-sizing: border-box; font-size: 28rpx; line-height: 42rpx; border-radius: 14rpx; background-color: #F2F6FC; } .chat .content .someone .avatar { margin-right: 30rpx; } .chat .content .self .message { margin-right: 30rpx; background-color: #3DD076; color: white; } .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 .submit { padding: 14rpx 30rpx; color: #0091FF; font-size: 38rpx; } .chat .iosPadding { padding-bottom: 40rpx; }