完成自助建站列表页开发

完成自助建站列表页开发

src/layout/components/template/pages/list/sector.vue

@@ -10,6 +10,16 @@
             </div>
             <div class="sectorItemTitle">通栏广告</div>
         </div>
+        <div class="sectorItemBox" 
+            @click="addModule('fixedListSector', 125, fixedListSector)" 
+            @drag="drag('fixedListSector', 125, fixedListSector)"
+            @dragend="dragend('fixedListSector', 125, fixedListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750646777377058.jpg" />
+            </div>
+            <div class="sectorItemTitle">通用型文章列表</div>
+        </div>
     </div>
 </template>
 
@@ -46,6 +56,101 @@ export default {
                     "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                 }
             },
+            fixedListSector: {
+                "sectorName": "fixedListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "pageType": {
+                                "page": 1,
+                                "pageSize": 20
+                            },
+                            "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":4,
+                            "imgSize": 2,
+                            "textSize": 4,
+                            "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":5,
+                            "imgSize": 0,
+                            "textSize": 8,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ],
+            },
             //添加通栏广告模块 start---------------------------------------->
         }
     },

src/views/template/page/pageList.vue

@@ -44,6 +44,10 @@
                         <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 == 'fixedListSector'" class="moduleBox">
+                            <fixedListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
                     </div>
                 </grid-item>
             </grid-layout>
@@ -68,6 +72,8 @@ import { GridLayout, GridItem } from "vue-grid-layout";
 import headSector from '../style/sector/head/1.vue';
 //一级菜单导肮
 import menuSector from '../style/sector/menu/1.vue';
+//列表页是固定的
+import fixedListSector from '../style/sector/body/list/list/1200x1220/1.vue';
 //底部
 import footerSector from '../style/sector/foot/1.vue';
 //通栏组件 开始：
@@ -82,6 +88,7 @@ export default {
         headSector,//全局页头
         menuSector,//全局导航
         adSector,//通栏广告
+        fixedListSector,//固定列表
         footerSector
     },
     data() {

src/views/template/public/componentWindow.vue

@@ -475,6 +475,123 @@
                 </div>
                 <!--13.滚动图文组合 end---------------------------------------->
 
+                <!--列表页-->
+                <!--14.主列表 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 14" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656483238477.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，每栏首行加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656506203472.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，首行不加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656513182035.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，每栏首行加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656521926251.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，首行不加粗</div>
+                        </div>
+                    </div>
+                </div>
+                <!--14.主列表 end---------------------------------------->
+
+                <!--15.最新资讯 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 15" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656919885412.jpg"/>
+                            <div class="componentScrollBoxItemTitle">上左图片，下方文字</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656926318156.jpg"/>
+                            <div class="componentScrollBoxItemTitle">上右图片，下方文字</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656931891270.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片下左，文字在上</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656939320570.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片下右，文字在上</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656945837770.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混排，文字在下1</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656959807266.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混排，文字在下2</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 7 ? 'active' : '']" @click="selectUseStyleNumber(7)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656945837770.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混排，文字在下3</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 8 ? 'active' : '']" @click="selectUseStyleNumber(8)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750656959807266.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混排，文字在下4</div>
+                        </div>
+                    </div>
+                </div>
+                <!--15.最新资讯 end---------------------------------------->
+
+                <!--15.热点精选 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 16" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750657338556788.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，前三条高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750657346490293.jpg"/>
+                            <div class="componentScrollBoxItemTitle">实线分割，全部高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750657350233891.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，前三条高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/175065735778737.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，全部高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750657367837755.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线分割，不显示数字</div>
+                        </div>
+                    </div>
+                </div>
+                <!--15.热点精选 end---------------------------------------->
             </div>
         </div>
         <div class="componentWindowBoxFooter">

