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

<template>
  <div class="brand-list">
    <div class="brand-list-content">
      <div class="brand-list-top">
        <span>品牌墙</span>
        <span @click="onclick()">展开<i class="iconfont icon-arrow-down"></i></span>
      </div>
      <div class="brand-list-item" :style="isShow?'max-height:2.1rem;':'min-height:2.1rem;'" >
        <div v-for="item in brandList">
          <nuxt-link to="/">
            <img :src="item.logoUrl ||'/images/component/default.png'"/>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'brandList',
      data () {
        return {
          isShow: true
        }
      },
      computed: {
        brandList () {
          return this.$store.state.searchData.searchBrands.brands.data
        }
      },
      methods: {
        onclick () {
          this.isShow = !this.isShow
        }
      }
    }
</script>

<style scoped lang="scss">
.brand-list{
  width:100%;
  .brand-list-content{
    margin:0 auto;
    border-top:.02rem solid #dedfdf;
    border-bottom:.02rem solid #dedfdf;
    width:7.1rem;
    min-height:3.02rem;
    overflow: hidden;
    text-align: center;
    padding-top:.33rem;
    padding-bottom:.33rem;
    .brand-list-top{
      span:first-child{
         font-size:.32rem;
        margin-right:4.78rem;
      }
      span:last-child{
        font-size:.28rem;
        color:#53a0f7;
      }
    }
    .brand-list-item{
      justify-content: space-between;
      flex-wrap: wrap;
      display:inline-flex;
      overflow: hidden;
      margin:0 .2rem;
      img{
        width:1.57rem;
        height:.77rem;
        margin-top:.2rem;
        border-radius: .1rem;
        border:.02rem solid #53a0f7;
      }
    }
  }
}
</style>