admin_home/src/views/template/page/pageIndex.vue

<template>
  <div class="grid-layout-demo">
    <div class="FixedModuleBox">
      <headSector />
    </div>
    <div class="FixedModuleBox">
      <menuSector />
    </div>
    <div class="FixedModuleBox">
      <img src="@/assets/template/creat.png">
      <div>您选择的板块将展示到此区域</div>
    </div>
    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
        <div class="grid-item-content">
          <div class="grid-tools-menu">
            <!-- <span><i class="el-icon-setting"></i></span> -->
            <span><i class="el-icon-upload2" @click="moveIndexModule(item.i,'up')"></i></span>
            <span><i class="el-icon-download" @click="moveIndexModule(item.i,'down')"></i></span>
            <span><i class="el-icon-delete" @click="deleteIndexModule(item.i)"></i></span>
          </div>
          <!-- 页头板块 -->
          <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
            <headSector />
          </div> -->
          <!-- 导航板块 --> 
          <!-- <div v-if="item.type == 'menuSector'" class="moduleBox">
            <menuSector :id="item.i"/>
          </div> -->
          <!-- 图片标题模块 --> 
          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
            <imgTitleSector />
          </div>
          <!-- 焦点图模块 --> 
          <div v-if="item.type == 'bannerSector'" class="moduleBox">
            <bannerSector />
          </div>
          <!-- 多图模块 --> 
          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
            <manyPictureSector />
          </div>
          <!-- 评论模块 --> 
          <div v-if="item.type == 'commentSector'" class="moduleBox">
            <commentSector />
          </div>
          <!-- 双联文章列表模块 --> 
          <div v-if="item.type == 'listSector'" class="moduleBox">
            <listSector />
          </div>
          <!-- 纯图片组合模块 --> 
          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
            <onlyImgSector />
          </div>
          <!-- 友情链接模块 --> 
          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
            <friendShipLinkSector />
          </div>
          <!-- 页尾板块 --> 
          <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
            <footerSector />
          </div> -->
        </div>
      </grid-item>
    </grid-layout>
    <div class="FixedModuleBox">
      <footerSector />
    </div>
  </div>
</template>

<script>
//页面公用组件 start------------------------------------------------------------>
//引入公用样式
import '@/styles/global.less';
//引入vue-grid-layout拖拽效果
import { GridLayout, GridItem } from 'vue-grid-layout';
//页面公用组件 end------------------------------------------------------------>

//自助建站组件 start------------------------------------------------------------>
//style1
import headSector from '../style/1/headSector.vue';
import menuSector from '../style/1/menuSector.vue'; 
import imgTitleSector from '../style/1/imgTitleSector.vue';
import bannerSector from '../style/1/bannerSector.vue'; 
import manyPictureSector from '../style/1/manyPictureSector.vue'; 
import commentSector from '../style/1/commentSector.vue'; 
import listSector from '../style/1/listSector.vue';
import onlyImgSector from '../style/1/onlyImgSector.vue';
import friendShipLinkSector from '../style/1/friendShipLinkSector.vue';
import footerSector from '../style/1/footerSector.vue';
//自助建站组件 end------------------------------------------------------------>

export default {
  components: {
    //拖拽组件
    GridLayout,
    GridItem,
    //板块组件 style1
    headSector,
    menuSector,
    imgTitleSector,
    bannerSector,
    manyPictureSector,
    commentSector,
    listSector,
    onlyImgSector,
    friendShipLinkSector,
    footerSector
  },
  data() {
    return {
      //0.全局配置 start------------------------------------------------------------>
      windowStatus: false,
      rowHeight:10,
      //0.全局配置 end------------------------------------------------------------>
      //1.编辑模块 start------------------------------------------------------------>
      formLabelWidth: '120px',
      editModule: "",//待编辑的模块
      //1.编辑模块 end------------------------------------------------------------>
    }
  },
  methods: {
    //0.全局操作 start ------------------------------------------------------------>
    //0.1上一步  
    goStyle(){
      this.$router.push({
        path: '/templateStyle',
        query: {
          id: this.editId
        }
      });
    },
    //0.2下一步
    gotoList(){
      this.$router.push({
        path: '/templateList'
      });
    },
    //0.全局操作 end ------------------------------------------------------------>

    //1.模块操作 start ------------------------------------------------------------>
    //1.1 移动模块
    moveIndexModule(i,moveType){
      this.$store.commit('template/moveIndexModule',{i:i,moveType:moveType});
    },
    //1.2 删除模块
    deleteIndexModule(i){
      this.$store.commit('template/deleteIndexModule',{i:i});
    },
    //1.3 打开弹出框
    openWindow(item) {
      this.editModule = item.i;
      this.windowStatus = true;
    },
    //1.4 关闭弹出框
    closeWindow() {
      this.windowStatus = false;
    }
    //1.模块操作 end ------------------------------------------------------------>
  },
  mounted(){

  }
}
</script>

<style scoped lang="less">
  //模块 start------------------------------------------------------------> 
  .moduleBox {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: space-between;
    box-sizing: border-box;
    border: 2px dashed #19499F;
  }
  //固定的模块
  .FixedModuleBox {
    width: 100%;
    border: 2px dashed #19499F;
    font-size: 18px;
    color: #999;
    text-align: center;
    img {
      margin: 30px 0 20px 0;
    }
  }
  //模块 end------------------------------------------------------------> 
  //栅格布局 start------------------------------------------------------------> 
  .grid-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
    position: relative;
    .grid-tools-menu {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 5px;
        color: #000;
        background: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        transition: all 0.3s;
        &:hover {
          color: #fff;
          background: #000;
        }
      }
    }
  }
  .grid-layout {
    grid-gap: 0;
    row-gap: 0;
  }
  //栅格布局 end------------------------------------------------------------> 
  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
  ::v-deep .custom-form-item > .el-form-item__label {
    line-height: 140px !important;
  }
  ::v-deep .custom-textarea .el-textarea__inner {
    resize: none; /* 禁止用户拖拽调整大小 */
  }
  ::v-deep .custom-align-right .el-form-item__label {
    text-align: right; /* 设置标签文字右对齐 */
  }
  ::v-deep .shadowBox .el-button--mini.is-circle {
    border-radius: 50% !important;
  }
  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
</style>