goods_item.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. .goods_item {
  2. background: #fff;
  3. font-size: 22rpx;
  4. width: 360rpx;
  5. overflow: hidden;
  6. margin-top: 10rpx;
  7. margin-left: 10rpx;
  8. }
  9. .goods_item .img {
  10. width: 367rpx;
  11. height: 367rpx;
  12. }
  13. .goods_item .goods_name {
  14. font-size: 24rpx;
  15. font-weight: bold;
  16. height: 33rpx;
  17. line-height: 33rpx;
  18. /* overflow:hidden;
  19. text-overflow:ellipsis;
  20. display:-webkit-box;
  21. -webkit-box-orient:vertical;
  22. -webkit-line-clamp:2; */
  23. color: #333;
  24. }
  25. .goods_desc {
  26. position: absolute;
  27. left: 0;
  28. right: 0;
  29. bottom: 0;
  30. padding-left: 20rpx;
  31. line-height: 42rpx;
  32. background: #FFF5D8;
  33. font-size: 24rpx;
  34. color: #B89941;
  35. box-sizing: border-box;
  36. }
  37. /* .goods_item .goods_desc {
  38. display: -webkit-box;
  39. -webkit-box-orient: vertical;
  40. -webkit-line-clamp: 2;
  41. overflow: hidden;
  42. color: #7e7e7e;
  43. min-height: 64rpx;
  44. } */
  45. .goods_price {
  46. display: flex;
  47. align-items: center;
  48. height: 42rpx;
  49. margin-top: 7rpx;
  50. }
  51. .goods_item .goods_box {
  52. padding: 10rpx 13rpx 16rpx 20rpx;
  53. }
  54. .goods_item .goods_thumbnail {
  55. /* border-bottom: 1rpx solid #f9f9f9; */
  56. position: relative;
  57. }
  58. .goods_item .current_price {
  59. font-size: 28rpx;
  60. color: #333;
  61. }
  62. .goods_item .original_price, .goods_item .discount {
  63. display: inline-block;
  64. position: relative;
  65. font-size: 18rpx;
  66. color: #7e7e7e;
  67. }
  68. .goods_item .original_price::after {
  69. content: "";
  70. position: absolute;
  71. top: 14rpx;
  72. left: 0;
  73. height: 1rpx;
  74. width: 100%;
  75. background: #7e7e7e;
  76. z-index: 5;
  77. }
  78. .goods_item .discount {
  79. float: right;
  80. }
  81. .goods_item .original_price {
  82. float: left;
  83. }
  84. .goods_item .deduction {
  85. overflow: hidden;
  86. }
  87. .opgoods {
  88. position: absolute;
  89. bottom: 60rpx;
  90. left: 0;
  91. padding: 0 14rpx;
  92. color: #fff;
  93. font-size: 20rpx;
  94. text-align: center;
  95. background: #feacaa;
  96. border-bottom-right-radius: 20rpx;
  97. border-top-right-radius: 20rpx;
  98. }
  99. .tm_price {
  100. font-size: 18rpx;
  101. height: 42rpx;
  102. line-height: 46rpx;
  103. }
  104. .one_line_hidden {
  105. white-space: nowrap;
  106. text-overflow: ellipsis;
  107. overflow: hidden;
  108. }
  109. .mt10 {
  110. margin-top: 10rpx;
  111. }
  112. .ml20 {
  113. margin-left: 20rpx;
  114. }
  115. .ft_bold {
  116. font-weight: bold;
  117. }
  118. .f18 {
  119. font-size: 18rpx;
  120. }
  121. .f22 {
  122. font-size: 22rpx;
  123. }
  124. .f26 {
  125. font-size: 26rpx;
  126. }
  127. .f30 {
  128. font-size: 30rpx;
  129. }
  130. .col333 {
  131. color: #333;
  132. }
  133. .col666 {
  134. color: #666;
  135. }
  136. .colD45 {
  137. color: #DD4545;
  138. }
  139. .line-through {
  140. text-decoration: line-through;
  141. }
  142. .align_center {
  143. display: flex;
  144. align-items: center;
  145. }