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>
    <div class="fr">
      <img src="https://dfs.ubtob.com/group1/M00/19/BF/CgpkyFlSBPOAQSaeAAGHE8mW2UI141.jpg" alt="">
      <p class="shop-title">深圳市英唐致盈供应链管理有限公司</p>
    </div>
  </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 {
        position: relative;
        img {
          width: 952px;
          height: $height;
          border-radius: 4px;
        }
        .shop-title {
          position: absolute;
          top: 50px;
          left: 60px;
          font-size: 30px;
          color: #fff;
        }
      }
    }
</style>