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

<template>
  <div class="grid-layout-demo">
    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--1-->
      <headSector />
    </div>
    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--2-->
      <menuSector />
    </div>
    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
      <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" v-if="$store.state.template.previewStatus==false">
            <!-- <span><i class="el-icon-setting"></i></span> -->
            <!-- 移动板块 暂时停用 会导致组件视图不更新的问题-->
            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
            <span @click="deleteModule(item.i)"><i class="el-icon-close"></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> -->
          <!-- 图片标题模块 --><!--4-->
          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
            <imgTitleSector :id="item.i"/>
          </div>
          <!-- 焦点图模块 --><!--5-->
          <div v-if="item.type == 'bannerSector'" class="moduleBox">
            <bannerSector :id="item.i"/>
          </div>
          <!-- 多图模块 --><!--6-->
          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
            <manyPictureSector :id="item.i"/>
          </div>
          <!-- 评论模块 --><!--7-->
          <div v-if="item.type == 'commentSector'" class="moduleBox">
            <commentSector :id="item.i"/>
          </div>
          <!-- 双联文章列表模块 --> 
          <div v-if="item.type == 'listSector'" class="moduleBox">
            <listSector :id="item.i"/>
          </div>
          <!-- 纯图片组合模块 --> 
          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
            <onlyImgSector :id="item.i"/>
          </div>
          <!-- 友情链接模块 --> 
          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
            <friendShipLinkSector :id="item.i"/>
          </div>
          <!-- 页尾板块 --> 
          <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
            <footerSector />
          </div> --><!--3-->
        </div>
      </grid-item>
    </grid-layout>
    <div class="FixedModuleBoxBottom">
      <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/sector/1.vue';//顶部
import menuSector from '../style/1/sector/2.vue';//菜单
import imgTitleSector from '../style/1/sector/4.vue';//广告
import bannerSector from '../style/1/sector/5.vue';//焦点图
import manyPictureSector from '../style/1/sector/6.vue';//多图
import commentSector from '../style/1/sector/7.vue';//评论
import listSector from '../style/1/sector/8.vue';//文章列表
import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
import footerSector from '../style/1/sector/3.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 移动模块
    moveModule(i,moveType){
      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
    },
    //1.2 删除模块
    deleteModule(i){
      this.$store.commit('template/deleteModule',{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------------------------------------------------------------> 
  .sectorBorder {
    border: 2px dashed #eee;
  }
  .moduleBox {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: space-between;
    box-sizing: border-box;
    //border: 2px dashed #eee;
  }
  .moduleBoxBorder {
    border: 2px dashed #eee;
  }
  //固定的模块
  .FixedModuleBox {
    width: 100%;
    margin-bottom: 20px;
    //border: 2px dashed #eee;
  }
  .FixedModuleBoxBottom {
    width: 100%;
  }
  .FixedMainModuleBox {
    width: 100%;
    font-size: 18px;
    color: #999;
    text-align: center;
    img {
      margin-bottom: 20px;
    }
    padding: 100px;
    //background: #F5F7FB;
    margin-bottom: 20px;
  }
  .FixedMainModuleBoxBorder {
    border: 2px dashed #eee;
  }
  //模块 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 {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 30px;
        cursor: pointer;
        color: #999;
        // 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;
        // }
        transition: all 0.3s;
        &:hover {
          color: #333;
        }
      }
    }
  }
  .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>