25、商品详情页

前言：本章讲下商品详情页面的一个基本构建。效果图请查看滑到末尾。 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、这就是我们商品详情页的一个基本结构了

商品详情页