index.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. @import './var.less';
  2. :root {
  3. --van-card-padding: @card-padding;
  4. --van-card-font-size: @card-font-size;
  5. --van-card-text-color: @card-text-color;
  6. --van-card-background-color: @card-background-color;
  7. --van-card-thumb-size: @card-thumb-size;
  8. --van-card-thumb-border-radius: @card-thumb-border-radius;
  9. --van-card-title-line-height: @card-title-line-height;
  10. --van-card-desc-color: @card-desc-color;
  11. --van-card-desc-line-height: @card-desc-line-height;
  12. --van-card-price-color: @card-price-color;
  13. --van-card-origin-price-color: @card-origin-price-color;
  14. --van-card-num-color: @card-num-color;
  15. --van-card-origin-price-font-size: @card-origin-price-font-size;
  16. --van-card-price-font-size: @card-price-font-size;
  17. --van-card-price-integer-font-size: @card-price-integer-font-size;
  18. --van-card-price-font-family: @card-price-font-family;
  19. }
  20. .van-card {
  21. position: relative;
  22. box-sizing: border-box;
  23. padding: var(--van-card-padding);
  24. color: var(--van-card-text-color);
  25. font-size: var(--van-card-font-size);
  26. background: var(--van-card-background-color);
  27. &:not(:first-child) {
  28. margin-top: var(--van-padding-xs);
  29. }
  30. &__header {
  31. display: flex;
  32. }
  33. &__thumb {
  34. position: relative;
  35. flex: none;
  36. width: var(--van-card-thumb-size);
  37. height: var(--van-card-thumb-size);
  38. margin-right: var(--van-padding-xs);
  39. img {
  40. border-radius: var(--van-card-thumb-border-radius);
  41. }
  42. }
  43. &__content {
  44. position: relative;
  45. display: flex;
  46. flex: 1;
  47. flex-direction: column;
  48. justify-content: space-between;
  49. min-width: 0; /* hack for flex box ellipsis */
  50. min-height: var(--van-card-thumb-size);
  51. &--centered {
  52. justify-content: center;
  53. }
  54. }
  55. &__title,
  56. &__desc {
  57. word-wrap: break-word;
  58. }
  59. &__title {
  60. max-height: 32px;
  61. font-weight: var(--van-font-weight-bold);
  62. line-height: var(--van-card-title-line-height);
  63. }
  64. &__desc {
  65. max-height: var(--van-card-desc-line-height);
  66. color: var(--van-card-desc-color);
  67. line-height: var(--van-card-desc-line-height);
  68. }
  69. &__bottom {
  70. line-height: var(--van-line-height-md);
  71. }
  72. &__price {
  73. display: inline-block;
  74. color: var(--van-card-price-color);
  75. font-weight: var(--van-font-weight-bold);
  76. font-size: var(--van-card-price-font-size);
  77. }
  78. &__price-integer {
  79. font-size: var(--van-card-price-integer-font-size);
  80. font-family: var(--van-card-price-font-family);
  81. }
  82. &__price-decimal {
  83. font-family: var(--van-card-price-font-family);
  84. }
  85. &__origin-price {
  86. display: inline-block;
  87. margin-left: 5px;
  88. color: var(--van-card-origin-price-color);
  89. font-size: var(--van-card-origin-price-font-size);
  90. text-decoration: line-through;
  91. }
  92. &__num {
  93. float: right;
  94. color: var(--van-card-num-color);
  95. }
  96. &__tag {
  97. position: absolute;
  98. top: 2px;
  99. left: 0;
  100. }
  101. &__footer {
  102. flex: none;
  103. text-align: right;
  104. .van-button {
  105. margin-left: 5px;
  106. }
  107. }
  108. }