<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/flowChart.css" />
</head>
<body>
<h4>事件时间轴</h4>
<hr />
<!--事件时间轴-->
<div class="flowChart">
<!--左侧轴-->
<div class="flowChart-left">
<!--虚线-->
<div class="dashed"></div>
</div>
<!--右侧内容-->
<div class="flowChart-right">
<!--一个节点-->
<div class="oneNode">
<!--左侧小球-->
<div class="check check-danger">
拒绝
</div>
<div class="tag-boder">
<div class="tag">
</div>
</div>
<!--右侧内容-->
<div class="NodeDetail">
<!--上-->
<div class="NodeDetail-title">
<!--头像-->
<img src="img/headImg.jpg" />
<!--内容-->
<div class="details">
<h4>脚本之家</h4>
<p>发起流程</p>
</div>
</div>
<!--中-->
<div class="NodeDetail-content">
<span class="badge">回复:</span>
<p>两年后,前女友突然发短信来说:“我们复合吧,转了一圈才发现你是最好的,我后悔了。”
短短几字倾刻间击溃我所有的伪装与防备,热泪流进挥之不去的记忆,夜夜思念的那些牵手在一起的美好日子又悄然浮上心头,感觉不再累多么温暖。
紧张,激动,焦急,我颤抖着双手解脱般地回复道:“活该!”</p>
</div>
<!--下-->
<div class="NodeDetail-footer">
<span>2017-10-31 22:22:31</span>
</div>
</div>
</div>
<div class="oneNode">
<!--左侧小球-->
<div class="check check-success">
同意
</div>
<div class="tag-boder">
<div class="tag">
</div>
</div>
<!--右侧内容-->
<div class="NodeDetail">
<!--上-->
<div class="NodeDetail-title">
<!--头像-->
<img src="img/headImg.jpg" />
<!--内容-->
<div class="details">
<h4>脚本之家</h4>
<p>审批</p>
</div>
</div>
<!--中-->
<div class="NodeDetail-content">
<span class="badge">回复:</span>
<p>无回复</p>
</div>
<!--下-->
<div class="NodeDetail-footer">
<span>2017-10-31 22:22:31</span>
</div>
</div>
</div>
<div class="oneNode">
<!--左侧小球-->
<div class="check check-warning">
回退
</div>
<div class="tag-boder">
<div class="tag">
</div>
</div>
<!--右侧内容-->
<div class="NodeDetail">
<!--上-->
<div class="NodeDetail-title">
<!--头像-->
<img src="img/headImg.jpg" />
<!--内容-->
<div class="details">
<h4>脚本之家</h4>
<p>确认</p>
</div>
</div>
<!--中-->
<div class="NodeDetail-content">
<span class="badge">回复:</span>
<p>同意啊,不错不的</p>
</div>
<!--下-->
<div class="NodeDetail-footer">
<span>2017-10-31 22:22:31</span>
</div>
</div>
</div>
<div class="oneNode">
<!--左侧小球-->
<div class="check check-prime">
发起
</div>
<div class="tag-boder">
<div class="tag">
</div>
</div>
<!--右侧内容-->
<div class="NodeDetail">
<!--上-->
<div class="NodeDetail-title">
<!--头像-->
<img src="img/headImg.jpg" />
<!--内容-->
<div class="details">
<h4>脚本之家</h4>
<p>回退</p>
</div>
</div>
<!--中-->
<div class="NodeDetail-content">
<span class="badge">回复:</span>
<p>同意啊,不错不的</p>
</div>
<!--下-->
<div class="NodeDetail-footer">
<span>2017-10-31 22:22:31</span>
</div>
</div>
</div>
<div class="oneNode">
<!--左侧小球-->
<div class="check">
结束
</div>
<div class="tag-boder">
<div class="tag">
</div>
</div>
<!--右侧内容-->
<div class="NodeDetail">
<!--上-->
<div class="NodeDetail-title">
<!--头像-->
<img src="img/headImg.jpg" />
<!--内容-->
<div class="details">
<h4>脚本之家</h4>
<p >结束流程</p>
</div>
</div>
<!--中-->
<div class="NodeDetail-content">
<span class="badge BadgeGray">无回复</span>
</div>
<!--下-->
<div class="NodeDetail-footer">
<span>2017-10-31 22:22:31</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
纯css3实现工单回复流程垂直时间轴特效源码.zip
版权申诉
184 浏览量
2022-10-31
23:55:40
上传
评论
收藏 5KB ZIP 举报
易小侠
- 粉丝: 6491
- 资源: 9万+