<template>
<div class="timeLinebox">
<ul class="timeLinelist" >
<li class="timeLinelis">
<span class="timeLinespanradio" ></span>
<span class="timeLinespanfont" >标题1</span>
</li>
<li class="timeLinelislinebox">
<span class="timeLinelisline" ></span>
</li>
<li class="timeLinelis">
<span class="timeLinespanradio" ></span>
<span class="timeLinespanfont" >标题2</span>
</li>
<li class="timeLinelislinebox">
<span class="timeLinelisline" ></span>
</li>
<li class="timeLinelis">
<span class="timeLinespanradio" ></span>
<span class="timeLinespanfont" >标题3</span>
</li>
<li class="timeLinelislinebox">
<span class="timeLinelisline" ></span>
</li>
<li class="timeLinelis">
<span class="timeLinespanradio" ></span>
<span class="timeLinespanfont" >标题4</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
ul,li,div{
padding: 0;
margin: 0;
list-style: none;
}
.timeLinebox {
color: #fff;
width: 100%;
height: 100px;
.timeLinelist{
height: 20px;
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
// 圆球文字模块
.timeLinelis{
display: inline-block;
width: 16px;
height: 16px;
position: relative;
box-sizing: border-box;
//圆球
.timeLinespanradio{
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #fff;
border-radius: 50%;
}
//文字
.timeLinespanfont{
width: 120px;
text-align: center;
position: absolute;
top: 30px;
left: -52px;
}
}
//横线模块
.timeLinelislinebox{
width: 20vw;
height: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding-left: 1px;
.timeLinelisline{
width: 100%;
height: 2px;
background-color: #fff;
}
}
}
}
</style>
