index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .messagePage {
  2. overflow: hidden;
  3. border-top-left-radius: 24rpx;
  4. border-top-right-radius: 24rpx;
  5. background-color: white;
  6. .searchBox {
  7. position: relative;
  8. padding: 20rpx 40rpx;
  9. .input {
  10. background-color: #F2F6FC;
  11. font-size: 28rpx;
  12. padding: 14rpx 20rpx;
  13. border-radius: 26rpx;
  14. }
  15. .magnifier {
  16. position: absolute;
  17. right: 70rpx;
  18. top: 0rpx;
  19. bottom: 0rpx;
  20. margin: auto;
  21. padding: 10rpx 38rpx;
  22. width: 28rpx;
  23. height: 28rpx;
  24. border-radius: 50rpx;
  25. background-color: #30C866;
  26. }
  27. }
  28. .messageList {
  29. padding: 0rpx 36rpx 250rpx;
  30. box-sizing: border-box;
  31. .base {
  32. display: flex;
  33. align-items: center;
  34. justify-content: space-between;
  35. padding: 20rpx 0rpx 20rpx 20rpx;
  36. border-bottom: 1rpx solid #D8D8D8;
  37. .avatar {
  38. width: 80rpx;
  39. height: 80rpx;
  40. }
  41. .body {
  42. flex: 1;
  43. padding: 0rpx 30rpx 0rpx 20rpx;
  44. .name {
  45. max-width: 320rpx;
  46. font-size: 30rpx;
  47. font-weight: bolder;
  48. }
  49. }
  50. .right {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: flex-end;
  54. .date {
  55. font-size: 24rpx;
  56. }
  57. .unread {
  58. margin-top: 6rpx;
  59. width: 32rpx;
  60. height: 32rpx;
  61. line-height: 32rpx;
  62. border-radius: 550rpx;
  63. color: white;
  64. font-size: 20rpx;
  65. text-align: center;
  66. background-color: #FF0000;
  67. }
  68. }
  69. }
  70. .authority {
  71. .body {
  72. display: flex;
  73. justify-content: space-between;
  74. padding-right: 50rpx;
  75. .avatars {
  76. display: flex;
  77. .miniAvatar {
  78. width: 38rpx;
  79. height: 38rpx;
  80. margin-left: 4rpx;
  81. }
  82. }
  83. }
  84. }
  85. .user {
  86. .info {
  87. margin-top: 4rpx;
  88. width: 400rpx;
  89. color: #969696;
  90. font-size: 24rpx;
  91. }
  92. }
  93. }
  94. }