# 个人中心——我的收藏
* * * * *
### 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" />
<style type="text/css">
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
<a class="aui-btn aui-btn-info 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-menu aui-pull-right"></a>
</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: 'mycollect_frm',
url: 'mycollect_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"/>
<title>我的收藏</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
<style>
.order {
background: #ffffff;
}
.order-info {
font-size: 0.875em;
width: 100%;
}
.order-info span {
color: #333;
margin-right: 5px;
}
.order-info time {
color: #999999;
font-size: 0.75em;
}
.order-info i.aui-iconfont {
color: #999;
font-size: 0.875em;
}
.order-icon img {
width: 80%;
border-radius: 5px;
}
.order-title {
font-size: 1em;
color: #333;
padding-bottom: 10px;
margin-bottom: 10px;
}
.order-title > i.aui-iconfont {
font-size: 0.87em;
color: #999999;
}
p.goods-list {
font-size: 0.75em;
color: #999;
margin-bottom: 8px;
}
p.count-info {
font-size: 0.75em;
color: #999;
padding-bottom: 5px;
}
p.count-info span {
margin: 0 3px;
}
p.count-info strong {
color: #666;
font-size: 1em;
font-weight: 700;
}
.btn {
/*margin: 5px;*/
}
.btn .aui-btn {
font-size: 0.75em;
}
.btn .aui-btn:first-child {
margin-right: 10px;
}
.aui-border-b:after {
border-color: #ddd;
}
</style>
</head>
<body>
<section class="aui-content order">
<div class="aui-flex-col order-info aui-padded-10">
</div>
<div class="aui-flex-col">
<div class="aui-flex-item-2 order-icon aui-text-right">
<img src="../../image/demo2.png" />
</div>
<div class="aui-flex-item-10 aui-padded-0-15">
<div class="aui-flex-col btn">
<div class="aui-flex-item-4 ">
<p class="order-title">
张三 <i class="aui-iconfont aui-icon-favor"></i>
</p>
</div>
<div class="aui-flex-item-8 aui-text-right">
<div class="aui-btn aui-btn-outlined aui-btn-info">
聊他
</div>
<div class="aui-btn aui-btn-outlined aui-btn-warning">
选他
</div>
</div>
</div>
<p class='aui-ellipsis-2 goods-list' style="margin-bottom: 8px;">
图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
</p>
</div>
</div>
</section>
<section class="aui-content order">
<div class="aui-flex-col order-info aui-padded-10">
</div>
<div class="aui-flex-col">
<div class="aui-flex-item-2 order-icon aui-text-right">
<img src="../../image/demo3.png" />
</div>
<div class="aui-flex-item-10 aui-padded-0-15">
<div class="aui-flex-col btn">
<div class="aui-flex-item-4 ">
<p class="order-title">
张三 <i class="aui-iconfont aui-icon-favor"></i>
</p>
</div>
<div class="aui-flex-item-8 aui-text-right">
<div class="aui-btn aui-btn-outlined aui-btn-info">
聊他
</div>
<div class="aui-btn aui-btn-outlined aui-btn-warning">
选他
</div>
</div>
</div>
<p class='aui-ellipsis-2 goods-list' style="margin-bottom: 8px;">
图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略
</p>
</div>
</div>
</section>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
api.parseTapmode();
// 优化点击事件
var status = $api.domAll("#status li");
for (var i in status) {
$api.addEvt(status[i], 'click', function() {
$api.removeCls($api.dom("#status li.active"), 'active');
$api.addCls(this, 'active');
});
}
}
</script>
~~~
* * * * *
### 效果如下：
- 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