Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
bd7d1b5f by 任超
Options

style:样式

1 parent 91df794e
Inline Side-by-side
Showing 6 changed files with 102 additions and 97 deletions
......@@ -14,6 +14,11 @@
text-align: center;
flex: 1;
width: 100%;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.app_progress .layui-progress {
flex: 2.1;
......
......@@ -22,37 +22,47 @@
color: #0091FF;
}
.audit_progress {
padding: 30px 20px;
border: 1px solid #eeeeee;
margin: 20px 0;
}
.audit_progress h2 {
font-size: 16px;
font-weight: 600;
color: #5FB878;
line-height: 16px;
text-align: center;
color: #6D7278;
}
.audit_progress h2 img {
width: 24px;
height: 24px;
position: relative;
top: 5px;
}
/* ------------缴费信息---------------- */
.payment_information h3, .payment_channel h3{
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
padding-left: 8px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.payment_information ul{
font-size: 0;
}
.payment_information ul li{
position: relative;
border-bottom: 1px dotted #E6E6E6;
padding-bottom: 15px;
}
.payment_information h3::after, .payment_channel h3:after {
position:absolute;
content:"";
left:0;
width:4px;
height:12px;
border-radius: 1px;
top: 5px;
background-color: #0091FF;
}
.payment_information ul li {
width: 49%;
display: inline-block;
width: 50%;
font-size: 14px;
line-height: 28px;
}
.payment_information ul li span {
color: #9B9B9B;
line-height: 36px;
}
.payment_information ul li p, .payment_information h5 ,.payment_information h6 {
display: inline-block;
......@@ -67,64 +77,62 @@
}
/* ----------------------缴费通道------------------------------- */
.payment_channel {
margin: 20px 0;
}
.payment_channel ul {
font-size: 0;
margin-top: 20px;
}
.payment_channel ul li {
.payment_channel .payment_channel_con li {
width: 200px;
height: 90px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DEDEDE;
display: inline-block;
width: 50%;
text-align: center;
line-height: 90px;
margin-right: 15px;
cursor: pointer;
}
.payment_channel ul li img {
width: 60px;
height: 60px;
}
.payment_channel ul li span {
display: block;
text-align: center;
font-size: 16px;
margin-top: 5px;
}
.code {
text-align: center;
}
.code img {
width: 150px;
height: 150px;
}
/* ------------------支付成功----------------------- */
.payment_success h5 {
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.payment_channel .payment_channel_con li:hover {
border: 1px solid #0091FF;
background: rgba(47, 165, 255, 0.06);
}
.payment_channel .payment_channel_con li img {
width: 24px;
height: 24px;
display: inline-block;
position: relative;
top: 6px;
}
.payActive {
border: 1px solid #0091FF!important;
background: rgba(47, 165, 255, 0.06)!important;
}
/* ----------------------支付成功------------------------------ */
.scan_code {
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.scan_code {
text-align: center;
margin:30px 0 100px 0;
}
.payment_success h5 img {
width: 50px;
height: 50px;
}
.payment_success h5 p {
text-align: center;
.scan_code p {
font-size: 28px;
font-weight: 600;
margin-top: 5px;
}
.payment_success ul {
margin-top: 20px;
width: 236px;
line-height: 36px;
margin: 0 auto;
margin-top: 30px;
}
.payment_success ul li {
text-align: left;
}
.payment_success ul li span{
color: #9B9B9B;
color: #FA6400;
}
.payment_success ul li p {
.code_detail img {
width: 32px;
height: 32px;
display: inline-block;
}
.next_button {
text-align: center;
margin: 30px 0 100px 0;
.code_detail ul {
display: inline-block;
}
\ No newline at end of file
......

7.84 KB | W: | H:

6.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -51,4 +51,8 @@ $(function () {
element.init();
});
});
$('.payment_channel_con li').click(function(){
$('.payment_channel_con li').removeClass()
$(this).addClass('payActive')
})
})
\ No newline at end of file
......
......@@ -33,7 +33,10 @@
</div>
<!-- ------------------开始支付----------------- -->
<div class="audit_progress">
<h2>您的申请已提交,工作人员会在15个工作日内完成审核！</h2>
<h2>
<img src="../staticImages/xuanzhong.png" />
您的申请已提交,工作人员会在15个工作日内完成审核！
</h2>
</div>
<!-- ------------------缴费信息----------------- -->
<div class="payment_information">
......@@ -68,7 +71,7 @@
<!-- ------------------缴费通道----------------- -->
<div class="payment_channel">
<h3>缴费通道</h3>
<ul>
<ul class="payment_channel_con">
<li>
<img src="../staticImages/wechat.png">
<span>微信</span>
......@@ -78,37 +81,22 @@
<span>支付宝</span>
</li>
</ul>
<div class="code">
<img src="../staticImages/code.png">
<div class="scan_code">
<p>600.00</p>
<div>
<img src="../staticImages/code.png">
<div class="code_detail">
<img src="../staticImages/saoyisao.png">
<ul>
<li>打开手机支付宝</li>
<li>扫一扫继续付款</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ------------------支付成功----------------- -->
<div class="payment_success">
<h5>
<img src="../staticImages/success.png">
<p>支付成功</p>
</h5>
<ul>
<li>
<span>支付流水号：</span>
<p>67879798798798</p>
</li>
<li>
<span>支付时间：</span>
<p>79879879</p>
</li>
<li>
<span>支付金额：</span>
<p>550.00元</p>
</li>
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./dzzs.html">下一步</a>
</button>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../staticJs/common.js"></script>
......@@ -127,7 +115,7 @@
{{# } }}
{{# if(item.stepState==1){ }}
<li class="item_proress">
<p class="active"></p>
<p class="activeing"></p>
<h5>{{item.stepName}}</h5>
</li>
{{# if(index!=(d.progressList.length-1)){ }}
......