elementui实现横向时间轴_横向时间轴（进度条）

1

2

3

4

5

6

7

8

9

10 .timeline_box {11 width: 100%;12 height: 8rem;13 /*position: relative;*/

14 }15

16 .timeline_container {17 height: 5.6rem;18 border: 1px solid transparent;19 }20

21 .btn-shadow {22 -moz-box-shadow: 0px 0px 6px #20A0FF;23 -webkit-box-shadow: 0px 0px 6px #20A0FF;24 box-shadow: 0px 0px 6px #20A0FF;25 }26 /*线条*/

27

28 .timeline_inner {29 display: block;30 width: 60%;31 height: 0rem;32 border: 1px solid transparent;33 margin: 3.5rem auto 0;34 position: relative;35 }36

37 .timeline {38 /*height: 1px;39 background-color: #20A0FF;40 margin: 1.5rem auto;41 overflow: visible;*/

42 position: relative;43 }44

45 .lines {46 height: 1px;47 background-color: #20A0FF;48 margin: 0rem auto;49 overflow: visible;50 position: absolute;51 width: calc(100% +5px);52 }53

54 .timeline .dot {55 position: absolute;56 top: -4px;57 left: 0;58 width: 8px;59 height: 8px;60 border-radius: 50%;61 background-color: #20A0FF;62 }63

64 .timeline .dot.right {65 right: -10px;66 left: auto;67 }68

69 .timeline .curdot {70 position: absolute;71 left: 50%;72 top: -7px;73 width: 14px;74 height: 14px;75 background-color: #FFF;76 border-radius: 50%;77 border: 1px solid #20A0FF;78 }79

80 .timeline .curdot>.dot {81 display: block;82 margin: 3px;83 position: initial;84 }85 /*百分比*/

86

87 .timeline .dot .period {88 font-size: 11px;89 color: #666666;90 white-space: nowrap;91 width: auto;92 -moz-transform: translate(-50%, 100%);93 -ms-transform: translate(-50%, 100%);94 -webkit-transform: translate(-50%, 100%);95 -o-transform: translate(-50%, 100%);96 transform: translate(-50%, 100%);97 position: absolute;98 top: -3px;99 left: 50%;100 }101 /*提示信息*/

102

103 .cur_tip {104 position: absolute;105 /*border: 1px solid red;*/

106 white-space: nowrap;107 background-color: #20A0FF;108 color: #FFF;109 font-size: 13px;110 padding: 4px 6px 2px 6px;111 width: auto;112 top: -10px;113 overflow: visible;114 border-radius: 2px;115 transform: translate(-50%, -100%);116 -webkit-transform: translate(-50%, -100%);117 -moz-transform: translate(-50%, -100%);118 -o-transform: translate(-50%, -100%);119 -ms-transform: translate(-50%, -100%);120 }121

122 .cur_tip i.arrow {123 display: block;124 -webkit-transform: rotate(-45deg);125 -moz-transform: rotate(-45deg);126 -ms-transform: rotate(-45deg);127 -o-transform: rotate(-45deg);128 transform: rotate(-45deg);129 border-color: #20A0FF;130 position: absolute;131 /*bottom: -10px;*/

132 left: 55%;133 top: 91%;134 z-index: -2;135 background-color: #20A0FF;136 }137

138 .arrow {139 width: 0.4rem;140 height: 0.4rem;141 position: absolute;142 top: 50%;143 right: 0.25rem;144 margin-top: -0.2rem;145 background: transparent;146 border: 1px solid #666;147 border-top: none;148 border-right: none;149 z-index: 2;150 -webkit-border-radius: 0;151 border-radius: 0;152 -webkit-transform: rotate(-45deg);153 -moz-transform: rotate(-45deg);154 -ms-transform: rotate(-45deg);155 -o-transform: rotate(-45deg);156 transform: rotate(-45deg);157 }158

159

160

161

162

185

186

190

191 var s = document.getElementById("num");192 var ele = document.querySelector(".curdot");193 var per = document.querySelector("#percent");194 s.addEventListener("change", function() {195 ele.style.left = num.value + "%";196 per.innerHTML = num.value + "%"

197 })198

199

200

201