欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SCSS+div封装步骤条组件

程序员文章站 2022-03-24 12:36:00
需求背景刚入职实习岗位不久,本来投的是Java后端开发的岗位,结果入职分配的岗位是【软件系统开发】,领导说前后端都得会(其实我全都不会),先从前端开始。这次领导给出的需求是一个列表页面和一个详情页面。其中详情页面需要一个横向的步骤条。这个项目原本用的是antd作为前端的组件库,但是目前antd的步骤条的样式不满足设计要求,现在自己动手封装一个。实现思路整体结构(草图)组件分解1.组件[步骤条]由多个步骤(item)组成,每个步骤(item)有两种状态,分别是【已完成】和【未完成】2.每...

需求背景

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

实现思路

  • 整体结构(草图)
    SCSS+div封装步骤条组件
  • 组件分解
    1.组件[步骤条]由多个步骤(item)组成,每个步骤(item)有两种状态,分别是【已完成】和【未完成】
    SCSS+div封装步骤条组件

SCSS+div封装步骤条组件
2.每个步骤可以分解为如下的div结构
SCSS+div封装步骤条组件

  • 编写SCSS的思路

    1. 在定义SCSS样式的时候制定规则:步骤条第一个item的属性width0便可隐藏首个步骤的连接线。
    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>

最终效果

SCSS+div封装步骤条组件

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