vue实现物流时间轴效果

实现效果

html

<ul class="time-axis"  :class="{ 'is-done': item.state === 1 }" v-for="(item,index) in timeAxis" :key="index"><li>{{ item.time }}</li><li>{{ item.address }}</li>
</ul>

// 展示时间轴的详情列表timeAxis: [{state: 1, // 状态： 1:已完成，0:未完成time: '2019年11月2日 下午8:50:12',address: '【杭州转运中心】已发出 下一站【杭州石桥城配中心】'},{state: 1,time: '2019年11月2日 下午8:45:11',address: '【杭州转运中心】已收入'},{state: 0,time: '2019年11月2日 下午8:10:09',address: '【浙江省杭州市秋涛路】已发出 下一站【杭州中心】'},{state: 0,time: '2019年11月2日 下午7:58:23',address: '【浙江省杭州市秋涛路公司】已打包'},{state: 0,time: '2019年11月2日 下午7:55:30',address: '【浙江省杭州市秋涛路公司】已收件'}],

css

/* 时间轴 */
@b time-axis {color: #262626;position: relative;padding-left: 30px;list-style: none;&:before {position: absolute;margin-top: 8px;left: 4px;content: " ";height: 8px;width: 8px;border-radius: 50%;background-color: #e8e8e8;}&:after {position: absolute;top: 16px;left: 8px;bottom: -19px;content: " ";width: 1px;border-right: 1px solid #e8e8e8;}&:not(:first-child) {padding-top: 8px;}&:last-child {&:after {display: none;}}&.is-done {&:after {border-color: #0091fa;}&:before {background-color: #1874ff;box-shadow: #1874ff 0 0 10px;}}
}

vue实现物流时间轴效果相关推荐

仿呱呱购物流时间轴效果(swift)
仿呱呱购物流时间轴效果(swift): 在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹.我使用了快递鸟的api,将 ...
vue+canvas绘制时间轴
vue+canvas绘制时间轴最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template><d ...
js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
html简单垂直时间轴,简单的响应式垂直时间轴效果
这是一款简单的响应式垂直时间轴效果.该垂直时间轴效果使用bootstrap网格进行布局,在小屏幕设备上会将所有的时间节点占满整行垂直排列. 使用方法在页面中引入bootstrap.min.css文件 ...
用 CSS 从零写一个时间轴效果
时间轴效果介绍在前端开发中,我们会遇到一些场景特别适合用时间轴来展示,例如下面按照日期时间来记录发生的事件: 还可以做成下面这种比较流行的左右对称卡片风格的时间轴: 如果再稍加装饰,还能有更加高大上 ...
Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
安卓：三分钟实现物流配送页面（时间轴效果）
物流配送页面.主要使用RecycleView实现.通过判断将条目的第一条进行特殊处理.日后复制粘贴备用.效果图如下: 可以通过各个view的相对位置来实现啊,比如那一条竖线可以用imageview来实 ...
vue 发展历程时间轴动画_PPT时间轴如何做出创意感？海量素材免费分享，网友：收藏...
时间轴页面,是工作型PPT中常见的页面之一.个人述职或者公司介绍PPT中,使用时间轴,能够让观众更加清晰地了解公司的发展历程. 但是,很多人在制作时间轴页面时,往往是这样的效果: 只有几行字和一根线, ...
Vue如何实现时间轴
效果: 该时间轴每页最多默认展示三条数据,根据后台数据而定,超过三条前端分页处理: 注: 该时间轴展示的是每条工程数据的鸟瞰图,照片可多张,利用el-carousel.el-image-viewer插 ...

vue实现物流时间轴效果

vue实现物流时间轴效果相关推荐

最新文章

热门文章