index.wxss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. /* pages/shop-cart/index.wxss */
  2. .title-box{
  3. width: 100%;
  4. padding-top: 330rpx;
  5. text-align: center;
  6. font-size:28rpx;
  7. color:#999;
  8. background: url(https://cdn.it120.cc/images/weappshop/icon-cart.png) no-repeat center 205rpx;
  9. background-size: 100rpx auto;
  10. margin-bottom: 50rpx;
  11. }
  12. .to-index-btn{
  13. color:#fff;
  14. background:#e64340;
  15. border-radius:6px;
  16. width:300rpx;
  17. height:70rpx;
  18. line-height: 70rpx;
  19. text-align: center;
  20. font-size:28rpx;
  21. margin:0 auto
  22. }
  23. .list-top{
  24. width: 100%;
  25. height: 88rpx;
  26. line-height: 88rpx;
  27. box-sizing: border-box;
  28. display: flex;
  29. justify-content:space-between;
  30. padding: 0 30rpx;
  31. font-size: 28rpx;
  32. align-items: center;
  33. }
  34. .list-top .label{
  35. color: #000;
  36. }
  37. .list-top .edit-btn{
  38. color: #999;
  39. height: 100%;
  40. }
  41. .goodsList{
  42. width: 100%;
  43. background-color: #fff;
  44. padding-bottom: 100rpx;
  45. }
  46. .a-gooods{
  47. width: 100%;
  48. overflow: hidden;
  49. }
  50. .a-goods-conts{
  51. display: flex;
  52. justify-content:space-between;
  53. padding-left: 30rpx;
  54. width: 870rpx;
  55. box-sizing: border-box;
  56. transition: margin-left 0.2s ease-in-out;
  57. background: url(https://cdn.it120.cc/images/weappshop/gou.png) no-repeat 30rpx center;
  58. background-size: 40rpx auto;
  59. }
  60. .a-goods-conts.active{
  61. background: url(https://cdn.it120.cc/images/weappshop/gou-red.png) no-repeat 30rpx center;
  62. background-size: 40rpx auto;
  63. }
  64. .goods-info{
  65. border-bottom: 1px solid #eee;
  66. display: flex;
  67. justify-content:space-between;
  68. padding: 30rpx 0 30rpx 70rpx;
  69. width: 720rpx;
  70. box-sizing: border-box;
  71. }
  72. .goods-info .img-box{
  73. width: 160rpx;
  74. height:160rpx;
  75. overflow: hidden;
  76. margin-right: 20rpx;
  77. background-color: #d8d8d8;
  78. }
  79. .goods-info .text-box{
  80. width: 440rpx;
  81. position: relative;
  82. }
  83. .goods-info .text-box .goods-title{
  84. font-size: 28rpx;
  85. color:#000;
  86. text-overflow: ellipsis;
  87. white-space: nowrap;
  88. overflow: hidden;
  89. padding: 10rpx 20rpx 5rpx 0;
  90. }
  91. .goods-info .text-box .goods-label{
  92. font-size: 26rpx;
  93. color:#999;
  94. height: 38rpx;
  95. line-height: 38rpx;
  96. margin: 8rpx 0 25rpx 0;
  97. }
  98. .goods-info .text-box .goods-price{
  99. font-size: 26rpx;
  100. color:#e64340;
  101. }
  102. .goods-info .text-box .buy-num{
  103. width: 164rpx;
  104. height: 48rpx;
  105. line-height: 48rpx;
  106. position: absolute;
  107. right: 30rpx;
  108. bottom: 0;
  109. display: flex;
  110. /*justify-content: space-between;*/
  111. font-size: 24rpx;
  112. text-align: center
  113. }
  114. .goods-info .text-box .buy-num .jian-btn{
  115. width: 48rpx;
  116. height: 100%;
  117. border-left: 1rpx solid #ccc;
  118. border-bottom: 1rpx solid #ccc;
  119. border-top: 1rpx solid #ccc;
  120. border-bottom-left-radius: 6rpx;
  121. border-top-left-radius: 6rpx;
  122. }
  123. .goods-info .text-box .buy-num .jian-btn.disabled{
  124. background-color: #f5f5f9;
  125. border-left: 1rpx solid #eee;
  126. border-bottom: 1rpx solid #eee;
  127. border-top: 1rpx solid #eee;
  128. color: #ccc;
  129. }
  130. .goods-info .text-box .buy-num .jia-btn{
  131. width: 48rpx;
  132. height: 100%;
  133. border-right: 1rpx solid #ccc;
  134. border-bottom: 1rpx solid #ccc;
  135. border-top: 1rpx solid #ccc;
  136. border-bottom-right-radius: 6rpx;
  137. border-top-right-radius: 6rpx;
  138. }
  139. .goods-info .text-box .buy-num .jia-btn.disabled{
  140. background-color: #f5f5f9;
  141. border-right: 1rpx solid #eee;
  142. border-bottom: 1rpx solid #eee;
  143. border-top: 1rpx solid #eee;
  144. color: #ccc;
  145. }
  146. .goods-info .text-box .buy-num input{
  147. width: 68rpx;
  148. height: 48rpx;
  149. min-height: 48rpx;
  150. text-align: center;
  151. font-size: 24rpx;
  152. border: 1rpx solid #ccc;
  153. }
  154. .goods-info .img-box .img{
  155. width: 160rpx;
  156. height:160rpx;
  157. }
  158. .a-goods-conts .delete-btn{
  159. width: 120rpx;
  160. line-height: 220rpx;
  161. text-align: center;
  162. background:#e64340;
  163. font-size: 24rpx;
  164. color: #fff;
  165. }
  166. .jiesuan-box{
  167. display: flex;
  168. justify-content: space-between;
  169. width: 100%;
  170. height: 100rpx;
  171. position: fixed;
  172. bottom: 0;
  173. left: 0;
  174. border-bottom:1px solid #eee;
  175. border-top:1px solid #eee;
  176. background-color: #fff;
  177. }
  178. .jiesuan-box .to-pay-btn{
  179. width:240rpx;
  180. text-align: center;
  181. line-height: 100rpx;
  182. background-color: #e64340;
  183. font-size:32rpx;
  184. color:#ffffff;
  185. }
  186. .jiesuan-box .to-pay-btn.no-select{
  187. background-color: #ccc;
  188. }
  189. .jiesuan-box .left-price{
  190. display: flex;
  191. width: 510rpx;
  192. justify-content: space-between;
  193. line-height: 100rpx;
  194. padding: 0 30rpx 0 0;
  195. font-size:28rpx;
  196. box-sizing: border-box;
  197. }
  198. .jiesuan-box .all-selected{
  199. padding-left: 90rpx;
  200. color:#000000;
  201. background: url(https://cdn.it120.cc/images/weappshop/gou.png) no-repeat 30rpx center;
  202. background-size: 40rpx auto;
  203. }
  204. .jiesuan-box .all-selected.active{
  205. background: url(https://cdn.it120.cc/images/weappshop/gou-red.png) no-repeat 30rpx center;
  206. background-size: 40rpx auto;
  207. }
  208. .jiesuan-box .total{
  209. color: #e64340;
  210. }