横向时间线实现流程进度
2018-04-20 本文已影响3人
wppeng
效果图
timeline.png
- 前台样式
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.timeline-point span {
display: flex;
position: relative;
background: #198B25;
top: 5.2rem;
height: 1rem;
width: 1rem;
border-radius: 0.5rem;
}
.timeline-ul {
display: flex;
flex-wrap: wrap;
}
.my-line {
display: flex;
justify-content: center;
align-items: center;
}
.my-line span {
height: 2px;
width: 12rem;
}
.time-li {
display: flex;
width: 12rem;
}
.timeline-content {
display: flex;
flex-direction: column;
font-size: 0.8rem;
}
.timeline-top {
height: 4rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0.8rem 0;
font-weight: bold;
margin-left: -0.5rem;
}
.timeline-bottom {
display: flex;
flex-direction: column;
padding: 0.8rem 0;
margin-left: -0.5rem;
}
.timeline-top label {
color: #FF5722;
padding-bottom: 0.2rem;
}
.timeline-content-child {
padding: 0.2rem 0;
width: 10rem;
}
/**状态样式**/
.line-stateed {
background: #669a5a;
}
.point-stateed span {
background: #7ab535;
}
.line-stateing {
background: #8d8d8d;
}
.point-stateing span {
background: #5b5d58;
}
.linetop-stateing {
color: #6E6E6E;
}
.linebottom-stateing {
color: #c2c2c2;
}
/***流程开始样式***/
.li-begin {
width: 6rem;
}
.line-begin {
width: 6rem;
}
.timeline-point-begin span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #5FB878;
top: 5rem;
border-radius: 0.7rem;
width: 1.4rem;
height: 1.4rem;
}
.timeline-point-begin span label {
display: flex;
border-radius: 0.45rem;
background: #fff;
width: 0.9em;
height: 0.9rem;
}
</style>
- html主体
<body>
<div class="my-timeline">
<ul id="test" class="timeline-ul">
</ul>
</div>
</body>
- js方法（需引用jquery.min.js）
function FnTimeline(id, data) {
if(data != null) {
var datalist = [];
var count = data.length;
if(count > 0) {
datalist.push('<li class="time-li li-begin">');
datalist.push(' <div class="timeline-point-begin">');
datalist.push(' <span>');
datalist.push(' <label></label>');
datalist.push(' </span>');
datalist.push(' </div>');
datalist.push(' <div class="timeline-content">');
datalist.push('<div class="timeline-top"> ');
datalist.push('</div> ');
datalist.push(' <div class="my-line line-stateed line-begin">');
datalist.push(' <span></span>');
datalist.push(' </div>');
datalist.push(' <div class="timeline-bottom">');
datalist.push(' </div>');
datalist.push(' </div>');
datalist.push(' </li>');
for(var i = 0; i < count; i++) {
var point = ' <div class="timeline-point point-stateed">';
var line = ' <div class="my-line line-stateed">';
var content = ' <div class="timeline-bottom">';
var jobhtml = ' <span>' + data[i].job + '</span>';
if(data[i].state == 0) {
point = ' <div class="timeline-point point-stateing">';
line = ' <div class="my-line line-stateing">';
content = ' <div class="timeline-bottom linebottom-stateing">';
jobhtml = ' <span class="linetop-stateing">' + data[i].job + '</span>';
}
datalist.push(' <li class="time-li">');
datalist.push(point);
datalist.push(' <span></span>');
datalist.push(' </div>');
datalist.push(' <div class="timeline-content">');
datalist.push(' <div class="timeline-top">');
if(data[i].timelimit == "") {
datalist.push(' <label></label>');
} else {
datalist.push(' <label>时限' + data[i].timelimit + '天</label>');
}
datalist.push(jobhtml);
datalist.push('</div> ');
datalist.push(line);
datalist.push(' <span></span>');
datalist.push('</div> ');
datalist.push(content);
datalist.push(' <div class="timeline-content-child">');
datalist.push('<span>' + data[i].name + '</span> ');
datalist.push(' <span>' + data[i].time + '</span>');
datalist.push(' </div>');
datalist.push(' <div class="timeline-content-child">');
datalist.push(' <label>审核意见:</label>');
datalist.push(' <span>' + data[i].remark + '</span>');
datalist.push(' </div>');
datalist.push('</div> ');
datalist.push(' </div>');
datalist.push(' </li>');
}
}
var datahtml = datalist.join("");
$("#" + id).append(datahtml);
}
}
- 数据源
var datajson = [{
"name": "张三",
"time": "",
"job": "商务专工",
"state": 1,
"remark": "批准商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核",
"timelimit": ""
},
{
"name": "周一",
"time": "2018.04.19.11:20:36",
"job": "商务专工审核",
"state": 1,
"remark": "批准商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核商务专工审核",
"timelimit": 1
},
{
"name": "钱六",
"time": "2018.04.20.11:20:33",
"job": "商务经理审核",
"state": 0,
"remark": "",
"timelimit": 2
}
];
- 调用方法
FnTimeline('test', datajson);
