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

<template>
  <div class="detail-brand">
    <div class="detail-brand-content" >
      <h4>主营产品</h4>
      <div class="brand-list">
        <div class="list-left">
          <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
          <span>{{brandDetail.nameCn}}</span>
        </div>
        <p>{{brandDetail.series}}</p>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
      name: 'detailBrand',
      computed: {
        brandDetail () {
          return this.$store.state.searchData.searchDetail.detail.data
        }
      }
    }
</script>

<style scoped lang="scss">
.detail-brand{
  width:100%;
  .detail-brand-content{
    margin:0 auto;
    border-top:.02rem solid #dedfdf;
    border-bottom:.02rem solid #dedfdf;
    width:7.1rem;
    height:3.02rem;
    padding-top:.18rem;
    h4{
      font-size:.32rem;
      line-height: .6rem;
      margin:0;
      margin-left:3.97rem;
    }
    .brand-list{
      display:flex;
      justify-content: space-between;
      align-items: center;
      margin:0 .15rem;
      .list-left{
        border:.02rem solid #418ef7;
        border-radius: .05rem;
        width:2.03rem;
        height:1.73rem;
        img{
          display:block;
          width:100%;
          height:1.25rem;
        }
        span{
          display: block;
          font-size: .24rem;
          color:#fff;
          text-align: center;
          width:100%;
          background: #418ef7;
          line-height: .45rem;
        }
      }
      p{
        width:4.3rem;
        font-size:.28rem;
        line-height: .4rem;
        padding:.12rem .46rem 0 .05rem;
      }
    }
  }
}
</style>