mall-web-ssr/components/search/BrandList.vue

<template>
  <div class="search-brand-list">
    <ul>
      <nuxt-link :key="item.id" :to="`/search?w=${encodeURIComponent(item.nameEn)}&type=brand`" tag="li" v-for="item in brands">
        <div class="img inline-block">
          <img :src="item.logoUrl || '/images/component/default.png'" alt="">
        </div>
        <div class="params inline-block">
          <p>
            <span class="title inline-block">主营产品：</span>
            <span class="content inline-block" :title="item.series">{{item.series}}</span>
          </p>
          <p>
            <span class="title inline-block">应用领域：</span>
            <span class="content inline-block" :title="item.applications">{{item.applications}}</span>
          </p>
          <p>
            <span class="title inline-block">品牌介绍：</span>
            <span class="content inline-block" :title="item.brief">{{item.brief}}</span>
          </p>
          <p>
            <span class="title inline-block">官网地址：</span>
            <span class="content inline-block" :title="item.url">{{item.url}}</span>
          </p>
        </div>
        <button>了解详情</button>
      </nuxt-link>
    </ul>
  </div>
</template>
<script>
  export default {
    computed: {
      brands () {
        let brands = this.baseUtils.deepCopy(this.$store.state.searchData.searchList.listNew.data.content) || []
        if (brands.length) {
          brands.forEach(item => {
            if (item.application && item.application !== '') {
              item.applications = item.application.split(',').join('|')
            }
          })
        }
        return brands
      }
    }
  }
</script>
<style lang="scss" scoped>
  .search-brand-list {
    li {
      border: 1px solid #e8e8e8;
      border-bottom: none;
      padding: 29px 18px 25px 30px;
      &:last-child {
        border-bottom: 1px solid #e8e8e8;
      }
      .img {
        width: 208px;
        height: 156px;
        text-align: center;
        line-height: 154px;
        border-radius: 2px;
        background: #fff;
        border: 1px solid #e2e2e2;
        img {
          max-width: 186px;
          max-height: 152px;
        }
      }
      .params {
        margin-left: 12px;
        width: 743px;
        color: #666;
        p {
          margin-top: 15px;
          &:first-child {
            margin-top: 0;
          }
          .title {
            font-weight: bold;
            vertical-align: top;
          }
          .content {
            word-break: break-all;
          }
        }
      }
      button {
        outline: none;
        border: 1px solid #2496f1;
        border-radius: 3px;
        background: #fff;
        color: #2496f1;
        width: 100px;
        height: 28px;
        text-align: center;
        margin-left: 75px;
        &:hover {
          background: #2496f1;
          color: #fff;
        }
      }
      &:hover {
        background: #ecf2fd;
        cursor: pointer;
        .params {
          color: #2e91f0;
        }
      }
    }
  }
</style>