admin_home/src/layout/components/template/componentMenu.vue

<template>
  <div class="componentMenuBox" id="componentMenuBox">
    <div class="componentMenuTitle">
      <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
      <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
    </div>
    <div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <!--首页板块-->
        <div v-if="this.$store.state.template.pageStatus == 1">
          <indexSector/>
        </div>
        <!--列表板块-->
        <div v-if="this.$store.state.template.pageStatus == 3">
          <listSector/>
        </div>
        <!--详情板块-->
        <div v-if="this.$store.state.template.pageStatus == 4">
          <articleSector/>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
//首页板块
import indexSector from './pages/index/sector.vue';
import listSector from './pages/list/sector.vue';
import articleSector from './pages/article/sector.vue';

export default {
  name: 'componentMenu',
  components:{
    indexSector,
    listSector,
    articleSector
  },
  props: {
    
  },
  data() {
    return {
      data: null
    }
  },
  methods: {
    
  }
}
</script>

<style scoped lang="less">
  .componentMenuBox {
    transition: width 0.28s;
    width: 290px !important;
    background: #2F2F2F;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    .sectorBox {
      height: 100%;
    }
    .el-scrollbar {
      height: calc(100vh - 100px);
    }
    .componentMenuTitle {
      padding: 37px 0 30px 0;
      color: #fff;
      font-size: 18px;
      div {
        border-left: 3px solid #5570F1;
        padding-left: 25px;
      }
    }
  }
</style>