vue手写步骤条功能

给我焦虑

已于 2023-08-09 12:07:07 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html vue

于 2021-01-19 10:02:18 首次发布

本文链接：https://blog.csdn.net/let_arr/article/details/112800040

vue 专栏收录该内容

6 篇文章

订阅专栏

效果图：
在这里插入图片描述
可能代码质量也不太好

html代码：

	<div class="step">
      <div>
        <div class="posit">
          <div :class="'radius' + ' ' +(step>=1 ? 'speed-bg-color':'')">
            <van-icon name="records" :color="step>=1?'#fff':''"/>
          </div>
          <div class="line line1"></div>
        </div>
        <div class="text">
          <h1 :class="'fonts'+' '+ (step>=1 ? 'speed-text-color':'')">在线报名</h1>
          <p class="s-font ccc-color">报名时间：</p>
        </div>
      </div>
      <div>
        <div class="posit">
          <div :class="'radius' + ' ' +(step>=2 ? 'speed-bg-color':'')">
            <van-icon name="calendar-o" :color="step>=2?'#fff':''" />
          </div>
          <div class="line"></div>
        </div>
        <div class="text">
          <h1 :class="'fonts'+' '+ (step>=2 ? 'speed-text-color':'')">考试安排</h1>
          <p class="s-font ccc-color">考试时间：</p>
          <p class="s-font ccc-color">考试地点：</p>
        </div>
      </div>
      <div>
        <div class="posit">
          <div :class="'radius' + ' ' +(step>=3 ? 'speed-bg-color':'')">
            <van-icon name="phone-circle-o" :color="step>=3?'#fff':''"  />
          </div>
          <div class="line"></div>
        </div>
        <div class="text">
          <h1  :class="'fonts'+' '+ (step>=3 ? 'speed-text-color':'')">参加考试</h1>
        </div>
      </div>
      <div>
        <div class="posit">
          <div :class="'radius' + ' ' +(step>=4 ? 'speed-bg-color':'')">
            <van-icon name="idcard" :color="step>=4?'#fff':''"  />
          </div>
          <div class="line"></div>
        </div>
        <div class="text">
          <h1 :class="'fonts'+' '+ (step>=4 ? 'speed-text-color':'')">核发证书</h1>
        </div>
      </div>
    </div>

css代码：

 h1{
   color: #999;
 }
 .info {
   height: 1rem;
   width: 100%;
   display: flex;
   align-items: center;
   margin-bottom: 0.2rem;
   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.349019607843137);
 }
 .info > div {
   flex: 1;
   display: flex;
   padding-left: 0.3rem;
   /* justify-content: ; */
   align-items: center;
 }
 .step {
   width: 100%;
   /* height: 3rem; */
   padding-left: 2rem;
   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.349019607843137);
 }
 .step > div {
   height: 2rem;
   /* background-color: skyblue; */
   margin-bottom: 0.1rem;
   position: relative;
 }
 .posit{
   position: absolute;
   left: -1.5rem;
   top: 0.5rem;
 }
 .radius{
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   /* background-color: #999; */
   border: 1px solid #999;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .van-icon{
   font-size: 0.8rem;
   color: #999;
 }
 .line{
   height: 1.1rem;
   width: 1px;
   background: #999;
   position: absolute;
   left: 0.5rem;
   top: -1.1rem;
 }
 .line1{
   height: 0;
   width: 0;
 }
 .text{
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 .speed-bg-color{
   border: none !important;
   background-color: #00f !important;
   
 }
 .speed-text-color{
   color: #00f !important;
 }
 .speed-icon-color{
   color: #fff !important;
 }

js代码：

export default {
  data(){
    return{
      step: 3,
    }
  }
}
</script>