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">
          <nuxt-link :to="`/pcb/search/?w=${encodeURIComponent(kind.nameCn)}`" tag="li" class="pk-item" v-for="kind in kinds" :key="kind.id">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></nuxt-link>
        </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',
  computed: {
    kinds () {
      return this.$store.state.pcb.kindsData.kinds.data
    },
    storeInfo () {
      return this.$store.state.shop.storeInfo.store.data
    }
  }
}
</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;
    overflow: hidden;
    .pk-list {
      height:300px;
      .pk-item{
        height:50px;
        line-height: 50px;
        border-bottom:1px solid #e7e7e7;
        cursor:pointer;
        text-align: left;
        color: #666;
        padding-left:20px;
        &:hover{
          background: #e7e7e7;
        }
        &: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>