.input-box{ display: flex; align-items: center; margin: 20rpx; .input{ flex: 1; background-color: white; border-top-left-radius: 10rpx; border-bottom-left-radius: 10rpx; height: 70rpx; line-height: 70rpx; padding: 0 20rpx; } .button{ height: 70rpx; line-height: 70rpx; color: white; font-size: 28rpx; padding: 0 20rpx; background-color: #31AB45; &:last-child{ border-top-right-radius: 10rpx; border-bottom-right-radius: 10rpx; } &.success{ background-color: #f29100; } &.del{ background-color: #dd6161; } } } .talkbox{ .msg{ text-align: center; margin-bottom: 10rpx; .text{ background-color: #c8c9cc; color: white; display: inline-block; line-height: 1; padding: 8rpx 15rpx; border-radius: 6rpx; font-size: 24rpx; } } .other{ .talk__info{ margin-right: 10rpx; } .talk__content{ display: flex; justify-content: flex-start; .text{ background-color: #39B54A; &::before{ right: 100%; border-top: 10rpx solid transparent; border-bottom: 10rpx solid transparent; border-left: 10rpx solid transparent; border-right: 10rpx solid #39B54A; } } .error{ margin-left: 10rpx; } } } .my{ .talk__info{ margin-left: 20rpx; } .talk__content{ display: flex; justify-content: flex-end; .text{ background-color: #3277FF; &::before{ left: 100%; border-top: 10rpx solid transparent; border-bottom: 10rpx solid transparent; border-right: 10rpx solid transparent; border-left: 10rpx solid #3277FF; } } .error{ margin-right: 10rpx; } } } .talk{ display: flex; align-items: flex-start; margin: 0 10rpx 10rpx 10rpx; .talk__content{ flex: 1; width: 0; margin-left: 15rpx; display: flex; align-items: center; .text{ display: inline-block; border-radius: 8rpx; color: white; line-height: 1.3; padding: 10rpx; position: relative; word-break: break-all; &::before{ content: " "; display: block; position: absolute; } } .error{ width: 20rpx; height: 20rpx; background-color: #dd6161; border-radius: 50%; } } } }