微信小店联盟带货小程序

index.wxss 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. .container {
  2. min-height: 100vh;
  3. background: #f8f8f8;
  4. padding-bottom: env(safe-area-inset-bottom);
  5. }
  6. /* 加载状态 */
  7. .loading {
  8. text-align: center;
  9. padding: 40rpx;
  10. color: #999;
  11. font-size: 28rpx;
  12. }
  13. /* 收入统计 */
  14. .income-stats {
  15. background: linear-gradient(135deg, #ff4d4f, #ff7875);
  16. padding: 40rpx 30rpx;
  17. color: #fff;
  18. margin-bottom: 20rpx;
  19. }
  20. .total-income {
  21. text-align: center;
  22. padding-bottom: 30rpx;
  23. }
  24. .total-income .label {
  25. font-size: 28rpx;
  26. opacity: 0.9;
  27. }
  28. .total-income .amount {
  29. font-size: 72rpx;
  30. font-weight: 600;
  31. margin-top: 10rpx;
  32. }
  33. .stats-grid {
  34. display: flex;
  35. justify-content: space-between;
  36. padding: 30rpx 0;
  37. border-top: 2rpx solid rgba(255, 255, 255, 0.1);
  38. }
  39. .stats-item {
  40. flex: 1;
  41. text-align: center;
  42. }
  43. .stats-item .label {
  44. font-size: 24rpx;
  45. opacity: 0.9;
  46. margin-bottom: 10rpx;
  47. }
  48. .stats-item .amount {
  49. font-size: 32rpx;
  50. font-weight: 500;
  51. }
  52. .withdraw-btn {
  53. width: 100%;
  54. height: 80rpx;
  55. line-height: 80rpx;
  56. text-align: center;
  57. background: #fff;
  58. color: #ff4d4f;
  59. font-size: 30rpx;
  60. font-weight: 500;
  61. border-radius: 40rpx;
  62. margin-top: 30rpx;
  63. border: none;
  64. padding: 0;
  65. display: flex;
  66. align-items: center;
  67. justify-content: center;
  68. }
  69. /* 收入明细 */
  70. .income-list {
  71. background: #fff;
  72. border-radius: 16rpx 16rpx 0 0;
  73. margin-top: 20rpx;
  74. min-height: 400rpx;
  75. }
  76. .list-header {
  77. padding: 30rpx;
  78. font-size: 32rpx;
  79. color: #333;
  80. font-weight: 500;
  81. border-bottom: 2rpx solid #f5f5f5;
  82. }
  83. .list-content {
  84. padding: 0 30rpx;
  85. }
  86. .income-item {
  87. padding: 30rpx 0;
  88. border-bottom: 2rpx solid #f5f5f5;
  89. }
  90. .income-item:last-child {
  91. border-bottom: none;
  92. }
  93. .item-main {
  94. display: flex;
  95. justify-content: space-between;
  96. align-items: center;
  97. margin-bottom: 12rpx;
  98. }
  99. .item-type {
  100. font-size: 30rpx;
  101. color: #333;
  102. font-weight: 500;
  103. }
  104. .item-amount {
  105. font-size: 34rpx;
  106. color: #ff4d4f;
  107. font-weight: 500;
  108. }
  109. .item-sub {
  110. display: flex;
  111. justify-content: space-between;
  112. align-items: center;
  113. margin-bottom: 8rpx;
  114. }
  115. .item-time {
  116. font-size: 24rpx;
  117. color: #999;
  118. }
  119. .item-status {
  120. font-size: 24rpx;
  121. color: #666;
  122. }
  123. .item-order {
  124. font-size: 24rpx;
  125. color: #999;
  126. }
  127. /* 空状态和加载更多 */
  128. .no-more, .empty {
  129. text-align: center;
  130. padding: 40rpx;
  131. color: #999;
  132. font-size: 28rpx;
  133. }
  134. /* 深色模式 */
  135. .dark-mode {
  136. background: #1f1f1f;
  137. }
  138. .dark-mode .income-list {
  139. background: #2a2a2a;
  140. }
  141. .dark-mode .list-header {
  142. color: #fff;
  143. border-bottom-color: #333;
  144. }
  145. .dark-mode .income-item {
  146. border-bottom-color: #333;
  147. }
  148. .dark-mode .item-type {
  149. color: #fff;
  150. }
  151. .dark-mode .item-status {
  152. color: #999;
  153. }
  154. .dark-mode .item-order {
  155. color: #666;
  156. }