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

<template>
    <div>
        <!-- 全局组件：页头 -->
        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
        </div> 
        <!-- 全局组件：导航 -->
        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
        </div> 
        <!-- 固定背景图 -->
        <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
        </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>
                        <!-- 3.1 合并为一个组件的焦点图通栏 -->
                        <div v-if="item.type == 'bannerSectorMerge'" class="moduleBox">
                            <bannerSectorMerge :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 4.外链面板 -->
                        <div v-if="item.type == 'linkSector'" class="moduleBox">
                            <linkSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 4.1 新外链面板 -->
                        <div v-if="item.type == 'linkCxfwSector'" class="moduleBox">
                            <linkCxfwSector :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>
                        <!-- 8.热点新闻选项卡 -->
                        <div v-if="item.type == 'newsTabsSector'" class="moduleBox">
                            <newsTabsSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 9.选项卡-广告混合通栏 -->
                        <div v-if="item.type == 'newsTabsAdSector'" class="moduleBox">
                            <newsTabsAdSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 10.单个资讯通栏带标题 -->
                        <div v-if="item.type == 'NewsHyjjSector'" class="moduleBox">
                            <NewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 11.文字资讯通栏1 -->
                        <div v-if="item.type == 'newsTextSector'" class="moduleBox">
                            <newsTextSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 12.选项卡-文字通栏 -->
                        <div v-if="item.type == 'newsTabsTextSector'" class="moduleBox">
                            <newsTabsTextSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 13.图片通栏 -->
                        <div v-if="item.type == 'newsAllPictureSector'" class="moduleBox">
                            <newsAllPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 14.带标题带选项卡图文组合 -->
                        <div v-if="item.type == 'newsTextTabsSector'" class="moduleBox">
                            <newsTextTabsSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 15.皮肤6 选项卡图文组合通栏 -->
                        <div v-if="item.type == 'TabsTextPhotoSector'" class="moduleBox">
                            <TabsTextPhotoSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 16.皮肤6 带标题的混合通栏 -->
                        <div v-if="item.type == 'newsTitleTabsSector'" class="moduleBox">
                            <newsTitleTabsSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 17.皮肤6 选项卡图文组合通栏2 -->
                        <div v-if="item.type == 'TabsTextPhotoTwo'" class="moduleBox">
                            <TabsTextPhotoTwo :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 18.皮肤6 纯图片选项卡通栏 -->
                        <div v-if="item.type == 'photoTabsSector'" class="moduleBox">
                            <photoTabsSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>



                        <!-- 皮肤7.新闻多图组合3 皮肤7 热点关注 选项卡-->
                        <div v-if="item.type == 'newsTextTabsImgSector'" class="moduleBox">
                            <newsTextTabsImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>

                        <!-- 皮肤7-行业聚焦 -->
                        <div v-if="item.type == 'skinSevenNewsHyjjSector'" class="moduleBox">
                            <skinSevenNewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>

                        <!-- 14.皮肤7-1200-选项卡 -->
                        <div v-if="item.type == 'mixTabSector'" class="moduleBox">
                            <mixTabSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        
                        <!-- 皮肤7-合并为一个组件的焦点图通栏  轮播图-->
                        <div v-if="item.type == 'bigBannerSectorMerge'" class="moduleBox">
                            <bigBannerSectorMerge :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        
                        <!-- 14 皮肤7-外连面板-带查询服务-组件1------------------------------------------------------------>
                        <div v-if="item.type == 'biglinkCxfwSector'" class="moduleBox">
                            <biglinkCxfwSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        
                    </div>
                </grid-item>
            </grid-layout>
        </div>

        <!-- 全局组件：页尾 -->
        <div class="FixedModuleBoxBottom">
            <footerSector v-if="this.$store.state.template.editWebsiteClass <= 4" />
            <footerSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
        </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/1200x200/1.vue';
