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

<template>
    <div>
        <!-- 1.页头板块 -->
        <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="https://img.bjzxtw.org.cn/master/image/png/20251218/176604033999762.png" alt="">
        </div>
        <!--使用gridKey来强制更新视图-->
        <div id="content" class="canvasBox">
            <grid-layout :auto-size="true"
                :class="this.$store.state.template.pageData.aloneList.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
                ref="gridlayout" :layout="this.$store.state.template.pageData.aloneList"
                :layout.sync="this.$store.state.template.pageData.aloneList" :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.aloneList" :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="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
                        </div>
                        <div v-if="item.type == 'adSector'" class="moduleBox">
                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <div v-if="item.type == 'aboutListSector'" class="moduleBox">
                            <aboutListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <div v-if="item.type == 'ListupdownSector'" class="moduleBox">
                            <ListupdownSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 皮肤7-单页列表通栏 -->
                        <div v-if="item.type == 'pageListSector'" class="moduleBox">
                            <pageListSector :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 aboutListSector from '../style/sector/body/about/1200x1290/1.vue';
import ListupdownSector from '../style/sector/body/about/1200x1575/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';
//2.引入自助建站组件 end------------------------------------------------------------>
// 皮肤7-单页列表通栏
import pageListSector from '../style/sector/body/about/1200x1710/7/1.vue';
export default {
    components: {
        GridLayout,
        GridItem,
        headSector,
        headSectorStyle5,
        menuSector,
        menuSectorStyle5,
        adSector,
        aboutListSector,
        ListupdownSector,
        footerSector,
        footerSectorStyle5,
        pageListSector, //皮肤7-单页列表通栏
    },
    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;
            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>