index.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. @import "./index.skeleton.wxss";
  2. page {
  3. background-color: white;
  4. }
  5. .messagePage {
  6. overflow: hidden;
  7. border-top-left-radius: 24rpx;
  8. border-top-right-radius: 24rpx;
  9. background-color: white;
  10. .input {
  11. display: flex;
  12. align-items: center;
  13. justify-content: space-between;
  14. background-color: #F2F6FC;
  15. font-size: 28rpx;
  16. margin: 20rpx 30rpx 10rpx;
  17. padding: 20rpx 40rpx;
  18. border-radius: 26rpx;
  19. .searchBtn {
  20. padding: 6rpx 44rpx;
  21. background: #00C657;
  22. border-radius: 40rpx;
  23. .img {
  24. width: 24rpx;
  25. height: 24rpx;
  26. }
  27. }
  28. }
  29. .messageList {
  30. padding: 0rpx 36rpx 250rpx;
  31. box-sizing: border-box;
  32. .fixed {
  33. display: flex;
  34. align-items: center;
  35. justify-content: space-between;
  36. padding: 20rpx 0rpx;
  37. border-bottom: 1rpx solid #D8D8D8;
  38. .authority {
  39. position: relative;
  40. display: flex;
  41. align-items: center;
  42. .avatar {
  43. border-radius: 50rpx;
  44. width: 80rpx;
  45. height: 80rpx;
  46. margin-right: 14rpx;
  47. }
  48. .name {
  49. font-size: 30rpx;
  50. }
  51. .unread {
  52. top: -4rpx;
  53. left: 60rpx;
  54. position: absolute;
  55. width: 32rpx;
  56. height: 32rpx;
  57. line-height: 32rpx;
  58. border-radius: 550rpx;
  59. color: white;
  60. font-size: 20rpx;
  61. text-align: center;
  62. background-color: #FF0000;
  63. }
  64. }
  65. }
  66. .base {
  67. display: flex;
  68. align-items: center;
  69. justify-content: space-between;
  70. padding: 20rpx 0rpx 20rpx 20rpx;
  71. border-bottom: 1rpx solid #D8D8D8;
  72. .avatar {
  73. border-radius: 50rpx;
  74. width: 80rpx;
  75. height: 80rpx;
  76. background-color: #EEEEEE;
  77. }
  78. .body {
  79. flex: 1;
  80. padding: 0rpx 20rpx;
  81. .name {
  82. max-width: 330rpx;
  83. font-size: 30rpx;
  84. font-weight: bolder;
  85. }
  86. }
  87. .right {
  88. min-width: 140rpx;
  89. display: flex;
  90. flex-direction: column;
  91. align-items: flex-end;
  92. .date {
  93. font-size: 24rpx;
  94. }
  95. .unread {
  96. margin-top: 6rpx;
  97. width: 32rpx;
  98. height: 32rpx;
  99. line-height: 32rpx;
  100. border-radius: 550rpx;
  101. color: white;
  102. font-size: 20rpx;
  103. text-align: center;
  104. background-color: #FF0000;
  105. }
  106. }
  107. }
  108. .user {
  109. .info {
  110. margin-top: 4rpx;
  111. width: 400rpx;
  112. color: #969696;
  113. font-size: 24rpx;
  114. }
  115. }
  116. .pressHover {
  117. background-color: #f1f1f1;
  118. }
  119. }
  120. .menuBg {
  121. position: fixed;
  122. top: 0px;
  123. left: 0px;
  124. width: 100vw;
  125. height: 100vh;
  126. }
  127. .menu {
  128. position: fixed;
  129. width: 278rpx;
  130. // height: 180rpx;
  131. padding: 20rpx 20rpx;
  132. box-sizing: border-box;
  133. border-radius: 24rpx;
  134. background-color: white;
  135. box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
  136. view {
  137. height: 50%;
  138. display: flex;
  139. align-items: center;
  140. justify-content: center;
  141. }
  142. .icon {
  143. width: 30rpx;
  144. height: 30rpx;
  145. margin-right: 16rpx;
  146. }
  147. .menu-one {
  148. // border-bottom: 1rpx solid #D8D8D8;
  149. .icon {
  150. width: 22rpx;
  151. height: 28rpx;
  152. }
  153. }
  154. }
  155. .skeleton {
  156. width: 100%;
  157. height: 80vh;
  158. position: relative;
  159. .messageList {
  160. padding: 0rpx;
  161. }
  162. }
  163. }