index.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. li{
  2. list-style: none;
  3. }
  4. .bus-lzlist {
  5. counter-reset: sectioncounter
  6. }
  7. .bus-lzlist:hover ol:after {
  8. opacity: 0
  9. }
  10. .bus-lzlist ol {
  11. display: inline-block;
  12. position: relative
  13. }
  14. .bus-lzlist ol:before {
  15. position: absolute;
  16. top: 10px;
  17. right: 5px;
  18. left: 5px;
  19. height: 2px;
  20. background: #317cf7;
  21. content: ""
  22. }
  23. .bus-lzlist ol:after {
  24. position: absolute;
  25. right: 0;
  26. bottom: 0;
  27. left: 0;
  28. height: 50px;
  29. background-image: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),color-stop(96%,#fff));
  30. background-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff 96%);
  31. opacity: 1;
  32. -webkit-transition: all .2s;
  33. transition: all .2s;
  34. content: "";
  35. pointer-events: none
  36. }
  37. .bus-lzlist ol+ol {
  38. margin-top: 5px
  39. }
  40. .bus-lzlist li {
  41. float: left;
  42. position: relative;
  43. width: 23px;
  44. text-align: center
  45. }
  46. .bus-lzlist li:before {
  47. display: block;
  48. margin: 0 auto 5px;
  49. -webkit-box-sizing: border-box;
  50. box-sizing: border-box;
  51. border: 2px solid #317cf7;
  52. border-radius: 50%;
  53. width: 23px;
  54. height: 23px;
  55. font-size: 12px;
  56. font-weight: 600;
  57. line-height: 20px;
  58. background: #fff;
  59. content: counter(sectioncounter);
  60. counter-increment: sectioncounter
  61. }
  62. /*.bus-lzlist li:after {*/
  63. /* display: block;*/
  64. /* position: absolute;*/
  65. /* top: 10px;*/
  66. /* right: 5px;*/
  67. /* left: 5px;*/
  68. /* height: 2px;*/
  69. /* background: #317cf7;*/
  70. /* content: ""*/
  71. /*}*/
  72. .bus-lzlist li:hover a {
  73. max-height: auto;
  74. color: #629dff
  75. }
  76. .bus-lzlist li:active a {
  77. color: #115fe0
  78. }
  79. .bus-lzlist li.active:after {
  80. position: absolute;
  81. top: 26px;
  82. left: 50%;
  83. margin-left: -4px;
  84. width: 8px;
  85. height: 8px;
  86. background: #317cf7;
  87. -webkit-transform: rotate(45deg);
  88. transform: rotate(45deg);
  89. content: ""
  90. }
  91. .bus-lzlist li.active a {
  92. position: relative;
  93. z-index: 1;
  94. border-radius: 4px;
  95. color: #fff!important;
  96. background-color: #317cf7
  97. }
  98. .bus-lzlist li+li {
  99. margin-left: 30px
  100. }
  101. .bus-lzlist a {
  102. display: block;
  103. overflow: hidden;
  104. table-layout: fixed;
  105. margin: 0 auto;
  106. padding: 4px 3px 4px 4px;
  107. width: 14px;
  108. max-height: 170px;
  109. font-size: 14px;
  110. text-align: left;
  111. letter-spacing: 3px;
  112. word-wrap: break-word;
  113. -webkit-transition: color .2s;
  114. transition: color .2s;
  115. -webkit-writing-mode: vertical-rl;
  116. writing-mode: vertical-rl;
  117. -webkit-writing-mode: tb-rl;
  118. -ms-writing-mode: tb-rl;
  119. writing-mode: tb-rl;
  120. cursor: pointer;
  121. }
  122. .bus-lzlist.rendermac li:before,.bus-lzlist a {
  123. line-height: 17px
  124. }
  125. .bus-lzlist.rendermac a {
  126. margin-left: 4px
  127. }
  128. .bus-lzlist.renderpc a {
  129. margin-left: 2px
  130. }
  131. .bus-lzlist.renderm li:before {
  132. line-height: 15px
  133. }
  134. .inStation{
  135. top: -16px;
  136. left: -10px;
  137. position: absolute;
  138. width: 48px;
  139. height: 44px;
  140. }
  141. .outStation{
  142. top: -6px;
  143. left: 15px;
  144. position: absolute;
  145. width: 42px;
  146. height: 24px;
  147. }
  148. .outStation img, .inStation img{
  149. width: 24px;
  150. height: 24px;
  151. }
  152. .outStation div, .inStation div{
  153. font-size: 1px;
  154. height: 20px;
  155. }