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

<template>
  <div class="componentMenuBox" id="componentMenuBox">
    <div class="componentMenuTitle">
      <div v-if="type == 'sector'">可选板块：</div>
      <div v-if="type == 'component'">可选组件：</div>
    </div>
    <div v-if="type == 'sector'">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="sectorBox">
          <div class="sectorItemBox" @click="addModule('headSector',10)">
            <div class="sectorItem">
              <img src="@/assets/template/sector/headSector.png" />
            </div>
            <div class="sectorItemTitle">页头</div>
          </div>
          <div class="sectorItemBox" @click="addModule('menuSector',2)">
            <div class="sectorItem">
              <img src="@/assets/template/sector/menuSector.png" />
            </div>
            <div class="sectorItemTitle">网站导航</div>
          </div>
          <div class="sectorItemBox" @click="addModule('imgTitleSector',3)">
            <div class="sectorItem">
              <img src="@/assets/template/sector/imgTitleSector.png" />
            </div>
            <div class="sectorItemTitle">图片标题</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/bannerSector.png" @click="addModule('bannerSector',17)"/>
            </div>
            <div class="sectorItemTitle">焦点图</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/moreServicesSector.png" @click="addModule('manyPictureSector',17)"/>
            </div>
            <div class="sectorItemTitle">多图菜单</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/commentSector.png" />
            </div>
            <div class="sectorItemTitle">文章列表带评论</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/newsSector.png" />
            </div>
            <div class="sectorItemTitle">文章列表</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/imgSector.png" />
            </div>
            <div class="sectorItemTitle">纯图片组合</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/linkSector.png" />
            </div>
            <div class="sectorItemTitle">友情链接</div>
          </div>
          <div class="sectorItemBox">
            <div class="sectorItem">
              <img src="@/assets/template/sector/footerSector.png" />
            </div>
            <div class="sectorItemTitle">页尾板块</div>
          </div>
        </div>
        
      </el-scrollbar>
    </div>
    <!-- <div v-if="type == 'component'" class="componentBox">
      组件
    </div> -->
  </div>
</template>

<script>

export default {
  name: 'componentMenu',
  props: {
    type: {
      type: String, //sector component
      required: true
    },
  },
  data() {
    return {
      data: null
    }
  },
  methods: {
    addModule(type,h){
      let data = {
        type: type,
        h: h
      }
      console.log(data);
      this.$store.commit('template/addModule',data);
    }
  }
}
</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;
      }
    }
    .sectorItemBox {
      box-sizing: border-box;
      padding: 0 20px 40px 20px;
      height: 130px;
      cursor: pointer;
      .sectorItem {
        border: 1px solid #333644;
        padding: 10px;
        border-radius: 8px;
        &:hover {
          background: #333644;
          transform: scale(1.1);
          transition: all 0.2s ease-in-out;
        }
        img {
          display: block;
          width: 100%;
        }
      }
      .sectorItemTitle {
        color: #fff;
        font-size: 14px;
        padding: 10px 0 0 0;
        text-align: center;
      }
    }
  }
</style>