會員中心首頁一 · APP模塊

#會員中心 ##1、會員中心一 ![](https://box.kancloud.cn/2016-08-25_57be8e3034b33.png) 代碼如下： ###my_win.html ``` <!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"/> <title>Hello APP</title> <link rel="stylesheet" type="text/css" href="../../../css/aui-win.css" /> </head> <body> <header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header"> <a class="aui-btn aui-btn-primary aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">會員中心</div> <a class="aui-iconfont aui-icon-sitting aui-pull-right"></a> </header> </body> <script type="text/javascript" src="../../../script/api.js"></script> <script type="text/javascript"> function closeWin(){ api.closeWin(); } 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: 'my_frm', url: 'my_frm.html', bounces: true, rect: { x: 0, y: headerPos.h, w: headerPos.w, h: body_h - headerPos.h } }) }; </script> </html> ``` my_frm.html ``` <!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"/> <title>APP</title> <link rel="stylesheet" type="text/css" href="../../../css/aui.css" /> </head> <style> .my-header { background: url('../../../image/mybg.png') no-repeat; background-size: cover; min-height: 220px; position: relative; } .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: #ffffff; font-size: 18px; } .my-menu { position: absolute; width: 100%; height: 45px; line-height: 45px; left: 0; bottom: 0; text-align: center; background: #ffffff; filter:Alpha(opacity=50); background:rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important; color: #ffffff; font-size: 14px; } .my-menu .aui-col-xs-3 { border-right: 1px solid #9bd6d5; } .my-menu .aui-col-xs-3:last-child { border-right: none; } .my-menu > div:active { background: #ffffff; filter:Alpha(opacity=50); background:rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important; } .aui-list-view-cell { line-height: 26px; } </style> <body> <div class="aui-content my-header"> <div class="my-info"> <img src="../../../image/demo5.png"> <p class="nickname">流浪男</p> </div> <div class="my-menu"> <div class="aui-col-xs-3">首頁</div> <div class="aui-col-xs-3">動態</div> <div class="aui-col-xs-3">關注</div> <div class="aui-col-xs-3">設置</div> </div> </div> <div class="aui-content aui-card"> <ul class="aui-list-view"> <li class="aui-list-view-cell"> <a class="aui-arrow-right">個人資料 </a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right">賬號設置</a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right">我的訂單</a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right">我的相冊</a> </li> </ul> </div> <div class="aui-content aui-card"> <ul class="aui-list-view"> <li class="aui-list-view-cell"> <a class="aui-arrow-right">系統設置</a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right">檢查更新</a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right"> 清除緩存 <span class="aui-badge aui-badge-danger">36M</span> </a> </li> <li class="aui-list-view-cell"> <a class="aui-arrow-right">使用幫助</a> </li> </ul> </div> <div class="aui-content aui-card"> <ul class="aui-list-view"> <li class="aui-list-view-cell aui-switch-body"> <div class="aui-switch-title">聲音提醒</div> <input type="checkbox" class="aui-switch aui-pull-right" checked> </li> <li class="aui-list-view-cell aui-switch-body"> <div class="aui-switch-title">自動更新</div> <input type="checkbox" class="aui-switch aui-pull-right"> </li> </ul> </div> </body> <script type="text/javascript" src="../../../script/api.js" ></script> <script type="text/javascript"> apiready = function () { } </script> </html> ```