消息列表 · APP模塊

## 消息列表頁 ![](https://box.kancloud.cn/2016-08-26_57bfeab02d469.png) ## 代碼 ``` <!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"> <title>消息列表</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> <style type="text/css"> .aui-user-view-cell .aui-img-object { border-radius: 6px; } .aui-img-avatar { position: relative; max-width: 48px; } .aui-badge { position: absolute; top: -5px; right: -5px; background-color: red; color: #fff; } .aui-dot { display: inline-block; padding: 7px 7px; background: #ff2600; border-radius: 10px; position: absolute; top: -4px; right: -4px; z-index: 99; line-height: 1; } </style> </head> <body> <div class="aui-content"> <ul class="aui-user-view"> <li class="aui-user-view-cell aui-img"> <div class="aui-img-avatar"> <img class="aui-img-object aui-pull-left" src="../../image/demo.png"> <div class="aui-badge"> 9 </div> </div> <div class="aui-img-body"> <span>張三<em>2016/8/26</em></span> <p class='aui-ellipsis-1'> 我擅長XXX儀器檢測，曾經做過XXX試驗，在該領域取得了XXX樣的貢獻 </p> </div> </li> <li class="aui-user-view-cell aui-img"> <div class="aui-img-avatar"> <img class="aui-img-object aui-pull-left" src="../../image/demo.png"> <div class="aui-dot"></div> </div> <div class="aui-img-body"> <span>微風<em>2016/8/26</em></span> <p class='aui-ellipsis-1'> 我擅長XXX儀器檢測，曾經做過XXX試驗，在該領域取得了XXX樣的貢獻 </p> </div> </li> <li class="aui-user-view-cell aui-img"> <img class="aui-img-object aui-pull-left" src="../../image/demo.png"> <div class="aui-img-body"> <span>李四<em>2016/8/26</em></span> <p class='aui-ellipsis-1'> 我擅長XXX儀器檢測，曾經做過XXX試驗 </p> </div> </li> </ul> </div> </body> <script type="text/javascript" src="../../script/api.js" ></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); } function fnOpenChat() { api.openWin({ name : 'chat_win', url : 'chat_win.html' }); } </script> </html> ```