仿微信手机端支付页面代码可改余额

推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

高仿的微信手机端支付页面代码可改余额,就自己看看装个样子,别去骗人啊,哈哈哈哈,穷人只能这样玩玩。仿微信手机端支付页面代码可改余额

代码:

  1. <!DOCTYPE html>
  2. <html lang=“zh-CN”>
  3. <head>
  4.     <meta charset=“UTF-8”>
  5.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  6.     <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  7.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover”>
  8.     <title>微信支付页面_dowebok</title>
  9.     <link rel=“stylesheet” href=“https://cdn.staticfile.org/weui/2.0.0/style/weui.min.css”>
  10.     <style>body { background-color: #f7f7f7;}
  11. body {padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
  12. .dwo-mt10 { margin-top: 10px;}.dowebok { padding: 8px;}
  13. .grids { border-radius: 10px; background-color: #fff; overflow: hidden;}
  14. .has-more { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
  15. .has-more.show-more .weui-grid-more { display: block;}
  16. .weui-grids { margin-bottom: -1px;}
  17. .weui-grids:before { border-top: 0;}
  18. .weui-grids:after { border-left: 0;}
  19. .weui-grid:nth-child(3n):before { border-right: 0;}
  20. .weui-grid-more { display: none;}
  21. .grids-more { position: relative; height: 50px; line-height: 50px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: center; font-size: 14px; color: #5b6a91; background-color: #fff;}
  22. .grids-more:before { content: “”; position: absolute; left: 0; right: 0; top: -1px; height: 1px; border-top: 1px solid #d9d9d9; transform: scaleY(.5); transform-origin: 0 100%;}
  23. .grids-more span { display: inline-block; vertical-align: middle;}
  24. .grids-more span:after { content: “”; display: inline-block; width: 16px; height: 16px; margin-left: 5px; background: url(images/arrow.png) no-repeat 0 / 16px 16px; vertical-align: text-top;}
  25. .grids-more .show:after { transform: rotate(180deg);}
  26. .grids-title { box-sizing: border-box; position: relative; height: 50px; padding: 0 15px; line-height: 50px;}
  27. .grids-title:after { content: “”; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-top: 1px solid #d9d9d9; transform: scaleY(.5); transform-origin: 0 100%;}
  28. .grids-title h2 { font-size: 16px; font-weight: 400; color: #706f75;}
  29. .pay { display: flex; justify-content: space-between; height: 150px; border-radius: 10px; background-color: #3db271; overflow: hidden;}
  30. .pay-qrcode, .pay-wallet { flex: 1; padding-top: 30px; text-align: center; color: #fefefe;}
  31. .pay-qrcode p, .pay-wallet p { height: 50px; margin-top: 10px;}
  32. .pay-qrcode i { display: inline-block; width: 32px; height: 32px; background: url(https://ae01.alicdn.com/kf/H2d901da2659d4310beb97a7d5595aa5ef.png) 50%  no-repeat; background-size: contain;}
  33. .pay-wallet i { display: inline-block; width: 32px; height: 32px; background: url(https://ae01.alicdn.com/kf/H5b00de4b0ba34427bfcb0c6c543a565cJ.png) 50% no-repeat; background-size: contain;}
  34. .pay-wallet span { display: block; opacity: .5;}</style>
  35. </head>
  36. <body>
  37.     <div class=“wrap dowebok”>
  38.         <div class=“pay dwo-pay”>
  39.             <a href=“javascript:” class=“pay-qrcode”>
  40.                 <i></i>
  41.                 <p>收付款</p>
  42.             </a>
  43.             <a href=“javascript:” class=“pay-wallet”>
  44.                 <i></i>
  45.                 <p>钱包 <span>¥24514.36</span></p>
  46.             </a>
  47.         </div>
  48.         <div class=“grids has-more dwo-mt10”>
  49.             <div class=“grids-title dwo-title”>
  50.                 <h2>腾讯服务</h2>
  51.             </div>
  52.             <div class=“weui-grids”>
  53.                 <a href=“javascript:;” class=“weui-grid”>
  54.                     <div class=“weui-grid__icon”>
  55.                         <img src=“https://ae01.alicdn.com/kf/H7f006c52b37244c3b0b4f7d8c6cbcc9ao.png” alt=“”>
  56.                     </div>
  57.                     <p class=“weui-grid__label”>信用卡还款</p>
  58.                 </a>
  59.                 <a href=“javascript:;” class=“weui-grid”>
  60.                     <div class=“weui-grid__icon”>
  61.                         <img src=“https://ae01.alicdn.com/kf/H0b3ad505786044c882cca9694382a68bQ.png” alt=“”>
  62.                     </div>
  63.                     <p class=“weui-grid__label”>手机充值</p>
  64.                 </a>
  65.                 <a href=“javascript:;” class=“weui-grid”>
  66.                     <div class=“weui-grid__icon”>
  67.                         <img src=“https://ae01.alicdn.com/kf/Hbd093d51bbd34c24a4669f0c4559022ci.png” alt=“”>
  68.                     </div>
  69.                     <p class=“weui-grid__label”>理财通</p>
  70.                 </a>
  71.                 <a href=“javascript:;” class=“weui-grid”>
  72.                     <div class=“weui-grid__icon”>
  73.                         <img src=“https://ae01.alicdn.com/kf/Hc36863f28b1247398b141691c0f35066q.png” alt=“”>
  74.                     </div>
  75.                     <p class=“weui-grid__label”>生活缴费</p>
  76.                 </a>
  77.                 <a href=“javascript:;” class=“weui-grid”>
  78.                     <div class=“weui-grid__icon”>
  79.                         <img src=“https://ae01.alicdn.com/kf/H4ec162ec64e549e7b840b410ef82dd71j.png” alt=“”>
  80.                     </div>
  81.                     <p class=“weui-grid__label”>Q币充值</p>
  82.                 </a>
  83.                 <a href=“javascript:;” class=“weui-grid”>
  84.                     <div class=“weui-grid__icon”>
  85.                         <img src=“https://ae01.alicdn.com/kf/He1dddb5aff8a4d97a899cb3c0194656aV.png” alt=“”>
  86.                     </div>
  87.                     <p class=“weui-grid__label”>城市服务</p>
  88.                 </a>
  89.                 <a href=“javascript:;” class=“weui-grid”>
  90.                     <div class=“weui-grid__icon”>
  91.                         <img src=“https://ae01.alicdn.com/kf/H6d6f648b29fc4558b7a27b2297c5f18at.png” alt=“”>
  92.                     </div>
  93.                     <p class=“weui-grid__label”>腾讯公益</p>
  94.                 </a>
  95.                 <a href=“javascript:;” class=“weui-grid”>
  96.                     <div class=“weui-grid__icon”>
  97.                         <img src=“https://ae01.alicdn.com/kf/H21f5f283fd6b4a84b6400e5f92ca03ddY.png” alt=“”>
  98.                     </div>
  99.                     <p class=“weui-grid__label”>保险服务</p>
  100.                 </a>
  101.                 <a href=“javascript:;” class=“weui-grid”>
  102.                      <div class=“weui-grid__icon”>
  103.                          <img src=“https://ae01.alicdn.com/kf/H638183af66b74464af949711424380ebz.png” alt=“”>
  104.                      </div>
  105.                      <p class=“weui-grid__label”>微粒贷借钱</p>
  106.                 </a>
  107.             </div>
  108.         </div>
  109.         <div class=“grids-more”><span class=“toggle”>更多服务</span></div>
  110.         <div class=“grids dwo-mt10”>
  111.             <div class=“grids-title dwo-title”>
  112.                 <h2>第三方服务</h2>
  113.             </div>
  114.             <div class=“weui-grids”>
  115.                 <a href=“javascript:;” class=“weui-grid”>
  116.                     <div class=“weui-grid__icon”>
  117.                         <img src=“https://ae01.alicdn.com/kf/Hb6d0e1a62ae94922be4cbd4a69440dee8.png” alt=“”>
  118.                     </div>
  119.                     <p class=“weui-grid__label”>火车票机票</p>
  120.                 </a>
  121.                 <a href=“javascript:;” class=“weui-grid”>
  122.                     <div class=“weui-grid__icon”>
  123.                         <img src=“https://ae01.alicdn.com/kf/Hdd081b2e830a4f72980dab82be91b7134.png” alt=“”>
  124.                     </div>
  125.                     <p class=“weui-grid__label”>滴滴出行</p>
  126.                 </a>
  127.                 <a href=“javascript:;” class=“weui-grid”>
  128.                     <div class=“weui-grid__icon”>
  129.                         <img src=“https://ae01.alicdn.com/kf/H4df507b288e24aceac5afc6c01b7849cy.png” alt=“”>
  130.                     </div>
  131.                     <p class=“weui-grid__label”>京东购物</p>
  132.                 </a>
  133.                 <a href=“javascript:;” class=“weui-grid”>
  134.                     <div class=“weui-grid__icon”>
  135.                         <img src=“https://ae01.alicdn.com/kf/H0fa7e1120cab44989716f3c5d7ac9c2eP.png” alt=“”>
  136.                     </div>
  137.                     <p class=“weui-grid__label”>美团外卖</p>
  138.                 </a>
  139.                 <a href=“javascript:;” class=“weui-grid”>
  140.                     <div class=“weui-grid__icon”>
  141.                         <img src=“https://ae01.alicdn.com/kf/Hb34ddd1cc2b84d0badad560193a894adS.png” alt=“”>
  142.                     </div>
  143.                     <p class=“weui-grid__label”>电影演出赛事</p>
  144.                 </a>
  145.                 <a href=“javascript:;” class=“weui-grid”>
  146.                     <div class=“weui-grid__icon”>
  147.                         <img src=“https://ae01.alicdn.com/kf/Had8e58cdb5dc4899befb4ac02392d1a2I.png” alt=“”>
  148.                     </div>
  149.                     <p class=“weui-grid__label”>吃喝玩乐</p>
  150.                 </a>
  151.                 <a href=“javascript:;” class=“weui-grid”>
  152.                     <div class=“weui-grid__icon”>
  153.                         <img src=“https://ae01.alicdn.com/kf/Hacd9d5a704bc488b85367c795322eb30z.png” alt=“”>
  154.                     </div>
  155.                     <p class=“weui-grid__label”>酒店</p>
  156.                 </a>
  157.                 <a href=“javascript:;” class=“weui-grid”>
  158.                     <div class=“weui-grid__icon”>
  159.                         <img src=“https://ae01.alicdn.com/kf/H0de0445c31e64fdf8a9c83d733cfc3f2M.png” alt=“”>
  160.                     </div>
  161.                     <p class=“weui-grid__label”>拼多多</p>
  162.                 </a>
  163.                 <a href=“javascript:;” class=“weui-grid”>
  164.                     <div class=“weui-grid__icon”>
  165.                         <img src=“https://ae01.alicdn.com/kf/H5e19c95fee614102ae7cc6b3277982c2X.png” alt=“”>
  166.                     </div>
  167.                     <p class=“weui-grid__label”>蘑菇街女装</p>
  168.                 </a>
  169.                 <a href=“javascript:;” class=“weui-grid”>
  170.                     <div class=“weui-grid__icon”>
  171.                         <img src=“https://ae01.alicdn.com/kf/H8b1d5228bcee43cf9ed98d1dd8b601370.png” alt=“”>
  172.                     </div>
  173.                     <p class=“weui-grid__label”>唯品会特卖</p>
  174.                 </a>
  175.                 <a href=“javascript:;” class=“weui-grid”>
  176.                     <div class=“weui-grid__icon”>
  177.                         <img src=“https://ae01.alicdn.com/kf/Hcf4626bb00214b67b1a9bdd82c85365aS.png” alt=“”>
  178.                     </div>
  179.                     <p class=“weui-grid__label”>转转二手</p>
  180.                 </a>
  181.                 <a href=“javascript:;” class=“weui-grid”>
  182.                     <div class=“weui-grid__icon”>
  183.                         <img src=“https://ae01.alicdn.com/kf/He5fbde9b0af242a981d360f3ddf7572eo.png” alt=“”>
  184.                     </div>
  185.                     <p class=“weui-grid__label”>贝壳找房</p>
  186.                 </a>
  187.             </div>
  188.         </div>
  189.     </div>
  190.     <script>
  191.         var hasMore = document.querySelectorAll(‘.has-more’)
  192.         var toggle = document.querySelectorAll(‘.toggle’)
  193.         ;[].forEach.call(toggle, function(item, index) {
  194.             item.addEventListener(‘click’, function () {
  195.                 item.classList.toggle(‘show’)
  196.                 hasMore[index].classList.toggle(‘show-more’)
  197.                 itemitem.textContent = item.textContent == ‘更多服务’ ? ‘收起’ : ‘更多服务’
  198.             })
  199.         })
  200.     </script>
  201. </body>
  202. </html>
GXUZF.COM | 林澈思的茶
END

GXUZF.COM原创文章,作者:赵帆同学。如若转载,请注明出处:

文章标题:《仿微信手机端支付页面代码可改余额》,原文链接:https://www.gxuzf.com/2019/others/2041.html

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Mail:[email protected]
QQ:1207415775
Wechat:wolinxiao
Tel:15678896295

QR code