conversation.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. .container-conversation {
  2. display: flex;
  3. flex-direction: column;
  4. box-sizing: border-box;
  5. background-color: #F7F8FA;
  6. height: 100vh;
  7. width: 100%;
  8. }
  9. .scroll-box {
  10. height: calc(100vh - 165rpx);
  11. overflow-y: scroll;
  12. }
  13. .margintop-bar {
  14. margin-bottom: 160 rpx;
  15. }
  16. .btn-show-more {
  17. display: flex;
  18. width: 160rpx;
  19. height: 160rpx;
  20. padding-left: 3rpx;
  21. }
  22. .picker {
  23. display: flex;
  24. justify-content: center;
  25. align-items: center;
  26. width: 100%;
  27. height: 96rpx;
  28. }
  29. .bottom-back {
  30. position: fixed;
  31. height: 160rpx;
  32. width: 100%;
  33. bottom: 0;
  34. right: 0;
  35. left: 0;
  36. background-color: #F4F5F9;
  37. z-index: 3;
  38. }
  39. .bottom-area {
  40. flex-direction: column;
  41. position: absolute;
  42. bottom: 60rpx;
  43. right: 0;
  44. left: 0;
  45. margin: auto;
  46. width: 100px;
  47. display: flex;
  48. justify-content: center;
  49. align-items: center
  50. }
  51. .im-link {
  52. width: 218rpx;
  53. height: 36rpx;
  54. font-size: 28rpx;
  55. line-height: 36rpx;
  56. margin: 0 auto;
  57. color: #006EFF;
  58. }
  59. .conversation-bubble {
  60. padding-top: 40rpx;
  61. position: absolute;
  62. width: 300rpx;
  63. padding-right: 3px;
  64. background-color: #FFFFFF;
  65. height: 320rpx;
  66. bottom: 220rpx;
  67. z-index: 100;
  68. box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
  69. border-radius: 14rpx;
  70. }
  71. .conversation-bubble:before,
  72. .conversation-bubble:after {
  73. content: "";
  74. display: block;
  75. border-width: 20px;
  76. position: absolute;
  77. bottom: -40px;
  78. left: 54px;
  79. border-style: solid dashed dashed;
  80. border-color: #fff transparent transparent;
  81. font-size: 0;
  82. line-height: 0;
  83. margin-left: 4px
  84. }
  85. .conversation-bubble:after {
  86. bottom: -33px;
  87. border-color: #fff transparent transparent;
  88. }