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

<template>
  <div class="floors">
    <div class="floor-line line1">
      <p>PCB物料<span>PCB material</span>
        <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent('PCB物料')}`">查看更多</nuxt-link>
      </p>
      <floor></floor>
    </div>
    <div class="floor-line line2">
      <p>PCB常用耗材<span>PCB common consumables</span>
        <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent('PCB常用耗材')}`">查看更多</nuxt-link>
      </p>
      <floor></floor>
    </div>
    <div class="floor-line line3">
      <p>PCB设备<span>PCB equipment</span>
        <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent('PCB设备')}`">查看更多</nuxt-link>
      </p>
      <floor></floor>
    </div>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  export default {
    components: {
      Floor
    }
  }
</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>