继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

25、商品详情页

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

前言:本章讲下商品详情页面的一个基本构建。效果图请查看滑到末尾。
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小技巧说明一下,那就是商品描述要实现这样一个功能:文字只有超过两行才溢出并显示省略号?

文字只有超过两行才溢出并显示省略号

(3)其它

  • 商务文案块
  • 商品详情图片
  • 底部购物栏块
  • 顶部导航块

其它模块

###3、这就是我们商品详情页的一个基本结构了

商品详情页

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP