微信小店联盟带货小程序

index.wxss 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /* pages/user/index.wxss */
  2. .container {
  3. background: #f5f5f5;
  4. min-height: 100vh;
  5. }
  6. .user-card {
  7. background: linear-gradient(135deg, #ff4d4f, #ff7875);
  8. padding: 30rpx;
  9. display: flex;
  10. align-items: center;
  11. margin-bottom: 20rpx;
  12. color: #fff;
  13. }
  14. .user-avatar {
  15. width: 120rpx;
  16. height: 120rpx;
  17. border-radius: 50%;
  18. overflow: hidden;
  19. margin-right: 30rpx;
  20. border: 4rpx solid rgba(255, 255, 255, 0.3);
  21. }
  22. .user-info {
  23. flex: 1;
  24. }
  25. .user-name {
  26. font-size: 32rpx;
  27. font-weight: bold;
  28. margin-bottom: 10rpx;
  29. }
  30. .user-level {
  31. font-size: 24rpx;
  32. background: rgba(255, 255, 255, 0.2);
  33. padding: 4rpx 16rpx;
  34. border-radius: 20rpx;
  35. display: inline-block;
  36. }
  37. /* 收益概览 */
  38. .earnings-panel {
  39. background: #fff;
  40. margin-bottom: 20rpx;
  41. padding: 20rpx;
  42. }
  43. .earnings-header {
  44. display: flex;
  45. justify-content: space-between;
  46. align-items: center;
  47. padding: 0 10rpx 20rpx;
  48. border-bottom: 1rpx solid #eee;
  49. }
  50. .earnings-header text {
  51. font-size: 28rpx;
  52. color: #333;
  53. }
  54. .view-all {
  55. display: flex;
  56. align-items: center;
  57. color: #999;
  58. font-size: 24rpx;
  59. }
  60. .view-all .icon-right {
  61. font-size: 24rpx;
  62. margin-left: 4rpx;
  63. }
  64. .earnings-grid {
  65. display: flex;
  66. padding: 30rpx 0 10rpx;
  67. }
  68. .earnings-item {
  69. flex: 1;
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. }
  74. .earnings-item .amount {
  75. font-size: 36rpx;
  76. color: #ff4d4f;
  77. font-weight: bold;
  78. margin-bottom: 10rpx;
  79. }
  80. .earnings-item .label {
  81. font-size: 24rpx;
  82. color: #666;
  83. }
  84. /* 菜单组 */
  85. .menu-group {
  86. background: #fff;
  87. margin-bottom: 20rpx;
  88. }
  89. .menu-item {
  90. display: flex;
  91. align-items: center;
  92. padding: 30rpx 20rpx;
  93. border-bottom: 1rpx solid #eee;
  94. }
  95. .menu-item:last-child {
  96. border-bottom: none;
  97. }
  98. .menu-item .iconfont {
  99. font-size: 40rpx;
  100. margin-right: 20rpx;
  101. color: #333;
  102. }
  103. .menu-text {
  104. flex: 1;
  105. font-size: 28rpx;
  106. color: #333;
  107. }
  108. .menu-item .icon-right {
  109. font-size: 24rpx;
  110. color: #999;
  111. }
  112. /* 绑定机构按钮 */
  113. .bind-institution {
  114. background-color: #fff;
  115. }
  116. .bind-institution .icon-bind {
  117. color: #ff7a45;
  118. }
  119. /* 图标颜色 */
  120. .icon-distribution {
  121. color: #1890ff;
  122. }
  123. .icon-order {
  124. color: #fa8c16;
  125. }
  126. .icon-team {
  127. color: #52c41a;
  128. }
  129. .icon-withdraw {
  130. color: #722ed1;
  131. }
  132. .icon-bank {
  133. color: #13c2c2;
  134. }
  135. .icon-invite {
  136. color: #2f54eb;
  137. }
  138. .icon-promotion {
  139. color: #f5222d;
  140. }
  141. .icon-qrcode {
  142. color: #1890ff;
  143. }
  144. .icon-service {
  145. color: #fa8c16;
  146. }
  147. .icon-settings {
  148. color: #8c8c8c;
  149. }