前言:本章讲下商品详情页面的一个基本构建。效果图请查看滑到末尾。 Github:https://github.com/Ewall1106/mall(请选择分支chapter25)
(1)复制一份test.vue
文件并重命名为goodsDetail
作为我们的商品详情页面
新建goodsDetail.vue
(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>
价格信息模块
文字只有超过两行才溢出并显示省略号
(3)其它
其它模块
商品详情页