web.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. .container-bottom {
  2. margin: 0 10px;
  3. position: relative;
  4. }
  5. .container-conversation {
  6. width: 100%;
  7. height: 100%;
  8. overflow: hidden;
  9. }
  10. .tui-search-container {
  11. &-bottom {
  12. position: absolute;
  13. min-width: 400px;
  14. width: fit-content;
  15. height: 453px;
  16. border-radius: 4px;
  17. background-color: #fff;
  18. z-index: 1000;
  19. display: flex;
  20. flex-direction: column;
  21. box-shadow: rgba(0,0,0,0.16) 0 3px 6px, rgba(0,0,0,0.23) 0 3px 6px;
  22. left: 0;
  23. top: -5px;
  24. }
  25. &-aside {
  26. flex: 1;
  27. display: flex;
  28. flex-direction: column;
  29. width: 100%;
  30. height: 100%;
  31. overflow: hidden;
  32. }
  33. .tui-search-header {
  34. display: flex;
  35. flex-direction: row;
  36. justify-content: space-between;
  37. align-items: center;
  38. padding: 16px 20px 10px;
  39. &-title {
  40. font-size: 14px;
  41. font-weight: 500;
  42. line-height: 19.6px;
  43. font-family: "PingFang SC", sans-serif;
  44. }
  45. &-close {
  46. cursor: pointer;
  47. }
  48. }
  49. .tui-search-tabs {
  50. width: 100%;
  51. display: flex;
  52. flex-direction: row;
  53. box-sizing: border-box;
  54. border-bottom: 1px solid rgba(0,0,0,0.1);
  55. &-item {
  56. padding: 10px 0;
  57. margin: 0 10px;
  58. font-size: 14px;
  59. color: #666;
  60. user-select: none;
  61. cursor: pointer;
  62. &-selected {
  63. color: #007aff;
  64. border-bottom: 2px solid #007aff;
  65. }
  66. }
  67. }
  68. .tui-search-time {
  69. width: 100%;
  70. height: 43px;
  71. display: flex;
  72. flex-direction: row;
  73. box-sizing: border-box;
  74. &-item {
  75. height: calc(100% - 20px);
  76. padding: 5px;
  77. margin: 5px;
  78. border-radius: 5px;
  79. font-size: 12px;
  80. color: #666;
  81. user-select: none;
  82. cursor: pointer;
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. &-picker {
  87. display: flex;
  88. }
  89. &-close,
  90. &-all {
  91. display: flex;
  92. justify-content: center;
  93. align-items: center;
  94. }
  95. &-selected {
  96. background-color: rgba(0,122,255,0.2);
  97. }
  98. }
  99. }
  100. }