<div class="data-title">
<div class="data-title-line"></div>
<div class="top-right-box">位置</div>
<div class="bottom-left-box">时间</div>
</div>
.data-title {
height: 40px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
color: #FFFFFF;
font-size: 12px;
font-weight: 400;
.bottom-left-box {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 13px;
padding-top: -5px;
}
.top-right-box {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 13px;
padding-bottom: -5px;
}
.data-title-line {
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: linear-gradient(to bottom left, #237ed3 50%, rgba(255, 255, 255, 0.8), #237ed3 51%);
}
}
结束