import headSectorStyle5 from '../style/sector/head/1200x250/1.vue';
//一级菜单导肮
import menuSector from '../style/sector/menu/1200x130/1.vue';
import menuSectorStyle5 from '../style/sector/menu/1200x187/1.vue';
//底部
import footerSector from '../style/sector/foot/1200x580/1.vue';
import footerSectorStyle5 from '../style/sector/foot/1200x680/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';
import bannerSectorMerge from '../style/sector/body/index/banner/1200x410/2.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';
//外链面板
import linkSector from '../style/sector/body/index/link/1200x230/1.vue';
import linkCxfwSector from '../style/sector/body/index/link/1200x250/1.vue';
//热点新闻选项卡
import newsTabsSector from '../style/sector/body/index/list/1200x380/1.vue';
//选项卡-广告混合通栏
import newsTabsAdSector from '../style/sector/body/index/list/1200x370/1.vue';
//单个资讯通栏带标题
import NewsHyjjSector from '../style/sector/body/index/list/1200x530/1.vue';
//文字资讯通栏1
import newsTextSector from '../style/sector/body/index/list/1200x400/1.vue';
//选项卡-文字通栏
import newsTabsTextSector from '../style/sector/body/index/list/1200x280/1.vue';
//图片通栏
import newsAllPictureSector from '../style/sector/body/index/list/1200x410/1.vue';
//皮肤6 带标题带选项卡图文组合
import newsTextTabsSector from '../style/sector/body/index/list/1200x430/6.vue';
//皮肤6 选项卡图文组合通栏
import TabsTextPhotoSector from '../style/sector/body/index/list/1200x480/6.vue';
//皮肤6 带标题的混合通栏
import newsTitleTabsSector from '../style/sector/body/index/list/1200x540/1.vue';
//皮肤6 选项卡图文组合通栏2
import TabsTextPhotoTwo from '../style/sector/body/index/list/1200x480/6_1.vue';
//皮肤6 纯图片选项卡通栏
import photoTabsSector from '../style/sector/body/index/list/1200x430/6_1.vue';

//2.引入自助建站组件 end------------------------------------------------------------>

//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
 
import newsTextTabsImgSector from '../style/sector/body/index/list/1200x1150/7/1.vue';

//14 皮肤7-行业聚焦------------------------------------------------------------>
import skinSevenNewsHyjjSector from '../style/sector/body/index/list/1200x720/7/1.vue';


//14 皮肤7-1200-选项卡------------------------------------------------------------>
import mixTabSector from '../style/sector/body/index/list/1200x430/7/2.vue';


//14 皮肤7-合并为一个组件的焦点图通栏  轮播图
import bigBannerSectorMerge from '../style/sector/body/index/banner/1200x480/7/2.vue';


//14 皮肤7-外连面板-带查询服务-组件1------------------------------------------------------------>
import biglinkCxfwSector from '../style/sector/body/index/link/1200x326/7/1.vue';


export default {
    components: {
        GridLayout,//画布
        GridItem,//画布组件
        headSector,//全局页头
        headSectorStyle5,//全局页头皮肤5
        menuSector,//全局导航
        menuSectorStyle5,//全局导航皮肤5
        adSector,//通栏广告
        headLineSector,//首页头条
        bannerSector,//焦点图
        bannerSectorMerge,//合并为一个组件的焦点图通栏
        manyPictureSector,//新闻图文组合1
        commentSector,//新闻图文组合2
        listSector,//新闻图文组合3
        linkSector,//外链面板
        linkCxfwSector,//新外链面板
        newsTabsSector,//热点新闻选项卡
        onlyImgSector,//带广告图文组合
        newsTabsAdSector,//选项卡-广告混合通栏
        NewsHyjjSector,//单个资讯通栏带标题
        newsTextSector,//文字资讯通栏1
        newsTabsTextSector,//选项卡-文字通栏
        newsAllPictureSector,//图片通栏
        newsTextTabsSector,//带标题带选项卡图文组合
        TabsTextPhotoSector,//皮肤6 选项卡图文组合通栏
        newsTitleTabsSector,//皮肤6 带标题的混合通栏
        TabsTextPhotoTwo,//皮肤6 选项卡图文组合通栏2
        photoTabsSector,//皮肤6 纯图片选项卡通栏
        footerSector,//全局页尾
        footerSectorStyle5,//全局页尾皮肤5

        newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
        skinSevenNewsHyjjSector,//皮肤7-行业聚焦
        mixTabSector,//皮肤7-1200-选项卡
        bigBannerSectorMerge,//合并为一个组件的焦点图通栏  轮播图 皮肤7
        biglinkCxfwSector,//皮肤7-外连面板-带查询服务-组件1
    },
    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;
    background-color: transparent;
    //border: 2px dashed #eee;
}

.moduleBoxBorder {
    border: 2px dashed #eee;
}

//固定的模块
.FixedModuleBox {
    width: 100%;
    //margin-bottom: 20px;
    //border: 2px dashed #eee;
}
.fixedBg{
    width: 100%;
    height: 720px;
    position: absolute;
    top: 422px;
    left: 0;
    z-index: 0;
    img{
        width: 100%;
        height: 100%;
    }
}

.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: transparent;
    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: transparent;
}

//占位元素颜色
::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>