Vue实现可移动水平时间轴

  <div class="state_grade"> <!-- --><div class="timeLine" style="overflow: hidden"> <div style="width: 10%;margin-left: 5px"> 编辑里程碑</div><div style="width: 70%" align="center"> <div style="width: 20%;font-size: 14px">里程碑状态：</div><div style="width: 100px;font-size: 14px">开始 </div><div style="width: 100px;font-size: 14px">超期 </div><div style="width: 100px;font-size: 14px">关闭 </div></div><div class="my_timeline_prev"> <!-- <div class="my_timeline_item_line" style="margin-top: -18px"></div>--><!-- <div class="my_timeline_item_content">上</div>--></div><div class="ul_box"> <ul class="my_timeline" style="margin-left: 10px"> <li class="my_timeline_item">  <div class="tooltip">  {{'阶段名称：'+item.stageName}} {{'阶段目标：'+item.stageTarget}} {{'开始时间：'+item.startTime}} {{'结束时间：'+item.endTime}} {{'验收标准：'+item.acceptStar}}  <span>里程碑状态：打开</span><span>里程碑状态：超期</span><span>里程碑状态：关闭</span></div><!--圈圈节点--><!-- <div class="my_timeline_node" style="width: 28px;height: 28px"></div>--><div class="my_timeline_node"> <div style="background-color: #FCFCFC"> </div></div><!--线--><div></div><!--标注--><div class="my_timeline_item_content"> <div>{{item.endTime}}</div> <div>{{item.endTime}}<br />{{item.stageName}}</div><div class="detail_info">{{item.stageName}}</div></div></li></ul></div><div class="my_timeline_next"> <div class="my_timeline_item_content">下</div></div></div> </div></div> .content { height: 100px; } .my_timeline_next { float: left; display: inline-block; background-color: #FCFCFC; cursor: pointer; } .my_timeline_prev { width: 50px; float: left; margin-top: 110px; } .my_timeline_next { width: 34px; margin-top: 80px; } .el-col-24 { margin-left: 10px; padding-bottom: 5px; } .el-col-12 { margin-left: 10px; } .tooltip { } .ul_box { width: 80%; height: 120px; display: inline-block; float: left; margin-top: 50px; overflow: hidden; } .my_timeline_item { display: inline-block; width: 150px; } .my_timeline_node { background-color: #FCFCFC; box-sizing: border-box; border-radius: 50%; cursor: pointer; width: 40px; height: 40px; } .node_picture { //margin-top: 20px; height: 25px; width: 25px; margin-left: 5px; margin-bottom: -7px; } .my_timeline_picture { margin-top: 13px; height: 25px; width: 25px; } .my_timeline_node.active { background-color: #fff !important; border: 6px solid #f68720; } .my_timeline_item_line_last { width: 100%; height: 10px; margin: -14px 0 0 28px; border-left: none; } .my_timeline_item_line_not_last { width: 100%; height: 10px; margin: -14px 0 0 25px; border-top: 2px solid #E4E7ED; border-left: none; } .my_timeline_item_content { margin: 10px 0 0 -10px; width: 90%; /*根据自己项目进行定义宽度*/ font-size: 14px; } .detail_info { width: 80%; height: 250px; padding-bottom: 50px; overflow: hidden; /*设置超出的部分进行影藏*/ text-overflow: ellipsis; /*设置超出部分使用省略号*<strong>本文来源gao@daima#com搞(%代@#码@网2</strong>/ white-space: nowrap; /*设置为单行*/ font-size: 14px; } .state_grade.process_wrap{ border-color: #e4ebf0; margin-top: 150px; border-radius: 2px; padding-bottom: 10px; } .fall-back { float:right; margin-right: 20px; margin-bottom:50px; } .state_grade{ border: 1px solid #e6e6e6; background: #FCFCFC; padding: 10px; //position: relative; /*height: 90px;*/ height: 250px; margin-bottom: 15px; /*margin-top: 15px;*/ } .title_top{ height: 33px; } .obj_tit_wrap{ border-bottom: 1px solid #e6e6e6; padding-bottom: 3px; font-size: 14px; } .obj_tit_mile{ width: 150px; height: 35px; } .tit_deco{ color: #9a9a9a; font-size: 14px; } .add_contain{ display:inline-block; padding-bottom: 10px; padding-top: 20px; } .project_content_warp{ background: #fdfdfd; margin-bottom: 15px; } .project_job_add{ padding-left: 30px; background: #FCFCFC; border-bottom: 1px solid #E5E5E5; line-height: 10px; margin-bottom: 15px; font-size: 14px; } .project_info_span{ display:inline-block; padding-left: 10px; } .el-col-8{ height: 50px; } 

  <div>   <div style="margin-top: 10px"> 里程碑</div> <hr />  序　号 阶段名称 起始时间 结束时间 <div>           <!-- <textarea style="height: 30px" class="el-input__inner"></textarea>-->          </div><div style="text-align: center;margin-top: 30px"> 确认修改</div></div>