前言：本章讲下商品详情页面的一个基本构建。效果图请查看滑到末尾。
Github：https://github.com/Ewall1106/mall（请选择分支chapter25）
1、商品详情页初始化
（1）复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面
新建goodsDetail.vue
（2）注册路由
注册路由
2、结构布局编写
（1）顶部商品轮播图
主要是vue-awesome-swiper组件库的运用，前面章节vue-awsome-swiper与轮播图组件已经详细讲过，不过多阐述。
顶部轮播图html部分结构
轮播图页面效果
（2）价格信息模块
<!-- 价格信息 -->
<div class="product_meta">
<div class="price_meta">
<div class="price">
<span class="price_now">¥399</span>
<span class="discount">¥9999</span>
</div>
<div class="sell_num">已销 9999 件</div>
</div>
<div class="desc">
Candie's女装夏蕾丝气质秋连衣裙新款时尚韩版宽松长裙子仙蕾丝bf长袖气质连衣裙
</div>
</div>
价格信息模块
- 这里有一个css小技巧说明一下，那就是商品描述要实现这样一个功能：文字只有超过两行才溢出并显示省略号？
文字只有超过两行才溢出并显示省略号
- 更多的一些css小技巧可以看看CSS日常踩坑后的总结
（3）其它
- 商务文案块
- 商品详情图片
- 底部购物栏块
- 顶部导航块
其它模块
3、这就是我们商品详情页的一个基本结构了
商品详情页
