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

<template>
  <div class="floor">
    <ul>
      <nuxt-link tag="li" :key="item.batchCode" :to="`/store/productDetail/${item.batchCode}`" class="list-item" v-for="item in data">
        <div class="img">
          <img :src="getLogo(item)" alt="">
        </div>
        <p class="text">{{item.code}}</p>
        <template v-if="item.prices && item.prices.length">
          <span class="text price" v-if="item.currencyName == 'RMB'">{{'¥' + item.prices[0].rMBPrice}}</span>
          <span class="text price" v-if="item.currencyName == 'USD'">{{'$' + item.prices[0].uSDPrice}}</span>
        </template>
      </nuxt-link>
    </ul>
  </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    methods: {
      getLogo: function (item) {
        if (item.batchCode) {
          if (item.img) {
            return item.img
          } else {
            return '/images/component/default.png'
          }
        } else {
          if (item.brand && item.brand.logoUrl) {
            return item.brand.logoUrl
          } else {
            return '/images/component/default.png'
          }
        }
      }
    }
  }
</script>
<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>