css实现时间轴样式年份选择器效果图
<div class="right">
<span class="label">评价周期</span>
<ul class="year-list">
<li v-for="(year, index) in years":key="index">
<label :class="{ active: currentYear === year }"
><input
name="year"
type="radio"
:value="year"
borderbox
v-model="currentYear"
/>{{ year }}年</label
>
</li>
</ul>
</div>
//样式代码
.year-list {
flex:1;
list-style: none;
display: flex;
position: relative;
padding-top:10px;
box-sizing: border-box;
margin-bottom:0;
&::before {
content:"";
display: block;
width:83.33%;
height:2px;
background-color: #ddd;
position: absolute;
left:8.335%;
top:6px;
}
> li {
flex:1;
text-align: center;
label {
cursor: pointer;
position: relative;
&.active {
color: #409eff;
}
> input {
width:10px;
height:10px;
appearance: none;
position: absolute;
top:-8px;
left:50%;
margin-left:-3px;
&::before {
content:"";
display: block;
width:4px;
height:4px;
border-radius:50%;
border-radius:50%;
border:2px solid #b5b5b5;                  background-color: #fff;
box-sizing: content-box;
}
&:checked::before {
content:"";
display: block;
width:6px;
height:6px;
border-radius:50%;
border:1px solid #409eff;                  box-sizing: content-box;
}
&:checked::after {
content:"";
display: block;
width:4px;
height:4px;
border-radius:50%;
background-color: #409eff;                  position: absolute;
top:2px;
left:2px;
box-sizing: content-box;
}
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。