message.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. .layui-field-box {
  2. display: flex;
  3. flex-wrap: wrap;
  4. }
  5. /* 一行4个卡片时的排布 */
  6. @media screen and (min-width: 1501px) {
  7. .block-list {
  8. width: 24%;
  9. margin-right: 1.3%;
  10. margin-bottom: 25px;
  11. }
  12. .block-list:nth-child(4n) {
  13. margin-right: 0;
  14. }
  15. }
  16. /* 一行3个卡片时的排布 */
  17. @media screen and (max-width: 1500px) {
  18. .block-list {
  19. width: 32%;
  20. margin-right: 2%;
  21. margin-bottom: 25px;
  22. }
  23. .block-list:nth-child(3n) {
  24. margin-right: 0;
  25. }
  26. }
  27. .block-list .block-title {
  28. height: 52px;
  29. line-height: 52px;
  30. font-size: 14px;
  31. color: #333;
  32. background-color: #F7F8FA;
  33. padding-left: 25px;
  34. }
  35. .block-list .block-content {
  36. padding: 20px 25px 0;
  37. display: flex;
  38. flex-wrap: wrap;
  39. }
  40. .block-list .block-content a {
  41. height: 25px;
  42. line-height: 25px;
  43. width: 33.3%;
  44. margin-bottom: 20px;
  45. display: inline-block;
  46. vertical-align: middle;
  47. color: #454545;
  48. font-size: 12px;
  49. position: relative;
  50. }
  51. .layui-form-checkbox[lay-skin=primary] {
  52. padding-left: 18px;
  53. }
  54. .layui-form-checkbox[lay-skin=primary] i {
  55. width: 11px;
  56. height: 11px;
  57. line-height: 12px;
  58. border-radius: 0px;
  59. margin-top: 2px;
  60. border: 1px solid #787878;
  61. }
  62. .layui-icon-ok:before {
  63. display: inline-block;
  64. width: 100%;
  65. -webkit-transform: scale(0.80);
  66. }
  67. .layui-form-checkbox[lay-skin=primary] span {
  68. font-size: 12px;
  69. color: #454545;
  70. padding-right: 0;
  71. }
  72. .block-list .block-content a:hover .sms-hide {
  73. display: inline-block;
  74. }
  75. .block-list .sms-hide {
  76. display: none;
  77. position: absolute;
  78. width: 340px;
  79. top: 45px;
  80. left: 0;
  81. background-color: #fff;
  82. z-index: 2;
  83. border: 1px solid #e5e5e5;
  84. padding: 5px 10px;
  85. margin-bottom: 30px;
  86. }
  87. .block-list .sms-hide p {
  88. width: 100%;
  89. word-break: break-all;
  90. white-space: normal;
  91. }
  92. .block-list .sms-hide:before, .block-list .sms-hide:after {
  93. content: '';
  94. display: inline-block;
  95. border: solid transparent;
  96. width: 0;
  97. height: 0;
  98. border-width: 12px;
  99. left: 16px;
  100. position: absolute;
  101. }
  102. .block-list .sms-hide:before {
  103. border-bottom-color: #e4e4e4;
  104. top: -25px;
  105. }
  106. .block-list .sms-hide:after {
  107. border-bottom-color: #FFFFFF;
  108. top: -23px;
  109. }