Authored by 石坚

edit user setting step style

{{> common/subtitle}}
<div class="progress">
<div class="progress-pic1"></div>
<div class="returns-status">
<div class="back-wrap">
<div class="progress-bar" style="width: 33%"></div>
<div class="visual-state">
<ul>
<li class="act">
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">1</div>
<div>验证身份</div>
</li>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">2</div>
<div>{{proTitle}}</div>
</li>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">3</div>
<div>完成</div>
</li>
</ul>
</div>
</div>
</div>
<!--
<div class="progress-text">
<span>验证身份</span>
<span class="gray-text">{{proTitle}}</span>
<span class="gray-text pad66">完成</span>
</div>
</div>-->
{{#if isShowMobile}}
<div class="operate1">
{{#data}}
... ...
{{> common/subtitle}}
<div class="progress">
<div class="progress-pic2"></div>
<div class="progress-text">
<!--<div class="progress-pic2"></div>-->
<div class="returns-status">
<div class="back-wrap">
<div class="progress-bar" style="width: 66%"></div>
<div class="visual-state">
<ul>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">1</div>
<div>验证身份</div>
</li>
<li class="act">
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">2</div>
<div>{{proTitle}}</div>
</li>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">3</div>
<div>完成</div>
</li>
</ul>
</div>
</div>
</div>
<!--<div class="progress-text">
<span>验证身份</span>
<span>{{proTitle}}</span>
<span class="gray-text">完成</span>
</div>
</div>-->
{{#if isShowMobile}}
<div class="operate1">
<div class="form-group">
... ...
{{> common/subtitle}}
<div class="progress">
<div class="progress-pic3"></div>
<div class="returns-status">
<div class="back-wrap">
<div class="progress-bar" style="width: 100%"></div>
<div class="visual-state">
<ul>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">1</div>
<div>验证身份</div>
</li>
<li>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">2</div>
<div>{{proTitle}}</div>
</li>
<li class="act">
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">3</div>
<div>完成</div>
</li>
</ul>
</div>
</div>
</div>
<!--<div class="progress-pic3"></div>
<div class="progress-text">
<span>验证身份</span>
<span>{{proTitle}}</span>
<span>完成</span>
</div>
</div>-->
{{#if isModifyMobile}}
<div class="operate2">
<p class="bold"><span>{{> icon/round-hook}}</span>恭喜您,您已经成功更换了绑定手机</p>
... ...
... ... @@ -6,9 +6,62 @@
.progress-pic1 {
width: 600px;
height: 40px;
background-image: resolve('me/setting/progress1.jpg');
background-repeat: no-repeat;
/*background-image: resolve('me/setting/progress1.jpg');
background-repeat: no-repeat;*/
}
.returns-status {
padding: 30px 0 40px;
.back-wrap {
width: 600px;
height: 6px;
background: #eee;
border-radius: 3px;
margin: 0 auto;
}
.progress-bar {
height: 6px;
background: #1d1d1d;
border-radius: 3px;
width: 30%;
}
.visual-state {
width: 100%;
display: table;
position: relative;
top: -15px;
> ul {
display: table-row;
}
li {
display: table-cell;
text-align: center;
width: 33%;
}
.state-bg {
color: #eee;
}
.number {
position: relative;
top: -19px;
}
.act .state-bg {
color: #1d1d1d;
}
.act .number {
color: #fff;
}
}
}
.progress-pic2 {
width: 600px;
height: 40px;
... ...