實現思路及步驟：
頁面分為四個部分
1、左側時間
2、中間圓點
3、右側內容
4、虛線部分
最外層div,relative布局,方便子元素計算尺寸
左側時間固定寬度，顯示時間(本demo:100px),之後absolute絕對定位(left:0)
中間圓點absolute絕對定位,因為左側寬度已經定為100px,圓點left值只需要大於100px肯定就會顯示在時間右側(具體值可以根據需求修改)
最右側的內容展示區域同理也是ab定位，值大於左側時間left值+圓點時間left值就可以(具體值可以根據需求修改)
最後只剩下虛線部分就可以得出結論，虛線的left值 = 圓點距離左側時間-圓點寬度的一半
此時，虛線正好壓在圓點中間部分，調整一下圓點和虛線的z-index值，即可
html**：}}
js**：
mounted() {
this.$refs.dotted.style.left = this.$refs.circular[0].offsetleft - 12 + 'px'
css**：
.time h2{
color:#ff6600;
margin: 20px auto 30px auto;
.time-line{
position: relative;
width:300px;
margin:0 auto;
.time-line-div{
position:relative;
min-height:85px;
.time-line-div>p:nth-child(1){
position: absolute;
left:0;
width:100px;
.time-line-div>p:nth-child(2){
position:absolute;
left: 100px;
width:15px;
height:15px;
top:10px;
background:#5cb85c;
border-radius: 50%;
z-index: 10
.time-line-div>p:nth-child(3){
position:absolute;
left: 130px;
padding: 10px;
background: #317ef3;
font-size:.8rem;
color:#fff;
border-radius: 10px;
.img-dotted{
position:absolute;
width:20px;
height:100%;
top:0;
z-index: 1;
background:url('/static/images/vue/dotted.png');
.time-line-detail>p{
margin-left: 30px;
margin-bottom: 10px;
Vue之時間軸元件
實現思路及步驟 頁面分為四個部分 1 左側時間 2 中間圓點 3 右側內容 4 虛線部分 最外層div,relative布局,方便子元素計算尺寸 左側時間固定寬度，顯示時間 本demo 100px 之後absolute絕對定位 left 0 中間圓點absolute絕對定位,因為左側寬度已經定為10...
mysql 時間軸 使用MySQL計算時間軸的變化
我是mysql的新手,我需要你的幫助.我有一張包含類似資料的 robotposx robotposy robotposdir robotshortestpath 0.1 0.2 15 1456 0.2 0.3 30 1456 0.54 0.67 15 1456 0.68 0.98 22 1234 0...
時間軸運動
截了一小段gif效果圖，如下 js 如下 function win,console.log timewdarr 計算時間差 var timediff function time1,time2 獲取時間段，並存入陣列 timedata.each function index,el console.lo...