动态菜单和动态路由的 antd pro

CardList.less 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. @import '~antd/lib/style/themes/default.less';
  2. @import '../../utils/utils.less';
  3. .cardList {
  4. margin-bottom: -24px;
  5. .card {
  6. :global {
  7. .ant-card-meta-title {
  8. margin-bottom: 12px;
  9. & > a {
  10. color: @heading-color;
  11. display: inline-block;
  12. max-width: 100%;
  13. }
  14. }
  15. .ant-card-actions {
  16. background: #f7f9fa;
  17. }
  18. .ant-card-body:hover {
  19. .ant-card-meta-title > a {
  20. color: @primary-color;
  21. }
  22. }
  23. }
  24. }
  25. .item {
  26. height: 64px;
  27. }
  28. :global {
  29. .ant-list .ant-list-item-content-single {
  30. max-width: 100%;
  31. }
  32. }
  33. }
  34. .extraImg {
  35. margin-top: -60px;
  36. text-align: center;
  37. width: 195px;
  38. img {
  39. width: 100%;
  40. }
  41. }
  42. .newButton {
  43. background-color: #fff;
  44. border-color: @border-color-base;
  45. border-radius: @border-radius-sm;
  46. color: @text-color-secondary;
  47. width: 100%;
  48. height: 188px;
  49. }
  50. .cardAvatar {
  51. width: 48px;
  52. height: 48px;
  53. border-radius: 48px;
  54. }
  55. .cardDescription {
  56. .textOverflowMulti();
  57. }
  58. .pageHeaderContent {
  59. position: relative;
  60. }
  61. .contentLink {
  62. margin-top: 16px;
  63. a {
  64. margin-right: 32px;
  65. img {
  66. width: 24px;
  67. }
  68. }
  69. img {
  70. vertical-align: middle;
  71. margin-right: 8px;
  72. }
  73. }
  74. @media screen and (max-width: @screen-lg) {
  75. .contentLink {
  76. a {
  77. margin-right: 16px;
  78. }
  79. }
  80. }
  81. @media screen and (max-width: @screen-md) {
  82. .extraImg {
  83. display: none;
  84. }
  85. }
  86. @media screen and (max-width: @screen-sm) {
  87. .pageHeaderContent {
  88. padding-bottom: 30px;
  89. }
  90. .contentLink {
  91. position: absolute;
  92. left: 0;
  93. bottom: -4px;
  94. width: 1000px;
  95. a {
  96. margin-right: 16px;
  97. }
  98. img {
  99. margin-right: 4px;
  100. }
  101. }
  102. }