合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
#会员中心 ##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> ```