# 商品詳情頁
 
相關代碼如下：
### goods_show_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"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.aui-nav .aui-bar-tab {
background: #34495E;
}
.aui-nav .aui-bar-tab li .aui-iconfont,
.aui-nav .aui-bar-tab li p {
color: #fff;
}
.aui-nav .aui-bar-tab li.active .aui-iconfont,
.aui-nav .aui-bar-tab li.active p {
color: #14bd7c;
}
.aui-nav {
background: #ff9900;
font-size: 18px;
color: #fff;
text-align: center;
}
.aui-nav div {
height: 55px;
}
.aui-nav .buy {
line-height: 55px;
}
.aui-nav p {
color: #fff;
}
.aui-nav .aui-iconfont {
font-size: 20px;
color: #ffffff;
}
.blue {
background: #eee;
}
.blue .aui-iconfont,
.blue p {
color: #999;
}
.service {
background: #eec363;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-danger" id="aui-header">
<span class="aui-iconfont aui-icon-left aui-pull-left" tapmode onclick="closeWin();"></span>
<div class="aui-title">商品詳情</div>
</header>
<footer class="aui-nav" id="aui-footer">
<div class="aui-col-xs-4 buy" id="main" tapmode >
立即購買 <span class="aui-iconfont aui-icon-cart"></span>
</div>
<div class="aui-col-xs-8">
<div class="aui-col-xs-4 blue" id="collection-btn" tapmode >
<span class="aui-iconfont aui-icon-favor"></span>
<p id="collection-title">收藏</p>
</div>
<div class="aui-col-xs-4 blue" tapmode >
<span class="aui-iconfont aui-icon-service"></span>
<p>咨詢</p>
</div>
<div class="aui-col-xs-4 blue" tapmode >
<span class="aui-iconfont aui-icon-comment"></span>
<p>點評</p>
</div>
</div>
</footer>
</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;
var footer_h = $api.offset($api.byId("aui-footer")).h;
api.openFrame({
name: 'goods_show_frm',
url: 'goods_show_frm.html',
bounces: true,
vScrollBarEnabled:false,
hScrollBarEnabled:false,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: body_h - headerPos.h - footer_h
}
});
}
function closeWin(){
api.closeWin();
}
</script>
</html>
```
### goods_show_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"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.aui-content,
.aui-content-padded {
background: #ffffff;
}
.thumb {
position: relative;
max-height: 280px;
overflow: hidden;
margin-bottom: 0;
}
.thumb > img {
width: 100%;
}
.price-info {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #ff9900;
height: 55px;
}
.price {
margin-left: 15px;
color: #ffffff;
font-size: 16px;
line-height: 55px;
}
.price strong {
font-size: 26px;
margin: 0 5px;
font-weight: 400;
}
.price-info .aui-pull-right {
height: 55px;
width: 35%;
background: #ffcc00;
padding-top: 10px;
text-align: center;
}
.price-info .aui-pull-right p {
color: #ff6600;
font-size: 12px;
margin-bottom: 0px;
}
.goods-basic-info {
padding: 10px;
overflow: hidden;
}
.goods-title {
margin-bottom: 5px;
}
.aui-tab-nav li.active {
color: #ff9900;
border-bottom: 2px #ff9900 solid;
}
.info {
padding: 10px;
overflow: hidden;
margin-bottom: 0;
}
.info img {
width: 100%;
}
.info p {
color: #666;
}
</style>
</head>
<body>
<section class="aui-content thumb">
<img src="../../../image/demo3.png">
<div class="price-info">
<span class="price">￥<strong>88.88</strong>元</span>
<div class="aui-pull-right">
<p style="text-decoration:line-through">原價：66.66 元</p>
<p>2016件已售</p>
</div>
</div>
</section>
<section class="aui-content goods-basic-info">
<div class="goods-title">商品測試名稱商品測試名稱商品測試名稱商品測試名稱商品測試名稱商品測試名稱</div>
<p>
<span class="aui-pull-left">快遞：0.00元</span>
<span class="aui-pull-right">北京海淀</span>
</p>
</section>
<section class="aui-content">
<ul class="aui-user-view">
<li class="aui-user-view-cell aui-img">
<img class="aui-img-object aui-pull-left" src="../../../image/demo3.png">
<div class="aui-img-body aui-arrow-right">
<span>店鋪名稱</span>
<p class='aui-ellipsis-1'>共售出888件</p>
</div>
</li>
</ul>
</section>
<section class="aui-tab">
<ul class="aui-tab-nav" id="demo1">
<li class="active">產品詳情</li>
<li>熱門點評</li>
</ul>
</section>
<section class="aui-content info">
<p>商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述沙拉汁不夠的，可聯系客服購買~新鮮非洲冰草3斤裝順豐包郵，偏遠地區除外。親們：現在發貨會加冰袋的哦 保證新鮮的哦。</p>
<img class="aui-img-object aui-pull-left" src="./image/d4.jpg">
</section>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
}
</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