css实现时间轴样式年份选择器

最新推荐文章于 2024-04-03 14:02:31 发布

黑魔仙小拓

最新推荐文章于 2024-04-03 14:02:31 发布

阅读量706

点赞数

分类专栏： vue 文章标签： css css3 html vue.js 前端

本文链接：https://blog.csdn.net/T70H78/article/details/123069474

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

<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"
                  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: 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;
                }
              }
            }
          }
        }