個人中心—我的收藏 · 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" /> <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> ~~~ * * * * * ### 效果如下： ![](https://box.kancloud.cn/2016-08-30_57c4e3ec5309b.PNG)