7.ratings评价列表页的实现

ratins组件也有滚动效果，所以最外层的div应该要有固定的高度，这样这层的高度超出外层高度时，才能实现滚动效果。

<div class="ratings" ref="ratings">
  <div class="ratings-content"></div>
</div>

.ratings
  position: absolute
  top: 174px
  bottom: 0
  left: 0
  100%
  overflow: hidden
  .overview
    display: flex
    padding: 18px 0

overview分为左右两部分，用flex布局。左边固定宽度，右边只适应布局。

 

右边的score-wrapper中的line-height要设置在子元素中，不要在父元素中设置

<div class="score-wrapper">
  <span class="title">服务态度</span>
  <star :size="36" :score="seller.serviceScore"></star>
  <span class="score">{{seller.serviceScore}}</span>
</div>

.score-wrapper
  margin-bottom: 8px
  font-size: 0
  .title
    display: inline-block
    line-height: 18px
    vertical-align: top
    font-size: 12px
    color: rgb(7, 17, 27)

在iphone5中右侧的布局会错乱，要用 @media only screen and (max- 320px)来设置，实现小屏幕上的布局

.overview-left
  flex: 0 0 137px
  padding: 6px 0
  137px
  border-right: 1px solid rgba(7, 17, 27, 0.1)
  text-align: center
  @media only screen and (max- 320px)
    flex: 0 0 120px
    120px

.overview-right
  flex: 1
  padding: 6px 0 6px 24px
  @media only screen and (max- 320px)
    padding-left: 6px