mall-web-ssr/components/brandCenter/RecommendBrand.vue

<template>
  <div class="recommend-brand">
    <div class="brand-content">
      <div class="brand-index-tab">
        <div class="index-head">
          <img src="/images/brandCenter/search-index.png"/>品牌索引
        </div>
        <div style="padding-top: 8px;">
          <div class="brand-index-group index-group" v-for="(indexGroup, index) in indexGroups">
            <span v-if="index == 5"></span>
            <a @click="goBrandIndex(group_index)" v-for="group_index in indexGroup" :class="{'active': activeIndex==group_index}">{{group_index}}</a>
            <span v-if="index == 5"></span>
          </div>
        </div>
      </div>
      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in sliceBanners">
            <a :href="banner.detailsLink" target="_blank">
              <img :src="banner.pictureLink"/>
            </a>
          </div>
          <div v-if="sliceBanners.length === 0" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
          <div v-if="sliceBanners.length === 0"class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
        </div>
        <div v-if="sliceBanners.length === 0" class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        indexGroups: [
          ['A', 'B', 'C', 'D', 'E'],
          ['F', 'G', 'H', 'I', 'J'],
          ['K', 'L', 'M', 'N', 'O'],
          ['P', 'Q', 'R', 'S', 'T'],
          ['U', 'V', 'W', 'X', 'Y', 'Z'],
          ['0~9']
        ],
        activeSlide: 0,
        swiperOption: {
          autoplay: 6000,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          mousewheelControl: false,
          effect: 'fade',
          lazyLoading: true,
          loop: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          onTransitionStart: (swiper) => {
            if (this.banners.data && this.banners.data.length && (swiper.activeIndex > this.banners.data.length)) {
              swiper.activeIndex = 1
            }
            if (this.banners.data && this.banners.data.length && swiper.activeIndex <= 0) {
              swiper.activeIndex = this.banners.data.length
            }
          }
        }
      }
    },
    filters: {
      applicationFilter: function (str) {
        return str.split(',').join('|')
      },
      introduceFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 60) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      }
    },
    computed: {
      floors () {
        return this.$store.state.floor.list.data
      },
      banners () {
        return this.$store.state.carousel.brandCarousel.data
      },
      sliceBanners () {
        return this.banners.data && this.banners.data.length ? this.banners.data.slice(0, 3) : []
      },
      activeIndex () {
        return !this.isSearch ? this.$route.params.initial : ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .recommend-brand {
    width: 1190px;
    margin: 0 auto;
    margin-top: 10px;
    .brand-content{
      overflow: hidden;
      .brand-index-tab {
        margin-right: 15px;
        float: left;
        width: 220px;
        height: 400px;
        background-color: #ffffff;
        border-radius: 5px;
        border: solid 1px #d2d2d2;
        .index-head {
          padding-left: 10px;
          width: 220px;
          height: 34px;
          line-height: 34px;
          background-color: #2496f1;
          font-size: 14px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          color: #fff;
          img{
            margin-right: 6px;
            margin-top: -2px;
          }
        }
        .brand-index-group {
          margin: 0 auto 22px;
          width: 200px;
          height: 40px;
          background-color: rgba(36, 150, 241, 0.1);
          border-radius: 4px;
          /*opacity: 0.1;*/
          a{
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: #666;
            border-radius: 5px;
            /*background-color: #2496f1;*/
            &:hover{
               background-color: #2496f1;
               color: #fff;
             }
          }
          &:last-child{
             margin-bottom: 0;
           }
        }
      }
    }
    .swiper-container {
      z-index: 2;
      float: left;
      width: 955px;
      height: 400px;
      .swiper-wrapper {
        width: 955px;
        height: 400px;
        margin: 0 auto;
        .swiper-slide {
          height: 400px;
          margin: 0 auto;
          display: flex;
          img {
            width: 955px;
            height: 400px;
            border: 1px solid #ccc;
          }
        }
        .swiper-button-prev i, .swiper-button-next i {
          font-size: 26px;
        }
      }
      .swiper-pagination-bullets {
        .swiper-pagination-bullet {
          width: 10px!important;
          height: 10px!important;
        }
      }
    }
    .recommend-adv {
      margin: 0 auto;
      width: 1190px;
      height: 163px;
      display: block;
      border-radius: 3px;
    }
    .recommend-area {
      margin: 20px auto 0;
      width: 1190px;
      height: 263px;
      background:url("/images/brandCenter/recommend-bg1.png") no-repeat;
      .recommend-items {
        padding-top: 51px;
        padding-left: 3px;
        li {
          border-radius: 3px;
          width: 233px;
          height: 98px;
          background: #fff;
          display: inline-block;
          margin-right: 3px;
          margin-bottom: 8px;
          text-align: center;
          border: solid 1px #f4f4f4;
          &:nth-child(5n) {
            margin-right: 0;
          }
          a {
            padding-top: 22px;
            width: 233px;
            height: 98px;
            line-height: 60px;
            display: block;
            position: relative;
            top:-1px;
            left: -1px;
            img {
              max-width: 140px;
              max-height: 60px;
            }
            >div {
              display: none;
              position: absolute;
              border-radius: 3px;
              width: 233px;
              height: 98px;
              background-color: #3a78f4;
              opacity: 0.9;
              top: 0;
              text-align: left;
              padding: 13px 7px;
              p {
                font-size: 15px;
                color: #fff;
                font-weight: bold;
                height: 16px;
                line-height: 16px;
              }
              span {
                color: #fff;
                display: block;
                width: 228px;
                line-height: 18px;
                font-size: 12px;
                &.brand-application {
                  padding-right: 5px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
                &.brand-introduce {
                  padding-right: 5px;
                  word-break: break-all;
                }
              }
            }
          }
          &:hover {
            /*position: relative;
            bottom: 5px;*/
            a {
              div {
                display: block;
              }
            }
          }
        }
      }
    }
  }
</style>