前言:本章讲下商品详情页面的一个基本构建。效果图请查看滑到末尾。
Github:https://github.com/Ewall1106/mall(请选择分支chapter25)
1、商品详情页初始化
(1)复制一份test.vue
文件并重命名为goodsDetail
作为我们的商品详情页面
![img_858e22ecb8a03b710425961b863ad5c1.png](https://i-blog.csdnimg.cn/blog_migrate/cbe064f9b60425daaacc7877aaf0fc06.png)
新建goodsDetail.vue
(2)注册路由
![img_6d475c98a3d64505b3e9e7014d6c62ec.png](https://i-blog.csdnimg.cn/blog_migrate/4871941db2c57b7af88df50090d65c00.png)
注册路由
2、结构布局编写
(1)顶部商品轮播图
主要是vue-awesome-swiper
组件库的运用,前面章节vue-awsome-swiper与轮播图组件已经详细讲过,不过多阐述。
![img_e1cbd3676a4b04f95155b0a070134eee.png](https://i-blog.csdnimg.cn/blog_migrate/83d4de5bb180b5852ec56bd5002ba46d.png)
顶部轮播图html部分结构
![img_ff9e696e9706c40944da79bfd7b354c5.png](https://i-blog.csdnimg.cn/blog_migrate/cfb7dab6e8287499d0c65f1af56f9b10.png)
轮播图页面效果
(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>
![img_da8538d445be4fd58113d476525959bf.png](https://i-blog.csdnimg.cn/blog_migrate/59b1a33cbeccf951f92c0135a445c790.png)
价格信息模块
- 这里有一个css小技巧说明一下,那就是商品描述要实现这样一个功能:文字只有超过两行才溢出并显示省略号?
![img_5c6fc1722373439e3439ac63e8bb8100.png](https://i-blog.csdnimg.cn/blog_migrate/209b2410ff9dd22c6d37ffa324099499.png)
文字只有超过两行才溢出并显示省略号
- 更多的一些css小技巧可以看看CSS日常踩坑后的总结
(3)其它
- 商务文案块
- 商品详情图片
- 底部购物栏块
- 顶部导航块
![img_e2a61a00812cda76b4aa7d050e657cce.png](https://i-blog.csdnimg.cn/blog_migrate/4f1dced843ec1e46cb3492d58786f730.png)
其它模块
3、这就是我们商品详情页的一个基本结构了
![img_0ed0036583924badefc1abe35a1ec8cd.png](https://i-blog.csdnimg.cn/blog_migrate/4421009e82013752b365992a90cbd20d.png)
商品详情页