mall-web-ssr/components/pcb/home/floors/Floors.vue

<template>
  <div class="floors">
    <div :class="`floor-line line${index + 1}`" v-for="(value, key, index) in floors">
      <p>{{key}}<span>{{key | pcbKindFilter}}</span>
        <!--<nuxt-link :to="`/pcb/search/?w=${encodeURIComponent(key)}`">查看更多</nuxt-link>-->
      </p>
      <floor :data="value"></floor>
    </div>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  export default {
    components: {
      Floor
    },
    filters: {
      pcbKindFilter: function (val) {
        if (val === 'PCB材料') {
          return 'PCB material'
        } else if (val === 'PCB耗材') {
          return 'PCB common consumables'
        } else if (val === 'PCB设备') {
          return 'PCB equipment'
        }
      }
    },
    computed: {
      floors () {
        return this.$store.state.pcb.product.recommend.data.data
      }
    }
  }
</script>
<style lang="scss" scoped>
  .floors {
    width: 1190px;
    margin: 0 auto 100px;
    .floor-line {
      margin-top: 60px;
      p {
        position: relative;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
        margin: 0 0 23px 0;
        span {
          font-size: 12px;
          vertical-align: middle;
          margin-left: 14px;
        }
        a {
          font-size: 14px;
         position: absolute;
          right: 0;
        }
      }
      &.line1 {
        p, a {
          color: #6fb61a;
        }
      }
      &.line2 {
        p, a {
          color: #d83578;
        }
      }
      &.line3 {
        p, a {
          color: #e25e44;
        }
      }
    }
  }
</style>