需求背景
刚入职实习岗位不久,本来投的是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: