goods-card.less 2.7 KB

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