admin_home/src/layout/components/template/pages/index/sector.vue

<template>
    <div class="sectorBox">
        <div 
            class="sectorItemBox" 
            @click="addModule('adSector', 12, adSector)"
            @drag="drag('adSector', 12, adSector)" 
            @dragend="dragend('adSector', 12, adSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
            </div>
            <div class="sectorItemTitle">通栏广告</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('headLineSector', 17, headLineSector)" 
            @drag="drag('headLineSector', 17, headLineSector)"
            @dragend="dragend('headLineSector', 17, headLineSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" />
            </div>
            <div class="sectorItemTitle">网站头条</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('bannerSector', 44, bannerSector)"
            @drag="drag('bannerSector', 44, bannerSector)" 
            @dragend="dragend('bannerSector', 44, bannerSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" />
            </div>
            <div class="sectorItemTitle">焦点图</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('manyPictureSector', 47, manyPictureSector)"
            @drag="drag('manyPictureSector', 47, manyPictureSector)"
            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" />
            </div>
            <div class="sectorItemTitle">新闻图文组合1</div>
        </div>
        <div 
            class="sectorItemBox"
            @click="addModule('commentSector', 47, commentSector)"
            @drag="drag('commentSector', 47, commentSector)" 
            @dragend="dragend('commentSector', 47, commentSector)">
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" />
            </div>
            <div class="sectorItemTitle">新闻图文组合2</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('listSector', 98, listSector)"
            @drag="drag('listSector', 98, listSector)" 
            @dragend="dragend('listSector', 98, listSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" />
            </div>
            <div class="sectorItemTitle">新闻图文组合3</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('onlyImgSector', 51, onlyImgSector)"
            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg" />
            </div>
            <div class="sectorItemTitle">带广告新闻组合</div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        type: {

        },
    },
    data() {
        return {
            //模块1通栏广告模块 start---------------------------------------->
            adSector: {
                "sectorName": "adSector",//板块名称
                "componentList": [
                    {
                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
                        "component_style": 1,//组件选择了哪个版式
                        "sort": 1,
                        "componentData": {}
                    }
                ],
                "ad": {
                    "width": 1200, //宽度
                    "height": 90, //高度
                    "name": "",//广告名称
                    "price": 0,//价格
                    "introduce":"",//介绍
                    "website_id": "",//网站id
                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                    "typeid": 2,//广告类型 - 2 图片
                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                }
            },
            //添加通栏广告模块 start---------------------------------------->

            //添加头条广告模块 start---------------------------------------->
            headLineSector: {
                "sectorName": "headLineSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "level": 1,
                            "imgSize": 0,
                            "textSize": 4,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //添加头条广告模块 start---------------------------------------->

            //添加banner模块 start---------------------------------------->
            bannerSector: {
                "sectorName": "bannerSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "level": 2,
                            "imgSize": 5,
                            "textSize": 0,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 2,//排序位置
                        "componentData": {
                            "level": 6,
                            "imgSize": 0,
                            "textSize": 10,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //添加banner模块 end---------------------------------------->

            //两列新闻组合模块1 start---------------------------------------->
            manyPictureSector: {
                sectorName: "manyPictureSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 3,
                            "textSize": 9,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 3,
                            "textSize": 6,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块1 end---------------------------------------->

            //两列新闻组合模块2 end---------------------------------------->
            commentSector: {
                sectorName: "commentSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 2,
                            "textSize": 12,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 1,
                            "textSize": 3,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块2 end---------------------------------------->

            //两列新闻组合模块3 start---------------------------------------->
            listSector: {
                sectorName: "listSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 2,
                            "textSize": 12,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 1,
                            "textSize": 3,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 3,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 1,
                            "textSize": 3,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块3 end---------------------------------------->

            //带广告新闻组合 start---------------------------------------->
            onlyImgSector: {
                "sectorName": "onlyImgSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"请选择导航..",
                            "level":"",
                            "imgSize": 3,
                            "textSize": 4,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                ],
                "ad": {
                    "width": 450, //宽度
                    "height": 290, //高度
                    "name": "",//广告名称
                    "price": 0,//价格
                    "introduce":"",//介绍
                    "website_id": "",//网站id
                    "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
                    "typeid": 2,//广告类型 - 2 图片
                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                }
            }
            //带广告新闻组合 end---------------------------------------->
        }
    },
    methods: {
        //添加模块
        addModule(type, h, jsonData) {
            let data = {
                source: "click",//添加方式为点击
                type: type,
                h: h,
                jsonData: jsonData
            }
            console.log(data);
            this.$store.commit('template/addModule', data);
        },
        //拖拽开始
        drag(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/drag', data);
        },
        //拖拽结束
        dragend(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/dragend', data);
        }
    }
}
</script>

<style scoped lang="less">
.sectorBox {
    height: 100%;

    .sectorItemBox {
        box-sizing: border-box;
        padding: 0 20px 40px 20px;
        cursor: pointer;

        .sectorItem {
            border: 1px solid #333644;
            padding: 10px;
            border-radius: 8px;

            &:hover {
                background: #333644;
                transform: scale(1.1);
                transition: all 0.2s ease-in-out;
            }

            img {
                display: block;
                width: 100%;
            }
        }

        .sectorItemTitle {
            color: #fff;
            font-size: 14px;
            padding: 10px 0 0 0;
            text-align: center;
        }
    }
}
</style>