产生原因
公司业务需要这么一个页面，觉得视觉效果还不错
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.title {
position: absolute;
top: 5px;
}
.title-img {
margin-top: 3px;
float: left;
display: block;
}
.title-work {
font-family: MicrosoftYaHei;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.countdown {
font-family: MicrosoftYaHei;
font-size: 6px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
width: 80px;
height: 18px;
background-color: #eff2f4;
border-radius: 2px;
margin-top: 5px;
padding-left: 5px;
}
.timeline {
height: 100%;
position: absolute;
left: 50%;
}
.timeline::before {
content: "";
position: absolute;
left: var(--left);
width: 1px;
top: 0px;
bottom: 0;
background-image: linear-gradient(to bottom,
rgba(144, 156, 173, 0.6) 60%,
rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 5px;
background-repeat: repeat-y;
}
.timeline-dot {
left: 0px;
width: 7px;
height: 7px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 0 1px #d8d8d8;
background: white;
text-align: center;
top: 0;
line-height: 40px;
margin-left: -3.5px;
}
.timeline-left {
position: relative;
right: 212px;
display: flex;
top: 45px;
}
.timeline-left-dot {
position: relative;
left: 205px;
}
.timeline-left-line {
width: 12px;
height: 1px;
background-color: #dedfe0;
position: relative;
left: 180px;
top: 10px;
}
.timeline-left-con {
width: 300px;
height: 100px;
background-color: #ffffff;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
border-radius: 2px;
position: relative;
right: 135px;
bottom: 40px;
}
.timeline-right {
display: flex;
position: relative;
bottom: 50px;
}
.timeline-right-line {
width: 12px;
height: 1px;
background-color: #dedfe0;
position: relative;
right: 3px;
top: 45px;
}
.timeline-right-dot {
position: relative;
right: 5px;
top: 35px;
}
.timeline-right-con {
width: 300px;
height: 150px;
background-color: #ffffff;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
border-radius: 2px;
position: relative;
bottom: 30px;
}
.time-title {
font-family: MicrosoftYaHei;
font-size: 8px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
position: relative;
left: 25px;
padding-bottom: 20px;
}
.timeline-con {
height: 165px;
}
.timeline-status {
height: 20px;
padding-left: 10px;
line-height: 20px;
border-radius: 7px 0px 0px 7px;
font-family: MicrosoftYaHei;
font-size: 7px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
}
.timeline-con-top {
display: flex;
justify-content: space-between;
padding: 10px 0px 0px 10px;
}
.department {
font-family: MicrosoftYaHei;
font-size: 7px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #555555;
}
.timeline-con-mim {
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding: 8px;
}
.timeline-con-bottom-plan {
font-family: MicrosoftYaHei;
font-size: 7px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
padding-left: 8px;
}
.timeline-con-bottom-actual {
font-family: MicrosoftYaHei;
font-size: 7px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding: 0px 0px 8px 8px;
}
.clock-img {
vertical-align: sub;
}
.timeline-right-con-title {
border-bottom: dashed 1px #dedfe0;
padding: 8px;
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
display: flex;
justify-content: space-between;
}
.right-edit-btn {
width: 50px;
height: 24px;
background-color: #f5f5f5;
border-radius: 4px;
text-align: center;
line-height: 22px;
margin-top: -2px;
cursor: pointer;
}
.plan-point {
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
position: relative;
bottom: 19px;
left: 220px;
}
/* 已完成 */
.task-success {
width: 45px;
color: #51bf3f;
background-color: #EEF8EC;
}
.task-warning {
width: 65px;
color: #F2AF59;
background-color: #FDF2E5;
}
.task-error {
width: 65px;
color: #F05F38;
background-color: #FDEAE5;
}
.task-info {
width: 45px;
color: #999999;
background-color: #F3F3F3;
}
.time-countdown {
float: right;
padding-right: 10px;
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
}
</style>
</head>
<body>
<div class="title">
<div> <img class="title-img" src="./切图/方点-蓝.png" alt=""> <span class="title-work">工作计划</span> </div>
<div class="countdown">倒计时：38天</div>
</div>
<div class="timeline">
<div class="time-title"> <img class="title-img" src="./切图/圆点-蓝.png" alt="" />项目进展</div>
<div class="timeline-con">
<div class="timeline-left">
<div class="timeline-left-dot">
<img src="./切图/方点-蓝.png" alt="" />
</div>
<div class="timeline-left-line"></div>
<div class="timeline-left-con">
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-success">已完成</div>
</div>
<div class='timeline-con-mim'>
进行闲置土地认定
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
</div>
</div>
<div class="timeline-right">
<div class="timeline-right-dot">
<img src="./切图/圆点-蓝.png" alt="" />
</div>
<div class="timeline-right-line"></div>
<div class="timeline-right-con">
<div class="timeline-right-con-title">
<div>2022-09-11</div>
<div>王小虎</div>
<div style="cursor: pointer;">
<img src="./切图/隐藏.png" alt="">
<!-- <img src="./切图/可视.png" alt=""> -->
</div>
<div class="right-edit-btn">编辑</div>
</div>
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-success">已完成</div>
</div>
<div class='timeline-con-mim'>
召开市级闲置土地推进会
</div>
<div class="timeline-con-bottom-actual">
<img class="clock-img" src="./切图/时间-1.png" alt="">
实际完成时间 2022/9/18
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
<div class="plan-point">
<img class="clock-img" src="./切图/节点.png" alt="">
计划节点
</div>
</div>
</div>
</div>
<div class="timeline-con">
<div class="timeline-left">
<div class="timeline-left-dot">
<img src="./切图/方点-蓝.png" alt="" />
</div>
<div class="timeline-left-line"></div>
<div class="timeline-left-con">
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-warning">逾期已完成</div>
</div>
<div class='timeline-con-mim'>
进行闲置土地认定
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
</div>
</div>
<div class="timeline-right">
<div class="timeline-right-dot">
<img src="./切图/圆点-蓝.png" alt="" />
</div>
<div class="timeline-right-line"></div>
<div class="timeline-right-con">
<div class="timeline-right-con-title">
<div>2022-09-11</div>
<div>王小虎</div>
<div style="cursor: pointer;">
<img src="./切图/隐藏.png" alt="">
<!-- <img src="./切图/可视.png" alt=""> -->
</div>
<div class="right-edit-btn">编辑</div>
</div>
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-warning">逾期已完成</div>
</div>
<div class='timeline-con-mim'>
召开市级闲置土地推进会
</div>
<div class="timeline-con-bottom-actual">
<img class="clock-img" src="./切图/时间-1.png" alt="">
实际完成时间 2022/9/18
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
<div class="plan-point">
<img class="clock-img" src="./切图/节点.png" alt="">
计划节点
</div>
</div>
</div>
</div>
<div class="timeline-con">
<div class="timeline-left">
<div class="timeline-left-dot">
<img src="./切图/方点-蓝.png" alt="" />
</div>
<div class="timeline-left-line"></div>
<div class="timeline-left-con">
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-error">逾期未完成</div>
</div>
<div class='timeline-con-mim'>
进行闲置土地认定
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
</div>
</div>
<div class="timeline-right">
<div class="timeline-right-dot">
<img src="./切图/圆点-蓝.png" alt="" />
</div>
<div class="timeline-right-line"></div>
<div class="timeline-right-con">
<div class="timeline-right-con-title">
<div>2022-09-11</div>
<div>王小虎</div>
<div style="cursor: pointer;">
<!-- <img src="./切图/隐藏.png" alt=""> -->
<img src="./切图/可视.png" alt="">
</div>
<div class="right-edit-btn">编辑</div>
</div>
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-error">逾期未完成</div>
</div>
<div class='timeline-con-mim'>
召开市级闲置土地推进会
</div>
<div class="timeline-con-bottom-actual">
<img class="clock-img" src="./切图/时间-1.png" alt="">
实际完成时间 2022/9/18
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
<div class="plan-point">
<img class="clock-img" src="./切图/节点.png" alt="">
计划节点
</div>
</div>
</div>
</div>
<div class="timeline-con">
<div class="timeline-left">
<div class="timeline-left-dot">
<img src="./切图/方点-蓝.png" alt="" />
</div>
<div class="timeline-left-line"></div>
<div class="timeline-left-con">
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-info">未开始</div>
</div>
<div class='timeline-con-mim'>
进行闲置土地认定
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
<span class="time-countdown">倒计时：28天</span>
</div>
</div>
</div>
<div class="timeline-right">
<div class="timeline-right-dot">
<img src="./切图/圆点-蓝.png" alt="" />
</div>
<div class="timeline-right-line"></div>
<div class="timeline-right-con">
<div class="timeline-right-con-title">
<div>2022-09-11</div>
<div>王小虎</div>
<div style="cursor: pointer;">
<img src="./切图/隐藏.png" alt="">
<!-- <img src="./切图/可视.png" alt=""> -->
</div>
<div class="right-edit-btn">编辑</div>
</div>
<div class="timeline-con-top">
<div class="department"> <img src="./切图/附件.png" alt="" /> 责任处室：同安分局</div>
<div class="timeline-status task-error">逾期未完成</div>
</div>
<div class='timeline-con-mim'>
召开市级闲置土地推进会
</div>
<div class="timeline-con-bottom-actual">
<img class="clock-img" src="./切图/时间-1.png" alt="">
实际完成时间 2022/9/18
</div>
<div class="timeline-con-bottom-plan">
<img class="clock-img" src="./切图/时间.png" alt="">
计划完成时间 2022/9/18
</div>
<div class="plan-point">
<img class="clock-img" src="./切图/节点.png" alt="">
计划节点
</div>
</div>
</div>
</div>
</div>
</body>
</html>
