step.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. .lay-step {
  2. font-size: 0;
  3. margin: 0 auto;
  4. max-width: 100%;
  5. width: 60%;
  6. padding-left: 15%;
  7. }
  8. .step-item {
  9. display: inline-block;
  10. line-height: 35px;
  11. position: relative;
  12. font-size: 15px;
  13. vertical-align: top;
  14. }
  15. .step-item-tail {
  16. width: 100%;
  17. padding: 0 10px;
  18. position: absolute;
  19. left: 0;
  20. top: 13px;
  21. }
  22. .step-item-tail i {
  23. display: inline-block;
  24. width: 100%;
  25. height: 3px;
  26. margin-top: 4px;
  27. vertical-align: top;
  28. background: #5FB878;
  29. position: relative;
  30. }
  31. .step-item-tail .step-item-tail-done {
  32. /**background: #5FB878; */
  33. height: 3px;
  34. margin-top: 4px;
  35. }
  36. .step-item-head {
  37. position: relative;
  38. display: inline-block;
  39. height: 35px;
  40. width: 35px;
  41. text-align: center;
  42. vertical-align: top;
  43. color: #5FB878;
  44. border: 3px solid #5FB878;
  45. border-radius: 50%;
  46. background: #ffffff;
  47. }
  48. .step-item-head.step-item-head-active {
  49. background: #5FB878;
  50. color: #ffffff;
  51. }
  52. .step-item-main {
  53. display: block;
  54. position: relative;
  55. margin-left: -50%;
  56. margin-right: 50%;
  57. padding-left: 26px;
  58. text-align: center;
  59. }
  60. .step-item-main-title {
  61. font-weight: bolder;
  62. color: #555555;
  63. }
  64. .step-item-main-desc {
  65. color: #aaaaaa;
  66. }
  67. .step-item-main-time {
  68. color: #aaaaaa;
  69. }
  70. .lay-step + [carousel-item]:before {
  71. display: none;
  72. }
  73. .lay-step + [carousel-item] > * {
  74. background-color: transparent;
  75. }