index.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. .requirements-container {
  2. width: 1100px;
  3. padding-top: 50px;
  4. padding-bottom: 80px;
  5. background: #ffffff;
  6. border-radius: 8px;
  7. margin-left: auto;
  8. margin-right: auto;
  9. }
  10. .requirements-title {
  11. text-align: center;
  12. height: 40px;
  13. font-size: 28px;
  14. font-weight: 500;
  15. color: #0b121a;
  16. line-height: 40px;
  17. }
  18. .requirements-step-container {
  19. width: 462px;
  20. margin-left: auto;
  21. margin-right: auto;
  22. margin-top: 40px;
  23. display: flex;
  24. height: 80px;
  25. }
  26. .requirements-step {
  27. flex: 1;
  28. height: 32px;
  29. position: relative;
  30. &:nth-last-child(1) {
  31. flex: 0;
  32. }
  33. }
  34. .requirements-step-status {
  35. height: 32px;
  36. position: relative;
  37. }
  38. .requirements-step-icon {
  39. position: relative;
  40. z-index: 5;
  41. width: 32px;
  42. height: 32px;
  43. background: #ebeced;
  44. border-radius: 100%;
  45. transition: all .3s;
  46. &.success {
  47. background: url("~@/assets/img/account/step_cur.png") no-repeat 50% 50%;
  48. background-size: 32px auto;
  49. }
  50. &.wait {
  51. background: #ebeced;
  52. }
  53. &.process {
  54. background: #45c47a;
  55. }
  56. }
  57. .requirements-step-line {
  58. position: absolute;
  59. z-index: 2;
  60. left: 0;
  61. right: 0;
  62. top: 50%;
  63. transform: translateY(-50%);
  64. height: 6px;
  65. background: #ebeced;
  66. transition: all .3s;
  67. &.success {
  68. background: #d0f2de;
  69. }
  70. &.wait {
  71. background: #ebeced;
  72. }
  73. &.process {
  74. background: #d0f2de;
  75. }
  76. }
  77. .requirements-step-tips {
  78. position: absolute;
  79. margin-top: 14px;
  80. font-size: 14px;
  81. font-family: PingFangSC-Regular, PingFang SC;
  82. font-weight: 400;
  83. color: #828c99;
  84. line-height: 20px;
  85. transform: translateX(-50%);
  86. left: 50%;
  87. top: 46px;
  88. white-space: nowrap;
  89. }
  90. .requirements-type-submit {
  91. text-align: center;
  92. margin-top: 80px;
  93. }