rating(评价)组件可以简单分为三部分:
一.评分等信息
二.评价组件
三.评价详细信息
前端学习笔记-8-14.1学习饿了么rating组件
一.rating的第一部分
说下第一部分的结构,分左右,左边是综合评分,右边是商品评分、送达时间等。
前端学习笔记-8-14.1学习饿了么rating组件
前端学习笔记-8-14.1学习饿了么rating组件
前端学习笔记-8-14.1学习饿了么rating组件
前端学习笔记-8-14.1学习饿了么rating组件
二.第二部分
要引入的
前端学习笔记-8-14.1学习饿了么rating组件
1.props接收seller信息
前端学习笔记-8-14.1学习饿了么rating组件
2.记得引入星星组件,
前端学习笔记-8-14.1学习饿了么rating组件
3.注意上图的兼容性问题,iphone5的屏幕小,要响应式,
第一部分右边也要简单设置
前端学习笔记-8-14.1学习饿了么rating组件
iphone5的屏幕小,太宽恐怕折行,星星和评分本在一行,恐评分到下一行
可调整padding-left

二、第二部分
1.引入ratingselect组件
之前已经做好了,引入。还需添加方法,和在food.vue中的方法类似。
前端学习笔记-8-14.1学习饿了么rating组件
2.声明变量
前端学习笔记-8-14.1学习饿了么rating组件
3.不同之处在于这里从ratings的接口获取信息,做出响应。此处的ratings和food的ratings不同
前端学习笔记-8-14.1学习饿了么rating组件
4.添加方法
前端学习笔记-8-14.1学习饿了么rating组件
三、评价详细信息
1.dom
前端学习笔记-8-14.1学习饿了么rating组件
css:注意层级
前端学习笔记-8-14.1学习饿了么rating组件
前端学习笔记-8-14.1学习饿了么rating组件
前端学习笔记-8-14.1学习饿了么rating组件
2.过滤时间戳,转化为具体的时间
前端学习笔记-8-14.1学习饿了么rating组件

相关文章:

  • 2021-08-10
  • 2022-02-18
  • 2021-08-05
猜你喜欢
  • 2021-10-30
  • 2021-06-03
  • 2021-07-12
  • 2021-08-22
  • 2021-07-07
  • 2021-10-03
  • 2021-10-30
相关资源
相似解决方案