index.less 1.9 KB

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