mall-web-ssr/components/provider/RecommendStore.vue

<template>
  <div class="container marketing">
    <div class="toggle-store">
      <toggle-store/>
    </div>
    <div class="carousel">
      <carousel :banners="banners" v-for="item in init" v-if="item.show" :key="item.id" />
    </div>
  </div>
</template>
<script>
import ToggleStore from './ToggleStore.vue'
import Carousel from './Carousel.vue'

export default {
  name: 'recommend-store',
  data () {
    return {
      init: [{id: 0, show: true}]
    }
  },
  components: {
    ToggleStore,
    Carousel
  },
  computed: {
    providerType () {
      return this.$route.path === '/provider/home' ? 'agency' : 'original'
    },
    banners () {
      if (this.$store.state.carousel.banners) {
        this.init[this.init.length - 1].show = false
        this.init.push({
          id: this.init.length,
          show: true
        })
        return this.$store.state.carousel.banners.data.data
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .marketing {
    width: 1190px;
    min-height: 360px;
    padding-top: 20px!important ;
    overflow: hidden;
    .toggle-store {
      float: left;
      margin-right: 15px;
      width: 220px;
      height: 402px
    }

    .carousel {
      width: 955px;
      min-height: 400px;
      display: inline-block;
      float: left;
      border-radius: 5px;
    }

    /*.carousel_670 {*/
      /*width: 670px;*/
      /*min-height: 360px;*/
      /*display: inline-block;*/
      /*float: left;*/
      /*border: 1px solid #D6D3CE;*/
    /*}*/

    .new-store {
      width: 280px;
      min-height: 360px;
      float: left;
      display: inline-block;
    }
  }
</style>