| 1 |
- .chat-box .chat-tips{position:fixed;left:0;top:0;width:100%;z-index:9;background-color:#08979c;height:72rpx;line-height:72rpx;color:#fff;text-align:center;opacity:.9}.chat-box .chat-list{width:100%;height:auto;padding-bottom:120rpx;box-sizing:initial;margin-bottom:0;margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom)}.chat-box .chat-list .chat-item{display:flex;padding:20rpx 20rpx 0 20rpx;align-items:flex-start;align-content:flex-start}.chat-box .chat-list .chat-item .avatar{width:80rpx;height:80rpx;border-radius:50%;border:#fff solid 1px}.chat-box .chat-list .chat-item .content-box{flex:1;width:0;display:flex}.chat-box .chat-list .chat-item .image-box{border-radius:16rpx}.chat-box .chat-list .chat-item .image-width{width:280rpx;height:200rpx}.chat-box .chat-list .chat-item .image-height{width:200rpx;height:280rpx}.chat-box .chat-list .chat-item .image-width-height{width:200rpx;height:200rpx}.chat-box .chat-list .chat-item .content{padding:20rpx 30rpx;border-radius:16rpx;word-break:break-all;line-height:42rpx;position:relative;font-weight:300}.chat-box .chat-list .chat-item.pull .content-box{margin-right:100rpx}.chat-box .chat-list .chat-item.pull .image-box{margin-left:20rpx}.chat-box .chat-list .chat-item.pull .content{margin-left:20rpx;background-color:#fff}.chat-box .chat-list .chat-item.push{flex-direction:row-reverse}.chat-box .chat-list .chat-item.push .content-box{flex-direction:row-reverse;margin-left:100rpx}.chat-box .chat-list .chat-item.push .image-box{margin-right:20rpx}.chat-box .chat-list .chat-item.push .content{margin-right:20rpx;background-color:#08979c;color:#fff;box-shadow:0 1px 12px rgba(3,3,3,.08)}.chat-box .chat-submit{position:fixed;left:0;width:100%;bottom:0;height:100rpx;z-index:2;background-color:#fff;box-shadow:0 2px 10px rgba(3,3,3,.1);padding-bottom:0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center}.chat-box .chat-submit .message-content{flex:1;margin:0 30rpx;border:1px solid #d9d9d9;border-radius:68rpx;height:68rpx;padding:0 20rpx}.chat-box .chat-submit .message-placeholder{color:#8c8c8c;font-weight:300}.chat-box .chat-submit .send-button{width:68rpx;height:68rpx;border-radius:50%;display:flex;align-items:center;justify-content:center}.chat-box .chat-submit .send-button.send-image{border:1px solid #d9d9d9;margin-right:20rpx}.chat-box .chat-submit .send-button.send-submit{background:#08979c;margin-right:30rpx}
|
