vue实现横向时间轴

最近项目需求，一个横向的时间轴，看了看elmentUi只有一个纵向的，干脆自己手撸一个

效果图如下：

  <div class="Timeline"><h2>操作数据</h2><div class="timeaxis"><div v-for="(item,i) in list" :key="i"><div class="timeaxis-box"><div class="timeaxis-topText" :class="{'bd-empty':i==list.length-1}"><div class="text">{{item.warnname}}</div><div class="tiem">2017-03-10</div></div><div class="circular"></div><div class="timeaxis-bootomText"><div class="text">{{item.standard}}</div></div></div></div></div></div>

list: [{warnname: "提交广告",},{warnname: "审核通过",standard: '操作人:jack',},{warnname: "投放",standard: '操作人:jack',}, {warnname: "结束投放",standard: '操作人:jack',},]

  .Timeline {margin-top: 40px;.timeaxis {height: 50px;margin-top: 80px;margin-left: 4em;display: flex;.timeaxis-box {width: 180px;.circular {width: 8px;height: 8px;border-radius: 4px;background: #165dff;margin-bottom: -4px;position: relative;top: -4px;box-shadow: 0px 0px 5px 5px #fff;}.timeaxis-topText {border-bottom: 1px solid #c9cdd4;position: relative;.text {position: absolute;top: -60px;}.tiem {position: absolute;top: -35px;font-size: 14px;color: #9ba3ad;}}.bd-empty {border: 0;}.timeaxis-bootomText {position: relative;.text {position: absolute;top: 10px;font-size: 14px;}}}}}

vue实现横向时间轴相关推荐

vue 实现横向时间轴
效果: <template><div class="timeLine" style="overflow: hidden; ...
CSS实现一个动态横向时间轴
CSS实现一个动态横向时间轴先看效果 html <template><x-view class="stepFlex"><x-viewv-for=&q ...
vue+canvas绘制时间轴
vue+canvas绘制时间轴最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template><d ...
Vue，swipper手写横向时间轴
在一次需求中,UI交互用是关于时间轴,手写代码如下: HTML代码: HTML: <div class="swiper-container" ...
js用滚动条模拟横向时间轴
原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条: (同理,制作纵向时间轴则设置overflow-y: scroll) 在时间轴盒子外层再包裹一个固定大小的div ...
Vue.js 实现时间轴功能
GitHub 时间轴组件封装 Main.js <template><div class="timeline-main"><div class=&quo ...
vue 发展历程时间轴动画_PPT时间轴如何做出创意感？海量素材免费分享，网友：收藏...
时间轴页面,是工作型PPT中常见的页面之一.个人述职或者公司介绍PPT中,使用时间轴,能够让观众更加清晰地了解公司的发展历程. 但是,很多人在制作时间轴页面时,往往是这样的效果: 只有几行字和一根线, ...
android自定义横向时间轴,Android自定义时间轴的实现过程
本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 ...
vue实现物流时间轴效果
实现效果 html <ul class="time-axis" :class="{ 'is-done': item.state === 1 }" v-fo ...

vue实现横向时间轴

最近项目需求，一个横向的时间轴，看了看elmentUi只有一个纵向的，干脆自己手撸一个

vue实现横向时间轴相关推荐

最新文章

热门文章