goods-card.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. .goods-card {
  2. font-size: 24rpx;
  3. border-bottom: none;
  4. width: calc(50vw - 15px);
  5. display: flex;
  6. border-left: 1px solid #eeeeee;
  7. // &.lite {
  8. // .goods-card__main {
  9. // width: 330rpx;
  10. // }
  11. // .goods-card__thumb {
  12. // width: 330rpx;
  13. // padding-top: 0;
  14. // }
  15. // }
  16. }
  17. .goods-card__main {
  18. flex: 1;
  19. position: relative;
  20. display: flex;
  21. line-height: 1;
  22. padding: 0;
  23. background: transparent;
  24. justify-content: center;
  25. align-items: center;
  26. flex-direction: column;
  27. box-shadow: none;
  28. overflow: hidden;
  29. border-right: 1px solid #eeeeee;
  30. }
  31. .goods-card__thumb {
  32. flex-shrink: 0;
  33. position: relative;
  34. width: 100%;
  35. aspect-ratio: 1500 / 1014;
  36. // width: 372rpx;
  37. // height: 250rpx;
  38. }
  39. .goods-card__thumb:empty {
  40. display: none;
  41. margin: 0;
  42. }
  43. .goods-card__img {
  44. display: block;
  45. width: 100%;
  46. height: 100%;
  47. overflow: hidden;
  48. }
  49. .goods-card__body {
  50. display: flex;
  51. flex: 1 1 auto;
  52. background: #fff;
  53. padding: 0;
  54. flex-direction: row;
  55. justify-content: space-between;
  56. align-items: center;
  57. align-self: stretch;
  58. padding: 4px 8px 10px 8px;
  59. }
  60. .goods-card__upper {
  61. display: flex;
  62. flex-direction: column;
  63. overflow: hidden;
  64. flex: 1 1 auto;
  65. }
  66. .goods-card__title {
  67. font-size: 28rpx;
  68. color: #333;
  69. font-weight: 600;
  70. // display: -webkit-box;
  71. // height: 46rpx;
  72. // -webkit-box-orient: vertical;
  73. // -webkit-line-clamp: 2;
  74. // overflow: hidden;
  75. // word-break: break-word;
  76. line-height: 1;
  77. flex: 1;
  78. min-width: 60rpx;
  79. overflow: hidden;
  80. white-space: nowrap;
  81. text-overflow: ellipsis;
  82. margin-right: 10rpx;
  83. }
  84. .goods-card__tags {
  85. display: flex;
  86. flex-direction: row;
  87. flex-wrap: wrap;
  88. margin: 8rpx 0 0 0;
  89. }
  90. .goods-card__tag {
  91. color: #fa4126;
  92. background: transparent;
  93. font-size: 20rpx;
  94. border: 1rpx solid #fa4126;
  95. padding: 0 8rpx;
  96. border-radius: 16rpx;
  97. line-height: 30rpx;
  98. margin: 0 8rpx 8rpx 0;
  99. display: block;
  100. overflow: hidden;
  101. white-space: nowrap;
  102. word-break: keep-all;
  103. text-overflow: ellipsis;
  104. }
  105. .goods-card__down {
  106. display: flex;
  107. position: relative;
  108. flex-direction: row;
  109. align-items: center;
  110. justify-content: center;
  111. align-items: baseline;
  112. line-height: 32rpx;
  113. margin: 8rpx 0 0 0;
  114. }
  115. .goods-card__origin-price {
  116. white-space: nowrap;
  117. font-weight: 700;
  118. order: 2;
  119. color: #bbbbbb;
  120. font-size: 24rpx;
  121. margin: 0 0 0 8rpx;
  122. }
  123. .goods-card__add-cart {
  124. order: 3;
  125. margin: auto 0 0 auto;
  126. position: absolute;
  127. bottom: 0;
  128. right: 0;
  129. }
  130. .spec-for-price {
  131. // font-size: 36rpx;
  132. // font-weight: 700;
  133. // color: #fa4126;
  134. font-size: 28rpx;
  135. color: #333;
  136. white-space: nowrap;
  137. order: 1;
  138. margin: 0;
  139. }
  140. .spec-for-symbol {
  141. font-size: 24rpx;
  142. }
  143. .flatimg {
  144. position: absolute;
  145. bottom: 10rpx;
  146. right: 10rpx;
  147. color: #333;
  148. }