allGoods.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. @import "./allGoods.skeleton.wxss";
  2. page {
  3. background: #F7F7F7;
  4. }
  5. .pageNavBox{
  6. height: 80rpx;
  7. width: 100%;
  8. }
  9. .pageNavFixed{
  10. position: fixed;
  11. left: 0;
  12. right: 0;
  13. background: #FFFFFF;
  14. height: 80rpx;
  15. z-index: 99;
  16. }
  17. .navList{
  18. height: 100%;
  19. }
  20. .navItem{
  21. /* padding-right: 28rpx; */
  22. /* padding-left: 32rpx; */
  23. height: 100%;
  24. flex: 1;
  25. align-items: center;
  26. display: flex;
  27. justify-content: center;
  28. }
  29. .navItem .text{
  30. font-size: 28rpx;
  31. color: #5F6268;
  32. }
  33. .navItem.sel .text{
  34. color: #DF3120;
  35. }
  36. .iconBox{
  37. display: flex;
  38. flex-direction: column;
  39. align-items: center;
  40. padding-left: 8rpx;
  41. }
  42. .iconBox image{
  43. width: 12rpx;
  44. height: 12rpx;
  45. }
  46. .iconBox image.t{
  47. margin-bottom: 4rpx;
  48. }
  49. .pageMian{
  50. padding: 24rpx 32rpx;
  51. }
  52. .goodsList{
  53. background: #FFFFFF;
  54. border-radius: 16rpx;
  55. padding: 2rpx 24rpx 0 24rpx;
  56. }
  57. .goodsItem{
  58. margin-top: 22rpx;
  59. position: relative;
  60. }
  61. .goodsImgBox{
  62. width: 200rpx;
  63. height: 200rpx;
  64. background: #F5F5F5;
  65. border-radius: 16rpx;
  66. overflow: hidden;
  67. }
  68. .goodsImgBox image{
  69. width: 100%;
  70. height: 100%;
  71. }
  72. .goodsInfo{
  73. display: flex;
  74. flex-direction: column;
  75. justify-content: space-between;
  76. flex: 1;
  77. margin-left: 20rpx;
  78. /* height: 224rpx; */
  79. min-height: 224rpx;
  80. padding-bottom: 24rpx;
  81. position: relative;
  82. }
  83. .goodsInfo::after{
  84. content: '';
  85. position: absolute;
  86. right: 0;
  87. bottom: 0;
  88. background: #E0E1E5;
  89. width: 100%;
  90. height: 2rpx;
  91. -webkit-transform: scaleY(0.5);
  92. transform: scaleY(0.5);
  93. -webkit-transform-origin: 0 0;
  94. transform-origin: 0 0;
  95. z-index: 20;
  96. }
  97. .goodsList .goodsItem:last-child .goodsInfo::after{
  98. display: none;
  99. }
  100. .goodsName{
  101. font-size: 28rpx;
  102. color: #161719;
  103. }
  104. .goodsNameText{
  105. display: inline;
  106. }
  107. .goodsName .icon{
  108. vertical-align: middle;
  109. width: 88rpx;
  110. height: 36rpx;
  111. margin-right: 8rpx;
  112. position: relative;
  113. top: -2rpx;
  114. }
  115. .goodsName .goodsMyZy{
  116. width: 116rpx;
  117. }
  118. .goodsNumber{
  119. font-size: 24rpx;
  120. color: #909297;
  121. padding-top: 16rpx;
  122. }
  123. .goodsNumber.member{
  124. padding-top: 4rpx !important;
  125. }
  126. .priceBox{
  127. font-size: 24rpx;
  128. color: #E73E2D;
  129. display: flex;
  130. align-items: baseline;
  131. }
  132. .priceBox .pra{
  133. font-weight: bold;
  134. font-size: 36rpx;
  135. margin-left: 4rpx;
  136. }
  137. .linkprice{
  138. font-size: 20rpx;
  139. color: #909297;
  140. margin-right: 2rpx;
  141. padding-top: 12rpx;
  142. margin-left: 8rpx;
  143. }
  144. .linkprice .lPr{
  145. text-decoration: line-through;
  146. font-size: 22rpx;
  147. }
  148. .addCartBox{
  149. position: absolute;
  150. z-index: 10;
  151. right: 0;
  152. bottom: 0;
  153. padding-left: 26rpx;
  154. padding-top: 26rpx;
  155. padding-bottom: 24rpx;
  156. font-size: 0;
  157. }
  158. .addCartBox .icon{
  159. width: 56rpx;
  160. height: 56rpx;
  161. }
  162. .priceContent{
  163. padding-top: 8rpx;
  164. }
  165. .robBox{
  166. position: absolute;
  167. z-index: 10;
  168. right: 0;
  169. bottom: 0;
  170. padding-left: 26rpx;
  171. padding-top: 26rpx;
  172. padding-bottom: 24rpx;
  173. }
  174. .robBox .icon{
  175. width: 92rpx;
  176. height: 92rpx;
  177. }