src/views/template/style/components/list/270x450/1.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="newsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="newsContent">
+            <div class="newsContentImg">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750664164344132.jpg">
+                <div>外卖平台争相缴纳社保背后的偶然与必然</div>
+            </div>
+            <div class="newsContentImg">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750664218802686.jpg">
+                <div>德国举行新一届联邦议院（议会下院）选举</div>
+            </div>
+            <div class="newsContentText">食品企业掀起“配料表变革”</div>
+            <div class="newsContentText">国家医保局：药品追溯码归集于</div>
+            <div class="newsContentText">与多个行业接触沟通，汽车领域</div>
+            <div class="newsContentText">战备能力远未达标，或被列入备</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .newsBox {
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .newsContent {
+            .newsContentImg {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                font-size:18px;
+                img {
+                    display: block;
+                    margin-right: 10px;
+                }
+            }
+            .newsContentText {
+                font-size:18px;
+                color:#333333;
+                margin-bottom: 20px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/270x450/2.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="newsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="newsContent">
+            <div class="newsContentImg">
+                <div>外卖平台争相缴纳社保背后的偶然与必然</div>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750664164344132.jpg">
+            </div>
+            <div class="newsContentImg">
+                <div>德国举行新一届联邦议院（议会下院）选举</div>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750664218802686.jpg">
+            </div>
+            <div class="newsContentText">食品企业掀起“配料表变革”</div>
+            <div class="newsContentText">国家医保局：药品追溯码归集于</div>
+            <div class="newsContentText">与多个行业接触沟通，汽车领域</div>
+            <div class="newsContentText">战备能力远未达标，或被列入备</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .newsBox {
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .newsContent {
+            .newsContentImg {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                font-size:18px;
+                img {
+                    display: block;
+                    margin-right: 10px;
+                }
+            }
+            .newsContentText {
+                font-size:18px;
+                color:#333333;
+                margin-bottom: 20px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/270x580/1.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="hotNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="hotNewsContent">
+            <div><span>1</span>提前锁定女单冠军！乒乓球亚...</div>
+            <div><span>2</span>特朗普：与普京就结束俄乌冲...</div>
+            <div><span>3</span>退役≠报废 新能源车旧动力可...</div>
+            <div><span>4</span>欧洲多国领导人密集表态：俄...</div>
+            <div><span>5</span>加拿大承诺用俄罗斯被扣押资...</div>
+            <div><span>6</span>美对我海事、物流等领域拟议...</div>
+            <div><span>7</span>中国代表：中方支持一切致力...</div>
+            <div><span>8</span>中国峒中-越南横模口岸旅检...</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .hotNewsBox {
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .hotNewsContent {
+            font-size:18px;
+            color:#333333;
+            div {
+                padding-bottom:20px;
+                border-bottom:1px solid #E4E4E4;
+                margin-bottom: 22px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                span {
+                    margin-right: 15px;
+                    font-size:20px;
+                    font-weight:bold;
+                    font-style: italic;
+                }
+                &:nth-child(1) span,
+                &:nth-child(2) span,
+                &:nth-child(3) span {
+                    color: #004564;
+                }
+                &:nth-child(n+4) span {
+                    color: #D9D9D9;
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/270x580/2.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="hotNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="hotNewsContent">
+            <div><span>1</span>提前锁定女单冠军！乒乓球亚...</div>
+            <div><span>2</span>特朗普：与普京就结束俄乌冲...</div>
+            <div><span>3</span>退役≠报废 新能源车旧动力可...</div>
+            <div><span>4</span>欧洲多国领导人密集表态：俄...</div>
+            <div><span>5</span>加拿大承诺用俄罗斯被扣押资...</div>
+            <div><span>6</span>美对我海事、物流等领域拟议...</div>
+            <div><span>7</span>中国代表：中方支持一切致力...</div>
+            <div><span>8</span>中国峒中-越南横模口岸旅检...</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .hotNewsBox {
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .hotNewsContent {
+            font-size:18px;
+            color:#333333;
+            div {
+                padding-bottom:20px;
+                border-bottom:1px solid #E4E4E4;
+                margin-bottom: 22px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                span {
+                    margin-right: 15px;
+                    font-size:20px;
+                    font-weight:bold;
+                    font-style: italic;
+                    color: #004564;
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/900x1050/1.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="listNewsBox">
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        div{
+            height: 24px;
+            line-height: 24px;
+            color:#333333;
+            font-size:18px;
+            margin-bottom: 20px;
+            &:first-child {
+                font-weight: bold;
+            }
+            &:nth-child(5n) {
+                height: 54px;
+                padding-bottom:30px;
+                border-bottom: 1px solid #D9D9D9;
+            }
+            &:nth-child(5n+1) {
+                font-weight: bold;
+                margin-top: 30px;
+            }
+            span {
+                float: right;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/900x1050/2.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="listNewsBox">
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+        <div>美法官裁定特朗普政府暂时获准继续“大裁员”<span>02-21</span></div>
+        <div>湖南永州一大桥出现开裂质量问题？官方回应来了<span>02-20</span></div>
+        <div>严厉打击编造传播网络谣言！公安部公布5起典型案例<span>02-19</span></div>
+        <div>市场监管总局：2024年反垄断工作取得新进展、新成效<span>02-18</span></div>
+        <div>最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见<span>02-17</span></div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        div{
+            height: 24px;
+            line-height: 24px;
+            color:#333333;
+            font-size:18px;
+            margin-bottom: 20px;
+            &:first-child {
+            }
+            &:nth-child(5n) {
+                height: 54px;
+                padding-bottom:30px;
+                border-bottom: 1px solid #D9D9D9;
+            }
+            &:nth-child(5n+1) {
+                margin-top: 30px;
+            }
+            span {
+                float: right;
+            }
+        }
+    }
+</style>
+

src/views/template/style/sector/body/list/list/1200x1220/1.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="listBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="listRouterBox">
+                当前位置：首页 > 新闻资讯 > <span>热点话题</span>
+            </div>
+            <div class="listContentBox">
+                <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="14"/>
+                    <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+                        <list1Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 2">
+                        <list2Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="900" :dataHeight="1050" />
+                    </div>
+                </div>
+                <div class="listContentBoxRight">
+                    <div :class="['listContentBoxRightTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15"/>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+                            <news1style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[1].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 2">
+                            <news2style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[1].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style > 2">
+                            <atWork :dataStyle="2" :dataWidth="270" :dataHeight="440" />
+                        </div>
+                    </div>
+                    <div :class="['listContentBoxRightBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16"/>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 1">
+                            <hotNews1style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[2].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 2">
+                            <hotNews2style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[2].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style > 2">
+                            <atWork :dataStyle="2" :dataWidth="270" :dataHeight="580" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="paginationBox">
+                <div class="paginationBoxLeft">
+                    <el-pagination 
+                        size="small" 
+                        background 
+                        layout="prev, pager, next" 
+                        :total="100" 
+                        :page-size="1" 
+                        :current-page="1" 
+                        prev-text="上一页" 
+                        next-text="下一页"
+                     />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//720x440 
+import list1Style from '../../../../../../style/components/list/900x1050/1.vue'
+import list2Style from '../../../../../../style/components/list/900x1050/2.vue'
+//270x450
+import news1style from '../../../../../../style/components/list/270x450/1.vue'
+import news2style from '../../../../../../style/components/list/270x450/2.vue'
+//270x580
+import hotNews1style from '../../../../../../style/components/list/270x580/1.vue'
+import hotNews2style from '../../../../../../style/components/list/270x580/2.vue'
+
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        list1Style,
+        list2Style,
+        news1style,
+        news2style,
+        hotNews1style,
+        hotNews2style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border: 2px dashed #999;
+    border-left: none;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listBigBox{
+    width: 100%;
+    height: 1220px;
+    .listBox{
+        width: 1200px;
+        height: 1220px;
+        margin: 0 auto;
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 17px;
+            .listContentBoxLeft {
+                width: 900px;
+                height: 1050px;
+                position: relative;
+            }
+            .listContentBoxRight {
+                width: 270px;
+                height: 1050px;
+                .listContentBoxRightTop {
+                    width: 270px;
+                    height: 440px;
+                    margin-bottom: 30px;
+                    position: relative;
+                }
+                .listContentBoxRightBottom {
+                    width: 270px;
+                    height: 580px;
+                    position: relative;
+                }
+            }
+        }
+        .paginationBox {
+            height: 100px;
+            .paginationBoxLeft {
+                width: 900px;
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+}
+.paginationBoxLeft {
+    width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #004564;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+        background-color: #F6F6F6;
+        border: #EAEAEA 1px solid;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+        line-height: 34px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #004564;
+        color: #fff;
+    }
+}
+</style>
+