index.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. .img-class {
  2. width: 710rpx;
  3. height: 352rpx;
  4. }
  5. .spu-content {
  6. background: #fff;
  7. width: 710rpx;
  8. border-radius: 20rpx;
  9. overflow: hidden;
  10. position: relative;
  11. box-shadow: 0 10rpx 60rpx rgba(0, 0, 0, 0.1);
  12. margin: 0 auto 40rpx;
  13. }
  14. .spu-content .count-down-content {
  15. width: 290rpx;
  16. height: 60rpx;
  17. border-radius: 0 0 40rpx 40rpx;
  18. background: linear-gradient(to right, #ff5041, #ff994b);
  19. position: absolute;
  20. left: 210rpx;
  21. top: 0;
  22. font-size: 26rpx;
  23. color: #fff;
  24. text-align: center;
  25. line-height: 60rpx;
  26. font-weight: bold;
  27. }
  28. .spu-content .count-down-content .count-down {
  29. display: inline-block;
  30. font-size: 26rpx;
  31. font-weight: bold;
  32. }
  33. .spu-content .count-down-content .count-down em {
  34. margin: 0;
  35. }
  36. .spu-content.disabled {
  37. opacity: 0.6;
  38. }
  39. .spu-content .item-top {
  40. width: 710rpx;
  41. height: 352rpx;
  42. position: relative;
  43. }
  44. .spu-content .item-top .act-end {
  45. position: absolute;
  46. width: 216rpx;
  47. height: 88rpx;
  48. border-radius: 10rpx;
  49. background: rgba(0, 0, 0, 0.5);
  50. color: #fff;
  51. font-size: 32rpx;
  52. text-align: center;
  53. line-height: 88rpx;
  54. left: 248rpx;
  55. top: 136rpx;
  56. }
  57. .spu-content .item-bottom {
  58. box-sizing: border-box;
  59. padding: 24rpx 30rpx;
  60. position: relative;
  61. }
  62. .spu-content .item-bottom .spu-title {
  63. color: #444;
  64. font-size: 32rpx;
  65. line-height: 36rpx;
  66. margin-bottom: 16rpx;
  67. font-weight: 500;
  68. overflow: hidden;
  69. text-overflow: ellipsis;
  70. white-space: nowrap;
  71. }
  72. .spu-content .item-bottom .spu-desc {
  73. font-size: 24rpx;
  74. line-height: 24rpx;
  75. color: #444;
  76. display: flex;
  77. align-items: center;
  78. }
  79. .spu-content .item-bottom .spu-desc em {
  80. margin-right: 20rpx;
  81. white-space: nowrap;
  82. }
  83. .spu-content .item-bottom .spu-desc .tag {
  84. border: 1rpx solid #ff5344;
  85. color: #ff5344;
  86. margin-right: 8rpx;
  87. font-size: 18rpx;
  88. line-height: 24rpx;
  89. padding: 0 8rpx;
  90. border-radius: 20rpx;
  91. white-space: nowrap;
  92. display: flex;
  93. align-items: center;
  94. vertical-align: middle;
  95. }
  96. .spu-content .item-bottom .spu-desc .tag.hidden {
  97. display: none;
  98. }
  99. .spu-content .item-bottom .spu-desc .tag-green {
  100. color: #4ab089;
  101. border-color: #4ab089;
  102. }
  103. .spu-content .item-bottom .spu-price {
  104. display: flex;
  105. align-items: flex-end;
  106. font-size: 22rpx;
  107. line-height: 22rpx;
  108. overflow: hidden;
  109. margin-top: 10rpx;
  110. }
  111. .spu-content .item-bottom .spu-price .sale-price {
  112. color: #ff5344;
  113. margin-right: 8rpx;
  114. margin-bottom: -4rpx;
  115. }
  116. .spu-content .item-bottom .spu-price .sale-price span {
  117. font-size: 56rpx;
  118. line-height: 56rpx;
  119. margin-left: 8rpx;
  120. font-weight: bold;
  121. }
  122. .spu-content .item-bottom .spu-price .market-price {
  123. text-decoration: line-through;
  124. color: #999;
  125. margin-right: 30rpx;
  126. }
  127. .spu-content .item-bottom .spu-count {
  128. font-size: 22rpx;
  129. line-height: 22rpx;
  130. color: #999;
  131. }
  132. .spu-content .item-bottom .add-cart {
  133. width: 68rpx;
  134. height: 68rpx;
  135. padding: 0;
  136. margin: 0;
  137. position: absolute;
  138. right: 24rpx;
  139. bottom: 16rpx;
  140. }
  141. .spu-content .item-bottom .add-cart image {
  142. width: 68rpx;
  143. height: 68rpx;
  144. display: block;
  145. }