shoppingcart.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /* pages/shoppingcart/shoppingcart.wxss */
  2. .container {
  3. margin: 0rpx 30rpx;
  4. height: calc(100vh - 40rpx);
  5. overflow: hidden;
  6. width: calc(100% - 60rpx);
  7. padding: 0 0;
  8. }
  9. .cart-header {
  10. width: calc( 100% - 60rpx );
  11. display: flex;
  12. justify-content: space-between;
  13. align-items: center;
  14. padding: 20rpx 30rpx;
  15. position: fixed;
  16. top: 0;
  17. left: 0;
  18. background: #f5f5f5;
  19. z-index: 999;
  20. }
  21. .list_boxsss {
  22. /* width: calc( 100% - 60rpx); */
  23. height: calc(100% - 255rpx);
  24. padding: 0rpx 30rpx;
  25. position: fixed;
  26. top: 120rpx;
  27. left: 0;
  28. }
  29. .loading-text {
  30. width: 100%;
  31. text-align: center;
  32. }
  33. .no-more-text {
  34. width: 100%;
  35. text-align: center;
  36. }
  37. .search-bar {
  38. width: calc(100% - 330rpx);
  39. position: relative;
  40. display: flex;
  41. align-items: center;
  42. /* height: 70rpx; */
  43. background-color: #fff;
  44. border: 1rpx solid #dcdfe6;
  45. border-radius: 12rpx;
  46. padding: 16rpx 20rpx;
  47. }
  48. .search-bar input {
  49. flex: 1;
  50. height: 100%;
  51. font-size: 32rpx;
  52. border: none;
  53. background: transparent;
  54. }
  55. .search-icon {
  56. position: absolute;
  57. right: 20rpx;
  58. width: 45rpx;
  59. height: 45rpx;
  60. }
  61. .manage-btn {
  62. width: 70rpx !important;
  63. padding: 0 !important;
  64. margin: 0 !important;
  65. font-size: 32rpx;
  66. font-weight: 500;
  67. /* color: #007aff; */
  68. }
  69. .cart-items {
  70. width: calc(100% - 60rpx);
  71. height: 100%;
  72. margin-bottom: 20rpx;
  73. }
  74. .cart-item {
  75. display: flex;
  76. align-items: center;
  77. background-color: #fff;
  78. border-radius: 8rpx;
  79. padding: 20rpx;
  80. margin-bottom: 20rpx;
  81. }
  82. .cart-checkbox {
  83. margin-right: 20rpx;
  84. }
  85. .cart-image {
  86. width: 200rpx;
  87. height: 200rpx;
  88. margin-right: 20rpx;
  89. }
  90. .cart-info {
  91. flex: 1;
  92. width: 33.33%;
  93. }
  94. .cart-title {
  95. font-size: 34rpx;
  96. font-weight: bold;
  97. color: #333;
  98. margin-bottom: 10rpx;
  99. }
  100. .cart-description {
  101. font-size: 28rpx;
  102. color: #666;
  103. margin-bottom: 10rpx;
  104. }
  105. .cart-price {
  106. font-size: 32rpx;
  107. color: #ff5722;
  108. margin-bottom: 10rpx;
  109. }
  110. .quantity-controls {
  111. display: flex;
  112. align-items: center;
  113. }
  114. .quantity-btn {
  115. width: 60rpx !important;
  116. height: 60rpx !important;
  117. background-color: #f5f5f5;
  118. border: 1rpx solid #ccc;
  119. border-radius: 8rpx;
  120. font-size: 32rpx;
  121. color: #666;
  122. }
  123. .quantity-text {
  124. font-size: 32rpx;
  125. color: #333;
  126. }
  127. .cart-footer {
  128. width: 100%;
  129. display: flex;
  130. justify-content: space-between;
  131. align-items: center;
  132. background-color: #fff;
  133. padding: 20rpx;
  134. position: fixed;
  135. bottom: 0;
  136. left: 0;
  137. right: 0;
  138. font-size: 38rpx;
  139. }
  140. .all-checkbox {
  141. margin-right: 20rpx;
  142. font-size: 36rpx;
  143. }
  144. .total-price {
  145. font-size: 36rpx;
  146. color: #333;
  147. }
  148. .checkout-btn {
  149. width: 200rpx !important;
  150. height: 80rpx !important;
  151. background-color: #007aff;
  152. color: #fff;
  153. font-size: 32rpx;
  154. border-radius: 38rpx;
  155. margin: 0 40rpx 0 30rpx !important;
  156. }