個人中心—我的錢包（賬戶） · APP模塊

# 個人中心——我的錢包（賬戶） * * * * * ### win頁面 > 代碼如下： ~~~ <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <link rel="stylesheet" type="text/css" href="../../css/aui-win.css" /> </head> <body> <header class="aui-bar aui-bar-nav" id="aui-header"> <a class="aui-btn aui-pull-left aui-btn-info" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">我的錢包</div> </header> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function(){ api.parseTapmode(); var header = $api.byId('aui-header'); $api.fixStatusBar(header); var headerPos = $api.offset(header); var body_h = $api.offset($api.dom('body')).h; api.openFrame({ name: 'myaccount_frm', url: 'myaccount_frm.html', bounces: false, rect: { x: 0, y: headerPos.h, w: 'auto', h: 'auto' } }) }; function closeWin(){ api.closeWin({ }); } </script> </html> ~~~ * * * * * ### frame頁面 > 代碼如下： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>我的錢包</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css"/> <style> .my-header { background-color: #fff; position: relative; margin-bottom: 0; } .my-info { position: relative; padding: 20px 0; width: 100%; bottom: 0; text-align: center; vertical-align: center; } .my-info img { width: 80px; height: 80px; border-radius: 50%; } .my-info p.nickname { margin-top: 5px; color: red; font-size: 18px; } .aui-list-view-cell { line-height: 26px; } .amount-info { background-color: #ffffff; overflow: hidden; } .amount-info p { font-size: 0.75em; } .amount-info p strong { font-size: 18px; } .aui-list-view-cell { line-height: 26px; } .amount-info .aui-col-xs-6 { padding: 15px 0; position: relative; height: 80px; } .amount-info .aui-col-xs-6:after { border-left: 1px solid #ddd; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer-events: none; } .amount-info .aui-col-xs-4:first-child:after { border: none; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .amount-info .aui-col-xs-6:after { right: -100%; bottom: -100%; -webkit-transform: scale(0.5); } } .aui-list-view li:active { background: #f4f4f4; } </style> </head> <body> <div class="aui-content my-header aui-border-b"> <div class="my-info"> <img src="../../image/demo1.png" /> <p class="nickname"> 100 </p> </div> </div> <div class="aui-content aui-text-center amount-info"> <div class="aui-col-xs-6"> <p class="aui-text-danger"> <strong id="amount">88.00</strong> </p> <p> 賬戶余額 </p> </div> <div class="aui-col-xs-6"> <p class="aui-text-danger"> <strong>100.00</strong> </p> <p> 未到賬余額 </p> </div> </div> <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell" tapmode onclick="fnOpenWin('set_pay_passwd_win')"> <div class="aui-arrow-right"><i class="aui-iconfont aui-icon-pay aui-bg-danger"></i>支付密碼</div> </li> <li class="aui-list-view-cell" tapmode onclick="fnOpenWin('cash_account_win')"> <div class="aui-arrow-right"><i class="aui-iconfont aui-icon-sponsor aui-bg-info"></i>提現賬戶</div> </li> <li class="aui-list-view-cell" tapmode onclick="fnOpenWin('balance_reflected_win')"> <div class="aui-arrow-right"><i class="aui-iconfont aui-icon-sponsor aui-bg-warning"></i>余額體現</div> </li> </ul> </div> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); } function fnOpenWin(type){ api.openWin({ name: type, url: type+".html" }); } </script> </html> ~~~ * * * * * > 效果如下： ![](https://box.kancloud.cn/2016-08-30_57c4e3ec909d6.PNG)