仿微信手机端支付页面代码可改余额 - GXUZF.COM - 林澈思的茶

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

分类：其他 ; 热度：2375 ; 最后更新于2020 年 02 月 15 日

赵帆同学赵帆同学

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

代码:

  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);}
  27. .grids-title { box-sizing: border-box; position: relative; height: 50px; padding: 0 15px; line-height: 50px;}
  28. .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%;}
  29. .grids-title h2 { font-size: 16px; font-weight: 400; color: #706f75;}
  31. .pay { display: flex; justify-content: space-between; height: 150px; border-radius: 10px; background-color: #3db271; overflow: hidden;}
  32. .pay-qrcode, .pay-wallet { flex: 1; padding-top: 30px; text-align: center; color: #fefefe;}
  33. .pay-qrcode p, .pay-wallet p { height: 50px; margin-top: 10px;}
  34. .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;}
  35. .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;}
  36. .pay-wallet span { display: block; opacity: .5;}</style>
  37. </head>
  38. <body>
  39.     <div class="wrap dowebok">
  40.         <div class="pay dwo-pay">
  41.             <a href="javascript:" class="pay-qrcode">
  42.                 <i></i>
  43.                 <p>收付款</p>
  44.             </a>
  45.             <a href="javascript:" class="pay-wallet">
  46.                 <i></i>
  47.                 <p>钱包 <span>¥24514.36</span></p>
  48.             </a>
  49.         </div>
  50.         <div class="grids has-more dwo-mt10">
  51.             <div class="grids-title dwo-title">
  52.                 <h2>腾讯服务</h2>
  53.             </div>
  54.             <div class="weui-grids">
  55.                 <a href="javascript:;" class="weui-grid">
  56.                     <div class="weui-grid__icon">
  57.                         <img src="https://ae01.alicdn.com/kf/H7f006c52b37244c3b0b4f7d8c6cbcc9ao.png" alt="">
  58.                     </div>
  59.                     <p class="weui-grid__label">信用卡还款</p>
  60.                 </a>
  61.                 <a href="javascript:;" class="weui-grid">
  62.                     <div class="weui-grid__icon">
  63.                         <img src="https://ae01.alicdn.com/kf/H0b3ad505786044c882cca9694382a68bQ.png" alt="">
  64.                     </div>
  65.                     <p class="weui-grid__label">手机充值</p>
  66.                 </a>
  67.                 <a href="javascript:;" class="weui-grid">
  68.                     <div class="weui-grid__icon">
  69.                         <img src="https://ae01.alicdn.com/kf/Hbd093d51bbd34c24a4669f0c4559022ci.png" alt="">
  70.                     </div>
  71.                     <p class="weui-grid__label">理财通</p>
  72.                 </a>
  73.                 <a href="javascript:;" class="weui-grid">
  74.                     <div class="weui-grid__icon">
  75.                         <img src="https://ae01.alicdn.com/kf/Hc36863f28b1247398b141691c0f35066q.png" alt="">
  76.                     </div>
  77.                     <p class="weui-grid__label">生活缴费</p>
  78.                 </a>
  79.                 <a href="javascript:;" class="weui-grid">
  80.                     <div class="weui-grid__icon">
  81.                         <img src="https://ae01.alicdn.com/kf/H4ec162ec64e549e7b840b410ef82dd71j.png" alt="">
  82.                     </div>
  83.                     <p class="weui-grid__label">Q币充值</p>
  84.                 </a>
  85.                 <a href="javascript:;" class="weui-grid">
  86.                     <div class="weui-grid__icon">
  87.                         <img src="https://ae01.alicdn.com/kf/He1dddb5aff8a4d97a899cb3c0194656aV.png" alt="">
  88.                     </div>
  89.                     <p class="weui-grid__label">城市服务</p>
  90.                 </a>
  91.                 <a href="javascript:;" class="weui-grid">
  92.                     <div class="weui-grid__icon">
  93.                         <img src="https://ae01.alicdn.com/kf/H6d6f648b29fc4558b7a27b2297c5f18at.png" alt="">
  94.                     </div>
  95.                     <p class="weui-grid__label">腾讯公益</p>
  96.                 </a>
  97.                 <a href="javascript:;" class="weui-grid">
  98.                     <div class="weui-grid__icon">
  99.                         <img src="https://ae01.alicdn.com/kf/H21f5f283fd6b4a84b6400e5f92ca03ddY.png" alt="">
  100.                     </div>
  101.                     <p class="weui-grid__label">保险服务</p>
  102.                 </a>
  103.                 <a href="javascript:;" class="weui-grid">
  104.                      <div class="weui-grid__icon">
  105.                          <img src="https://ae01.alicdn.com/kf/H638183af66b74464af949711424380ebz.png" alt="">
  106.                      </div>
  107.                      <p class="weui-grid__label">微粒贷借钱</p>
  108.                 </a>
  109.             </div>
  110.         </div>
  111.         <div class="grids-more"><span class="toggle">更多服务</span></div>
  113.         <div class="grids dwo-mt10">
  114.             <div class="grids-title dwo-title">
  115.                 <h2>第三方服务</h2>
  116.             </div>
  117.             <div class="weui-grids">
  118.                 <a href="javascript:;" class="weui-grid">
  119.                     <div class="weui-grid__icon">
  120.                         <img src="https://ae01.alicdn.com/kf/Hb6d0e1a62ae94922be4cbd4a69440dee8.png" alt="">
  121.                     </div>
  122.                     <p class="weui-grid__label">火车票机票</p>
  123.                 </a>
  124.                 <a href="javascript:;" class="weui-grid">
  125.                     <div class="weui-grid__icon">
  126.                         <img src="https://ae01.alicdn.com/kf/Hdd081b2e830a4f72980dab82be91b7134.png" alt="">
  127.                     </div>
  128.                     <p class="weui-grid__label">滴滴出行</p>
  129.                 </a>
  130.                 <a href="javascript:;" class="weui-grid">
  131.                     <div class="weui-grid__icon">
  132.                         <img src="https://ae01.alicdn.com/kf/H4df507b288e24aceac5afc6c01b7849cy.png" alt="">
  133.                     </div>
  134.                     <p class="weui-grid__label">京东购物</p>
  135.                 </a>
  136.                 <a href="javascript:;" class="weui-grid">
  137.                     <div class="weui-grid__icon">
  138.                         <img src="https://ae01.alicdn.com/kf/H0fa7e1120cab44989716f3c5d7ac9c2eP.png" alt="">
  139.                     </div>
  140.                     <p class="weui-grid__label">美团外卖</p>
  141.                 </a>
  142.                 <a href="javascript:;" class="weui-grid">
  143.                     <div class="weui-grid__icon">
  144.                         <img src="https://ae01.alicdn.com/kf/Hb34ddd1cc2b84d0badad560193a894adS.png" alt="">
  145.                     </div>
  146.                     <p class="weui-grid__label">电影演出赛事</p>
  147.                 </a>
  148.                 <a href="javascript:;" class="weui-grid">
  149.                     <div class="weui-grid__icon">
  150.                         <img src="https://ae01.alicdn.com/kf/Had8e58cdb5dc4899befb4ac02392d1a2I.png" alt="">
  151.                     </div>
  152.                     <p class="weui-grid__label">吃喝玩乐</p>
  153.                 </a>
  154.                 <a href="javascript:;" class="weui-grid">
  155.                     <div class="weui-grid__icon">
  156.                         <img src="https://ae01.alicdn.com/kf/Hacd9d5a704bc488b85367c795322eb30z.png" alt="">
  157.                     </div>
  158.                     <p class="weui-grid__label">酒店</p>
  159.                 </a>
  160.                 <a href="javascript:;" class="weui-grid">
  161.                     <div class="weui-grid__icon">
  162.                         <img src="https://ae01.alicdn.com/kf/H0de0445c31e64fdf8a9c83d733cfc3f2M.png" alt="">
  163.                     </div>
  164.                     <p class="weui-grid__label">拼多多</p>
  165.                 </a>
  166.                 <a href="javascript:;" class="weui-grid">
  167.                     <div class="weui-grid__icon">
  168.                         <img src="https://ae01.alicdn.com/kf/H5e19c95fee614102ae7cc6b3277982c2X.png" alt="">
  169.                     </div>
  170.                     <p class="weui-grid__label">蘑菇街女装</p>
  171.                 </a>
  172.                 <a href="javascript:;" class="weui-grid">
  173.                     <div class="weui-grid__icon">
  174.                         <img src="https://ae01.alicdn.com/kf/H8b1d5228bcee43cf9ed98d1dd8b601370.png" alt="">
  175.                     </div>
  176.                     <p class="weui-grid__label">唯品会特卖</p>
  177.                 </a>
  178.                 <a href="javascript:;" class="weui-grid">
  179.                     <div class="weui-grid__icon">
  180.                         <img src="https://ae01.alicdn.com/kf/Hcf4626bb00214b67b1a9bdd82c85365aS.png" alt="">
  181.                     </div>
  182.                     <p class="weui-grid__label">转转二手</p>
  183.                 </a>
  184.                 <a href="javascript:;" class="weui-grid">
  185.                     <div class="weui-grid__icon">
  186.                         <img src="https://ae01.alicdn.com/kf/He5fbde9b0af242a981d360f3ddf7572eo.png" alt="">
  187.                     </div>
  188.                     <p class="weui-grid__label">贝壳找房</p>
  189.                 </a>
  190.             </div>
  191.         </div>
  192.     </div>
  194.     <script>
  195.         var hasMore = document.querySelectorAll('.has-more')
  196.         var toggle = document.querySelectorAll('.toggle')
  198.         ;[].forEach.call(toggle, function(item, index) {
  199.             item.addEventListener('click', function () {
  200.                 item.classList.toggle('show')
  201.                 hasMore[index].classList.toggle('show-more')
  202.                 itemitem.textContent = item.textContent == '更多服务' ? '收起' : '更多服务'
  203.             })
  204.         })
  205.     </script>
  206. </body>
  207. </html>

评论卡