index.wxss 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. .data-v-17a44f9d ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important;
  2. }
  3. .order-container.data-v-17a44f9d { width: 100%; height: 100vh; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden;
  4. }
  5. /* 授权等待样式保持一致 */
  6. .auth-waiting-full.data-v-17a44f9d { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 200rpx 40rpx 40rpx; background: linear-gradient(180deg, rgba(0, 122, 255, 0.08) 0%, rgba(247, 248, 250, 1) 100%);
  7. }
  8. .auth-card.data-v-17a44f9d { display: flex; flex-direction: column; align-items: center; text-align: center;
  9. }
  10. .auth-icon.data-v-17a44f9d { width: 200rpx; height: 200rpx; margin-bottom: 50rpx;
  11. }
  12. .auth-title.data-v-17a44f9d { font-size: 44rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 24rpx;
  13. }
  14. .auth-desc.data-v-17a44f9d { font-size: 28rpx; color: #666; line-height: 1.8; margin-bottom: 80rpx; padding: 0 20rpx;
  15. }
  16. .contact-btn.data-v-17a44f9d { width: 360rpx; height: 96rpx; background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%); color: #fff; border-radius: 48rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: bold; border: none; box-shadow: 0 12rpx 30rpx rgba(193, 0, 28, 0.2);
  17. }
  18. .authorized-btn.data-v-17a44f9d { width: 360rpx; height: 96rpx; background: #fff; color: #C1001C; border-radius: 48rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: bold; border: 2rpx solid #C1001C; margin-top: 30rpx;
  19. }
  20. /* 已授权列表页样式 */
  21. .order-container.data-v-17a44f9d { width: 100%; height: 100vh; background: #f7f8fa; display: flex; flex-direction: column; overflow: hidden;
  22. }
  23. .order-scroll-list.data-v-17a44f9d { flex: 1; height: 0;
  24. }
  25. .list-wrapper.data-v-17a44f9d {
  26. padding: 30rpx;
  27. /* 确保最后一条数据不被底部双层固定栏遮挡:汇总栏130 + 菜单栏110 + 安全区 + 缓冲余量 */
  28. padding-bottom: calc(280rpx + env(safe-area-inset-bottom));
  29. }
  30. .list-header.data-v-17a44f9d { padding: 10rpx 0 20rpx;
  31. }
  32. .header-text.data-v-17a44f9d { font-size: 34rpx; font-weight: bold; color: #1a1a1a; position: relative; padding-left: 24rpx;
  33. }
  34. .header-text.data-v-17a44f9d::before { content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 8rpx; background: #C1001C; border-radius: 4rpx;
  35. }
  36. /* 型号卡片:大幅升级美化 */
  37. .model-item-card.data-v-17a44f9d {
  38. background: #fff;
  39. border-radius: 24rpx;
  40. padding: 36rpx;
  41. margin-bottom: 30rpx;
  42. position: relative;
  43. box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.04);
  44. border: 1rpx solid rgba(0,0,0,0.02);
  45. }
  46. .remove-icon.data-v-17a44f9d {
  47. position: absolute;
  48. right: 0;
  49. top: 0;
  50. width: 50rpx;
  51. height: 50rpx;
  52. background: rgba(255, 77, 79, 0.1);
  53. border-radius: 0 24rpx 0 24rpx;
  54. display: flex;
  55. align-items: center;
  56. justify-content: center;
  57. z-index: 5;
  58. }
  59. .x-icon.data-v-17a44f9d { font-size: 32rpx; color: #ff4d4f; font-weight: bold;
  60. }
  61. .card-line.data-v-17a44f9d { display: flex; align-items: center; margin-bottom: 20rpx;
  62. }
  63. .card-line.secondary.data-v-17a44f9d { margin-bottom: 0; padding-top: 20rpx; border-top: 1rpx dashed #f0f0f0;
  64. }
  65. .model-label.data-v-17a44f9d { font-size: 26rpx; color: #999;
  66. }
  67. .model-value.data-v-17a44f9d { font-size: 34rpx; font-weight: bold; color: #333; flex: 1;
  68. }
  69. .count-tag.data-v-17a44f9d { background: #FFF1F2; color: #C1001C; padding: 4rpx 16rpx; border-radius: 8rpx; font-size: 24rpx; font-weight: bold;
  70. }
  71. .count-num.data-v-17a44f9d { font-size: 30rpx; margin-left: 8rpx;
  72. }
  73. .surface-label.data-v-17a44f9d { font-size: 26rpx; color: #999;
  74. }
  75. .surface-text.data-v-17a44f9d { font-size: 28rpx; color: #666;
  76. }
  77. /* 悬浮添加按钮:位置上移避免拥挤 */
  78. .floating-add-btn.data-v-17a44f9d {
  79. position: fixed;
  80. right: 40rpx;
  81. bottom: calc(260rpx + env(safe-area-inset-bottom) + 40rpx);
  82. width: 110rpx;
  83. height: 110rpx;
  84. background: #C1001C;
  85. border-radius: 50%;
  86. display: flex;
  87. align-items: center;
  88. justify-content: center;
  89. box-shadow: 0 12rpx 40rpx rgba(193, 0, 28, 0.4);
  90. z-index: 100;
  91. transition: transform 0.2s;
  92. }
  93. .floating-add-btn.data-v-17a44f9d:active { transform: scale(0.9);
  94. }
  95. .plus-icon.data-v-17a44f9d { width: 40rpx; height: 4rpx; background: #fff; border-radius: 2rpx; position: relative;
  96. }
  97. .plus-icon.data-v-17a44f9d::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: rotate(90deg); border-radius: 2rpx;
  98. }
  99. /* 底部汇总栏:微调间距与样式 */
  100. .footer-summary-bar.data-v-17a44f9d {
  101. position: fixed;
  102. bottom: calc(110rpx + env(safe-area-inset-bottom));
  103. left: 0;
  104. width: 100%;
  105. height: 130rpx;
  106. background: #fff;
  107. border-top: 1rpx solid #f0f0f0;
  108. display: flex;
  109. align-items: center;
  110. justify-content: space-between;
  111. padding: 0 40rpx;
  112. box-sizing: border-box;
  113. z-index: 99;
  114. box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.05);
  115. }
  116. .summary-info.data-v-17a44f9d { display: flex; align-items: center;
  117. }
  118. .count-label.data-v-17a44f9d { font-size: 26rpx; color: #999;
  119. }
  120. .num-highlight.data-v-17a44f9d { font-size: 36rpx; font-weight: bold; color: #1a1a1a; margin: 0 4rpx;
  121. }
  122. .num-highlight.green.data-v-17a44f9d { color: #C1001C;
  123. }
  124. .unit.data-v-17a44f9d { font-size: 24rpx; color: #999; margin-left: 2rpx;
  125. }
  126. .split-line.data-v-17a44f9d { width: 1rpx; height: 30rpx; background: #eee; margin: 0 20rpx;
  127. }
  128. .submit-order-btn.data-v-17a44f9d {
  129. width: 220rpx; height: 80rpx; background: #e0e0e0; color: #666; font-size: 28rpx;
  130. border-radius: 40rpx; display: flex; align-items: center; justify-content: center;
  131. border: none; margin: 0; transition: all 0.3s;
  132. }
  133. .submit-order-btn.data-v-17a44f9d:not([disabled]) {
  134. background: #C1001C; color: #fff; font-weight: bold;
  135. }
  136. /* 全屏缺省页样式 */
  137. .empty-state-full.data-v-17a44f9d {
  138. display: flex;
  139. flex-direction: column;
  140. align-items: center;
  141. justify-content: center;
  142. padding-top: 120rpx;
  143. }
  144. .empty-visual.data-v-17a44f9d { position: relative; margin-bottom: 40rpx; width: 400rpx; height: 400rpx; display: flex; align-items: center; justify-content: center;
  145. }
  146. .empty-img.data-v-17a44f9d { width: 320rpx; height: 320rpx; z-index: 2;
  147. }
  148. .empty-bg-glow.data-v-17a44f9d {
  149. position: absolute; width: 240rpx; height: 240rpx;
  150. background: radial-gradient(circle, rgba(193, 0, 28, 0.15) 0%, rgba(248, 250, 252, 0) 70%);
  151. z-index: 1; border-radius: 50%;
  152. }
  153. .empty-title.data-v-17a44f9d { font-size: 36rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 80rpx;
  154. }
  155. .empty-desc.data-v-17a44f9d { font-size: 26rpx; color: #999; margin-bottom: 60rpx; text-align: center; padding: 0 80rpx; line-height: 1.6;
  156. }
  157. .empty-action-btn.data-v-17a44f9d {
  158. width: 320rpx; height: 90rpx; background: #C1001C; color: #fff;
  159. border-radius: 45rpx; font-size: 30rpx; font-weight: bold;
  160. display: flex; align-items: center; justify-content: center;
  161. box-shadow: 0 10rpx 30rpx rgba(193, 0, 28, 0.2);
  162. border: none;
  163. }
  164. .empty-action-btn.data-v-17a44f9d:active { opacity: 0.8; transform: scale(0.96);
  165. }
  166. .bottom-safe-space.data-v-17a44f9d { height: 100rpx;
  167. }