main.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. @charset "UTF-8";
  2. /*每个页面公共css */
  3. .hui-button-box {
  4. background-color: #ffffff;
  5. box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
  6. position: fixed;
  7. bottom: 0;
  8. left: 0;
  9. right: 0;
  10. height: 100rpx;
  11. display: flex;
  12. align-items: center;
  13. justify-content: flex-end;
  14. padding-bottom: 0;
  15. padding-bottom: constant(safe-area-inset-bottom);
  16. padding-bottom: env(safe-area-inset-bottom);
  17. padding-right: 40rpx;
  18. padding-left: 40rpx;
  19. }
  20. .text-flex {
  21. display: flex;
  22. justify-content: space-between;
  23. align-items: center;
  24. }
  25. .color-primary {
  26. color: #3c9cff;
  27. }
  28. .color-success {
  29. color: #5ac725;
  30. }
  31. .color-warning {
  32. color: #f9ae3d;
  33. }
  34. .color-error {
  35. color: #f56c6c;
  36. }
  37. .status-tag {
  38. height: 52rpx;
  39. border-radius: 52rpx;
  40. line-height: 52rpx;
  41. padding: 0 30rpx;
  42. font-size: 24rpx;
  43. color: #fff;
  44. }
  45. .status-tag.success {
  46. background-color: #5ac725;
  47. }
  48. .status-tag.primary {
  49. background-color: #3c9cff;
  50. }
  51. .status-tag.info {
  52. background-color: #909399;
  53. }
  54. .status-tag.warning {
  55. background-color: #f9ae3d;
  56. }
  57. .status-tag.error {
  58. background-color: #f56c6c;
  59. }
  60. .process-box .process-set-item {
  61. padding-left: 80rpx;
  62. position: relative;
  63. }
  64. .process-box .process-item-title {
  65. padding: 10rpx 0;
  66. display: flex;
  67. align-items: center;
  68. }
  69. .process-box .process-item-title .label {
  70. font-weight: bold;
  71. }
  72. .process-box .process-item-content {
  73. padding: 5px 0;
  74. }
  75. .process-box .process-set-state {
  76. width: 20px;
  77. height: 20px;
  78. border-radius: 50%;
  79. position: absolute;
  80. left: 7px;
  81. top: 6px;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. }
  86. .process-box .process-set-state .el-icon-success {
  87. font-size: 20px;
  88. }
  89. .process-box .process-set-state.info {
  90. background: rgba(144, 157, 143, 0.4);
  91. }
  92. .process-box .process-set-state.info .process-set-state-1 {
  93. background: #909d8f;
  94. }
  95. .process-box .process-set-state.info .process-set-state-2 {
  96. background: rgba(144, 157, 143, 0.6);
  97. }
  98. .process-box .process-set-state.waiting {
  99. background: rgba(255, 125, 0, 0.4);
  100. }
  101. .process-box .process-set-state.waiting .process-set-state-1 {
  102. background: #ff7d00;
  103. }
  104. .process-box .process-set-state.waiting .process-set-state-2 {
  105. background: rgba(255, 125, 0, 0.6);
  106. }
  107. .process-box .process-set-state.waiting .el-icon-success {
  108. color: #ff7d00;
  109. }
  110. .process-box .process-set-state.success {
  111. background: rgba(0, 180, 42, 0.4);
  112. }
  113. .process-box .process-set-state.success .process-set-state-1 {
  114. background: #00b42a;
  115. }
  116. .process-box .process-set-state.success .process-set-state-2 {
  117. background: rgba(0, 180, 42, 0.6);
  118. }
  119. .process-box .process-set-state.error {
  120. background: rgba(245, 63, 63, 0.4);
  121. }
  122. .process-box .process-set-state.error .process-set-state-1 {
  123. background: #f53f3f;
  124. }
  125. .process-box .process-set-state.error .process-set-state-2 {
  126. background: rgba(245, 63, 63, 0.6);
  127. }
  128. .process-box .process-set-state.state-last {
  129. background: #fff;
  130. }
  131. .process-box .process-set-state-1 {
  132. width: 8px;
  133. height: 8px;
  134. border-radius: 50%;
  135. }
  136. .process-box .process-set-state-2 {
  137. width: 14px;
  138. height: 14px;
  139. border-radius: 50%;
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. }
  144. .process-box .line {
  145. position: absolute;
  146. left: 16px;
  147. width: 2px;
  148. }
  149. .process-box .line.info {
  150. background: rgba(144, 157, 143, 0.4);
  151. }
  152. .process-box .line.waiting {
  153. background: rgba(255, 125, 0, 0.4);
  154. }
  155. .process-box .line.success {
  156. background: rgba(0, 180, 42, 0.4);
  157. }
  158. .process-box .line.error {
  159. background: rgba(245, 63, 63, 0.4);
  160. }
  161. .process-box .line-top {
  162. top: 0;
  163. height: 6px;
  164. }
  165. .process-box .line-bottom {
  166. top: 26px;
  167. bottom: 0;
  168. }
  169. page {
  170. background-color: #f3f4f6;
  171. font-size: 28rpx;
  172. }