.chat { background-color: white; .content { height: 100vh; padding: 0rpx 30rpx; box-sizing: border-box; .base { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 42rpx; margin-top: 20rpx; .contentBox { flex: 1; .time { width: 200rpx; margin-bottom: 10rpx; font-size: 22rpx; color: #969696; } .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; } .msgImg { max-width: 200rpx; } } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: rgb(238, 238, 238); } } .someone { justify-content: flex-start; .avatar { margin-right: 30rpx; } } .self { justify-content: flex-end; .contentBox { display: flex; flex-direction: column; align-items: flex-end; .time{ text-align: right; } .message { display: inline-block; background-color: #3DD076; color: white; } } .avatar { margin-left: 30rpx; } } } .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; .input { height: 80rpx; flex: 1; padding-left: 20rpx; border-radius: 10rpx; background-color: white; } .sendImg { width: 32rpx; height: 32rpx; border: 4rpx solid #3DD076; margin: 0rpx 24rpx; padding: 10rpx; border-radius: 50%; } .submit { padding: 14rpx 10rpx 14rpx 0rpx; color: #0091FF; font-size: 38rpx; } } .iosPadding { padding-bottom: 40rpx; } }