# 商品详情页
 
相关代码如下：
### 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