mall-web-ssr/components/product/BrandList.vue

<template>
  <div>
    <div id="brandsList" class="container">
      <div class="title-icon">品牌索引</div>
      <div class="hr-blue"></div>
      <ul class="row initials">
        <li class="col-xs-1 initial"><nuxt-link :to="'/product/brand?initial=ABC'">ABC</nuxt-link></li>
        <li class="col-xs-1 initial"><nuxt-link :to="'/product/brand?initial=DEF'">DEF</nuxt-link></li>
        <li class="col-xs-1 initial" @click="showList('GHI')">GHI</li>
        <li class="col-xs-1 initial" @click="showList('JKL')">JKL</li>
        <li class="col-xs-1 initial" @click="showList('MNO')">MNO</li>
        <li class="col-xs-1 initial" @click="showList('PQR')">PQR</li>
        <li class="col-xs-1 initial" @click="showList('STU')">STU</li>
        <li class="col-xs-1 initial" @click="showList('VWX')">VWX</li>
        <li class="col-xs-1 initial" @click="showList('YZ')">YZ</li>
        <li class="col-xs-1 initial" @click="showList('0~9')">0~9</li>
      </ul>
      <div id="brands">
        <div v-for="(brands, initial) in brandList" class="row container brands-page">
          <div class="brands-title">{{initial}}</div>
          <div class="hr-blue"></div>
          <div class="row brands-body">
            <div class="simplebrand" v-for="brand in brands">
              <div class="brand-name">
                <nuxt-link :to="`/product/brand/${brand.uuid}/`">
                  <span>{{brand.nameEn}}</span>
                </nuxt-link>
              </div>
              <div>
                <nuxt-link :to="`/product/brand/${brand.uuid}/`" v-if="brand.nameEn!=brand.nameCn">
                  <span class="brand-name-cn">{{brand.nameCn}}</span>
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'brandList',
    computed: {
      brandList () {
        return this.$store.state.product.brand.brandList.data
      }
    },
    methods: {
      showList (keyword) {
        this.$store.dispatch('product/loadBrands', {'keyword': keyword})
      }
    }
  }
</script>

<style>
  /** brandList*/
  #brandsList {
    clear: both;
    width: 1190px;
    padding: 0px;
  }

  #brandsList .hr-blue {
    border-bottom: 2px solid #6493FF;
    border-right: 0px;
    border-top: 0px;
    border-left: 0px;
    width: 100%;
  }

  #brandsList .initials {
    margin-top: 3px;
  }

  #brandsList .row {
    margin: 20px 0px;
  }

  #brandsList .row .initial {
    display: inline-block;
    margin: 0 35px;
    font-size: 16px;
    color: #787878;
  }

  #brandsList .row .initial:hover{
    color: #5078CB;
    font-weight: bold;
    cursor: pointer;
  }

  #brandsList .row .initial-active{
    color: #5078CB;
    font-weight: bold;
  }

  #brands .container {
    width: 1190px;
    padding: 0px;
  }

  #brands .row .brands-title {
    width: 70px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #6493FF;
  }

  #brands .row .brands-body {
    margin-bottom: 30px;
    font-size: 14px;
    color: #323232;
  }

  #brands .simplebrand {
    height: 30px;
    margin: 13px 0px;
    width: 25%;
    display: inline-block;
  }

  #brands .simplebrand a {
    color: #323232;
    text-decoration: none;
  }

  #brands .simplebrand:hover a{
    color: #6493FF;
    font-weight: bold;
  }

  #brands .simplebrand .brand-name {
    margin-bottom: 2px;
  }

  #brands .simplebrand .brand-name-cn {
    font-size: 12px;
  }

  #brandsList ul {
    padding-left: 0px;
  }

  #brandsList ul li {
    list-style: none;
  }
  #carousel li {
    width: 12px;
    height: 12px;
    margin: 3px;
  }
</style>