我想以水平线的形式制作一个时间顺序图表,事件分支从该水平线以一定角度延伸(有点像火车车厢中的地铁线路图):
我写了这个:
.chrono-line-window {
width: 100%;
height: 400px;
border-radius: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.25) inset;
overflow-x: auto;
padding: 0 70px 0 70px;
display: flex;
align-items: center;
}
.chrono-line {
flex: 0 0 1000px;
height: 10px;
background-color: #333;
display: flex;
align-items: center;
}
.sub-line {
width: 200px;
height: 5px;
background: #333;
margin: 3px;
}
.sub-line:before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333;
}
.top-branch .sub-line:before {
transform: translate(-50%, -40%);
}
.bottom-branch .sub-line:before {
transform: translate(-45%, -35%);
}
.edge-circle {
width: 25px;
height: 25px;
border-radius: 50%;
background: #333;
}
.edge-circle:first-child {
transform: translate(-50%, 0px);
}
.edge-circle:last-child {
margin-left: auto;
transform: translate(50%, 0px);
}
.branch-container {
width: 200px;
}
.branch {
text-align: center;
transform-origin: left center;
}
.top-branch {
transform: translateY(-1.5px) rotate(45deg);
}
.bottom-branch {
transform: translateY(3px) rotate(-45deg);
}
.branch p {
font-size: 16px;
margin-left: 40px;
margin-right: 20px;
}
.branch p:first-child {
font-weight: 600;
}
.branch p:last-child {
font-weight: 300;
}
<div class="chrono-line-window">
<div class="chrono-line">
<div class="edge-circle"></div>
<div class="branch-container top-branch-container">
<div class="branch top-branch">
<p>Name of procedure</p>
<div class="sub-line"></div>
<p>01.01.2000</p>
</div>
</div>
<div class="branch-container">
<div class="branch bottom-branch">
<p>Name of procedure</p>
<div class="sub-line"></div>
<p>01.01.2000</p>
</div>
</div>
<div class="branch-container top-branch-container">
<div class="branch top-branch">
<p>Name of procedure</p>
<div class="sub-line"></div>
<p>01.01.2000</p>
</div>
</div>
<div class="branch-container">
<div class="branch bottom-branch">
<p>Name of procedure</p>
<div class="sub-line"></div>
<p>01.01.2000</p>
</div>
</div>
</div>
</div>
但由于.chrono-line
设置了y display: flex
,线(.branch-container
)严格地水平地生成了一条又一条,并且我想手动设置 X 坐标。
当然,您可以计算边距,但将来我计划在 JS 中生成分支,并且我想根据分支上事件的日期在一行中设置它们的 X 位置,例如margin-left: N px, где N=ширина_ветки*(дата_события-дата_начала_линии)/(дата_конец_линии-дата_начала_линии)