mall-web-ssr/components/pcb/home/StoreBanner.vue

\<template>
  <div class="container" id="title-fragment">
    <div class="container">
      <div class="shop-pcb">
        <ul class="pk-list">
          <li class="pk-item" @click="setKindIds(null, -1)" :class="{active: selectedIndex === -1}">全部<i class="icon-arrow-right iconfont"></i></li>
          <li @click="setKindIds(kind, index)" class="pk-item" :class="{active: selectedIndex === index}" v-for="(kind, index) in kinds" :key="kind.id">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></li>
        </ul>
      </div>
      <div class="pcb-banner">
        <img :src="storeInfo.bannerUrl || '/images/store/default/shop_banner.png'">
         <div id="shop-title" v-if="storeInfo.storeShortName" v-text="storeInfo.storeShortName">店铺名称</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'store-banner',
  data () {
    return {
      selectedIndex: -1
    }
  },
  computed: {
    kinds () {
      return this.$store.state.pcb.kindsData.kinds.data
    },
    storeInfo () {
      return this.$store.state.shop.storeInfo.store.data
    }
  },
  methods: {
    setKindIds (kind, index) {
      let idsArr = []
      if (kind) {
        if (kind.children && kind.children.length) {
          kind.children.forEach(item => {
            idsArr.push(item.id)
          })
        } else {
          idsArr.push(kind.id)
        }
      }
      this.selectedIndex = index
      this.$emit('kindAction', idsArr.join(','))
    }
  }
}
</script>
<style lang="scss" scoped>
  #title-fragment {
		padding: 0;
	}
	#title-fragment .container {
		width: 1190px;
		padding-left: 0px;
		padding-right: 0px;
	}
  #title-fragment .shop-pcb{
    margin-right: 10px;
    width: 220px;
    border: 1px solid #e8e8e8;
    float: left;
    text-align: center;
    line-height: 210px;
    position: relative;
    background: #fff;
    .pk-list {
      height:300px;
      position: relative;
      left: -1px;
      width: 220px;
      .pk-item{
        height:43px;
        line-height:43px;
        border-bottom:1px solid #e7e7e7;
        cursor:pointer;
        text-align: left;
        color: #666;
        padding-left:20px;
        &:hover,
        &.active{
          background: #d3eafc;
          color: #2496f1;
        }
        &:last-child{
          border:none;
        }
        .iconfont {
          float: right;
          margin-right: 18px;
        }
      }
    }
  }
  #title-fragment .pcb-banner {
    float: left;
    position: relative;
    width: 955px;
    height: 320px;
    border: 1px solid #e8e8e8;
    border-left: none;
    overflow: hidden;
    border-radius: 5px;
    img{
      width: 955px;
      height: 300px;
    }
    #shop-title{
      position: absolute;
      top: 50px;
      left: 60px;
      font-size: 30px;
      color: rgb(255,255,255);
    }
  }
	.container{
		width: 1190px;
		padding: 0;
	}
</style>