Skip to content

B
biz.qingxiao.com
Commit a50a5b22 authored by baixian's avatar baixian
Browse files
Options

11111

parent dbd989d7
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 13 deletions
src/pages/deployschool/index.js
View file @ a50a5b22
......@@ -13,6 +13,7 @@ class DeploySchoolForm extends React.Component {
super(props);
this.state = {
deployVisible: false,
curStep: 1,
};
}
componentDidMount() {
......@@ -33,7 +34,7 @@ class DeploySchoolForm extends React.Component {
const {
countdown,
} = this.props;
const { deployVisible } = this.state;
const { deployVisible, curStep } = this.state;
const tailFormItemLayout = {
wrapperCol: {
xs: {
......@@ -101,31 +102,31 @@ class DeploySchoolForm extends React.Component {
<div className={pageStyle.stepLeft}>教务部署</div>
<div className={pageStyle.stepRight}>
<div className={pageStyle.lineBox}>
<div className={pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
<div className={curStep >= 1 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div>
<div className={curStep >= 1 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
<div className={curStep >= 2 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div>
<div className={curStep >= 2 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={pageStyle.circle}>
<div className={curStep >= 3 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div>
<div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div>
<div className={curStep >= 3 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={pageStyle.circle}>
<div className={curStep >= 4 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div>
<div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div>
<div className={curStep >= 4 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={pageStyle.circle}>
<div className={curStep >= 5 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div>
</div>
......@@ -140,7 +141,7 @@ class DeploySchoolForm extends React.Component {
</div>
<div className={pageStyle.stepWrap}>
<div className={pageStyle.stepLeft}>督学营销</div>
<div className={pageStyle.stepRight}>
<div className={pageStyle.stepRight1}>
<div className={pageStyle.lineBox}>
<div className={pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
......@@ -172,6 +173,19 @@ class DeploySchoolForm extends React.Component {
</div>
</div>
</div>
<div className={pageStyle.stepWrap}>
<div className={pageStyle.stepLeft} style={{ marginRight: 40 }}>个性化展示</div>
<div className={pageStyle.stepRight}>
<div className={pageStyle.lineBox}>
<div className={pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div>
</div>
<div className={pageStyle.lineTitleWrap}>
<div className={pageStyle.lineTitle}>个性微官网</div>
</div>
</div>
</div>
</div>
</div>
</Modal>
......
src/pages/deployschool/index.less
View file @ a50a5b22
......@@ -113,6 +113,18 @@
height: 23px;
border-radius: 50%;
border: 6px solid #DCDCDC;
&>img {
display: none;
}
}
.checkedcircle {
width: 23px;
height: 23px;
border-radius: 50%;
&>img {
width: 23px;
height: 23px;
}
}
.line {
width: 92px;
......@@ -132,9 +144,74 @@
padding-right: 40px;
}
}
}
.stepRight1 {
.lineBox {
display: flex;
align-items: center;
}
.circle {
width: 23px;
height: 23px;
border-radius: 50%;
border: 6px solid #DCDCDC;
}
.line {
width: 130px;
height:4px;
background:rgba(220,220,220,1);
}
.lineTitleWrap {
display: flex;
align-items: center;
margin-left: -20px;
.lineTitle {
font-size:18px;
font-family:PingFang SC;
font-weight:500;
color:rgba(210,210,210,1);
line-height:30px;
}
.lineTitle:not(:last-child) {
padding-right: 78px;
}
}
}
.line {
position: relative;
.innerBlueLine {
width: 0%;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background: #21BCFF;
}
.innerBlueShow {
width: 0%;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background: #21BCFF;
animation: innerBlueShow .5s forwards;
}
}
}
}
}
@keyframes innerBlueShow{
0% {
width: 0%;
}
30% {
width: 0%;
}
100% {
width: 100%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment