index.wxss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .chat {
  2. min-height: 100vh;
  3. background-color: white;
  4. }
  5. .chat .content {
  6. height: 100vh;
  7. padding: 0rpx 30rpx 150rpx;
  8. box-sizing: border-box;
  9. }
  10. .chat .content .base {
  11. display: flex;
  12. align-items: flex-start;
  13. justify-content: space-between;
  14. margin-bottom: 42rpx;
  15. margin-top: 20rpx;
  16. }
  17. .chat .content .base .avatar {
  18. width: 80rpx;
  19. height: 80rpx;
  20. border-radius: 50%;
  21. background-color: #eeeeee;
  22. }
  23. .chat .content .base .message {
  24. max-width: 80%;
  25. padding: 20rpx;
  26. box-sizing: border-box;
  27. font-size: 28rpx;
  28. line-height: 42rpx;
  29. border-radius: 14rpx;
  30. background-color: #F2F6FC;
  31. word-break: break-all;
  32. }
  33. .chat .content .base .msgImg {
  34. margin-right: 24rpx;
  35. max-width: 200rpx;
  36. }
  37. .chat .content .someone {
  38. justify-content: flex-start;
  39. }
  40. .chat .content .someone .avatar {
  41. margin-right: 30rpx;
  42. }
  43. .chat .content .self {
  44. justify-content: flex-end;
  45. }
  46. .chat .content .self .message {
  47. display: inline-block;
  48. margin-right: 30rpx;
  49. background-color: #3DD076;
  50. color: white;
  51. }
  52. .chat .inputBox {
  53. position: fixed;
  54. left: 0px;
  55. bottom: 0px;
  56. width: 100%;
  57. display: flex;
  58. align-items: center;
  59. justify-content: space-between;
  60. box-sizing: border-box;
  61. padding: 20rpx 26rpx;
  62. background-color: #EEEDED;
  63. }
  64. .chat .inputBox .input {
  65. height: 80rpx;
  66. flex: 1;
  67. padding-left: 20rpx;
  68. border-radius: 10rpx;
  69. background-color: white;
  70. }
  71. .chat .inputBox .sendImg {
  72. width: 32rpx;
  73. height: 32rpx;
  74. border: 4rpx solid #3DD076;
  75. margin: 0rpx 24rpx;
  76. padding: 10rpx;
  77. border-radius: 50%;
  78. }
  79. .chat .inputBox .submit {
  80. padding: 14rpx 10rpx 14rpx 0rpx;
  81. color: #0091FF;
  82. font-size: 38rpx;
  83. }
  84. .chat .iosPadding {
  85. padding-bottom: 40rpx;
  86. }