#会员中心
##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>
```
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包(账户)
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd