CSS实现一个动态横向时间轴

先看效果

html

<template><x-view class="stepFlex"><x-viewv-for="(item, index) in testList":key="index"style="position: relative; flex: 1; text-align: center;margin-top:-10px"><x-view >{{ item.name }}</x-view><x-view:class="item.ceshi == '1' ? 'greenCircle' :item.ceshi == '2' ? 'now' : 'greyCircle'"></x-view>  <x-viewv-if="index !== testList.length - 1":class="testList[index + 1].ceshi != '3' ? 'greenline' : 'greyline'"></x-view><x-view style="margin-top:20px">{{ item.time }}</x-view></x-view></x-view>
</template>

css

.stepFlex {display: flex;.greenCircle {top: calc(50% - 4px);left: calc(50% - 4px);position: absolute;z-index: 2;width: 8px;height: 8px;border-radius: 50%;background-color: #08d0c3;}.now{top: calc(50% - 8px);left: calc(50% - 8px);position: absolute;z-index: 3;width: 8px;height: 8px;border-radius: 50%;background-color: #08d0c3;border: 4px solid #cef6f3;}.greyCircle {top: calc(50% - 4px);left: calc(50% - 4px);position: absolute;z-index: 2;width: 8px;height: 8px;border-radius: 50%;background-color: #ccc;}.greenline {width: 100%;top: calc(50% - 2px);left: calc(50% - 2px);height: 2px;background-color: #08d0c3;position: absolute;}.greyline {height: 0;border: 1px dashed #ccc;width: 100%;top: calc(50% - 2px);left: calc(50% - 2px);position: absolute;}
}

testList:[{name:'购买',time:'2019/01/25',ceshi:1},{name:'起息',time:'2019/01/25',ceshi:2},{name:'到期',time:'2019/01/25',ceshi:3}],

CSS实现一个动态横向时间轴相关推荐

html做一页关于时间轴的网站,前端css实现最基本的时间轴的示例代码
本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原型: 代码: 状态详情 #timeleft div { height: 65px; color: #333333; } #t ...
用HTML+css制作一个动态的天气图标
前言本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的一.HTML部分 <!DOCTYPE html& ...
js用滚动条模拟横向时间轴
原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条: (同理,制作纵向时间轴则设置overflow-y: scroll) 在时间轴盒子外层再包裹一个固定大小的div ...
一个简单的时间轴demo
一个时间轴的组成使用一个块级元素包裹内容,并未块级元素设置边框定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上使其中的内容不溢出,自动换行,内容自动撑高英文自动换行:w ...
vue实现横向时间轴
最近项目需求,一个横向的时间轴,看了看elmentUi只有一个纵向的,干脆自己手撸一个效果图如下: <div class="Timeline"><h2>操 ...
android自定义横向时间轴,Android自定义时间轴的实现过程
本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 ...
Vue，swipper手写横向时间轴
在一次需求中,UI交互用是关于时间轴,手写代码如下: HTML代码: HTML: <div class="swiper-container" ...
用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
Echarts 动态数据+时间轴格式化
最近再项目中遇到实时绘制数据波形图,设计到echarts 的时间轴问题,下面是绘制的图我们直接看option配置项后面画红框的为x横轴时间轴线格式化的重要部分,你可以根据设计原图的格式化自己想要的 ...

CSS实现一个动态横向时间轴

CSS实现一个动态横向时间轴

CSS实现一个动态横向时间轴相关推荐

最新文章

热门文章