SCSS+div封装步骤条组件

需求背景

刚入职实习岗位不久，本来投的是Java后端开发的岗位，结果入职分配的岗位是【软件系统开发】，领导说前后端都得会（其实我全都不会），先从前端开始。这次领导给出的需求是一个列表页面和一个详情页面。其中详情页面需要一个横向的步骤条。这个项目原本用的是antd作为前端的组件库，但是目前antd的步骤条的样式不满足设计要求，现在自己动手封装一个。

实现思路

• 整体结构（草图）
  
• 组件分解
  1.组件[步骤条]由多个步骤（item）组成，每个步骤（item）有两种状态，分别是【已完成】和【未完成】
  

2.每个步骤可以分解为如下的div结构

• 编写SCSS的思路

  1. 在定义SCSS样式的时候制定规则：步骤条第一个item的属性width为0便可隐藏首个步骤的连接线。
  2. 为每个item提前定义好两种样式【已完成】【未完成】，根据参数来确定显示的状态。

代码

• SCSS`

.main {
  display: flex;
  margin:0 auto;
  width: 80%;
  &-item:first-child {
    & .sincard-detail-main-item-circle_area_line0 {
      width: 0px;
    }
  }
  &-item:first-child {
    & .sincard-detail-main-item-circle_area_line1 {
      width: 0px;
    }
  }
  //******************绘制步骤结点********************
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    &-title0{      /////////**********绘制气泡主体的圆角矩形***************/////////
      height:45px;
      width: 60%;
      //font-size: 16px;
      display: flex;
      justify-content: center;
      position: relative;
      background:transparent;///////状态为 未完成 的步骤气泡颜色透明
      border:100px;
      border-radius:15px;

    }
    &-title1{
      height:45px;
      width: 60%;
      //font-size: 16px;
      display: flex;
      justify-content: center;
      position: relative;
      background:#13A3DE;
      border:100px;
      border-radius:15px;//圆角的直径

    }
    //****************字体***************
    &-title_text0{
      display: flex;
      justify-content: center;
      position: absolute;
      font-size:18px;
      font-weight: bold;
      color: dimgrey;
      top:20%
    }
    &-title_text1{
      display: flex;
      justify-content: center;
      position: absolute;
      font-size:18px;
      font-weight: bold;
      color: white;
      top:20%
    }
    //***********绘制气泡的小尖尖************
    &-title_delta0{
      height:0px;           /////////////////***状态为未完成的步骤小尖尖为透明***///////////////////
      width: 0px;
      display: flex;
      justify-content: center;
      position: relative;
      border:10px solid;
      border-color:transparent;

    }
    &-title_delta1{
      height:0px;
      width: 0px;
      display: flex;
      justify-content: center;
      position: relative;
      border:10px solid;
      border-color: #13A3DE transparent transparent transparent;

    }
    //**************绘制小圆点**************
    &-circle_area{
      width: 100%;
      display: flex;
      justify-content: center;
      //align-items: center;
      position: relative;
      &_point0{
        width: 40px;
        height: 40px;
        background: #ccc;
        border-radius: 50%;
      }
      &_point1{/////////////*********已完成的结点的圆点颜色为蓝色**********/////////////
        width: 40px;
        height: 40px;
        background: #13A3DE;
        border-radius: 50%;
        z-index: 1;
      }
      //**************绘制连接线***************
      &_line0 {
        position: absolute;
        width: 100%;
        height: 6px;
        background: #ccc;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
      }
      &_line1 {/////////////*********已完成的结点的连接线颜色为蓝色**********/////////////
        position: absolute;
        width: 100%;
        height: 8px;
        background: #13A3DE;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
      }
    }
  }
}

• div

 <div className="main">
                    {
                        status_list.map((item)=>(
                            <div className="main-item">
                                <div className={`main-item-title${item.status}`}>
                                    <Text className={`main-item-title_text${item.status}`}>
                                        {item.name}
                                    </Text>
                                </div>
                                <div className={`main-item-title_delta${item.status}`}></div>
                                <div className={`main-item-circle_area`}>
                                    <div className={`main-item-circle_area_line${item.status}`}>
                                    </div>
                                    <div className={`main-item-circle_area_point${item.status}`}>
                                    </div>
                                </div>
                            </div>
                        ))
                    }
                </div>

最终效果

本文地址：https://blog.csdn.net/weixin_44019157/article/details/107529807