個人中心 · APP模塊

## 個人中心 ~~~ <!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" /> <style> .my-header { background-color: #00CCFF; position: relative; margin-bottom: 0; } .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; } .aui-list-view-cell { line-height: 26px; } .amount-info { background-color: #ffffff; overflow: hidden; } .amount-info p { font-size: 0.75em; } .amount-info p strong { font-size: 18px; } .aui-list-view-cell { line-height: 26px; } .amount-info .aui-col-xs-6 { padding: 15px 0; position: relative; height: 80px; } .amount-info .aui-col-xs-6:after { border-left: 1px solid #ddd; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer-events: none; } .amount-info .aui-col-xs-6:first-child:after { border: none; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .amount-info .aui-col-xs-6:after { right: -100%; bottom: -100%; -webkit-transform: scale(0.5); } } </style> </head> <body> <div class="aui-content my-header"> <div class="my-info"> <img src="../../image/demo.png" /> <p class="nickname"> 測試員 </p> </div> </div> <div class="aui-content aui-text-center amount-info"> <div class="aui-col-xs-6"> <p class="aui-text-danger"> <strong id="amount">88.00</strong>元 </p> <p> 我的資金 </p> </div> <div class="aui-col-xs-6"> <p class="aui-text-warning"> <strong>999</strong>個 </p> <p> 我的積分 </p> </div> </div> <div class="aui-content"> <ul class="aui-grid-nine"> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('myapp_list_win')"> <span class="aui-iconfont aui-icon-discover aui-text-primary"></span> <p> 我的儀器 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('myorder_win')"> <span class="aui-iconfont aui-icon-shake aui-text-danger"></span> <p> 我的訂單 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('myaccount_win')"> <span class="aui-iconfont aui-icon-pay aui-text-warning"></span> <p> 我的錢包 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('mycollect_win')"> <span class="aui-iconfont aui-icon-tagfill aui-text-pink"></span> <p> 我的收藏 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('myalter_win')"> <span class="aui-iconfont aui-icon-repair aui-text-dark"></span> <p> 資料修改 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenWin('mycomplain_win')"> <span class="aui-iconfont aui-icon-service aui-text-info"></span> <p> 我的客服 </p> </li> </ul> </div> </body> </html> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); // 優化點擊事件 } function fnOpenWin(type){ api.openWin({ name: type, url: type+'.html' }); } </script> ~~~ # 效果如下： ![](https://box.kancloud.cn/2016-08-30_57c4e3ec2eb44.PNG)