mall-web-ssr/components/provider/SalesRank.vue

<template>
  <div class="sale-module">
    <div class="title">
      <img src="/images/store/home/hot.png" />
      <span>销售排行榜</span>
    </div>
    <ul class="list-unstyled list-inline">
      <li v-for="(store, index) in stores">
        <div class="rank">
          <img v-if="index == 0"      src="/images/store/home/first.png"/>
          <img v-else-if="index == 1" src="/images/store/home/second.png"/>
          <img v-else-if="index == 2" src="/images/store/home/third.png"/>
        </div>
        <div class="content">
          <div class="name"><a target="_blank" :href="'/store/' + store.uuid" :title="store.storeName">{{store.storeName}}</a></div>
          <div class="grade"> 交易量： <span>{{store.orderCount || 0}}</span></div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  name: 'sales-rank',
  computed: {
    stores () {
      return this.$store.state.provider.storeCms.salesStores.data
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .sale-module {
    width: 240px;
    height: 360px;
    border-left: 1px solid #D6D3CE;
    border-bottom: 1px solid #D6D3CE;
    border-top: 1px solid #D6D3CE;

    a {
      color: #337ab7;
      text-decoration: none;
    }

    .title {
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      font-weight: 600;

      img {
        width: 60px;
        height: 60px;
      }
    }

    img {
      float: left;
      vertical-align: middle;
    }

    .list-unstyled {
      position: relative;
      top: -12px;
    }

    ul {
      margin-bottom: 10px;

      li {
        height: 55px;
        padding: 0;

        .rank {
          display: inline-block;
          height: 60px;
          padding-bottom: 0;
          padding-top: 18px;
          padding-left: 10px;
          width: 60px;

          img {
            width: 40px;
            height: 33px;
          }
        }

        .content {
          width: 169px;
          display: inline-block;
          padding: 5px;
          vertical-align: bottom;
          line-height: 20px;

          .name {
            font-size: 16px;
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #6D6B66;
          }

          .grade {
            font-size: 14px;
            color: #777570;

            >span {
              color: #777570;
            }
          }
        }
      }

      li:nth-child(1), li:nth-child(2), li:nth-child(3) {
        .content {
          .grade {
            >span {
              color: #f00;
            }
          }
        }
      }
    }
  }
</style>