index.wxss 1.9 KB

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