Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
5817403e by 任超
Options

style:支付

1 parent deb3c87e
Inline Side-by-side
Showing 4 changed files with 93 additions and 6 deletions
......@@ -64,9 +64,9 @@
display: block;
position: absolute;
left: 9px;
top: 5px;
width: 8px;
height: 12px;
top: 6px;
width: 7px;
height: 10px;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
......
......@@ -119,6 +119,7 @@
position: absolute;
right: -207px;
top: -67px;
display: none;
}
.scan_code p:nth-child(1) {
color: #303030;
......@@ -137,7 +138,61 @@
width: 32px;
height: 32px;
display: inline-block;
position: relative;
top: 3px;
}
.code_detail ul {
display: inline-block;
font-size: 12px;
}
/* ---------支付成功---------- */
.paymentSuccess {
background: #FFFFFF;
box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.18);
border-radius: 8px;
border: 1px solid #E6E6E6;
box-sizing: border-box;
padding: 35px;
width: 470px!important;
height: 340px!important;
}
.paymentSuccess li {
text-align: center;
}
.paymentSuccess li img {
width: 30px;
height: 30px;
}
.paymentSuccess li span {
color: #9B9B9B;
display: inline-block;
width: 90px;
text-align: right;
margin-right: 10px;
}
.paymentSuccess li p {
display: inline-block;
color: #303030;
}
.paymentSuccess li:nth-child(1){
margin-bottom: 3px;
}
.paymentSuccess li:nth-child(2){
margin-bottom: 15px;
}
.paymentSuccess .layui-layer-btn {
text-align: center;
margin-top: 26px;
}
.paymentSuccess .layui-layer-btn0 {
width: 120px;
height: 42px;
text-align: center;
line-height: 42px;
margin: 0 auto;
}
.paymentSuccess .info {
text-align: left;
padding-left: 60px;
line-height: 36px;
}
\ No newline at end of file
......
......@@ -51,7 +51,40 @@ $(function () {
element.init();
});
});
$('.payment_channel_con li').click(function(){
//
$('.payment_channel_con li').click(function () {
$('.payment_channel_con li').removeClass('payActive');
$(this).addClass('payActive');
let index = $(this).index()
$('.codeShowImg').show()
if (index ==0) {
$('.codeShowImg').attr('src','../staticImages/weixinShow.png')
$('.paymentText').text('打开手机微信')
}else {
$('.codeShowImg').attr('src','../staticImages/alipayShow.png')
$('.paymentText').text('打开手机支付宝')
}
})
layui.use('layer', function () {
layer.open({
type: 1,
title: false,
closeBtn: 0,
shade:0,
shadeClose: true,
skin: 'paymentSuccess',
btn: ['下一步'],
content: '<ul>'
+ '<li><img src="../staticImages/xuanzhong.png"></li>'
+ '<li>支付成功</li>'
+ '<li class="info"><span>支付流水号:</span><p>9898989989</p></li>'
+ '<li class="info"><span>支付时间:</span><p>2023255-102-13</p></li>'
+ '<li class="info"><span>支付金额:</span><p>600元</p></li>'
+ '</ul>'
});
})
$('.payment_channel_con li').click(function () {
$('.payment_channel_con li').removeClass()
$(this).addClass('payActive')
})
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
......@@ -92,7 +91,7 @@
<div class="code_detail">
<img src="../staticImages/saoyisao.png">
<ul>
<li>打开手机支付宝</li>
<li class="paymentText">打开手机支付</li>
<li>扫一扫继续付款</li>
</ul>
</div>
......