mall-web-ssr/components/pcb/home/Kinds.vue

<template>
  <div class="pcb-kinds">
    <ul class="pk-list">
      <li class="pk-item" v-for="kind in kinds">
        <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent(kind.nameCn)}`">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></nuxt-link>
      </li>
    </ul>
    <img class="fr" src="/images/pcb/banner.png" alt="">
  </div>
</template>
<script>
  export default {
    computed: {
      kinds () {
        return this.$store.state.pcb.kindsData.kinds.data
      }
    }
  }
</script>
<style lang="scss" scoped>
  $height: 300px;
    .pcb-kinds {
      width: 1184px;
      margin: 1px auto 0;
      .pk-list {
        width: 230px;
        height: $height;
        overflow-y: hidden;
        border-radius: 4px;
        border: 1px solid #376ff3;
        margin-right: 2px;
        display: inline-block;
        .pk-item {
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid rgba(153, 153, 153, .32);
          text-align: center;
          a {
            color: #666;
          }
          .iconfont {
            float: right;
            margin-right: 18px;
          }
        }
      }
      .fr {
        width: 952px;
        height: $height;
        border-radius: 4px;
      }
    }
</style>