index.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .chat {
  2. background-color: white;
  3. .content {
  4. padding: 20rpx 30rpx 150rpx;
  5. .base {
  6. display: flex;
  7. align-items: flex-start;
  8. justify-content: space-between;
  9. margin-bottom: 42rpx;
  10. .avatar {
  11. width: 80rpx;
  12. height: 80rpx;
  13. border-radius: 50%;
  14. background-color: rgb(238, 238, 238);
  15. }
  16. .message {
  17. flex: 1;
  18. padding: 20rpx;
  19. box-sizing: border-box;
  20. font-size: 28rpx;
  21. line-height: 42rpx;
  22. border-radius: 14rpx;
  23. background-color: #F2F6FC;
  24. }
  25. }
  26. .someone {
  27. .avatar {
  28. margin-right: 30rpx;
  29. }
  30. }
  31. .self {
  32. .message {
  33. margin-right: 30rpx;
  34. background-color: #3DD076;
  35. color: white;
  36. }
  37. }
  38. }
  39. .inputBox {
  40. position: fixed;
  41. left: 0px;
  42. bottom: 0px;
  43. width: 100%;
  44. display: flex;
  45. align-items: center;
  46. justify-content: space-between;
  47. box-sizing: border-box;
  48. padding: 20rpx 26rpx;
  49. background-color: #EEEDED;
  50. .input {
  51. height: 80rpx;
  52. flex: 1;
  53. padding-left: 20rpx;
  54. border-radius: 10rpx;
  55. background-color: white;
  56. }
  57. .submit {
  58. padding: 14rpx 30rpx;
  59. color: #0091FF;
  60. font-size: 38rpx;
  61. }
  62. }
  63. .iosPadding {
  64. padding-bottom: 40rpx;
  65. }
  66. }