mall-web-ssr/components/mobile/search/goodList.vue

<template>
  <div class="detail-brand" >
    <div v-for="(item, index) in productList.components" v-if="productList.components">
      <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.uuid">
        <div class="brand-item">
          <p>型号：<span>{{item.code}}</span></p>
          <p>品牌：<span>{{item.brand.nameCn}}</span></p>
          <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
          <i class="iconfont icon-shoucang"></i>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MobileGoodList',
    data () {
      return {
        isMove: ''
      }
    },
    computed: {
      productList () {
        return this.$store.state.searchData.searchList.lists.data
      }
    }
  }
</script>

<style scoped lang="scss">
  .detail-brand div{
    background: #f8fcff;
    width:100%;
    min-height:1.5rem;
    padding-top:.2rem;
    .brand-item{
      width:7rem;
      margin:0 auto;
      border-radius:.1rem;
      background: #fff;
      padding:.2rem;
      position:relative;
      p{
        font-size:.28rem;
        line-height:.4rem;
        color:#333;
        margin:0;
        span{}
      }
      i{
        display:block;
        position:absolute;
        top:.2rem;
        right:.1rem;
        font-size:.4rem;
        color:#ff7800;
      }
    }
    div.active{
       background: #d4d;
     }
  }
</style>