SCSS+div封装步骤条组件
程序员文章站
2022-06-28 13:10:29
需求背景刚入职实习岗位不久,本来投的是Java后端开发的岗位,结果入职分配的岗位是【软件系统开发】,领导说前后端都得会(其实我全都不会),先从前端开始。这次领导给出的需求是一个列表页面和一个详情页面。其中详情页面需要一个横向的步骤条。这个项目原本用的是antd作为前端的组件库,但是目前antd的步骤条的样式不满足设计要求,现在自己动手封装一个。实现思路整体结构(草图)组件分解1.组件[步骤条]由多个步骤(item)组成,每个步骤(item)有两种状态,分别是【已完成】和【未完成】2.每...
需求背景
刚入职实习岗位不久,本来投的是Java后端开发的岗位,结果入职分配的岗位是【软件系统开发】,领导说前后端都得会(其实我全都不会),先从前端开始。这次领导给出的需求是一个列表页面和一个详情页面。其中详情页面需要一个横向的步骤条。这个项目原本用的是antd作为前端的组件库,但是目前antd的步骤条的样式不满足设计要求,现在自己动手封装一个。
实现思路
- 整体结构(草图)
- 组件分解
1.组件[步骤条]由多个步骤(item)组成,每个步骤(item)有两种状态,分别是【已完成】和【未完成】
2.每个步骤可以分解为如下的div结构
-
编写SCSS的思路
- 在定义SCSS样式的时候制定规则:步骤条第一个
item
的属性width
为0
便可隐藏首个步骤的连接线。 - 为每个
item
提前定义好两种样式【已完成】【未完成】,根据参数来确定显示的状态。
- 在定义SCSS样式的时候制定规则:步骤条第一个
代码
- 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