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

<template>
  <div class="container marketing">
    <div class="sales-rank" v-if="providerType === 'original'">
      <sales-rank />
    </div>
    <div class="carousel" :class="{carousel_670: providerType === 'original'}">
      <carousel />
    </div>
    <div class="new-store">
      <new-store />
    </div>
  </div>
</template>
<script>
import SalesRank from './SalesRank.vue'
import NewStore from './NewStore.vue'
import Carousel from './Carousel.vue'

export default {
  name: 'recommend-store',
  components: {
   SalesRank,
    NewStore,
    Carousel
  },
  computed: {
    providerType () {
      return this.$route.path === '/provider/home' ? 'agency' : 'original'
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .marketing {
    width: 1190px;
    min-height: 360px;
    padding: 0;

    .sales-rank {
      width: 240px;
      min-height: 360px;
      float: left;
      display: inline-block;
    }

    .carousel {
      width: 910px;
      min-height: 360px;
      display: inline-block;
      float: left;
      border: 1px solid #D6D3CE;
    }

    .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>