排行榜的歌曲列表，根据排名渲染不同的样式，同时需要考虑分辨率的2x 3x图

1. 不同的样式——:class
2. 考虑分辨率的2x 3x图——需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片

1.功能

    
  
     {
   {getRankText(index)}}
    

在vue中绑定HTML Class，除了数组，对象语法，也可以使用函数返回值(不必使用v-if v-else等复杂逻辑)

在methods中定义，返回相应的class

getRankCls(index) {  if (index <= 2) {    return `icon icon${index}`  } else {    return 'text'  }},getRankText(index) {  if (index > 2) {    return index + 1  }}

2.stylu处理分辨率

.icon      display: inline-block      width: 25px      height: 24px      background-size: 25px 24px      &.icon0        bg-image('first')      &.icon1        bg-image('second')      &.icon2        bg-image('third')

这里边重要的是bg-image函数

bg-image($url)    background-image: url($url + "@2x.png")    @media (-webkit-min-device-pixel-radio: 3),(min-device-pixel-radio: 3)        background-image: url($url + "@3x.png")

device-pixel-radio:屏幕分辨率从而加载不同的图片