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

<template>
  <div class="floor">
    <ul>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
      <li class="list-item">
        <div class="img">
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p class="text">HYCO组合式金属喷嘴</p>
        <span class="text price">￥699</span>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
  $img-size: 215px;
  .floor {
    .list-item {
      display: inline-block;
      margin-right: 10px;
      width: 290px;
      height: 350px;
      border-radius: 2px;
      -webkit-box-shadow: 2px 3px 9px 0 rgba( 0, 0, 0, .2 );
      -moz-box-shadow: 2px 3px 9px 0 rgba( 0, 0, 0, .2 );
      box-shadow: 2px 3px 9px 0 rgba( 0, 0, 0, .2 );
      text-align: center;
      border: 1px solid #fff;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:nth-child(n + 5) {
        margin-top: 10px;
      }
      &:hover {
        border-color: #366cf3;
      }
      .img {
        height: $img-size;
        line-height: $img-size;
        width: $img-size;
        margin: 11px auto 30px;
        img {
          max-width: $img-size;
          max-height: $img-size;
        }
      }
      .text {
        height: 20px;
        font-weight: bold;
      }
      .price {
        color: #f14f4f;
      }
    }
  }
</style>