mall-web-ssr/components/mobile/brand/BrandDetail.vue

<template>
  <div class="brand-detail">
    <div class="brand-logo">
      <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
    </div>
    <div class="brand-switch-item">
      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">品牌</span>
      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
    </div>
    <div class="brand-param-list" v-if="activeType=='detail'">
      <div class="brand-param-item" v-if="brandDetail.series">
        <span class="remind-tag">| </span>
        <span>主营产品</span>
        <div class="main-sell">{{brandDetail.series}}</div>
      </div>
      <div class="brand-param-item" v-if="applications.length>0">
        <span class="remind-tag">| </span>
        <span>应用领域</span>
        <div class="main-sell">
          <span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
        </div>
      </div>
      <div class="brand-param-item" v-if="brandDetail.brief">
        <span class="remind-tag">| </span>
        <span>品牌介绍</span>
        <div class="main-sell">{{brandDetail.brief}}</div>
      </div>
      <div class="brand-param-item" v-if="brandDetail.url">
        <span class="remind-tag">| </span>
        <span>官网地址</span>
        <a class="brand-url" v-text="brandDetail.url"></a>
      </div>
    </div>
    <div class="brand-product-list" v-if="activeType=='product'">
      <ul>
        <li v-for="product in productList.content">
          <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
          <a class="text-right">规格书</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MobileBrandsDetail',
    data () {
      return {
        applications: [],
        activeType: 'product'
      }
    },
    computed: {
      brandDetail () {
        let list = this.$store.state.brandDetail.detail.data
        if (list.application && list.application !== '') {
          this.applications = list.application.split(',')
        }
        return list
      },
      productList () {
        return this.$store.state.brandComponent.component.data || []
      }
    }
  }
</script>
<style lang="scss" scoped>
  .brand-detail {
    margin: 0 auto;
    text-align: center;
    .brand-logo {
      text-align: center;
      height: 2.21rem;
      line-height: 2.21rem;
      width: 3.73rem;
      display: inline-block;
      border: .01rem solid #e75610;
      margin: .38rem auto;
      img {
        max-height: 2.21rem;
      }
    }
    .brand-switch-item {
      text-align: center;
      .mobile-switch-btn {
        background: #e75610;
        color: #fff;
        display: inline-block;
        height: .68rem;
        font-size: .28rem;
        padding: .19rem .53rem;
        position: relative;
        &:first-child {
          background: #fff;
          color: #e75610;
          border: .01rem solid #e75610;
          border-left: none;
          padding-left: .30rem;
        }
        &:first-child.active {
          background: #e75610;
          color: #fff;
          border: .01rem solid #e75610;
          padding-left: .30rem;
        }
        &:last-child {
          background: #fff;
          color: #e75610;
          border: .01rem solid #e75610;
          border-right: none;
          padding-right: .35rem;
        }
        &:last-child.active {
          background: #e75610;
          color: #fff;
          border: .01rem solid #e75610;
          border-right: none;
          padding-right: .35rem;
        }
        &:first-child:before {
          content: '';
          background: #fff;
          border: .01rem solid #e75610;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          left: -.33rem;
          top: -.01rem;
          z-index: -5;
        }
        &:first-child.active:before {
          content: '';
          background: #e75610;
          border: .01rem solid #e75610;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          left: -.33rem;
          top: -.01rem;
        }
        &:last-child:before {
          content: '';
          background: #fff;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          border: .01rem solid #e75610;
          left: 1.04rem;
          z-index: -5;
          top: -.01rem;
        }
        &:last-child.active:before {
          content: '';
          background: #e75610;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          border: .01rem solid #e75610;
          left: 1.04rem;
          z-index: -5;
          top: -.01rem;
        }
      }
    }
    .brand-param-list {
      text-align: left;
      padding: 0 .44rem;
      margin-top: .28rem;
      .brand-param-item {
        font-size: .28rem;
        margin-bottom: .48rem;



        .remind-tag {
          color: rgb(4,198,96);
          font-size: .24rem;
          position: relative;
          bottom: .03rem;
        }
        .main-sell {
          color: #666;
          margin-top: .19rem;
          line-height: .4rem;
          max-height: 1.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .brand-url {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #01a44e;
          margin-left: .28rem;
        }
      }
    }
    .brand-product-list {
      margin-top: .28rem;
      font-size: .28rem;
      ul {
        text-align: center;
        li {
          display: inline-block;
          width: 6.66rem;
          height: .66rem;
          line-height: .66rem;
          border: {
            top: 1px solid rgb(230,228,228);
            bottom: 1px solid rgb(230,228,228);
          }
          &:nth-child(even) {
            background: #f9f9f9;
          }
          .text-left {
            float: left;
            color: #333;
          }
          .text-right {
            float: right;
            color: #333;
          }
        }
      }
    }
  }
</style>