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-jiantoushang"></i></span>
      </div>
      <div class="brand-list-item">
        <img src="/images/component/default.png"/>
      </div>
    </div>
  </div>
</template>

<script>
    export default {}
</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;
    text-align: center;
    padding-top:.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: flex-start;
      flex-wrap: wrap;
      display:flex;
      img{
        width:1.75rem;
        height:.78rem;
        margin-top:.2rem;
      }
    }
  }
}
</style>