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 { ...@@ -13,6 +13,7 @@ class DeploySchoolForm extends React.Component {
super(props); super(props);
this.state = { this.state = {
deployVisible: false, deployVisible: false,
curStep: 1,
}; };
} }
componentDidMount() { componentDidMount() {
...@@ -33,7 +34,7 @@ class DeploySchoolForm extends React.Component { ...@@ -33,7 +34,7 @@ class DeploySchoolForm extends React.Component {
const { const {
countdown, countdown,
} = this.props; } = this.props;
const { deployVisible } = this.state; const { deployVisible, curStep } = this.state;
const tailFormItemLayout = { const tailFormItemLayout = {
wrapperCol: { wrapperCol: {
xs: { xs: {
...@@ -101,31 +102,31 @@ class DeploySchoolForm extends React.Component { ...@@ -101,31 +102,31 @@ class DeploySchoolForm extends React.Component {
<div className={pageStyle.stepLeft}>教务部署</div> <div className={pageStyle.stepLeft}>教务部署</div>
<div className={pageStyle.stepRight}> <div className={pageStyle.stepRight}>
<div className={pageStyle.lineBox}> <div className={pageStyle.lineBox}>
<div className={pageStyle.circle}> <div className={curStep >= 1 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
</div> </div>
<div className={pageStyle.line}> <div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div> <div className={curStep >= 1 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div> </div>
<div className={pageStyle.circle}> <div className={curStep >= 2 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
</div> </div>
<div className={pageStyle.line}> <div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div> <div className={curStep >= 2 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div> </div>
<div className={pageStyle.circle}> <div className={curStep >= 3 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div> </div>
<div className={pageStyle.line}> <div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div> <div className={curStep >= 3 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div> </div>
<div className={pageStyle.circle}> <div className={curStep >= 4 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div> </div>
<div className={pageStyle.line}> <div className={pageStyle.line}>
<div className={pageStyle.innerBlueLine}></div> <div className={curStep >= 4 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div> </div>
<div className={pageStyle.circle}> <div className={curStep >= 5 ? pageStyle.checkedcircle : pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
</div> </div>
</div> </div>
...@@ -140,7 +141,7 @@ class DeploySchoolForm extends React.Component { ...@@ -140,7 +141,7 @@ class DeploySchoolForm extends React.Component {
</div> </div>
<div className={pageStyle.stepWrap}> <div className={pageStyle.stepWrap}>
<div className={pageStyle.stepLeft}>督学营销</div> <div className={pageStyle.stepLeft}>督学营销</div>
<div className={pageStyle.stepRight}> <div className={pageStyle.stepRight1}>
<div className={pageStyle.lineBox}> <div className={pageStyle.lineBox}>
<div className={pageStyle.circle}> <div className={pageStyle.circle}>
{/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */} {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
...@@ -172,6 +173,19 @@ class DeploySchoolForm extends React.Component { ...@@ -172,6 +173,19 @@ class DeploySchoolForm extends React.Component {
</div> </div>
</div> </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>
</div> </div>
</Modal> </Modal>
......
src/pages/deployschool/index.less
View file @ a50a5b22
...@@ -113,6 +113,18 @@ ...@@ -113,6 +113,18 @@
height: 23px; height: 23px;
border-radius: 50%; border-radius: 50%;
border: 6px solid #DCDCDC; border: 6px solid #DCDCDC;
&>img {
display: none;
}
}
.checkedcircle {
width: 23px;
height: 23px;
border-radius: 50%;
&>img {
width: 23px;
height: 23px;
}
} }
.line { .line {
width: 92px; width: 92px;
...@@ -132,9 +144,74 @@ ...@@ -132,9 +144,74 @@
padding-right: 40px; 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