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 @@ ...@@ -64,9 +64,9 @@
64 display: block; 64 display: block;
65 position: absolute; 65 position: absolute;
66 left: 9px; 66 left: 9px;
67 top: 5px; 67 top: 6px;
68 width: 8px; 68 width: 7px;
69 height: 12px; 69 height: 10px;
70 border-color: #fff; 70 border-color: #fff;
71 border-style: solid; 71 border-style: solid;
72 border-width: 0 2px 2px 0; 72 border-width: 0 2px 2px 0;
......
...@@ -119,6 +119,7 @@ ...@@ -119,6 +119,7 @@
119 position: absolute; 119 position: absolute;
120 right: -207px; 120 right: -207px;
121 top: -67px; 121 top: -67px;
122 display: none;
122 } 123 }
123 .scan_code p:nth-child(1) { 124 .scan_code p:nth-child(1) {
124 color: #303030; 125 color: #303030;
...@@ -137,7 +138,61 @@ ...@@ -137,7 +138,61 @@
137 width: 32px; 138 width: 32px;
138 height: 32px; 139 height: 32px;
139 display: inline-block; 140 display: inline-block;
141 position: relative;
142 top: 3px;
140 } 143 }
141 .code_detail ul { 144 .code_detail ul {
142 display: inline-block; 145 display: inline-block;
146 font-size: 12px;
147 }
148 /* ---------支付成功---------- */
149 .paymentSuccess {
150 background: #FFFFFF;
151 box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.18);
152 border-radius: 8px;
153 border: 1px solid #E6E6E6;
154 box-sizing: border-box;
155 padding: 35px;
156 width: 470px!important;
157 height: 340px!important;
158 }
159 .paymentSuccess li {
160 text-align: center;
161 }
162 .paymentSuccess li img {
163 width: 30px;
164 height: 30px;
165 }
166 .paymentSuccess li span {
167 color: #9B9B9B;
168 display: inline-block;
169 width: 90px;
170 text-align: right;
171 margin-right: 10px;
172 }
173 .paymentSuccess li p {
174 display: inline-block;
175 color: #303030;
176 }
177 .paymentSuccess li:nth-child(1){
178 margin-bottom: 3px;
179 }
180 .paymentSuccess li:nth-child(2){
181 margin-bottom: 15px;
182 }
183 .paymentSuccess .layui-layer-btn {
184 text-align: center;
185 margin-top: 26px;
186 }
187 .paymentSuccess .layui-layer-btn0 {
188 width: 120px;
189 height: 42px;
190 text-align: center;
191 line-height: 42px;
192 margin: 0 auto;
193 }
194 .paymentSuccess .info {
195 text-align: left;
196 padding-left: 60px;
197 line-height: 36px;
143 } 198 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -51,7 +51,40 @@ $(function () { ...@@ -51,7 +51,40 @@ $(function () {
51 element.init(); 51 element.init();
52 }); 52 });
53 }); 53 });
54 $('.payment_channel_con li').click(function(){ 54 //
55 $('.payment_channel_con li').click(function () {
56 $('.payment_channel_con li').removeClass('payActive');
57 $(this).addClass('payActive');
58 let index = $(this).index()
59 $('.codeShowImg').show()
60 if (index ==0) {
61 $('.codeShowImg').attr('src','../staticImages/weixinShow.png')
62 $('.paymentText').text('打开手机微信')
63 }else {
64 $('.codeShowImg').attr('src','../staticImages/alipayShow.png')
65 $('.paymentText').text('打开手机支付宝')
66 }
67 })
68 layui.use('layer', function () {
69 layer.open({
70 type: 1,
71 title: false,
72 closeBtn: 0,
73 shade:0,
74 shadeClose: true,
75 skin: 'paymentSuccess',
76 btn: ['下一步'],
77 content: '<ul>'
78 + '<li><img src="../staticImages/xuanzhong.png"></li>'
79 + '<li>支付成功</li>'
80 + '<li class="info"><span>支付流水号:</span><p>9898989989</p></li>'
81 + '<li class="info"><span>支付时间:</span><p>2023255-102-13</p></li>'
82 + '<li class="info"><span>支付金额:</span><p>600元</p></li>'
83 + '</ul>'
84 });
85 })
86
87 $('.payment_channel_con li').click(function () {
55 $('.payment_channel_con li').removeClass() 88 $('.payment_channel_con li').removeClass()
56 $(this).addClass('payActive') 89 $(this).addClass('payActive')
57 }) 90 })
......
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head> 4 <head>
6 <style> 5 <style>
7 </style> 6 </style>
...@@ -92,7 +91,7 @@ ...@@ -92,7 +91,7 @@
92 <div class="code_detail"> 91 <div class="code_detail">
93 <img src="../staticImages/saoyisao.png"> 92 <img src="../staticImages/saoyisao.png">
94 <ul> 93 <ul>
95 <li>打开手机支付宝</li> 94 <li class="paymentText">打开手机支付</li>
96 <li>扫一扫继续付款</li> 95 <li>扫一扫继续付款</li>
97 </ul> 96 </ul>
98 </div> 97 </div>
......