hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/home-banner.vue

<template>
  <div class="banner home-banner">
    <div class="classification-box" v-if="basicCategory.data">
      <div class="classification-cell" v-for="(item,ind) in basicCategory.data.slice(0,10)" :key="ind" @click.stop="toCategoryChild({id: item.id})">
        <div class="first-class">{{item.name}}</div>
        <div class="secondary-class">
          <div class="secondary-name" @click.stop="toCategoryChild({id: obj.id})" v-for="(obj,bidx) in item.children" :key="bidx">{{obj.name}}</div>
        </div>
      </div>
      <div class="classification-cell" v-if="basicCategory.total > 10" @click.stop="toUrl('category')"><div class="first-class">查看更多分类</div></div>
    </div>
    <div class="banner-div">
      <bannerItem></bannerItem>
      <home-ads-cell :datas="advert"></home-ads-cell>
    </div>
    <div class="banner-banner-right">
      <memberInfo></memberInfo>
      <article-cell></article-cell>
    </div>
    <floor-nav></floor-nav>
  </div>
</template>

<script>
import bannerItem from "~/components/templateTwo/home-banner-components/banner-item";
import homeAdsCell from "~/components/templateTwo/home-banner-components/ads-cell";
import memberInfo from "~/components/templateTwo/home-banner-components/member-info";
import articleCell from "~/components/templateTwo/home-banner-components/article";
import floorNav from "~/components/templateTwo/floor-nav";
import {mapState} from "vuex";
export default {
  props:{
    advert: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
    };
  },

  activated() {},

  components: {
    bannerItem,
    homeAdsCell,
    memberInfo,
    articleCell,
    floorNav
  },

  computed: {
    ...mapState(["basicSet", "basicCategory"]),
  },

  mounted() {},

  methods: {
    toCategoryChild(params) {
      if (this.category_template === '03') {
        if(this.$baseURL) {
          // 静态部署环境下
          this.$router.push(this.fun.getUrl('category_child',{}, params));
        }else {
          this.$router.push(this.fun.getUrl('category_child-id', params));
        }
      }else {
        if(this.$baseURL) {
          // 静态部署环境下
          this.$router.push(this.fun.getUrl('catelist',{}, params));
        }else {
          this.$router.push(this.fun.getUrl('catelist-id', params));
        }
      }
    },
    toUrl(url, params) {
      this.$router.push(this.fun.getUrl(url, params));
    },
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.banner {
  position: relative;
  width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  padding-top: 10px;
  .banner-div{
    display: inline-block;
    margin-left: 15px;
    position: relative;
    width: 690px;
  }
  .banner-banner-right{
    flex: 1;
    height: 460px;
    overflow: hidden;
    display: flex;
    margin-left: 15px;
    flex-direction: column;
  }
  .classification-box{
    background-color: #fff;
    width: 220px;
    height: 480px;
    padding: 8px 16px;
    margin-top: -20px;
    box-sizing: border-box;
    border-top: 6px solid var(--dark_color);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    .classification-cell{
      display: flex;
      flex-direction: column;
      padding-top: 4px;
      .first-class{
        font-size: 14px;
        line-height: 28px;
        color: #000000;
        font-weight: bold;
        &:hover{
          cursor: pointer;
          color: var(--color);
        }
      }
      .secondary-class{
        display: flex;
        flex-wrap: wrap;

        .secondary-name{
          font-size: 12px;
          color: #8c8c8c;
          padding-right: 8px;
          text-align: left;
          min-width: 50%;
          box-sizing: border-box;
          line-height: 26px;
          &:hover{
            cursor: pointer;
            color: var(--color);
          }
        }
      }
    }
    .classification-cell:first-child{
      padding: 0;
    }
  }
  .classification-box::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
</style>