|
|
@@ -0,0 +1,380 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 全局组件：页头 -->
|
|
|
+ <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
|
|
|
+ <headSector />
|
|
|
+ </div>
|
|
|
+ <!-- 全局组件：导航 -->
|
|
|
+ <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
|
|
|
+ <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> -->
|
|
|
+ <!--使用gridKey来强制更新视图-->
|
|
|
+ <div
|
|
|
+ id="content"
|
|
|
+ class="canvasBox"
|
|
|
+ >
|
|
|
+ <grid-layout
|
|
|
+ :auto-size="true"
|
|
|
+ :class="this.$store.state.template.pageData.index.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
|
|
|
+ ref="gridlayout"
|
|
|
+ :layout="this.$store.state.template.pageData.index"
|
|
|
+ :layout.sync="this.$store.state.template.pageData.index"
|
|
|
+ :col-num="12"
|
|
|
+ :row-height="rowHeight"
|
|
|
+ :margin="[0,0]"
|
|
|
+ :is-draggable="true"
|
|
|
+ :is-resizable="true"
|
|
|
+ :key="this.$store.state.template.gridKey"
|
|
|
+ >
|
|
|
+ <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 @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, item.dataSort)"><i class="el-icon-close"></i></span>
|
|
|
+ </div>
|
|
|
+ <!-- 1.广告通栏 -->
|
|
|
+ <div v-if="item.type == 'adSector'" class="moduleBox">
|
|
|
+ <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 2.头条通栏 -->
|
|
|
+ <div v-if="item.type == 'headLineSector'" class="moduleBox">
|
|
|
+ <headLineSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 3.焦点图通栏 -->
|
|
|
+ <div v-if="item.type == 'bannerSector'" class="moduleBox">
|
|
|
+ <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 4.新闻多图组合1 -->
|
|
|
+ <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
|
|
|
+ <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 5.新闻多图组合2 -->
|
|
|
+ <div v-if="item.type == 'commentSector'" class="moduleBox">
|
|
|
+ <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 6.新闻多图组合3 -->
|
|
|
+ <div v-if="item.type == 'listSector'" class="moduleBox">
|
|
|
+ <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ <!-- 7.带广告新闻组合 -->
|
|
|
+ <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
|
|
|
+ <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </grid-item>
|
|
|
+ </grid-layout>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 全局组件：页尾 -->
|
|
|
+ <div class="FixedModuleBoxBottom">
|
|
|
+ <footerSector />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//页面公用组件 start------------------------------------------------------------>
|
|
|
+//引入公用样式
|
|
|
+import '@/styles/global.less';
|
|
|
+import { GridLayout, GridItem } from "vue-grid-layout";
|
|
|
+//1.页面公用组件 end------------------------------------------------------------>
|
|
|
+
|
|
|
+//引入自助建站组件 start------------------------------------------------------------>
|
|
|
+//全局组件
|
|
|
+//顶部
|
|
|
+import headSector from '../style/sector/head/1.vue';
|
|
|
+//一级菜单导肮
|
|
|
+import menuSector from '../style/sector/menu/1.vue';
|
|
|
+//底部
|
|
|
+import footerSector from '../style/sector/foot/1.vue';
|
|
|
+//通栏组件 开始：
|
|
|
+//通栏广告
|
|
|
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
|
|
|
+//首页头条
|
|
|
+import headLineSector from '../style/sector/body/index/headLine/1200x140/1.vue';
|
|
|
+//焦点图
|
|
|
+import bannerSector from '../style/sector/body/index/banner/1200x410/1.vue';
|
|
|
+//新闻图文组合1
|
|
|
+import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
|
|
|
+//新闻图文组合2
|
|
|
+import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
|
|
|
+//新闻图文组合3
|
|
|
+import listSector from '../style/sector/body/index/list/1200x980/1.vue';
|
|
|
+//带广告图文组合
|
|
|
+import onlyImgSector from '../style/sector/body/index/list/1200x480/1.vue';
|
|
|
+//2.引入自助建站组件 end------------------------------------------------------------>
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ GridLayout,//画布
|
|
|
+ GridItem,//画布组件
|
|
|
+ headSector,//全局页头
|
|
|
+ menuSector,//全局导航
|
|
|
+ adSector,//通栏广告
|
|
|
+ headLineSector,//首页头条
|
|
|
+ bannerSector,//焦点图
|
|
|
+ manyPictureSector,//新闻图文组合1
|
|
|
+ commentSector,//新闻图文组合2
|
|
|
+ listSector,//新闻图文组合3
|
|
|
+ onlyImgSector,
|
|
|
+ footerSector
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //0.全局配置 start------------------------------------------------------------>
|
|
|
+ windowStatus: false,
|
|
|
+ rowHeight: 10,
|
|
|
+ //0.全局配置 end------------------------------------------------------------>
|
|
|
+ //1.编辑模块 start------------------------------------------------------------>
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ editModule: "",//待编辑的模块
|
|
|
+ //1.编辑模块 end------------------------------------------------------------>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //必备操作
|
|
|
+ //1.获得vuex中的鼠标对象
|
|
|
+ let mouseObj = this.$store.state.template.mouseXY;
|
|
|
+ //2.获得gridlayout对象
|
|
|
+ this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
|
|
|
+ //3.监听鼠标按住以后的移动事件
|
|
|
+ document.addEventListener("dragover", function (e, store) {
|
|
|
+ mouseObj.x = e.clientX;
|
|
|
+ mouseObj.y = e.clientY;
|
|
|
+ // mouseXY.x = e.clientX;
|
|
|
+ // mouseXY.y = e.clientY;
|
|
|
+ }, false);
|
|
|
+ },
|
|
|
+ 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, dataSort) {
|
|
|
+ let data = {
|
|
|
+ i: i,
|
|
|
+ dataSort: dataSort
|
|
|
+ }
|
|
|
+ this.$store.commit('template/deleteModule', data);
|
|
|
+ },
|
|
|
+ //1.3 打开弹出框
|
|
|
+ openWindow(item) {
|
|
|
+ this.editModule = item.i;
|
|
|
+ this.windowStatus = true;
|
|
|
+ },
|
|
|
+ //1.4 关闭弹出框
|
|
|
+ closeWindow() {
|
|
|
+ this.windowStatus = false;
|
|
|
+ }
|
|
|
+ //1.模块操作 end ------------------------------------------------------------>
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+//拖拽demo
|
|
|
+.droppable-element {
|
|
|
+ width: 150px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fdd;
|
|
|
+ border: 1px solid black;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+//模块 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:10px;
|
|
|
+ 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;
|
|
|
+ border: 2px dashed #999;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff1cc;
|
|
|
+ // 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;
|
|
|
+}
|
|
|
+
|
|
|
+//画布调整
|
|
|
+.canvasBox {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.FixedMainModuleBox {
|
|
|
+ min-height: 450px;
|
|
|
+ background-color: #fff;
|
|
|
+ background: url('../../../assets/template/creat.png') no-repeat center center;
|
|
|
+}
|
|
|
+
|
|
|
+.FixedMainModuleBoxAuto {
|
|
|
+ min-height: 450px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+//占位元素颜色
|
|
|
+::v-deep .vue-grid-placeholder {
|
|
|
+ background: #ccc !important;
|
|
|
+ opacity: 0.3;
|
|
|
+}
|
|
|
+
|
|
|
+//栅格布局 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>
|
dangyunlong