商品详情页面
-
主要结构，商品图片的轮播图，商品购买区域，商品参数区域
-
使用mui-card样式构建商品详情界面的三个板块
-
构建轮播图，使用mint-swipe样式设置轮播图
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
<mt-swipe :auto="4000">
<mt-swipe-item>
<img src="../../images/小米.jpg" height="728" width="446"/>
</mt-swipe-item>
<mt-swipe-item>
<img src="../../images/xiaomi-8.jpg" height="500" width="500"/>
</mt-swipe-item>
</mt-swipe>
</div>
</div>
</div>
- 美化轮播图，不要将轮播图像首页一样设置为100%，将宽度设置为自适应，取消背景颜色
.mint-swipe{
height: 200px;
}
.mint-swipe-item{
text-align: center;
}
mint-swipe-item,img{
/*width: 100%;*/
height: 100%;
width: auto;
}
- 构建商品购买模块，具体数据有：商品价格，购买数量，数字选择框，加入购物车和购买按钮
<div class="mui-card">
<div class="mui-card-header">小米（mi）小米Note 16G双网通版</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p class="price">
市场价：<del>￥2399</del> 销售价<span class="now-price">￥2199</span>
</p>
<p>购买数量：</p><numbox></numbox>
<p>
<mt-button type="primary" size="small">立即购买</mt-button>
<mt-button type="danger" size="small">加入购物车</mt-button>
</p>
</div>
</div>
<!--<div class="mui-card-footer">页脚</div>-->
</div>
- 新建组件goodsinfo_numbox.vue用于承载添加商品数量数字输入框按钮，
- 在goodsinfo.vue中导入使用
import numbox from '../goods/goodsinfo_numbox.vue'
- 构建商品参数模块，商品参数模块包括商品货号，库存情况，上架时间，图文介绍和商品评论
<div class="mui-card">
<div class="mui-card-header">商品参数</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>商品货号：</p>
<p>库存情况：</p>
<p>上架时间：</p>
</div>
</div>
<div class="mui-card-footer">
<mt-button type="primary" size="large" plain>图文介绍</mt-button>
<mt-button type="danger" size="large" plain>商品评论</mt-button>
</div>
</div>
- 由于.mui-card-footer自带flex布局效果，使设置的按钮排列样式不能达到预期效果，取消flex布局
.mui-card-footer{
display: block;
}
