admin-2025-12-26-skin7

src/layout/components/template/pages/about/sectorArticle.vue

@@ -61,6 +61,25 @@
             </div>
             <div class="sectorItemTitle">通用型单页详情</div>
         </div> -->
+
+        
+        <!-- 皮肤7 -->
+        <div class="sectorItemBox" 
+            v-if="this.$store.state.template.sectorList.aboutDetailSector"
+            @click="addModule('aboutDetailSector', 128, aboutDetailSector)" 
+            @drag="drag('aboutDetailSector', 128, aboutDetailSector)"
+            @dragend="dragend('aboutDetailSector', 128, aboutDetailSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.aboutDetailSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.aboutDetailSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.aboutDetailSector.sectorName}}</div>
+        </div>
+
+
+
     </div>
 </template>
 
@@ -160,6 +179,39 @@ export default {
                 ],
             },
             //皮肤6 通用单页详情模块 end---------------------------------------->
+
+            
+            //皮肤7-通用单页详情模块 start---------------------------------------->
+            aboutDetailSector: {
+                "sectorName": "aboutDetailSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 1, 
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"    
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+
+
         }
     },
     methods: {

src/layout/components/template/pages/about/sectorList.vue

@@ -62,6 +62,24 @@
             </div>
             <div class="sectorItemTitle">通用型单页列表</div>
         </div> -->
+
+
+        
+        <!-- 皮肤7 -->
+        <div class="sectorItemBox" 
+            v-if="this.$store.state.template.sectorList.pageListSector"
+            @click="addModule('pageListSector', 174, pageListSector)" 
+            @drag="drag('pageListSector', 174, pageListSector)"
+            @dragend="dragend('pageListSector', 174, pageListSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.pageListSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.pageListSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.pageListSector.sectorName}}</div>
+        </div>
+
     </div>
 </template>
 
@@ -161,6 +179,40 @@ export default {
                 ],
             },
             //皮肤6单页列表模块 end---------------------------------------->
+
+            
+            // 皮肤7 单页列表通栏
+            pageListSector: {
+                "sectorName": "pageListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 7,
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"
+                            ]
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+
+
+
         }
     },
     methods: {

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

@@ -52,6 +52,29 @@
             </div>
             <div class="sectorItemTitle">通用型文章详情</div>
         </div> -->
+
+        
+        <!-- 皮肤7 -->
+        <div 
+            v-if="this.$store.state.template.sectorList.detailPageSector"
+            class="sectorItemBox" 
+            @click="addModule('detailPageSector', 170, detailPageSector)"
+            @drag="drag('detailPageSector', 170, detailPageSector)" 
+            @dragend="dragend('detailPageSector', 170, detailPageSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.detailPageSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.detailPageSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.detailPageSector.sectorName}}</div>
+        </div>
+
+
+
+
+
+
     </div>
 </template>
 
@@ -212,6 +235,132 @@ export default {
                 ]
             },
             //模块2通用型文章详情模块 end---------------------------------------->
+
+            
+            //皮肤7模块2通用型文章详情模块 start----------------------------------------皮肤7详情页>
+            detailPageSector: {
+                "sectorName": "detailPageSector",
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "article_id":"",
+                            "listType": [
+                                "id",
+                                "catid",
+                                "title",
+                                "introduce",
+                                "tag",
+                                "keyword",
+                                "author",
+                                "copyfrom",
+                                "fromurl",
+                                "hits",
+                                "ip",
+                                "status",
+                                "islink",
+                                "linkurl",
+                                "imgurl",
+                                "admin_user_id",
+                                "cat_arr_id",
+                                "created_at",
+                                "updated_at",
+                                "is_original",
+                                "survey_id",
+                                "survey_name",
+                                "is_survey",
+                                "survey_type",
+                                "web_site_id",
+                                "ignore_ids",
+                                "reason",
+                                "department_arr_id",
+                                "department_id",
+                                "city_arr_id",
+                                "city_id",
+                                "level",
+                                "commend_id",
+                                "level_text",
+                                "article_id",
+                                "content",
+                                "category_id",
+                                "cat_name",
+                                "website_name",
+                                "suffix",
+                                "commendArticle"
+                            ],
+                        }
+                    },
+                    {
+                        "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"
+                            ],
+                        }
+                    }
+                ]
+            },
+
+
+
         }
     },
     methods: {

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

@@ -275,6 +275,77 @@
             </div>
             <div class="sectorItemTitle">新闻图文组合3</div>
         </div> -->
+
+
+
+        <!-- 频道页-皮肤7-通栏版式-带选项卡图文组合 newsTextTabsImgSector-->
+        <div 
+            v-if="this.$store.state.template.sectorList.newsTextTabsImgSector"
+            class="sectorItemBox" 
+            @click="addModule('newsTextTabsImgSector', 118, newsTextTabsImgSector)"
+            @drag="drag('newsTextTabsImgSector', 118, newsTextTabsImgSector)" 
+            @dragend="dragend('newsTextTabsImgSector', 118, newsTextTabsImgSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTextTabsImgSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.newsTextTabsImgSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsTextTabsImgSector.sectorName}}</div>
+        </div>
+
+
+        <!-- 14 皮肤7-----热点关注 -->
+        <div 
+            v-if="this.$store.state.template.sectorList.skinSevenNewsHyjjSector"
+            class="sectorItemBox" 
+            @click="addModule('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)"
+            @drag="drag('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)" 
+            @dragend="dragend('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorName}}</div>
+
+        </div>
+
+
+        <div 
+            v-if="this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector"
+            class="sectorItemBox" 
+            @click="addModule('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)"
+            @drag="drag('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)" 
+            @dragend="dragend('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorName}}</div>
+        </div>
+
+        <div 
+        
+            v-if="this.$store.state.template.sectorList.channelNavigationSector"
+            class="sectorItemBox" 
+            @click="addModule('channelNavigationSector', 13, channelNavigationSector)"
+            @drag="drag('channelNavigationSector', 13, channelNavigationSector)" 
+            @dragend="dragend('channelNavigationSector', 13, channelNavigationSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelNavigationSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.channelNavigationSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelNavigationSector.sectorName}}</div>
+        </div>
+        
+
+
     </div>
 </template>
 
@@ -1127,6 +1198,342 @@ export default {
                 ]
             },
             //模块13 皮肤6不带标题图文组合2 end---------------------------------------->
+
+            
+            //选项卡-新闻图文组合4-皮肤7 start-   行业聚焦--------------------------------------->
+            newsTextTabsImgSector: {
+                "sectorName": "newsTextTabsImgSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 4,//组件类型 
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": [
+                            {
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "自动生成",
+                                "level": "",
+                                "imgSize": 0,
+                                "textSize": 5,
+                                "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": 0,
+                                "textSize": 5,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            },
+                         ]
+                    },
+                    {//选项卡-皮肤7
+
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": [
+                            {
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "自动生成",
+                                "level": "",
+                                "imgSize": 3,
+                                "textSize": 10,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            },
+                            {
+
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "自动生成",
+                                "level": "",
+                                "imgSize": 3,
+                                "textSize": 10,
+                                "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": 4,
+                        "componentData": [
+                            {
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "自动生成",
+                                "level": "",
+                                "imgSize": 4,
+                                "textSize": 8,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            },
+                             
+                        ]
+                    },
+                ]
+            },
+            
+            // 皮肤7-热点关注
+            skinSevenNewsHyjjSector: {
+
+                "sectorName": "skinSevenNewsHyjjSector",//板块名称
+                "componentList": [
+                    {
+
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "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"
+                            ],
+                        },
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "自动生成",
+                            "level": "",
+                            "imgSize": 3,
+                            "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": 10,
+                            "textSize": 10,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        },
+                    },
+                
+                ],
+            },
+            
+            //新banner模块 皮肤7 轮播图 start---------------------------------------->
+            scrollTextImgSevenSkinchannelSector: {
+
+                "sectorName": "scrollTextImgSevenSkinchannelSector",//板块名称
+                 "componentList": [
+                    {
+
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "name": "自动选择",
+                            "level": 2,
+                            "imgSize": 6,
+                            "textSize": 9,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                     
+                ]
+            },
+                          
+            //皮肤7模块1频道菜单 start----------------------------------------channelMenu>
+            channelNavigationSector: {
+                "sectorName": "channelNavigationSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,// 子导航菜单
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+            },     
         }
     },
     methods: {

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

@@ -425,9 +425,77 @@
         
         <!-- 皮肤7-通栏版式-带选项卡图文组合 -->
 
+        <!-- 皮肤7-行业聚焦 -->
+        <div 
+            v-if="this.$store.state.template.sectorList.skinSevenNewsHyjjSector"
+            class="sectorItemBox" 
+            @click="addModule('skinSevenNewsHyjjSector', 75, skinSevenNewsHyjjSector)"
+            @drag="drag('skinSevenNewsHyjjSector', 75, skinSevenNewsHyjjSector)" 
+            @dragend="dragend('skinSevenNewsHyjjSector', 75, skinSevenNewsHyjjSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false, '')">
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg" />
+            </div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorName }}</div>
+        </div>
+        <!-- 皮肤7-行业聚焦 -->
+
+
+        <!-- 皮肤7-1200-选项卡 -->
+        <div 
+            v-if="this.$store.state.template.sectorList.mixTabSector"
+            class="sectorItemBox" 
+            @click="addModule('mixTabSector', 46, mixTabSector)"
+            @drag="drag('mixTabSector', 46, mixTabSector)" 
+            @dragend="dragend('mixTabSector', 46, mixTabSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.mixTabSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false, '')">
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.mixTabSector.sectorImg" />
+            </div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.mixTabSector.sectorName }}</div>
+        </div>
+        <!-- 皮肤7-1200-选项卡 -->
+         
 
 
 
+        <!-- 首页轮播图新版式 皮肤7-->
+        <div 
+            v-if="this.$store.state.template.sectorList.bigBannerSectorMerge"
+            class="sectorItemBox" 
+            @click="addModule('bigBannerSectorMerge', 51, bigBannerSectorMerge)"
+            @drag="drag('bigBannerSectorMerge', 51, bigBannerSectorMerge)" 
+            @dragend="dragend('bigBannerSectorMerge', 51, bigBannerSectorMerge)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.bigBannerSectorMerge.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.bigBannerSectorMerge.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.bigBannerSectorMerge.sectorName}}</div>
+        </div>
+        
+
+
+        
+        <!-- 首页-14 皮肤7-外连面板-带查询服务-组件1 -->
+        <div 
+            v-if="this.$store.state.template.sectorList.biglinkCxfwSector"
+            class="sectorItemBox" 
+            @click="addModule('biglinkCxfwSector', 36, biglinkCxfwSector)"
+            @drag="drag('biglinkCxfwSector', 36, biglinkCxfwSector)" 
+            @dragend="dragend('biglinkCxfwSector', 36, biglinkCxfwSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.biglinkCxfwSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.biglinkCxfwSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.biglinkCxfwSector.sectorName}}</div>
+        </div>
+
     </div>
 </template>
 
@@ -2002,6 +2070,269 @@ export default {
                 ]
             },
 
+            
+            // 皮肤7-行业聚焦
+            skinSevenNewsHyjjSector: {
+                "sectorName": "skinSevenNewsHyjjSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "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"
+                            ],
+                        },
+                    },
+                    {
+
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "请选择导航..",
+                            "level": "",
+                            "imgSize": 3,
+                            "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": 10,
+                            "textSize": 10,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        },
+                    },
+                
+                ],
+            },
+            // 皮肤7-行业聚焦
+
+            
+            //选项卡-1200-皮肤7 start---------------------------------------->
+            mixTabSector: {
+
+
+                "sectorName": "mixTabSector",//板块名称
+                "componentList": [ {//选项卡-皮肤7
+                        "component_type": 4,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": [
+                            {
+
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "请选择导航..",
+                                "level": "",
+                                "imgSize": 4,
+                                "textSize": 12,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            },
+                            {
+
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "请选择导航..",
+                                "level": "",
+                                "imgSize": 4,
+                                "textSize": 12,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            }
+                        ]
+                    },
+                ]
+            },
+
+            
+            //新banner模块 皮肤7 轮播图 start---------------------------------------->
+            bigBannerSectorMerge: {
+
+                "sectorName": "bigBannerSectorMerge",//板块名称
+                "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"
+                            ],
+                        }
+                    }
+                ]
+            },
+
+            //外链面板 start-皮肤7-外连面板-带查询服务-组件1皮肤7-外连面板-带查询服务-组件1--------------------------------------->
+            biglinkCxfwSector: {
+                "sectorName": "biglinkCxfwSector",
+                "componentList": [
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ]
+            },
+            //外链面板 end---------------------------------------->
+
 
         }
     },

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

@@ -102,6 +102,42 @@
             </div>
             <div class="sectorItemTitle">通用型文章列表</div>
         </div> -->
+
+
+        
+        <!-- 皮肤7 -->
+             
+        <div class="sectorItemBox" 
+            v-if="this.$store.state.template.sectorList.bigListaPageSector"
+            @click="addModule('bigListaPageSector', 164, bigListaPageSector)" 
+            @drag="drag('bigListaPageSector', 164, bigListaPageSector)"
+            @dragend="dragend('bigListaPageSector', 164, bigListaPageSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.bigListaPageSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.bigListaPageSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.bigListaPageSector.sectorName}}</div>
+        </div>
+
+        <!-- 皮肤7模块1频道菜单 -->
+        
+        <div 
+            v-if="this.$store.state.template.sectorList.channelNavigationSector"
+            class="sectorItemBox" 
+            @click="addModule('channelNavigationSector', 13, channelNavigationSector)"
+            @drag="drag('channelNavigationSector', 13, channelNavigationSector)" 
+            @dragend="dragend('channelNavigationSector', 13, channelNavigationSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelNavigationSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.channelNavigationSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelNavigationSector.sectorName}}</div>
+        </div>
+
     </div>
 </template>
 
@@ -446,6 +482,119 @@ export default {
                     }
                 ],
             },
+
+
+            // 固定列表模块 start-皮肤7----------------------------------------fixedListSector>
+            bigListaPageSector: {
+                "sectorName": "bigListaPageSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "pageType": {
+                                "page": 1,
+                                "pageSize": 10
+                            },
+                            "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"
+                            ],
+                        }
+                    }
+                ],
+            },
+
+            //皮肤7==模块1频道菜单 start----------------------------------------channelMenu>
+            channelNavigationSector: {
+                "sectorName": "channelNavigationSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,// 子导航菜单
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+            },    
+
+
             // 新固定列表模块 end---------------------------------------->
         }
     },

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

@@ -79,6 +79,25 @@
             </div>
             <div class="sectorItemTitle">通用型搜索列表</div>
         </div> -->
+
+        
+        <!-- 皮肤7 -->
+        <div 
+            class="sectorItemBox" 
+            v-if="this.$store.state.template.sectorList.SevenSearchbigListscSector"
+            @click="addModule('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)" 
+            @drag="drag('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)"
+            @dragend="dragend('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)"
+            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.SevenSearchbigListscSector.sectorImg)"
+            @mouseleave="componentPreviewStatus(false,'')"
+        >
+            <div class="sectorItem">
+                <img :src="this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorImg"/>
+            </div>
+            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorName}}</div>
+        </div>
+
+
     </div>
 </template>
 
@@ -170,6 +189,27 @@ export default {
                 ],
             },
             //皮肤6搜索列表模块 end---------------------------------------->
+
+            
+            //皮肤7搜索列表模块 start---------------------------------------->
+            SevenSearchbigListscSector: {
+                "sectorName": "SevenSearchbigListscSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,//组件类型 
+                        "component_style": 1,
+                        "sort": 1,
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                    }
+                ],
+            },
+
+
+
         }
     },
     methods: {

src/views/template/page/pageAboutArticle.vue

@@ -55,6 +55,13 @@
                         <div v-if="item.type == 'aboutArticleupdownSector'" class="moduleBox">
                             <aboutArticleupdownSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+
+
+                        <!-- 皮肤7 -->
+                        <div v-if="item.type == 'aboutDetailSector'" class="moduleBox">
+                            <aboutDetailSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -93,6 +100,10 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+
+// 皮肤7
+import aboutDetailSector from '../style/sector/body/about/1200x1249/7/1.vue';
+
 export default {
     components: {
         GridLayout,//画布
@@ -106,6 +117,8 @@ export default {
         aboutArticleupdownSector,//固定列表
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚Style5
+
+        aboutDetailSector,//皮肤7
     },
     data() {
         return {

src/views/template/page/pageAboutList.vue

@@ -55,6 +55,14 @@
                         <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>
@@ -87,6 +95,13 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+
+// 皮肤7-单页列表通栏
+// import aboutListSector from '../style/sector/body/about/1200x1290/1.vue';
+import pageListSector from '../style/sector/body/about/1200x1710/7/1.vue';
+
+
+
 export default {
     components: {
         GridLayout,
@@ -99,7 +114,8 @@ export default {
         aboutListSector,
         ListupdownSector,
         footerSector,
-        footerSectorStyle5
+        footerSectorStyle5,
+        pageListSector, //皮肤7-单页列表通栏
     },
     data() {
         return {

src/views/template/page/pageArticle.vue

@@ -49,6 +49,13 @@
                         <div v-if="item.type == 'articleSector'" class="moduleBox">
                             <articleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+
+                        <!-- detailPageSector皮肤7 -->
+                        <div v-if="item.type == 'detailPageSector'" class="moduleBox">
+                            <detailPageSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -84,6 +91,11 @@ import adSector from '../style/sector/body/ad/1200x90/1.vue';
 import articleSector from '../style/sector/body/article/article/1200x1710/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+
+// 皮肤7详情页
+import detailPageSector from '../style/sector/body/article/article/1200x1667/7/1.vue';
+
+
 export default {
     components: {
         GridLayout,//画布
@@ -96,6 +108,8 @@ export default {
         articleSector,//通用型文章详情
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚Style5
+
+        detailPageSector,//皮肤7
     },
     data() {
         return {

src/views/template/page/pageClass.vue

@@ -105,6 +105,31 @@
                         <div v-if="item.type == 'ChannelNewsAndPhoto'" class="moduleBox">
                             <ChannelNewsAndPhoto :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+
+                        
+                        <!-- 皮肤7-新闻图文组合4-通栏版式-带选项卡图文组合 -->
+                        <div v-if="item.type == 'newsTextTabsImgSector'" class="moduleBox">
+                            <newsTextTabsImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+                        
+                        <!-- 12 皮肤7- 热点关注 -->
+                        <div v-if="item.type == 'skinSevenNewsHyjjSector'" class="moduleBox">
+                            <skinSevenNewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+                        <!-- 14.滚动图文组合--皮肤7 -->
+                        <div v-if="item.type == 'scrollTextImgSevenSkinchannelSector'" class="moduleBox">
+                            <scrollTextImgSevenSkinchannelSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+                        
+                        <!-- 15.子导航菜单 --皮肤7 channelMenu-->
+                        <div v-if="item.type == 'channelNavigationSector'" class="moduleBox">
+                            <channelNavigationSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -166,6 +191,24 @@ import ChannelNewsPhoto from '../style/sector/body/index/list/1200x400/6.vue';
 // 皮肤6 不带标题图文组合2
 import ChannelNewsAndPhoto from '../style/sector/body/index/list/1200x480/6_2.vue';
 
+
+
+//新闻图文组合4-皮肤7-带选项卡图文组合 行业聚焦
+// import newsTextTabsImgSector from '../style/sector/body/index/list/1200x480/6_2.vue';
+import newsTextTabsImgSector from '../style/sector/body/index/list/1200x1150/7/2.vue';
+
+//14 皮肤7-------------------------------------------------------------热点关注>
+import skinSevenNewsHyjjSector from '../style/sector/body/index/list/1200x720/7/2.vue';
+
+
+//   皮肤7-合并为一个组件的焦点图通栏  轮播图
+import scrollTextImgSevenSkinchannelSector from '../style/sector/body/index/banner/1200x480/7/3.vue';
+
+
+//频道菜单-子导航菜单皮肤7channelMenu
+import channelNavigationSector from '../style/sector/body/class/menu/1200x100/1.vue';
+
+
 //2.引入自助建站组件 end------------------------------------------------------------>
 
 export default {
@@ -193,6 +236,10 @@ export default {
         ChannelNewsPhoto,// 皮肤6 带标题图文组合2
         ChannelNewsAndPhoto,// 皮肤6 不带标题图文组合2
         
+        newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合   行业聚焦
+        skinSevenNewsHyjjSector,//14 皮肤7-----热点关注>
+        scrollTextImgSevenSkinchannelSector,//14 皮肤7-合并为一个组件的焦点图通栏  轮播图
+        channelNavigationSector,//14 皮肤7-合并为一个组件的频道菜单-子导航菜单
     },
     data() {
         return {

src/views/template/page/pageIndex.vue

@@ -4,12 +4,12 @@
         <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> 
         <!-- 全局组件：导航 -->
         <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> 
         <!-- 固定背景图 -->
         <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="">
@@ -142,14 +142,32 @@
                         </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>
@@ -229,6 +247,20 @@ import photoTabsSector from '../style/sector/body/index/list/1200x430/6_1.vue';
  
 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 {
@@ -264,8 +296,10 @@ export default {
         footerSectorStyle5,//全局页尾皮肤5
 
         newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
-
-
+        skinSevenNewsHyjjSector,//皮肤7-行业聚焦
+        mixTabSector,//皮肤7-1200-选项卡
+        bigBannerSectorMerge,//合并为一个组件的焦点图通栏  轮播图 皮肤7
+        biglinkCxfwSector,//皮肤7-外连面板-带查询服务-组件1
     },
     data() {
         return {

src/views/template/page/pageList.vue

@@ -66,6 +66,17 @@
                         <div v-if="item.type == 'ListbigSector'" class="moduleBox">
                             <ListbigSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+                        
+                        <!-- 皮肤7  -->
+                        <div v-if="item.type == 'bigListaPageSector'" class="moduleBox">
+                            <bigListaPageSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+ 
+                        <!-- 皮肤7  -->
+                        <div v-if="item.type == 'channelNavigationSector'" class="moduleBox">
+                            <channelNavigationSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -110,6 +121,17 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+
+
+// 皮肤7列表页专用列表组件-900x1400
+import bigListaPageSector from '../style/sector/body/list/list/7/1200x1610/1.vue';
+
+//频道菜单-子导航菜单皮肤7channelMenu
+import channelNavigationSector from '../style/sector/body/class/menu/1200x100/1.vue';
+
+
+
+
 export default {
     components: {
         GridLayout,//画布
@@ -124,7 +146,11 @@ export default {
         newsListSector,//新固定列表模块
         ListbigSector,//皮肤6 固定列表
         footerSector,
-        footerSectorStyle5//全局页脚5
+        footerSectorStyle5,//全局页脚5
+
+        channelNavigationSector,//皮肤7模块1频道菜单
+        bigListaPageSector,//皮肤7列表页专用列表组件-900x1400
+
     },
     data() {
         return {

src/views/template/page/pageSearch.vue

@@ -62,6 +62,12 @@
                         <div v-if="item.type == 'SearchbigListSector'" class="moduleBox">
                             <SearchbigListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+                        
+                        <!-- 4.固定列表7 皮肤7-->
+                        <div v-if="item.type == 'SevenSearchbigListscSector'" class="moduleBox">
+                            <SevenSearchbigListscSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -103,6 +109,12 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+
+//皮肤7列表页是固定的
+import SevenSearchbigListscSector from '../style/sector/body/search/list/1200x1720/7/1.vue';
+
+
+
 export default {
     components: {
         GridLayout,//画布
@@ -117,6 +129,8 @@ export default {
         SearchbigListSector,//皮肤6搜索列表模块
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚5
+
+        SevenSearchbigListscSector,//皮肤7搜索列表模块
     },
     data() {
         return {

src/views/template/style/components/article/900x1587/7/1.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="articleBox">
+        <div class="articleTitle">七部门印发意见促进创业带动就业落实税收优惠和一次性创业补贴政策</div>
+        <div class="articleInfo">
+            <div>来源：新华网</div>
+            <div>作者：李鑫</div>
+            <div>时间：2024-10-10</div>
+        </div>
+        <div class="articleContent">
+            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766049554550202.jpg">
+            <div class="fontBold">“逆周期调节”是什么？</div>
+            <div>这次发布会将重点聚焦“财政政策逆周期调节力度”，那什么是逆周期调节？</div>
+            <div>逆周期调节是指政府根据经济周期阶段，通过政策工具和措施让整个经济周期的波动性平缓‌，更好促进经济发展。财政政策就是其中的重要一类。</div>
+            <div>当前，我国经济的基本面及市场广阔、经济韧性强、潜力大等有利条件并未改变。同时，经济运行出现一些新的情况和问题。为了更好促进经济发展，近年来，我国坚持实施积极的财政政策，通过增加财政支出、实施减税降费等方式，实现政府投资的扩大和消费潜能的释放，促进了经济增长、增加就业和扩大内需等。</div>
+            <div>专家认为，财政政策逆周期调节对于稳定经济增长、促进就业、控制通胀和稳定金融市场具有重要意义。随着国民经济发展不断变化，相应的，财政政策也会根据经济形势的变化来灵活调整，这样才能更好实现经济的平稳发展。</div>
+            <div class="fontBold">积极财政政策持续加力 推动经济高质量发展</div>
+            <div>今年，我国继续实施积极的财政政策，通过组合运用多种政策工具，促进经济持续回升向好。那么，财政政策工具箱里都有哪些“宝贝”  国家的钱袋子又投向了哪些领域呢？</div>
+            <div class="fontBold">政策亮点——超长期特别国债</div>
+            <div>说到财政政策工具箱，今年最大的亮点要数超长期特别国债。10000亿元超长期特别国债，专项用于“两重”，也就是国家重大战略实施和重点领域安全能力建设。截至7月底，超长期特别国债已累计发行4180亿元。</div>
+            <div>不仅如此，为了更好支持大规模设备更新和消费品以旧换新行动，万亿超长期特别国债中有约3000亿元加力支持重点领域设备更新，进一步提升地方消费品以旧换新的能力。</div>
+        </div>
+            <div class="statementBox">
+                <div class="statementBoxLeft">
+                    <div>原文链接：http://nmyj.xlgl.gov.cn/xzxk/zsyz/202112/t20211201_2771045.html</div>
+                    <div>[免责声明] 本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其它问题，请在30日内与本网联系，我们将在第一时间处理。</div>
+                </div>
+            </div>
+
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .articleBox {
+        width: 900px;
+        margin: 0 auto;
+        .articleTitle {
+            font-size:30px;
+            color:#333333;
+            font-weight:bold;
+        }
+        .articleInfo {
+            color:#999999;
+            font-size:14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 30px;
+            div{
+                margin-right: 40px;
+            }
+        }
+        .articleContent {
+            padding-top:60px;
+            font-size:20px;
+            img{
+                display: block;
+                margin: 0 auto;
+                margin-bottom: 60px;
+            }
+            .fontBold {
+                font-weight:bold;
+            }
+            div {
+                text-indent: 2em;
+                margin-bottom: 28px;
+            }
+        }
+    }  
+
+
+        .statementBox {
+            height: 143px;
+            border-top: 1px solid #D9D9D9;
+            .statementBoxLeft {
+                width: 900px;
+                height: 143px;
+                padding-top: 40px;
+                text-align: left;
+                box-sizing: border-box;
+                font-size:20px;
+                color:#999999;
+            }
+        }
+
+
+</style>
+

src/views/template/style/components/banner/list/450x480/7/6.vue

@@ -0,0 +1,409 @@
+<template>
+    <div>
+        
+        <!-- 样式1 -->
+        <div class="BannerListBox BannerListBoxStyle4"
+
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+            <div class="listNewsTitle">
+                 <span class=" ">{{ this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name }}</span>
+            </div>
+
+            <p class="listNewsText_img_li" v-for="(per_obj,per_index) in pageData.slice(0,1)">
+
+                <span class="listNewsText_li_img_box">
+                     
+                    <img :src="per_obj.src">
+
+                </span>
+                 
+                <span class="listNewsText_li_img_dot4">{{ per_obj.title }}</span>
+
+            </p>
+
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(1,7)">
+                <span class="text">{{ per_obj.title }}</span>
+                <span class="time">{{ per_obj.time }}</span>
+            </div> 
+
+        </div>
+        <!-- 样式2 -->
+        <div class="BannerListBox BannerListBoxStyle2"
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+            <div class="listNewsTitle">
+                <span class=" ">{{ this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name }}</span>
+            </div>
+
+            <p class="listNewsText_img_li" v-for="(per_obj,per_index) in pageData.slice(0,1)">
+
+                <span class="listNewsText_li_img_box">
+                     
+                    <img :src="per_obj.src">
+
+                </span>
+                 
+                <span class="listNewsText_li_img_dot4">{{ per_obj.title }}</span>
+
+            </p>
+
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(1,7)">
+                <span class="text">{{ per_obj.title }}</span>
+                <span class="time">{{ per_obj.time }}</span>
+            </div> 
+
+        </div>
+        <!-- 样式2 -->
+        <div class="BannerListBox BannerListBoxStyle1"
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 3">
+
+            <div class="listNewsTitle">
+                <span class=" ">{{ this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name }}</span>
+            </div>
+
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,9)">
+                <span class="text">{{ per_obj.title }}</span>
+                <span class="time">{{ per_obj.time }}</span>
+            </div> 
+             
+            
+        </div>
+        <!-- 样式4 -->
+        <div class="BannerListBox BannerListBoxStyle3"
+        
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 4">
+            <div class="listNewsTitle">
+                <span class=" ">{{ this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name }}</span>
+            </div>
+
+            
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,9)">
+                <span class="text">{{ per_obj.title }}</span>
+                <span class="time">{{ per_obj.time }}</span>
+            </div> 
+        </div>
+  
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            pageData:[
+                    {year:"2022-03",day:"03",title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766478289365709.jpg"},
+                    {year:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg"},
+                    {year:"2021-02",day:"02",title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg"},
+                    {year:"2019-10",day:"10",title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479633372863.jpg"},
+                    {year:"2020-01",day:"01",title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg"},
+                    {year:"2023-04",day:"04",title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479649422031.jpg"}, 
+                    {year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766535795899808.jpg"},
+                    {year:"2016-07",day:"07",title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766540810697850.jpg"},
+                    {year:"2017-08",day:"08",title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例",src:""},
+                    {year:"2018-09",day:"09",title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。",src:""},
+                    {year:"2012-11",day:"02",title:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",time:"2025-02-18",text:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",src:""},
+                    {year:"2011-10",day:"22",title:"国家互联网信息办公 室关于《个人信息出 境个人信息保护认证 办法》",time:"2025-03-18",text:"国家互联网信息办公 室关于《个人信息出 境个人信息保护认证 办法》写的百科全书Grokipedia",src:""},
+            
+                ],        
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.BannerListBox {
+    div {
+        cursor: pointer;
+        font-size: 18px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height: 24px;
+        line-height: 24px;
+        margin-bottom: 24px;
+ 
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .listNewsTitle {
+        font-size: 22px;
+        font-weight: bold;
+        height: 47px;
+        line-height: 47px;
+
+        border-top: 2px solid #A72213;
+        border-bottom: 1px solid #DCDDDF;
+        color: #A72213;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+
+        span {
+            display: inline-block;
+             
+            color: #A72213;
+            height: 47px;
+            line-height: 47px;
+            // border-bottom: 6px solid #3848a0;
+            font-weight: bold;
+             
+            /* 可选：为了避免内容紧贴边框，添加内边距 */
+             
+        }
+    }
+
+    .listNewsText {
+        position: relative;
+
+        .text {
+            display:block;
+            width:100%;padding-right:13px;
+            overflow: hidden;box-sizing:border-box;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            height: 24px;text-indent:16px;
+            line-height: 24px;
+        }
+
+        .time {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: inline-block;
+            width: 51px;
+            color: #999999;
+            display:none;
+        }
+    }
+}
+
+//样式1
+.BannerListBoxStyle1 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+
+//样式2
+.BannerListBoxStyle2 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+
+    .listNewsText_img_li{
+        width:100%;display:flex;height:130px;margin:0px 0px 21px 0px;
+
+     }
+    .listNewsText_li_img_box{margin-right:20px;height:100%;width:185px;height:130px;}
+    .listNewsText_li_img_box img{display:block;width:100%;height:100%;}
+    .listNewsText_li_img_dot4{
+        display:block;flex:1;
+        width:100%;color:#333;font-size:18px;
+        overflow: hidden;margin-top:17px;
+        height: 96px; box-sizing:border-box;padding-right:13px;
+        line-height: 24px;
+        overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4; 
+           word-wrap: break-word;
+            overflow-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+            
+    }
+
+
+
+}
+//样式2
+.BannerListBoxStyle3 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+ 
+
+
+
+}
+
+//样式2
+.BannerListBoxStyle4 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+
+    .listNewsText_img_li{
+        width:100%;display:flex;height:130px;margin:0px 0px 21px 0px;
+
+     }
+    .listNewsText_li_img_box{margin-right:20px;height:100%;width:185px;height:130px;}
+    .listNewsText_li_img_box img{display:block;width:100%;height:100%;}
+    .listNewsText_li_img_dot4{
+        display:block;flex:1;
+        width:100%;color:#333;font-size:18px;
+        overflow: hidden;margin-top:17px;
+        height: 96px; box-sizing:border-box;padding-right:13px;
+        line-height: 24px;
+        overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4; 
+           word-wrap: break-word;
+            overflow-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+            
+    }
+
+
+
+}
+
+
+
+
+
+
+
+
+//样式5
+.BannerListBoxStyle5 {
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #3848a0;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+
+//样式6
+.BannerListBoxStyle6 {
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #3848a0;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+//样式7
+.BannerListBoxStyle7 {
+    .listNewsTitle{
+        border-bottom: 1px dashed #999999;
+    }
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+
+//样式8
+.BannerListBoxStyle8 {
+    .listNewsTitle{
+        border-bottom: 1px dashed #999999;
+    }
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+//样式9
+.BannerListBoxStyle9{
+    .listNewsTitle{
+        border-bottom: 1px dashed #999999;
+    }
+}
+
+//样式10
+.BannerListBoxStyle10{
+    .listNewsTitle{
+        border-bottom: 1px dashed #999999;
+    }
+}
+
+//样式11
+.BannerListBoxStyle11 {
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #3848a0;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+
+//样式12
+.BannerListBoxStyle12 {
+    .listNewsText::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background-color: #3848a0;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+</style>

src/views/template/style/components/banner/list/450x480/7/7.vue

@@ -0,0 +1,304 @@
+<template>
+    <div>
+
+        <!-- 样式1 -->
+        <div class="BannerListBox BannerListBoxStyle1"
+
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+
+            <div class="listNewsTitle">
+                <span>头条新闻</span>
+            </div>
+
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,9)" :key="per_obj.id">
+                <span class="text">{{per_obj.title}}</span>
+                <span class="time">{{per_obj.time}}</span>
+            </div>
+            
+        </div>
+        <!-- 样式2 -->
+        <div class="BannerListBox BannerListBoxStyle2"
+        
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+            <div class="listNewsTitle">
+                <span>新闻头条</span>
+            </div>
+
+            <p class="listNewsText_img_li">
+
+                <span class="listNewsText_li_img_box">
+                     
+                    <img src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766469193143782.jpg">
+
+                </span>
+                 
+                <span class="listNewsText_li_img_dot4">神舟二十号航天员乘组圆满完成第一次出舱活动成第一次出舱活动成第一次出舱活动成第一次出舱活动成第一次出舱活动</span>
+
+            </p>
+ 
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,6)" :key="per_obj.id">
+                <span class="text">{{per_obj.title}}</span>
+                <span class="time">{{per_obj.time}}</span>
+            </div>
+
+        </div>
+        <!-- 样式3 -->
+        <div class="BannerListBox BannerListBoxStyle3"
+
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+            <div class="listNewsTitle">
+                <span>新闻头条</span>
+            </div>
+            
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,9)" :key="per_obj.id">
+                <span class="text">{{per_obj.title}}</span>
+                <span class="time">{{per_obj.time}}</span>
+            </div>
+        </div>
+        <!-- 样式4 -->
+        <div class="BannerListBox BannerListBoxStyle4"
+
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+            <div class="listNewsTitle">
+                <span>新闻头条</span>
+            </div>
+
+            <p class="listNewsText_img_li">
+
+                <span class="listNewsText_li_img_box">
+                     
+                    <img src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766469193143782.jpg">
+
+                </span>
+                 
+                <span class="listNewsText_li_img_dot4">神舟二十号航天员乘组圆满完成第一次出舱活动成第一次出舱活动成第一次出舱活动成第一次出舱活动成第一次出舱活动</span>
+
+            </p>
+            
+            <div class="listNewsText" v-for="(per_obj,per_index) in pageData.slice(0,6)" :key="per_obj.id">
+                <span class="text">{{per_obj.title}}</span>
+                <span class="time">{{per_obj.time}}</span>
+            </div>
+
+        </div>
+ 
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+            pageData:[
+                {title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措"},
+                {title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础。"},
+                {title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。"},
+                {title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。"},
+                {title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。"},
+                {title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性"},
+                {title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。"},
+                {title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例"},
+                {title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。"},
+                {title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
+                  
+            ]
+
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.BannerListBox {
+    div {
+        cursor: pointer;
+        font-size: 18px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height: 24px;
+        line-height: 24px;
+        margin-bottom: 24px;
+ 
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .listNewsTitle {
+        font-size: 22px;
+        font-weight: bold;
+        height: 47px;
+        line-height: 47px;
+
+        border-top: 2px solid #A72213;
+        border-bottom: 1px solid #DCDDDF;
+        color: #A72213;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+
+        span {
+            display: inline-block;
+             
+            color: #A72213;
+            height: 47px;
+            line-height: 47px;
+            // border-bottom: 6px solid #3848a0;
+            font-weight: bold;
+             
+            /* 可选：为了避免内容紧贴边框，添加内边距 */
+             
+        }
+    }
+
+    .listNewsText {
+        position: relative;
+
+        .text {
+            display:block;
+            width:100%;padding-right:13px;
+            overflow: hidden;box-sizing:border-box;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            height: 24px;text-indent:16px;
+            line-height: 24px;
+        }
+
+        .time {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: inline-block;
+            width: 51px;
+            color: #999999;
+            display:none;
+        }
+    }
+}
+
+//样式1
+.BannerListBoxStyle1 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+}
+
+//样式2
+.BannerListBoxStyle2 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+
+    .listNewsText_img_li{
+        width:100%;display:flex;height:130px;margin:0px 0px 21px 0px;
+
+     }
+    .listNewsText_li_img_box{margin-right:20px;height:100%;width:185px;height:130px;}
+    .listNewsText_li_img_box img{display:block;width:100%;height:100%;}
+    .listNewsText_li_img_dot4{
+        display:block;flex:1;
+        width:100%;color:#333;font-size:18px;
+        overflow: hidden;margin-top:17px;
+        height: 96px; box-sizing:border-box;padding-right:13px;
+        line-height: 24px;
+        overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4; 
+           word-wrap: break-word;
+            overflow-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+            
+    }
+
+
+
+}
+//样式2
+.BannerListBoxStyle3 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+ 
+
+
+
+}
+
+//样式2
+.BannerListBoxStyle4 {
+    .listNewsText::before {
+        content: '';
+        display: block;position:absolute;
+        top: 9px;
+        left:0px;
+        width: 6px;
+        height: 6px;
+        background-color: #d7daec;
+        margin-right: 10px;
+        vertical-align: 10px;
+    }
+
+    .listNewsText_img_li{
+        width:100%;display:flex;height:130px;margin:0px 0px 21px 0px;
+
+     }
+    .listNewsText_li_img_box{margin-right:20px;height:100%;width:185px;height:130px;}
+    .listNewsText_li_img_box img{display:block;width:100%;height:100%;}
+    .listNewsText_li_img_dot4{
+        display:block;flex:1;
+        width:100%;color:#333;font-size:18px;
+        overflow: hidden;margin-top:17px;
+        height: 96px; box-sizing:border-box;padding-right:13px;
+        line-height: 24px;
+        overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4; 
+           word-wrap: break-word;
+            overflow-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+             
+    }
+
+
+
+}
+ 
+</style>

src/views/template/style/components/banner/swiper/720x480/7/2.vue

@@ -0,0 +1,193 @@
+<template>
+    <div>
+        <!--样式5-->
+        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass==7">
+            <el-carousel :interval="3333" height="480px" indicator-position="bottom" 
+                arrow="always" @change="change_fun">
+                <el-carousel-item v-for="item in imagelist" :key="item.id">
+                    <img :src="item.src">
+                    <span class="swiper_dot1 dot1">
+                        {{ item.title }}
+                    </span>
+                </el-carousel-item>
+                <!-- <div class="roll_num_box">
+                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
+                </div> -->
+            </el-carousel>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/styles/theme/body/index/banner/style1.less';
+export default {
+    props: {
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            roll_num_this: 0,
+            roll_num_lang: 3,
+            imagelist: [
+                {
+                    id: 1,
+                     
+                    src: 'http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 2,
+                    src: 'http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 3,
+                    src: 'http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+            ]
+        };
+    },
+    methods: {
+        change_fun(the_1) {
+            this.roll_num_this = the_1
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//样式5
+.bannerSwiperStyle5 {
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 100%;
+        display:block;
+    }
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        right: 35px;
+        bottom: 5px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 20px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        background:rgba(0, 0, 0, 0.6);
+        box-sizing:border-box;padding-right:40%;
+
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+
+        
+        /deep/.el-carousel__arrow--left {
+            left: 20px;
+            width: 34px;
+            height: 80px;
+            color: #eee;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            position: absolute;
+            border: none;
+            border-radius: 0px;
+        }
+        /deep/.el-icon-arrow-left:before {
+            font-size: 24px;
+            line-height: 56px;
+        }
+        /deep/.el-carousel__arrow--right {
+            right: 20px;
+            width: 34px;
+            height: 80px;
+            color: #eee;
+            background: #00000080;
+            position: absolute;
+            border: none;
+            border-radius: 0px;
+        }
+        /deep/.el-icon-arrow-right:before {
+            font-size: 24px;
+            line-height: 56px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 6px;
+            height: 6px;
+            border: none;
+             
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #9C130A;
+            width: 6px;height: 6px;
+            opacity: 1;border-radius:0px;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #c82200;
+        width: 58px;
+        opacity: 1;
+    }
+    /deep/ .el-carousel__indicator--horizontal{padding:12px 5px;}
+
+
+
+}
+</style>

src/views/template/style/components/banner/swiper/720x480/7/3.vue

@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <!--样式5-->
+        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass==7">
+            <el-carousel :interval="3333" height="480px" indicator-position="bottom" 
+                arrow="always" @change="change_fun">
+                <el-carousel-item v-for="item in imagelist" :key="item.id">
+                     
+                    <img src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg">
+                    <span class="swiper_dot1 dot1">
+                        {{ item.title }}
+                    </span>
+                </el-carousel-item>
+                <!-- <div class="roll_num_box">
+                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
+                </div> -->
+            </el-carousel>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/styles/theme/body/index/banner/style1.less';
+export default {
+    props: {
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            roll_num_this: 0,
+            roll_num_lang: 3,
+            imagelist: [
+                {
+                    id: 1,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 2,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 3,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+            ]
+        };
+    },
+    methods: {
+        change_fun(the_1) {
+            this.roll_num_this = the_1
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//样式5
+.bannerSwiperStyle5 {
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 100%;
+        display:block;
+    }
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        right: 35px;
+        bottom: 5px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 20px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;font-weight:bold;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+
+
+        box-sizing:border-box;padding-right:40%;
+
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+
+        
+        /deep/.el-carousel__arrow--left {display:none;
+            left: 20px;
+            width: 34px;
+            height: 80px;
+            color: #eee;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            position: absolute;
+            border: none;
+            border-radius: 0px;
+        }
+        /deep/.el-icon-arrow-left:before {
+            font-size: 24px;
+            line-height: 56px;
+        }
+        /deep/.el-carousel__arrow--right {display:none;
+            right: 20px;
+            width: 34px;
+            height: 80px;
+            color: #eee;
+            background: #00000080;
+            position: absolute;
+            border: none;
+            border-radius: 0px;
+        }
+        /deep/.el-icon-arrow-right:before {
+            font-size: 24px;
+            line-height: 56px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 12px;
+            height: 12px;
+            border: none;
+             
+            background: #ccc;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #fff;
+            width: 12px;height: 12px;
+            opacity: 1;border-radius:0px;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #c82200;
+        width: 58px;
+        opacity: 1;
+    }
+    /deep/ .el-carousel__indicator--horizontal{padding:12px 5px;}
+
+
+
+}
+</style>

src/views/template/style/components/list/1200x1400/7/1.vue

@@ -0,0 +1,249 @@
+<template>
+    <div>
+
+            <div class="" v-if="componentStyle == 1">
+
+                <div class="list_left_li_1" v-for="item,index in pageData_1">
+
+                    <a class="list_left_li_a" title="">
+                        <div class="list_left_li_head">
+                            <div class="list_left_li_time"> {{ item.time }}</div>   
+                            <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                        </div>
+
+                        <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                    </a>
+        
+                </div>
+
+            </div>
+
+            <div class="" v-if="componentStyle == 2">
+
+                <div class="list_left_li_2" v-for="item,index in pageData_1">
+
+                    <a class="list_left_li_a" title="">
+                        <div class="list_left_li_head">
+                            <div class="list_left_li_time"> {{ item.time }}</div>   
+                            <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                        </div>
+
+                        <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                    </a>
+        
+                </div>
+
+            </div>
+
+            <div class="" v-if="componentStyle == 3">
+
+                <div class="list_left_li_3" v-for="item,index in pageData_1">
+
+                    <a class="list_left_li_a" title="">
+                        <div class="list_left_li_head">
+                            <div class="list_left_li_time"> {{ item.time }}</div>   
+                            <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                        </div>
+
+                        <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                    </a>
+        
+                </div>
+
+            </div>
+
+            <div class="" v-if="componentStyle == 4">
+
+                <div class="list_left_li_3" v-for="item,index in pageData_1">
+
+                    <a class="list_left_li_a" title="">
+                        <div class="list_left_li_head">
+                            <div class="list_left_li_time"> {{ item.time }}</div>   
+                            <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                        </div>
+
+                        <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                    </a>
+        
+                </div>
+
+            </div>
+ 
+    </div>
+
+  
+</template>
+
+<script>
+export default {
+    props: {
+        componentStyle: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+ 
+            pageData_1:[
+                {title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措"},
+                {title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础。"},
+                {title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。"},
+                {title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。"},
+                {title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。"},
+                {title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性"},
+                {title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。"},
+                {title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例"},
+                {title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。"},
+                {title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
+                  
+            ]
+
+
+
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+
+     .list_left_li_1{ box-sizing:border-box;
+        
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:dashed 1px #999;
+
+        .list_left_li_a{display:block;width:100%;height:100%;}   
+         .list_left_li_head{height:24px;margin-top:20px;}
+         .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+         .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                            font-weight:bold;text-indent:16px;margin:0;
+                            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                        }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+         .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+
+     .list_left_li_2{ box-sizing:border-box;
+
+        
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:solid 1px #999;
+
+        .list_left_li_a{display:block;width:100%;height:100%;}   
+         .list_left_li_head{height:24px;margin-top:20px;}
+         .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+         .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                            font-weight:bold;text-indent:16px;margin:0;
+                            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                        }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+         .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+     
+     .list_left_li_3{ box-sizing:border-box;
+               
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+     
+     .list_left_li_4{ box-sizing:border-box;
+               
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+
+
+  
+</style>

src/views/template/style/components/list/1200x1467/7/1.vue

@@ -0,0 +1,293 @@
+<template>
+    <div>
+
+        <div class="box_1" v-if="componentStyle == 1">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+        <div class="box_2" v-if="componentStyle == 2">
+
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+        <div class="box_3" v-if="componentStyle == 3">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+        <div class="box_4" v-if="componentStyle == 4">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+    </div>
+</template>
+ 
+<script>
+export default {
+    props: {
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            pageData_1:[
+                {title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措"},
+                {title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础。"},
+                {title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。"},
+                {title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。"},
+                {title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。"},
+                {title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性"},
+                {title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。"},
+                {title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例"},
+                {title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。"},
+                {title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
+                  
+            ],
+ 
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    
+
+    .box_1{
+
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:bold;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+
+    .box_2{
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:bold;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+
+                
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+    
+    .box_3{
+
+
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+    .box_4{
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+
+
+</style>
+

src/views/template/style/components/list/1200x430/7/2.vue

@@ -0,0 +1,401 @@
+<template>
+    <div> 
+        
+            <div class="box_1" v-if="componentStyle == 1">
+                
+                <h4 class="ul_head">
+                    <span :class="{ul_head_only: ul_head_only == 0}" @click="ul_head_only = 0">{{ name1 }}</span>
+                    <span :class="{ul_head_only: ul_head_only == 1}" @click="ul_head_only = 1">{{ name2 }}</span>
+                </h4>
+ 
+                <div class="card_out clearfix">
+
+                    <div class="card_box clearfix">
+
+                        <div class="img_ul clearfix">
+
+                            <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,4)" >
+                                
+                                <a class="img_ul_li_a" href="" title="">
+                                     <img class="img_ul_li_img" :src="per_obj.src" title="" alt="">
+                                     <span class="img_ul_li_dot1"> {{per_obj.title}}</span>
+                                </a>
+                            </div>
+
+                        </div>
+                        
+                        <div class="ul_box clearfix">
+
+                             <div class="ul_li" v-for="(item,index) in pageData.slice(0,12)"  >{{item.title}}</div>
+
+                        </div>    
+
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="box_2" v-if="componentStyle == 2">
+                
+                <h4 class="ul_head">
+                    <span :class="{ul_head_only: ul_head_only == 0}" @click="ul_head_only = 0">{{name1}}</span>
+                    <span :class="{ul_head_only: ul_head_only == 1}" @click="ul_head_only = 1">{{ name2 }}</span>
+                </h4>
+ 
+                <div class="card_out clearfix">
+
+                    <div class="card_box clearfix">
+                        
+                        <div class="ul_box clearfix">
+                             <div class="ul_li" v-for="(item,index) in pageData.slice(0,12)"  >{{item.title}}</div>
+
+                        </div>    
+
+                        <div class="img_ul clearfix">
+
+                            <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,4)" >
+                                
+                                <a class="img_ul_li_a" href="" title="">
+                                     <img class="img_ul_li_img" :src="per_obj.src" title="" alt="">
+                                     <span class="img_ul_li_dot1">
+                                        {{per_obj.title}}
+                                     </span>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+            
+            <div class="box_3" v-if="componentStyle == 3">
+
+                
+                <h4 class="ul_head">
+                    <span :class="{ul_head_only: ul_head_only == 0}" @click="ul_head_only = 0">{{ name1 }}</span>
+                    <span :class="{ul_head_only: ul_head_only == 1}" @click="ul_head_only = 1">{{ name2 }}</span>
+                </h4>
+ 
+                <div class="card_out clearfix">
+
+                    <div class="card_box clearfix">
+
+                        <div class="img_ul clearfix">
+
+                            <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,4)" >
+                                
+                                <a class="img_ul_li_a" href="" title="">
+                                     <img class="img_ul_li_img" :src="per_obj.src" title="" alt="">
+                                     <span class="img_ul_li_dot1">
+                                        {{per_obj.title}}
+                                     </span>
+                                </a>
+                            </div>
+
+                        </div>
+                        
+                        <div class="ul_box clearfix">
+
+                             <div class="ul_li" v-for="(item,index) in pageData.slice(0,12)"  >{{item.title}}</div>
+
+                        </div>    
+
+                    </div>
+
+                </div>
+
+            </div>
+            
+            <div class="box_4" v-if="componentStyle == 4">
+                
+                <h4 class="ul_head">
+                    <span :class="{ul_head_only: ul_head_only == 0}" @click="ul_head_only = 0">1{{ name1 }}</span>
+                    <span :class="{ul_head_only: ul_head_only == 1}" @click="ul_head_only = 1">{{ name2 }}</span>
+                </h4>
+ 
+                <div class="card_out clearfix">
+
+                    <div class="card_box clearfix">
+                        
+                        <div class="ul_box clearfix">
+
+                             <div class="ul_li" v-for="(item,index) in pageData.slice(0,12)"  >{{item.title}}</div>
+
+                        </div>    
+
+                        <div class="img_ul clearfix">
+
+                            <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,4)" >
+                                
+                                <a class="img_ul_li_a" href="" title="">
+                                     <img class="img_ul_li_img" :src="per_obj.src" title="" alt="">
+                                     <span class="img_ul_li_dot1"> {{per_obj.title}}</span>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            default: ""
+        },
+        name1: {
+            type: String,
+            default: ""
+        },
+        name2: {
+            type: String,
+            default: ""
+        },
+        componentStyle: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+                pageData:[
+                    
+                    {year:"2021-02",day:"02",title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg"},
+                    {year:"2022-03",day:"03",title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766478289365709.jpg"},
+                    {year:"2023-04",day:"04",title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479649422031.jpg"}, 
+                    {year:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg"},
+                    {year:"2019-10",day:"10",title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479633372863.jpg"},
+                    {year:"2020-01",day:"01",title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg"},
+                    {year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766535795899808.jpg"},
+                    {year:"2016-07",day:"07",title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766540810697850.jpg"},
+                    {year:"2017-08",day:"08",title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例",src:""},
+                    {year:"2018-09",day:"09",title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。",src:""},
+                    {year:"2012-11",day:"02",title:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",time:"2025-02-18",text:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",src:""},
+                    {year:"2011-10",day:"22",title:"国家互联网信息办公 室关于《个人信息出 境个人信息保护认证 办法》",time:"2025-03-18",text:"国家互联网信息办公 室关于《个人信息出 境个人信息保护认证 办法》写的百科全书Grokipedia",src:""},
+
+                ],
+            activeTab: 0,
+            ul_head_only : 0
+
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+ 
+
+   .clearfix{overflow:hidden;}
+   .box_1{
+
+        height:px;overflow:hidden;
+       .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    
+       .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                       font-weight:bold;color:#333;font-size:20px;margin-right:30px;}
+       
+       .ul_head .ul_head_only{color:#A72213;border-bottom:solid 2px #A72213;}
+    
+       .card_out{
+            margin-top:20px;
+
+           .card_box{} 
+           .img_ul{height:180px;} 
+           .img_ul_li{float:left;width:285px;height:180px;margin-right:20px;position:relative;} 
+           .img_ul_li:nth-last-of-type(1){margin-right:0px;float:right;}
+           .img_ul_li:nth-last-of-type(2){margin-right:0px; }
+
+           .img_ul_li_a{display:block;width:100%;height:100%;}
+           .img_ul_li_img{display:block;width:100%;height:100%;} 
+           .img_ul_li_dot1{
+                height:29px;line-height:29px;color:#fff;box-sizing:border-box;
+                font-size:14px;position:absolute;font-weight:bold;display:block;
+                padding:0px 15px; width:100%;
+                left:0px;bottom:0px;text-align:center;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+
+           }
+
+           .ul_box{margin-top:20px;}
+
+           .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;width:380px;margin:0px 28px 20px 0px;float:left;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-of-type(3n){margin-right:0px;}
+                
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+       } 
+
+
+   }
+   
+   .box_2{
+        height:px;overflow:hidden;
+       .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    
+       .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                       font-weight:bold;color:#333;font-size:20px;margin-right:30px;}
+       
+       .ul_head .ul_head_only{color:#A72213;border-bottom:solid 2px #A72213;}
+    
+       .card_out{
+
+            margin-top:20px;
+
+           .card_box{} 
+           .img_ul{height:180px;} 
+           .img_ul_li{float:left;width:285px;height:180px;margin-right:20px;position:relative;} 
+           .img_ul_li:nth-last-of-type(1){margin-right:0px;float:right;}
+           .img_ul_li:nth-last-of-type(2){margin-right:0px; }
+
+           .img_ul_li_a{display:block;width:100%;height:100%;}
+           .img_ul_li_img{display:block;width:100%;height:100%;} 
+           .img_ul_li_dot1{
+                height:29px;line-height:29px;color:#fff;box-sizing:border-box;
+                font-size:14px;position:absolute;font-weight:bold;display:block;
+                padding:0px 15px; width:100%;
+                left:0px;bottom:0px;text-align:center;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+
+           }
+
+           .ul_box{margin-top:0px;}
+
+           .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;width:380px;margin:0px 28px 20px 0px;float:left;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-of-type(3n){margin-right:0px;}
+                
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+       } 
+
+
+   }
+
+   .box_3{
+
+        height:px;overflow:hidden;
+       .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    
+       .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                       font-weight:bold;color:#333;font-size:20px;margin-right:30px;}
+       
+       .ul_head .ul_head_only{color:#A72213;border-bottom:solid 2px #A72213;}
+    
+       .card_out{
+            margin-top:20px;
+
+           .card_box{} 
+           .img_ul{height:180px;} 
+           .img_ul_li{float:left;width:285px;height:180px;margin-right:20px;position:relative;} 
+           .img_ul_li:nth-last-of-type(1){margin-right:0px;float:right;}
+           .img_ul_li:nth-last-of-type(2){margin-right:0px; }
+
+           .img_ul_li_a{display:block;width:100%;height:100%;}
+           .img_ul_li_img{display:block;width:100%;height:100%;} 
+           .img_ul_li_dot1{
+                height:29px;line-height:29px;color:#fff;box-sizing:border-box;
+                font-size:14px;position:absolute;font-weight:bold;display:block;
+                padding:0px 15px; width:100%;
+                left:0px;bottom:0px;text-align:center;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+
+           }
+
+           .ul_box{margin-top:20px;}
+
+           .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;width:380px;margin:0px 28px 20px 0px;float:left;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-of-type(-n+3){font-weight:bold;}
+
+            .ul_li:nth-of-type(3n){margin-right:0px;}
+                
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+       } 
+
+   }
+   
+  .box_4{
+
+        height:px;overflow:hidden;
+       .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    
+       .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                       font-weight:bold;color:#333;font-size:20px;margin-right:30px;}
+       
+       .ul_head .ul_head_only{color:#A72213;border-bottom:solid 2px #A72213;}
+    
+       .card_out{
+            margin-top:20px;
+
+           .card_box{} 
+           .img_ul{height:180px;} 
+           .img_ul_li{float:left;width:285px;height:180px;margin-right:20px;position:relative;} 
+           .img_ul_li:nth-last-of-type(1){margin-right:0px;float:right;}
+           .img_ul_li:nth-last-of-type(2){margin-right:0px; }
+
+           .img_ul_li_a{display:block;width:100%;height:100%;}
+           .img_ul_li_img{display:block;width:100%;height:100%;} 
+           .img_ul_li_dot1{
+                height:29px;line-height:29px;color:#fff;box-sizing:border-box;
+                font-size:14px;position:absolute;font-weight:bold;display:block;
+                padding:0px 15px; width:100%;
+                left:0px;bottom:0px;text-align:center;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+
+           }
+
+           .ul_box{margin-top:0px;}
+
+           .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;width:380px;margin:0px 28px 20px 0px;float:left;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+            .ul_li:nth-of-type(-n+3){font-weight:bold;}
+            .ul_li:nth-of-type(3n){margin-right:0px;}
+                
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+        } 
+
+
+   }
+
+</style>

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

@@ -0,0 +1,414 @@
+<template>
+    <div class="newsBox">
+
+        <div class="">
+
+                <div class="list_right_box_1" v-if="componentStyle == 1">
+                                        
+                    <h4 class="list_right_head">
+                            <span class=" ">{{name}}</span>
+                    </h4>
+
+                    <div class="list_right_img_ul">
+
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr">
+
+                            
+                            <a class="list_right_img_ul_li_a" href="" title="">
+
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3"> {{ per_obj.title }}</div>
+                            </a>
+                        </div>
+ 
+                    </div>
+
+                    <div class="list_right_ul">
+
+                        <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+
+                </div>
+                                        
+                <div class="list_right_box_2" v-if="componentStyle == 2">
+
+                                        
+                    <h4 class="list_right_head">
+                            <span class=" ">{{name}}</span>
+                    </h4>
+
+                    <div class="list_right_ul">
+                        <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+                    <div class="list_right_img_ul">
+
+ 
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>
+                            
+
+                    </div>
+
+
+                </div>
+                
+                <div class="list_right_box_3" v-if="componentStyle == 3">
+                    
+                    <h4 class="list_right_head">
+                            <span class=" ">{{name}}</span>
+                    </h4>
+                    
+                    <div class="list_right_img_ul">
+
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr.slice(0,1)">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>
+
+                    </div>
+
+                    <div class="list_right_ul">
+
+
+                         <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+
+                    <div class="list_right_img_ul">
+
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr.slice(1,2)">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>
+                            
+
+                    </div>
+
+                </div>
+        
+                <div class="list_right_box_4" v-if="componentStyle == 4">
+                    
+                    <h4 class="list_right_head">
+                            <span class=" ">{{name}}</span>
+                    </h4>
+
+                    <div class="list_right_img_ul">
+
+
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>
+
+                    </div>
+
+                    <div class="list_right_ul">
+                        <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+
+                </div>
+                
+                <div class="list_right_box_5" v-if="componentStyle == 5">
+
+                    
+                    <h4 class="list_right_head">
+                            <span class=" ">{{name}}</span>
+                    </h4>
+
+                    <div class="list_right_ul">
+                        <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+                    <div class="list_right_img_ul">
+ 
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr">
+                            
+
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3"> {{ per_obj.title }}</div>
+                            </a>
+                        </div>
+
+                    </div>
+
+
+                </div>
+
+                <div class="list_right_box_6" v-if="componentStyle == 6">
+
+                    
+                    <h4 class="list_right_head">
+
+                            <span class=" ">{{name}}</span>
+                    </h4>
+                    
+                    <div class="list_right_img_ul">
+
+                         <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr.slice(0,1)">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>    
+                    </div>
+
+                     <div class="list_right_ul">
+                        <a class="list_right_ul_a" href="" title="" v-for="(per_obj,per_index) in arr_1" >{{per_obj.title}}</a>
+                    </div>
+
+                    <div class="list_right_img_ul">
+
+                        <div class="list_right_img_ul_li" v-for="(per_obj,per_index) in img_arr.slice(1,2)">
+                            <a class="list_right_img_ul_li_a" href="" title="">
+                                <img class="list_right_img_ul_li_img" :src="per_obj.src" title="" alt="">
+                                <div class="list_right_img_ul_li_dot3">
+                                      {{ per_obj.title }}
+                                </div>
+                            </a>
+                        </div>    
+                    </div>
+ 
+
+                </div>
+
+        </div>
+ 
+
+    </div>
+</template>
+
+<script>
+export default {
+
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            img_arr:[
+                {title:"德国举行新一届 联邦议院（议会 下院）选举",src:"http://192.168.1.234:19000/pre/image/jpeg/20251219/1766106672483185.jpg"},
+                {title:"外卖平台争相缴 纳社保背后的偶 然与必然",src:"http://192.168.1.234:19000/pre/image/jpeg/20251218/1766035362329459.jpg"},
+                                
+            ],
+            
+            arr_1:[
+                {title:"战备能力远未达标，或被列入备..."},
+                {title:"与多个行业接触沟通，汽车领域..."}, 
+                {title:"食品企业掀起“配料表变革”"},
+                {title:"国家医保局：药品追溯码归集于..."},   
+            ]
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+    .list_right_box_1{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+             
+        }    
+
+    }
+    
+    .list_right_box_2{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+             
+        }    
+
+    }
+    .list_right_box_3{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+             
+        }    
+
+    }
+
+    .list_right_box_4{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+            .list_right_ul_a:nth-of-type(1){font-weight:bold;}
+
+            
+        }    
+
+    }
+    
+    .list_right_box_5{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+
+            .list_right_ul_a:nth-of-type(1){font-weight:bold;}
+            
+        }    
+
+    }
+
+    .list_right_box_6{
+        width:100%;overflow:hidden;
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_img_ul{margin-top:20px;
+            .list_right_img_ul_li{height:80px;overflow:hidden;width:100%;margin-bottom:20px;}    
+            .list_right_img_ul_li_a{display:block;width:100%;height:100%;}    
+            .list_right_img_ul_li_img{float:left;width:120px;height:80px;margin-right:10px;}    
+            .list_right_img_ul_li_dot3{height:72px;line-height:24px;color:#333;font-size:18px;
+                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;                             
+            }    
+        }    
+
+        .list_right_ul{margin-top:20px;
+            .list_right_ul_a{height:24px;line-height:24px;color:#333;font-size:18px;margin-bottom:20px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }    
+            .list_right_ul_a:nth-of-type(1){font-weight:bold;}
+            
+        }    
+
+    }
+
+ 
+</style>
+

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

@@ -0,0 +1,483 @@
+<template>
+    <div class="hotNewsBox">
+ 
+        <div class="list_right_box_hot_1" v-if="componentStyle == 1">
+
+            
+            <h4 class="list_right_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="list_right_box_hot_ul">
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">1</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            提前锁定女单冠军！乒乓球亚...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                    
+                        <div class="list_right_box_hot_li_num">2</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            特朗普：与普京就结束俄乌冲...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">3</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        退役≠报废 新能源车旧动力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">4</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        欧洲多国领导人密集表态：俄...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">5</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        加拿大承诺用俄罗斯被扣押资...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">6</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            美对我海事、物流等领域拟议...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">7</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            中国代表：中方支持一切致力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">8</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        中国峒中-越南横模口岸旅检...
+                        </a>
+                </div>
+
+            </div>
+
+        </div>
+ 
+        <div class="list_right_box_hot_2" v-if="componentStyle == 2">
+            
+            <h4 class="list_right_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="list_right_box_hot_ul">
+
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">1</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            提前锁定女单冠军！乒乓球亚...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">2</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            特朗普：与普京就结束俄乌冲...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">3</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        退役≠报废 新能源车旧动力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">4</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        欧洲多国领导人密集表态：俄...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">5</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        加拿大承诺用俄罗斯被扣押资...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">6</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            美对我海事、物流等领域拟议...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">7</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            中国代表：中方支持一切致力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">8</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        中国峒中-越南横模口岸旅检...
+                        </a>
+                </div>
+
+            </div>
+
+        </div>
+ 
+        <div class="list_right_box_hot_3" v-if="componentStyle == 3">
+            
+            <h4 class="list_right_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="list_right_box_hot_ul">
+
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">1</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            提前锁定女单冠军！乒乓球亚...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">2</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            特朗普：与普京就结束俄乌冲...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">3</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        退役≠报废 新能源车旧动力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">4</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        欧洲多国领导人密集表态：俄...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">5</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        加拿大承诺用俄罗斯被扣押资...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">6</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            美对我海事、物流等领域拟议...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">7</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            中国代表：中方支持一切致力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">8</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        中国峒中-越南横模口岸旅检...
+                        </a>
+                </div>
+
+            </div>
+
+        </div>
+ 
+        <div class="list_right_box_hot_4" v-if="componentStyle == 4">
+            
+            <h4 class="list_right_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="list_right_box_hot_ul">
+
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">1</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            提前锁定女单冠军！乒乓球亚...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">2</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            特朗普：与普京就结束俄乌冲...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">3</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        退役≠报废 新能源车旧动力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">4</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        欧洲多国领导人密集表态：俄...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">5</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        加拿大承诺用俄罗斯被扣押资...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">6</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            美对我海事、物流等领域拟议...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">7</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            中国代表：中方支持一切致力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <div class="list_right_box_hot_li_num">8</div>
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        中国峒中-越南横模口岸旅检...
+                        </a>
+                </div>
+
+            </div>
+
+        </div>
+ 
+        <div class="list_right_box_hot_5" v-if="componentStyle == 5">
+            
+            <h4 class="list_right_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="list_right_box_hot_ul">
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            提前锁定女单冠军！乒乓球亚...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            特朗普：与普京就结束俄乌冲...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        退役≠报废 新能源车旧动力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        欧洲多国领导人密集表态：俄...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        加拿大承诺用俄罗斯被扣押资...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            美对我海事、物流等领域拟议...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                            中国代表：中方支持一切致力...
+                        </a>
+                </div>
+
+                <div class="list_right_box_hot_li">
+                        <a class="list_right_box_hot_li_a" href="" title="">
+                        中国峒中-越南横模口岸旅检...
+                        </a>
+                </div>
+
+            </div>
+
+        </div>
+ 
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            default: ""
+        },
+        componentStyle: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+
+    .list_right_box_hot_1{width:100%;overflow:hidden;
+                
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_box_hot_li{height:64px;border-bottom:solid 1px #E4E4E4;position:relative;}
+        .list_right_box_hot_li_num{position:absolute;width:22px;height:100%;line-height:64px;
+                                    color:#D9D9D9;font-size:20px;left:0px;top:0px;
+                                    font-style:italic;
+                                }
+        .list_right_box_hot_li_a{display:block;width:100%;height:100%;text-indent:24px;
+                                color:#333;font-size:18px;line-height:64px;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;                                
+        }
+
+        .list_right_box_hot_li:nth-of-type(-n+3) .list_right_box_hot_li_num{ color:#A72213;}
+
+
+    }
+
+    
+    .list_right_box_hot_2{width:100%;overflow:hidden;
+        
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_box_hot_li{height:64px;border-bottom:solid 1px #E4E4E4;position:relative;}
+        .list_right_box_hot_li_num{position:absolute;width:22px;height:100%;line-height:64px;
+                                    color:#A72213;font-size:20px;left:0px;top:0px;
+                                    font-style:italic;
+                                }
+        .list_right_box_hot_li_a{display:block;width:100%;height:100%;text-indent:24px;
+                                color:#333;font-size:18px;line-height:64px;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;                                
+        }
+    }
+
+
+    .list_right_box_hot_3{width:100%;overflow:hidden;
+                
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_box_hot_li{height:64px;border-bottom:dashed 1px #E4E4E4;position:relative;}
+        .list_right_box_hot_li_num{position:absolute;width:22px;height:100%;line-height:64px;
+                                    color:#D9D9D9;font-size:20px;left:0px;top:0px;
+                                    font-style:italic;
+                                }
+        .list_right_box_hot_li_a{display:block;width:100%;height:100%;text-indent:24px;
+                                color:#333;font-size:18px;line-height:64px;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;                                
+        }
+
+        .list_right_box_hot_li:nth-of-type(-n+3) .list_right_box_hot_li_num{ color:#A72213;}
+
+
+    }
+
+    .list_right_box_hot_4{
+        width:100%;overflow:hidden;
+        
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_box_hot_li{height:64px;border-bottom:dashed 1px #E4E4E4;position:relative;}
+        .list_right_box_hot_li_num{position:absolute;width:22px;height:100%;line-height:64px;
+                                    color:#A72213;font-size:20px;left:0px;top:0px;
+                                    font-style:italic;
+                                }
+        .list_right_box_hot_li_a{display:block;width:100%;height:100%;text-indent:24px;
+                                color:#333;font-size:18px;line-height:64px;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;                                
+        }
+    }
+
+    .list_right_box_hot_5{
+        width:100%;overflow:hidden;
+        
+        .list_right_head{height:47px; 
+                border-top:solid 2px #A72213;
+                border-bottom:solid 1px #DCDDDF;
+                margin:0px;box-sizing:border-box;}
+        .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;}
+
+        .list_right_box_hot_li{height:64px;border-bottom:dashed 1px #E4E4E4;position:relative;}
+         
+        .list_right_box_hot_li_a{display:block;width:100%;height:100%; 
+                                color:#333;font-size:18px;line-height:64px;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;                                
+        }
+    }
+
+ </style>

src/views/template/style/components/list/380x610/7/1.vue

@@ -0,0 +1,687 @@
+<template>
+    <div class="listNewsBox">
+        <!-- <div class="listNewsTitle" v-if="this.$store.state.template.editWebsiteClass==1">
+            {{name}}
+        </div> -->
+   
+         <!-- <div class="ul_box_3" v-if="componentStyle == 3"> -->
+
+            <div class="left_in_1" v-if="componentStyle == 1">
+
+
+                <h4 class="ul_head">
+                        <span class=" ">{{name}}</span>
+                </h4>
+                
+                <div class="img_ul">
+
+                    <div class="img_ul_li" v-for="(per_obj,per_index) in 1">
+                        
+                        <img class="img_ul_li_img" src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg" alt="">
+                        <div  class="img_ul_li_dot4">全国铁路今天起实行新列车运行图 注全国铁路今天起实行新列车运行图 注意这些车次有调整</div>
+
+                    </div>
+
+                </div>
+                
+                <div class="ul_box">
+                    <div class="ul_li" v-for="(per_obj,index) in pageData.slice(1,7)" >{{per_obj.title}}</div>
+                </div>
+
+                <div class="img_2_ul">
+
+                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                            <a class=" " href="" title="">
+                                <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                            </a>
+                    </div>
+
+                </div>
+
+            </div>   
+
+            <div class="left_in_2" v-if="componentStyle == 2">
+                
+                    <h4 class="ul_head">
+                            <span class=" "> {{name}}</span>
+                    </h4>
+                                
+                    <div class="img_ul">
+
+                        <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                            
+                            <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                            <div  class="img_ul_li_dot4">{{ per_obj.title }}</div>
+
+                        </div>
+
+                    </div>
+                    
+                    <div class="ul_box">
+                        <div class="ul_li" v-for="(per_obj,index) in pageData.slice(1,7)" >{{per_obj.title}}</div>
+                    </div>
+
+                    <div class="img_2_ul">
+
+                        <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                                <a class=" " href="" title="">
+                                    <img class="img_2_ul_li_img" :src="per_obj.src" alt=""> 
+                                    <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                </a>
+                        </div>
+
+                    </div>
+
+            </div>   
+
+            <div class="left_in_3"  v-if="componentStyle == 3">
+
+
+                <h4 class="ul_head">
+                        <span class=" "> {{name}}</span>
+                </h4>
+                
+                <div class="img_ul">
+
+                    <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                        
+                        <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                        <div  class="img_ul_li_dot4">{{ per_obj.title }}</div>
+
+                    </div>
+
+                </div>
+
+                <div class="img_2_ul">
+
+                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                            <a class=" " href="" title="">
+                                <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                            </a>
+                    </div>
+                </div>                                
+                <div class="ul_box">
+                    <div class="ul_li" v-for="(per_obj,index) in pageData.slice(4,10)" >{{ per_obj.title }}</div>
+                </div>
+
+            </div>   
+
+            <div class="left_in_4"  v-if="componentStyle == 4">
+
+                <h4 class="ul_head">
+                        <span class=" "> {{name}}</span>
+                </h4>
+                
+                <div class="img_ul">
+
+                    <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                        
+                        <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                        <div  class="img_ul_li_dot4">{{ per_obj.title }}</div>
+
+                    </div>
+
+                </div>
+
+                <div class="img_2_ul">
+
+                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                            <a class=" " href="" title="">
+                                <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                            </a>
+                    </div>
+
+                </div>                                
+                <div class="ul_box">
+                    <div class="ul_li" v-for="(per_obj,index) in pageData.slice(4,10)" >{{ per_obj.title }}</div>
+                </div>
+
+            </div> 
+            
+            <div class="left_in_5"  v-if="componentStyle == 5">
+
+                <h4 class="ul_head">
+                        <span class=" "> {{name}}</span>
+                </h4>
+                                
+                <div class="ul_box">
+                    <div class="ul_li" v-for="(per_obj,index) in pageData.slice(4,10)" >{{ per_obj.title }}</div>
+                </div>
+                <div class="img_ul">
+
+                    <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                        
+                        <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                        <div  class="img_ul_li_dot4">{{ per_obj.title }}</div>
+
+                    </div>
+
+                </div>
+
+                <div class="img_2_ul">
+
+                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                            <a class=" " href="" title="">
+                                <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                            </a>
+                    </div>
+
+                </div>                
+
+            </div>
+
+            <div class="left_in_6" v-if="componentStyle == 6">
+                
+                <h4 class="ul_head">
+                        <span class=" "> {{name}}</span>
+                </h4>
+                                
+                <div class="ul_box">
+                    <div class="ul_li" v-for="(per_obj,index) in pageData.slice(4,10)" >{{ per_obj.title }}</div>
+                </div>
+                <div class="img_ul">
+
+                    <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                        
+                        <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                        <div  class="img_ul_li_dot4">{{ per_obj.title }}</div>
+
+                    </div>
+
+                </div>
+
+                <div class="img_2_ul">
+
+                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                            <a class=" " href="" title="">
+                                <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                            </a>
+                    </div>
+
+                </div>                
+
+            </div>   
+
+    </div>
+</template>
+
+<script>
+export default {
+    
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+        			pageData:[
+                        {year:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg"},
+                        {year:"2019-10",day:"10",title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479633372863.jpg"},
+                        {year:"2020-01",day:"01",title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg"},
+                        {year:"2021-02",day:"02",title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg"},
+                        {year:"2022-03",day:"03",title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766478289365709.jpg"},
+                        {year:"2023-04",day:"04",title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479649422031.jpg"}, 
+                        {year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766535795899808.jpg"},
+                        {year:"2016-07",day:"07",title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。",src:""},
+                        {year:"2017-08",day:"08",title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例",src:""},
+                        {year:"2018-09",day:"09",title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。",src:""},
+                        {year:"2012-11",day:"02",title:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",time:"2025-02-18",text:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",src:""},
+                    ],        
+
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.listNewsBox {
+    position: relative;
+
+    .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;
+    }
+    .listNewsContent {
+        .listNewsContentItem {
+            display: flex;
+            background: #F9FAFB;
+            align-items: flex-start;
+            margin-bottom: 20px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemLeftTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 28px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 5px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 28px;
+                    font-size: 14px;
+                }
+            }
+            .listNewsContentItemRight {
+                padding: 10px;
+                box-sizing: border-box;
+                flex: 1;
+                height: 110px;
+                overflow: hidden;
+                div {
+                    box-sizing: border-box;
+                    height: 24px;
+                    line-height: 24px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    color:#333333;
+                    margin-bottom: 10px;
+                    background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child {
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+}
+//样式4
+.listNewsBox{
+    .listNewsStyle4 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757379542529609.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式5
+.listNewsBox{
+    .listNewsStyle5 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757386056889702.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式6
+.listNewsBox{
+    .listNewsStyle6 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    padding-left: 0px;
+                    background: none;
+                }
+            }
+        }
+    }
+}
+//样式9
+.listNewsBox{
+    .listNewsStyle9 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    &:first-child {
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.listNewsContent{display:none;}
+ 
+
+.left_in_1{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;flex:1;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:20px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+
+
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+}
+
+.left_in_2{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;flex:1;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:20px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-of-type(3n-2){font-weight:bold;}
+             
+
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+
+
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+}
+
+.left_in_3{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:19px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+
+
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+
+}
+.left_in_4{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:19px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+            .ul_li:nth-of-type(3n-2){font-weight:bold;}
+
+
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+
+}
+.left_in_5{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:20px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+
+}
+.left_in_6{
+
+    width:100%;
+    
+    .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+    .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                    font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+ 
+        .img_ul{margin-top:20px;}
+        .img_ul_li{margin-bottom:23px;display:flex;overflow:hidden;width:100%;}
+        .img_ul_li_img{width:185px;height:130px;margin-right:20px;}
+        .img_ul_li_dot4{  height:96px;line-height:24px;color:#333;font-size:18px;
+                        margin-top:17px;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+        .ul_box{
+
+            margin-top:20px;overflow:hidden;width:100%;
+
+            .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                    margin-bottom:20px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+
+            .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+            .ul_li:nth-of-type(3n-2){font-weight:bold;}
+            .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;}
+        .img_2_ul_li{width:185px;height:130px;position:relative;}
+        .img_2_ul_li:nth-of-type(odd){float:left;}
+        .img_2_ul_li:nth-of-type(even){float:right;}
+        .img_2_ul_li a{display:block;width:100%;height:100%;}
+        .img_2_ul_li_img{display:block;width:100%;height:100%;}
+        .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                box-sizing:border-box;padding:0px 9px;
+                	word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+        }
+
+
+}
+
+</style>
+

src/views/template/style/components/list/380x610/7/2.vue

@@ -0,0 +1,705 @@
+<template>
+    <div class="listNewsBox">
+        
+
+        <div class="listNewsTitle_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
+            <span>{{name}}</span>
+        </div>
+  
+ 
+                        <div class="min_in_1" v-if="componentStyle == 1">
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+                            
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4) " >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+
+                        </div>
+
+                        <div class="min_in_2" v-if="componentStyle == 2">
+
+                            <h4 class="ul_head">
+                                      <span class=" ">{{name}}</span>
+                            </h4>
+
+                            
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                        </div>
+    
+                        
+                        <div class="min_in_3" v-if="componentStyle == 3">
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+                            
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+
+
+
+                        </div>
+
+
+                        <div class="min_in_4"v-if="componentStyle == 4">
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+
+                            
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                        </div>
+
+                        
+                        <div class="min_in_5"  v-if="componentStyle == 5">
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+                            
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)" >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                        </div>
+                        
+                        <div class="min_in_6" v-if="componentStyle == 6">
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+                            
+                            <div class="ul_img_box" v-for="(per_obj,per_index) in pageData.slice(0,1)" >
+                                <img class="ul_img_box_img" :src="per_obj.src" alt="">
+                                <span class="ul_img_dot1">{{ per_obj.title }}</span>
+                            </div>
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(per_obj,per_index) in pageData.slice(4,7)" >{{ per_obj.title }}</div>
+                            </div>
+                            
+                                <div class="img_2_ul">
+
+                                    <div class="img_2_ul_li" v-for="(per_obj,per_index) in pageData.slice(3,5)" >
+                                         <a class=" " href="" title="">
+                                             <img class="img_2_ul_li_img" :src="per_obj.src" alt="">
+                                             <span class="img_2_ul_li_dot1">{{ per_obj.title }}</span>
+                                         </a>
+                                    </div>
+
+                                </div>                
+
+                        </div>
+
+
+    </div>
+</template>
+
+<script>
+export default {
+    
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+			pageData:[
+					
+					{year:"2019-10",day:"10",title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479633372863.jpg"},
+					{year:"2020-01",day:"01",title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg"},
+					{year:"2021-02",day:"02",title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg"},
+					{year:"2022-03",day:"03",title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766478289365709.jpg"},
+					{year:"2023-04",day:"04",title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479649422031.jpg"}, 
+					{year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766535795899808.jpg"},
+                    {year:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg"},
+					{year:"2016-07",day:"07",title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。",src:""},
+					{year:"2017-08",day:"08",title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例",src:""},
+					{year:"2018-09",day:"09",title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。",src:""},
+					{year:"2012-11",day:"02",title:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",time:"2025-02-18",text:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",src:""},
+				],        
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.listNewsBox {
+    position: relative;
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        span {
+            color:#A91B33;
+            height: 30px;
+            line-height: 30px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+        }
+    }
+    .listNewsContent {
+        .listNewsContentItem {
+            display: flex;
+            background: #F9FAFB;
+            align-items: flex-start;
+            margin-bottom: 20px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemLeftTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 28px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 5px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 28px;
+                    font-size: 14px;
+                }
+            }
+            .listNewsContentItemRight {
+                padding: 10px;
+                box-sizing: border-box;
+                flex: 1;
+                height: 110px;
+                overflow: hidden;
+                div {
+                    box-sizing: border-box;
+                    height: 24px;
+                    line-height: 24px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    color:#333333;
+                    margin-bottom: 10px;
+                    background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+//样式4
+.listNewsBox{
+    .listNewsStyle4 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757379542529609.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式5
+.listNewsBox{
+    .listNewsStyle5 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757386056889702.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式6
+.listNewsBox{
+    .listNewsStyle6 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    padding-left: 0px;
+                    background: none;
+                }
+            }
+        }
+    }
+}
+//样式9
+.listNewsBox{
+    .listNewsStyle9 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    &:first-child {
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.listNewsContent{display:none;}
+
+ 
+
+.min_in_1{
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                 
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+        
+         .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+
+
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+}
+
+.min_in_2{
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                 
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+
+        
+         .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+}
+
+.min_in_3{
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                .ul_li:nth-of-type(1){font-weight:bold;}
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+        
+        .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+}
+
+    .min_in_4{
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                 .ul_li:nth-of-type(1){font-weight:bold;}
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+        
+         .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+   }
+
+    .min_in_5{
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                 .ul_li:nth-of-type(1){font-weight:bold;}
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+        
+         .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+   }
+
+    .min_in_6{
+
+
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #93969A;border-top:solid 1px #DCDDDF;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px;border-bottom:solid 2px #A72213;}
+
+        .ul_box{
+
+
+                margin-top:20px;overflow:hidden;width:100%;
+
+                .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                        margin-bottom:20px;
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+
+                .ul_li:nth-last-of-type(1){margin-bottom:0px;}
+                  
+                .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+                    width:6px;height:6px;background:#F2F2F2; }
+
+        }
+        
+         .img_2_ul{overflow:hidden;margin-top:20px;width:100%;
+
+                               
+            .img_2_ul_li{width:185px;height:130px;position:relative;}
+            .img_2_ul_li:nth-of-type(odd){float:left;}
+            .img_2_ul_li:nth-of-type(even){float:right;}
+            .img_2_ul_li a{display:block;width:100%;height:100%;}
+            .img_2_ul_li_img{display:block;width:100%;height:100%;}
+            .img_2_ul_li_dot1{font-weight:bold;width:100%;height:29px;line-height:29px;display:block;position:absolute;
+                    left:0px;bottom:0px;text-align:center;color:#fff;font-size:12px;
+                    box-sizing:border-box;padding:0px 9px; 
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+            }
+         }
+        
+         .ul_img_box{width:100%;height:268px;position:relative;margin-top:13px;
+                .ul_img_box_img{display:block;width:100%;height:100%;}
+                .ul_img_dot1{
+                   
+                       height:50px;line-height:50px;color:#fff;box-sizing:border-box;
+                       font-size:14px;position:absolute;font-weight:bold;display:block;
+                       padding:0px 15px; width:100%;
+                       left:0px;bottom:0px;
+                       background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.6));
+                           word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+             
+         }
+
+   }
+
+
+</style>
+

src/views/template/style/components/list/380x610/7/3.vue

@@ -0,0 +1,389 @@
+<template>
+    <div class="listNewsBox">
+        
+
+        <div class="listNewsTitle_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
+            <span>{{name}}</span>
+        </div>
+   
+                        <div class="right_in_1" v-if="componentStyle == 1">
+
+                                            <h4 class="ul_head">
+                                                    <span class=" ">{{name}}</span>
+                                            </h4>
+
+                                            <div class="ul_box">
+                                                <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)" >
+                                                    <span class="ul_li_num">{{index+1}}</span>
+                                                    <span class="ul_li_dot1">{{ item.title }}</span>
+                                                
+                                                </div>
+                                            </div>
+
+                        </div>
+                        
+                        <div class="right_in_2" v-if="componentStyle == 2">
+
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)" >
+                                    <span class="ul_li_num">{{index+1}}</span>
+                                    <span class="ul_li_dot1">{{ item.title }}</span>
+                                </div>
+                            </div>
+
+                        </div>
+                        
+                        <div class="right_in_3" v-if="componentStyle == 3">
+
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)" >
+                                    <span class="ul_li_num">{{index+1}}</span>
+                                    <span class="ul_li_dot1">{{ item.title }}</span>
+                                </div>
+                            </div>
+
+
+
+                        </div>
+                                       
+                        <div class="right_in_4"  v-if="componentStyle == 4">
+
+                            <h4 class="ul_head">
+                                    <span class=" ">{{name}}</span>
+                            </h4>
+
+                            <div class="ul_box">
+                                <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)" >
+                                    <span class="ul_li_num">{{index+1}}</span>
+                                    <span class="ul_li_dot1">{{ item.title }}</span>
+                                </div>
+                            </div>
+
+
+
+                        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            pageData:[
+                    {year:"2021-02",day:"02",title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg"},
+                    {year:"2022-03",day:"03",title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766478289365709.jpg"},
+                    {year:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg"},
+                    {year:"2019-10",day:"10",title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479633372863.jpg"},
+                    {year:"2020-01",day:"01",title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg"},
+                    {year:"2023-04",day:"04",title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。",src:"http://192.168.1.234:19000/pre/image/jpeg/20251223/1766479649422031.jpg"}, 
+                    {year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:"http://192.168.1.234:19000/pre/image/jpeg/20251224/1766535795899808.jpg"},
+                    {year:"2016-07",day:"07",title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。",src:""},
+                    {year:"2017-08",day:"08",title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例",src:""},
+                    {year:"2018-09",day:"09",title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。",src:""},
+                    {year:"2012-11",day:"02",title:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",time:"2025-02-18",text:"美媒：“与维基百科竞争”，马斯克推出AI编写的百科全书Grokipedia",src:""},
+                ],      
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.listNewsBox {
+    position: relative;
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        span {
+            color:#A91B33;
+            height: 30px;
+            line-height: 30px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+        }
+    }
+    .listNewsContent {
+        .listNewsContentItem {
+            display: flex;
+            background: #F9FAFB;
+            align-items: flex-start;
+            margin-bottom: 20px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemLeftTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 28px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 5px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 28px;
+                    font-size: 14px;
+                }
+            }
+            .listNewsContentItemRight {
+                padding: 10px;
+                box-sizing: border-box;
+                flex: 1;
+                height: 110px;
+                overflow: hidden;
+                div {
+                    box-sizing: border-box;
+                    height: 24px;
+                    line-height: 24px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    color:#333333;
+                    margin-bottom: 10px;
+                    background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+//样式4
+.listNewsBox{
+    .listNewsStyle4 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757379542529609.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式5
+.listNewsBox{
+    .listNewsStyle5 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757386056889702.png) no-repeat left center;
+                }
+            }
+        }
+    }
+}
+//样式6
+.listNewsBox{
+    .listNewsStyle6 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    padding-left: 0px;
+                    background: none;
+                }
+            }
+        }
+    }
+}
+//样式9
+.listNewsBox{
+    .listNewsStyle9 {
+        .listNewsContentItem{
+            .listNewsContentItemRight{
+                div{
+                    &:first-child {
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.listNewsContent{display:none;}
+
+ 
+ 
+   .right_in_1{
+
+        
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #DCDDDF;border-top:solid 2px #A72213;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px; }
+
+        .ul_box{margin-top:20px;} 
+         
+        .ul_li{height:40px;line-height:40px;color:#333;font-size:18px;margin-bottom:16px;
+                text-indent:47px;position:relative;box-sizing:border-box;padding-right:8px;
+                background: linear-gradient( 90deg, #F3F3F3 0%, rgba(243,243,243,0) 100%);
+                border-radius:4px;width:100%;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }                
+        .ul_li_num{ 
+                position: absolute;
+                left: 15px;text-align:center;font-size:12px;color:#fff;
+                top: 9px;font-style:italic;text-indent:0px;
+                width: 22px; 
+                height: 22px;line-height:22px;
+                background:url(http://192.168.1.234:19000/pre/image/png/20251215/1765758182984957.png) no-repeat left 0px;
+                background-size:100% 100%;
+
+
+        }
+        .ul_li:nth-of-type(1) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758074161458.png);}
+        .ul_li:nth-of-type(2) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758137778437.png);}
+        .ul_li:nth-of-type(3) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758159548506.png);}
+
+        .ul_li:nth-last-of-type(1){margin-bottom:0px;}                
+        
+   }
+
+   .right_in_2{
+        
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #DCDDDF;border-top:solid 2px #A72213;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px; }
+
+        .ul_box{margin-top:20px;} 
+         
+        .ul_li{height:40px;line-height:40px;color:#333;font-size:18px;margin-bottom:16px;
+                text-indent:47px;position:relative;box-sizing:border-box;padding-right:8px;
+               
+                border-radius:4px;width:100%;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }                
+                .ul_li_num{ 
+                position: absolute;
+                left: 15px;text-align:center;font-size:12px;color:#fff;
+                top: 9px;font-style:italic;text-indent:0px;
+                width: 22px;
+                height: 22px;line-height:22px;
+                background:url(http://192.168.1.234:19000/pre/image/png/20251215/1765758182984957.png) no-repeat left 0px;
+                background-size:100% 100%;
+        }
+        .ul_li:nth-of-type(1) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758074161458.png);}
+        .ul_li:nth-of-type(2) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758137778437.png);}
+        .ul_li:nth-of-type(3) .ul_li_num{ background-image: url(http://192.168.1.234:19000/pre/image/png/20251215/1765758159548506.png);}
+
+
+        .ul_li:nth-last-of-type(1){margin-bottom:0px;}                
+        
+   }
+
+   .right_in_3{
+        
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #DCDDDF;border-top:solid 2px #A72213;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px; }
+
+        .ul_box{margin-top:20px;} 
+         
+        .ul_li{height:40px;line-height:40px;color:#333;font-size:18px;margin-bottom:16px;
+                text-indent:47px;position:relative;box-sizing:border-box;padding-right:8px;
+               background: linear-gradient( 90deg, #F3F3F3 0%, rgba(243,243,243,0) 100%);
+                border-radius:4px;width:100%;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }                
+        .ul_li_num{ 
+                position: absolute;
+                left: 15px;text-align:center;font-size:12px;color:#fff;
+                top: 9px;font-style:italic;text-indent:0px;
+                width: 22px;border-radius:11px;
+                height: 22px;line-height:22px;
+                background:#BCBCBC;
+        }
+
+        .ul_li:nth-of-type(1) .ul_li_num{ background:#FF4725; }
+        .ul_li:nth-of-type(2) .ul_li_num{ background:#FF7125; }
+        .ul_li:nth-of-type(3) .ul_li_num{ background:#FFAE25; }
+
+
+
+        .ul_li:nth-last-of-type(1){margin-bottom:0px;}                
+        
+   }
+
+   .right_in_4{
+        
+        width:100%;
+        .ul_head{height:47px;border-bottom:solid 1px #DCDDDF;border-top:solid 2px #A72213;margin:0px;box-sizing:border-box;}
+        .ul_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                        font-weight:bold;color:#A72213;font-size:20px; }
+
+        .ul_box{margin-top:20px;} 
+         
+        .ul_li{height:40px;line-height:40px;color:#333;font-size:18px;margin-bottom:16px;
+                text-indent:47px;position:relative;box-sizing:border-box;padding-right:8px;
+                border-radius:4px;width:100%;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }                
+        .ul_li_num{ 
+                position: absolute;
+                left: 15px;text-align:center;font-size:12px;color:#fff;
+                top: 9px;font-style:italic;text-indent:0px;
+                width: 22px;border-radius:11px;
+                height: 22px;line-height:22px;
+                background:#BCBCBC;
+        }
+
+        .ul_li:nth-of-type(1) .ul_li_num{ background:#FF4725; }
+        .ul_li:nth-of-type(2) .ul_li_num{ background:#FF7125; }
+        .ul_li:nth-of-type(3) .ul_li_num{ background:#FFAE25; }
+
+
+
+        .ul_li:nth-last-of-type(1){margin-bottom:0px;}                
+        
+   }
+
+</style>
+

src/views/template/style/components/list/900x1400/7/1.vue

@@ -0,0 +1,242 @@
+<template>
+
+    <div>
+
+        <div class="" v-if="componentStyle == 1">
+
+            <div class="list_left_li_1" v-for="item,index in pageData ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <div class="list_left_li_time"> {{ item.time }}</div>   
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+
+        </div>
+
+        <div class="" v-if="componentStyle == 2">
+
+            <div class="list_left_li_2" v-for="item,index in pageData">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <div class="list_left_li_time"> {{ item.time }}</div>   
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+
+        </div>
+
+        <div class="" v-if="componentStyle == 3">
+
+            <div class="list_left_li_3" v-for="item,index in pageData">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <div class="list_left_li_time"> {{ item.time }}</div>   
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+
+        </div>
+
+        <div class="" v-if="componentStyle == 4">
+
+            <div class="list_left_li_3" v-for="item,index in pageData">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <div class="list_left_li_time"> {{ item.time }}</div>   
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+
+        </div>
+            
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            pageData:[
+                {title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措"},
+                {title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础。"},
+                {title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。"},
+                {title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。"},
+                {title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。"},
+                {title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性"},
+                {title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。"},
+                {title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例"},
+                {title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。"},
+                {title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
+                  
+            ]
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+     .list_left_li_1{ box-sizing:border-box;
+        
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:dashed 1px #999;
+
+        .list_left_li_a{display:block;width:100%;height:100%;}   
+         .list_left_li_head{height:24px;margin-top:20px;}
+         .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+         .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                            font-weight:bold;text-indent:16px;margin:0;
+                            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                        }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+         .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+
+     .list_left_li_2{ box-sizing:border-box;
+
+        
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:solid 1px #999;
+
+        .list_left_li_a{display:block;width:100%;height:100%;}   
+         .list_left_li_head{height:24px;margin-top:20px;}
+         .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+         .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                            font-weight:bold;text-indent:16px;margin:0;
+                            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                        }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+         .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+     
+     .list_left_li_3{ box-sizing:border-box;
+               
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+     
+     .list_left_li_4{ box-sizing:border-box;
+               
+            width:100%;overflow:hidden;height:140px;
+            
+            border:solid 1px rgba(0,0,0,0);
+             
+            border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+             .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                    width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+            }
+
+            &:nth-child(1){
+                height:120px; 
+            }
+            &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+     }
+     
+</style>
+

src/views/template/style/components/list/962x1467/7/1.vue

@@ -0,0 +1,293 @@
+<template>
+    <div>
+
+        <div class="box_1" v-if="componentStyle == 1">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+        <div class="box_2" v-if="componentStyle == 2">
+
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+        <div class="box_3" v-if="componentStyle == 3">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+        <div class="box_4" v-if="componentStyle == 4">
+            
+            <h4 class="list_right_head">
+                    <span class=" ">本招聘列表</span>
+            </h4>
+            
+            <div class="list_left_li_1" v-for="item,index in pageData_1 ">
+
+                <a class="list_left_li_a" title="">
+                    <div class="list_left_li_head">
+                        <h4 class="list_left_li_h4">{{item.title}}</h4>     
+                    </div>
+
+                    <div class="list_left_li_dot3"> {{item.text}}</div>
+
+                </a>
+    
+            </div>
+ 
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            pageData_1:[
+                {title:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措",time:"2025-02-21",text:"习近平新时代中国特色社会主义思想教育培训走深走实的重大举措习近平新时代中国特色社会主义思想教育培训走深走实的重大举措"},
+                {title:"高市早苗内阁成立　兼顾力量平衡且保守色彩浓厚",time:"2025-02-20",text:"在主要岗位上，高市任命与其政治理念相近的保守派人士、前防卫大臣木原稔出任官房长官。自民党前干事长茂木敏充、前农林水产大臣小泉进次郎和前官房长官林芳正分别出任外务大臣、防卫大臣和总务大臣。他们此前在自民党总裁选举中曾与高市竞争。舆论认为，高市此举意在兼顾党内派阀平衡、促进内部团结，从而巩固自身的执政基础。"},
+                {title:"中国援老医疗专家完成老挝首例FCB球囊视网膜脱离复位术",time:"2025-02-19",text:"人民网曼谷10月17日电 （记者杨一）万象消息：中国军队第十三批援老医疗队专家近日在老挝首都万象103医院，采用经中 老双方多人跨境传递带来的中国最新专利FCB球囊，成功为一名老挝患者实施了视网膜脱离复位手术。"},
+                {title:"美国高盛集团等研究报告显示——关税政策对美国消费者影响日渐凸显",time:"2025-02-18",text:"高盛集团的报告还指出，美国政府通过一系列关税及贸易限制措施打乱了全球贸易秩序，尽管美国政府官员坚称贸易伙伴会承 担关税成本，但实际情况是美国进口商需向美国海关及边境保护局缴纳关税，而当企业将关税成本转嫁时，消费者将面临更高 的商品价格。"},
+                {title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。"},
+                {title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性"},
+                {title:"国际观察：心手相连、命运与共，中拉妇女合作契若金兰",time:"2025-02-20",text:"30年前，北京世界妇女大会成功举行，“以行动谋求平等、发展与和平”的共识响彻会场、激荡世界。30年来，中国始终恪 守承诺、践行责任担当，在推动自身妇女事业取得历史性成就的同时，也为包括拉美和加勒比在内的全球妇女事业发展作出重 要贡献。时隔30年，全球妇女峰会再次回到北京，这既是世界对中国的肯定，也是对中国的期许。"},
+                {title:"严厉打击编造传播网络谣言！公安部公布5起典型案例",time:"2025-02-19",text:"严厉打击编造传播网络谣言！公安部公布5起典型案例"},
+                {title:"国际观察：全球发展倡议为重振全球发展事业注入新动能",time:"2025-02-18",text:"近日，中方在纽约联合国总部主办全球发展倡议高级别会议，宣布携手各方落实全球发展倡议的新举措。"},
+                {title:"津”彩上合｜各方高度评价天津峰会：推动构建“上合大家庭”更加美好的未来",time:"2025-02-17",text:"2025年上合组织峰会于8月31日至9月1日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
+                  
+            ],
+ 
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+ 
+
+    .box_1{
+
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:bold;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+
+    .box_2{
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:bold;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+
+                
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+    
+    .box_3{
+
+
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:dashed 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+    .box_4{
+                width:100%;overflow:hidden;
+                .list_right_head{height:47px; 
+                        border-top:solid 2px #A72213;
+                        border-bottom:solid 1px #DCDDDF;
+                        margin:0px;box-sizing:border-box;}
+                .list_right_head *{float:left;height:100%;line-height:47px;box-sizing:border-box;
+                                font-weight:bold;color:#A72213;font-size:20px;}
+
+                
+                    .list_left_li_1{ box-sizing:border-box;
+            
+                    width:100%;overflow:hidden;height:142px;
+                    
+                    border:solid 1px rgba(0,0,0,0);
+                    
+                    border-bottom:solid 1px #999;
+
+            .list_left_li_a{display:block;width:100%;height:100%;}   
+
+            .list_left_li_head{height:24px;margin-top:20px;}
+            .list_left_li_time{float:right;height:24px;line-height:24px;color:#999;font-size:18px;margin-left:20px;}
+            .list_left_li_h4{height:24px;display:block;line-height:24px;color:#333;font-size:18px;position:relative;
+                                font-weight:normal;text-indent:16px;margin:0;
+                                display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                            }
+                .list_left_li_h4::after{content:"";position:absolute;top:10px;left:0px;
+                                        width:6px;height:6px;background:#F2F2F2; }       
+
+
+            .list_left_li_dot3{height:63px;line-height:21px;color:#999;font-size:16px;width:100%;
+                                    box-sizing:border-box;padding-left:16px;margin-top:15px;
+                                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
+                }
+                &:nth-child(1) .list_left_li_head{ margin-top:0px;} 
+
+        }
+                    
+    }
+
+
+</style>
+

src/views/template/style/components/main/960x1170/7/1.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div :class="'mainTopBg' + this.$store.state.template.editWebsiteClass"></div>
+        <div :class="'mainBox' + this.$store.state.template.editWebsiteClass">
+            <h4 class="mainTitle_h4">农副产品供销网简介</h4>
+            <div class="mainBox_content">
+                
+                <div>农副产品供销网是全国三农信息一体化应用平台----中农兴业网团核心网站之一，是贯彻落实国家《2006-2020年国家信息化发展战略》总体部署和农业部《全国农业和农村信息化建设总体框架(2007-2015)》的重点工程。农副产品供销网自2006年创建以来，社会效益和会员经济效益贡献突出。</div>
+                <div>农副产品供销网是由农业部信息中心、中国互联网协会、中国电子商务协会通过社会公众评选和行业专家评审，认定的中国农业百强网站--农副产品类网站全国10强之一。共设频道43个，各类导航栏目244个，各类导引栏目54个。其中“农产信息”频道和“农副商城”版块为核心传递全国农副产品商贸资讯的产购销一体化应用平台，同时也是覆盖全国所有乡镇及行政村的农副产品商贸门户网站。在百度、360等众多搜索引擎网站中自然排名笫一。</div>
+                <div>农副产品供销网是为全国各地农副产品市场传递、交流、发布资讯信息，以及为全国各类农民组织提供全方位农副产品资讯的开放式信息化互动平台。旨在科学、系统、真实、准确地反映并服务于全国农副产品市场的资讯信息，并使之快捷有效地与全社会互动交流。</div>
+                <div>农副产品供销网采用会员制模式，细分为乡村行政会员、生产制造会员、商贸流通会员、行政职能会员及与农副产品市场相关的其它类会员，各会员分别拥有近百个农副产品动态信息和电子商贸栏目的信息发布及管理平台，是面向全国的开放式权威农副产品电子商务平台;特别是其独特的群会员间信息封闭式互动交流平台，可实现一对一、一对多、多对多等多项会员之间的信息互动交流，充分实现了按农副产品市场体系的独立完整、安全高效的信息化互动。有极高的实用值价和社会综合效益。</div>
+                <div>农副产品供销网面向全国科教文单位、媒体和各级政府职能部门采用公益型会员制的管理模式，以实名制免费注册会员，其公益型会员拥有近百个栏目可自主发布相应资讯信息。旨在为政府涉农职能部门、科研技术单位、文化教育单位、传媒机构提供与全国广大乡村及全国各类农副产品生产及供销一体化的信息交流服务平台。</div>
+                <div>农副产品供销网向全国各类涉农经济组织及农户采用直补型会员制的管理模式，即中农兴业网团会员，以实名制补贴式注册会员，同时会员同步拥有7个网站数百个栏目可自主发布相应资讯信息。旨在为上述会员与全社会交流提供多角度全方位信息一体化平台。从而更好地为我国60余万个行政村农户及各类涉农组织提供全方位农副产品资讯信息。</div>
+                <div>农副产品供销网在各地县政府所在地设立中农兴业资讯中心及全国三农信息一体化工作站，并同时无偿向县以上党政机关与农副产品相关各部门提供三农信息发布应用平台、以及本县所属党政机关各个部门会员、乡镇政府会员、行政村会员的信息一体化工作交流互动平台，为全国各地县政府职能机构及其县域经济发展提供三农信息县域一体化服务。</div>
+            </div>
+                    
+        </div>
+        <div :class="'mainBottomBg' + this.$store.state.template.editWebsiteClass"></div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+//样式1==皮肤7
+.mainTitle_h4 {
+    font-size: 26px;
+    color:#A72213;
+    height: 47px;line-height: 47px;
+    font-weight: bold;
+    border-top: 2px solid #A72213;
+    border-bottom: 1px solid #D9D9D9;
+    margin-bottom: 30px;
+}
+.mainBox_content{color:#333;line-height:36px;font-size:20px;}
+
+   
+</style>

src/views/template/style/components/menu/1200x100/7.vue

@@ -0,0 +1,764 @@
+<template>
+    <div>
+        <div class="channelMenuTitle_skin5" v-if="componentStyle == 1 || componentStyle == 2 || componentStyle == 3">
+            一级导航名称
+        </div>
+        <!--样式1-->
+        <div class="channelMenuList_skin5" v-if="componentStyle == 1">
+            <div v-for="item in pageData">
+                {{ item.title }}
+            </div>
+        </div>
+        <!--样式2-->
+        <div class="channelMenuList_skin5 menuListStyle2" v-if="componentStyle == 2">
+            <div v-for="item in pageData">
+                {{ item.title }}
+            </div>
+        </div>
+        <!--样式3-->
+        <div class="channelMenuList_skin5 menuListStyle3" v-if="componentStyle == 3">
+            <div class="active">
+                二级导航名称1
+            </div>
+            <div v-for="item in pageData.slice(1, 8)">
+                {{ item.title }}
+            </div>
+        </div>
+
+        <!--样式4-->
+        <div class="menuListStyle4" v-if="componentStyle == 4">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式5-->
+        <div class="menuListStyle4 menuListStyle5" v-if="componentStyle == 5">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式6-->
+        <div class="menuListStyle4 menuListStyle6" v-if="componentStyle == 6">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式7-->
+        <div class="menuListStyle7" v-if="componentStyle == 7">
+            <div class="channelMenuListTitle"></div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式8-->
+        <div class="menuListStyle7 menuListStyle8" v-if="componentStyle == 8">
+            <div class="channelMenuListTitle"></div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式9-->
+        <div class="menuListStyle7 menuListStyle9" v-if="componentStyle == 9">
+            <div class="channelMenuListTitle"></div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式10-->
+        <div class="menuListStyle7 menuListStyle9 menuListStyle8" v-if="componentStyle == 10">
+            <div class="channelMenuListTitle"></div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航名称1
+                </div>
+                <div v-for="item in pageData.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式11-->
+        <div class="menuListStyle11 " v-if="componentStyle == 11">
+            <div class="channelMenuListTitle">
+                <span>新闻资讯</span>
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div v-for="item in pageData1">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式12-->
+        <div class="menuListStyle12" v-if="componentStyle == 12">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式13-->
+        <div class="menuListStyle13" v-if="componentStyle == 13">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式14-->
+        <div class="menuListStyle14" v-if="componentStyle == 14">
+
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式15-->
+        <div class="menuListStyle15" v-if="componentStyle == 15">
+
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式16-->
+        <div class="menuListStyle16" v-if="componentStyle == 16">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+        <!--样式17-->
+        <div class="menuListStyle17" v-if="componentStyle == 17">
+            <div class="channelMenuListTitle">
+                新闻资讯
+            </div>
+            <div class="hannelMenuListFloatMenu">
+                <div class="active">
+                    二级导航标题
+                </div>
+                <div v-for="item in pageData2.slice(1, 8)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        componentStyle: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            pageData: [
+                { title: "二级导航名称1" },
+                { title: "二级导航名称2" },
+                { title: "二级导航名称3" },
+                { title: "二级导航名称4" },
+                { title: "二级导航名称5" },
+                { title: "二级导航名称6" },
+                { title: "二级导航名称7" },
+                { title: "二级导航名称8" }
+            ],
+            pageData1: [
+                { title: "三农新闻" },
+                { title: "热点话题" },
+                { title: "人物访谈" },
+                { title: "企业风采" },
+                { title: "国际风采" },
+                { title: "专题报道" },
+                { title: "农资动态" },
+                { title: "品牌快讯" },
+            ],
+            pageData2: [
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" },
+                { title: "二级导航标题" }
+            ],
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.channelMenuTitle_skin5 {
+    width: 1200px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 24px;
+    color: #A72213;
+    font-weight: bold;
+    text-align: center;
+    background: url('http://192.168.1.234:19000/pre/image/png/20251216/1765875852538846.png') no-repeat center center;
+    margin-bottom: 25px;
+}
+
+.channelMenuList_skin5 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #333;
+    border-bottom: 2px solid #A72213;
+
+    div {
+        font-size: 16px;
+        font-weight: bold;
+        width: 120px;
+        height: 22px;
+        height: 40px;
+        line-height: 22px;
+
+        &:first-child {
+            color: #A72213;
+        }
+    }
+}
+
+//样式2
+.menuListStyle2 {
+    border-bottom: 0;
+}
+
+//样式3
+.menuListStyle3 {
+    border-bottom: 0;
+    div{text-align:center;}
+    .active {
+        border-bottom: 2px solid #A72213;
+    }
+}
+
+//样式4
+.menuListStyle4 {
+    margin-top: 22px;
+    position: relative;
+
+    .channelMenuListTitle {
+        font-size: 24px;
+        font-weight: bold;
+        height: 54px;
+        color: #A72213;
+        border-bottom: 2px solid #A72213;
+    }
+
+    .hannelMenuListFloatMenu {
+        position: absolute;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 12px;
+        color: #333333;
+        font-weight: bold;
+        top: 7px;
+        right: 0;
+
+        div {
+            width: 128px;
+            text-align: center;
+            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762826937324284.png) no-repeat right 2px;
+
+            &:last-child {
+                background: none;
+            }
+
+            &.active {
+                color: #A72213
+            }
+        }
+    }
+}
+
+//样式5
+.menuListStyle5 {
+    margin-top:34px;
+    .channelMenuListTitle {
+        border-bottom: none;
+    }
+}
+
+//样式6
+.menuListStyle6 {
+    .channelMenuListTitle {
+        width: 100px;
+        border-bottom: 2px solid #A72213;
+    }
+}
+
+//样式7
+.menuListStyle7 {
+    margin-top: 30px;
+    position: relative;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #E4E4E4;
+
+    .channelMenuListTitle {
+        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765872781316856.png) no-repeat center center;
+        width: 200px;
+        height: 40px;
+    }
+
+    .hannelMenuListFloatMenu {
+        position: absolute;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 12px;
+        color: #333333;
+        font-weight: bold;
+        top: 12px;
+        right: 0;
+
+        div {
+            width: 123px;
+            font-size: 16px;
+            text-align: center;
+            font-weight: bold;
+
+            &:last-child {
+                background: none;
+            }
+
+            &.active {
+                color: #A72213
+            }
+        }
+    }
+}
+
+//样式8
+.menuListStyle8 {
+    border-bottom: none;
+}
+
+//样式9
+.menuListStyle9 {
+    .hannelMenuListFloatMenu {
+        div {
+            width: 123px;
+            font-size: 16px;
+            text-align: center;
+            font-weight: bold;
+            height: 43px;
+
+            &:last-child {
+                background: none;
+            }
+
+            &.active {
+                color: #A72213;
+                border-bottom: 2px solid #A72213;
+            }
+        }
+    }
+}
+
+//样式11
+.menuListStyle11 {
+    width: 1200px;
+    height: 61px;
+    display: flex;
+    background-color: #A72213;
+    color: #fff;
+    margin-top: 20px;
+
+    .channelMenuListTitle {
+        width: 144px;
+        height: 51px;
+        text-align: center;
+        background-color: #fff;
+        color: #A72213;
+        margin-top: 10px;
+        margin-left: 35px;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+
+        span {
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            padding: 10px 0;
+            box-sizing: border-box;
+            border-bottom: 2px solid #A72213;
+        }
+    }
+
+    .hannelMenuListFloatMenu {
+        width: 925px;
+        height: 21px;
+        margin-top: 23px;
+        padding: 0 50px 0 45px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 16px;
+        font-weight: bold;
+
+        div {
+            width: 122px;
+            height: 21px;
+            text-align: center;
+            cursor: pointer;
+
+            &.active {
+                color: #A72213
+            }
+        }
+    }
+}
+
+//样式12
+.menuListStyle12 {
+    margin-top: 12px;
+    position: relative;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #d9d9d9;
+    display: flex;
+
+    .channelMenuListTitle {
+        width: 153px;
+        height: 52px;
+        line-height: 52px;
+        text-align: center;
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873231599082.png) no-repeat left 0px;
+    }
+
+    .hannelMenuListFloatMenu {
+        margin-left: 15px;
+        width: 1030px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        color: #333333;
+        font-weight: bold;
+        height: 52px;
+        line-height: 60px;
+
+        div {
+            width: 96px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+
+            &.active {
+                color: #A72213;
+                border-bottom: 2px solid #A72213;
+            }
+        }
+    }
+}
+
+//样式13
+.menuListStyle13 {
+    margin-top: 24px;
+    position: relative;
+    padding-bottom: 20px;
+    display: flex;
+
+    .channelMenuListTitle {
+        width: 160px;
+        height: 50px;
+        line-height: 55px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873422831357.png) no-repeat left 0px;
+                background-size:100% 100%;
+    }
+
+    .hannelMenuListFloatMenu {
+        margin-left: 15px;
+        width: 1030px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        color: #333333;
+        font-weight: bold;
+        height: 52px;
+        line-height: 60px;
+
+        div {
+            width: 96px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+        }
+    }
+}
+
+//样式14
+.menuListStyle14 {
+    margin-top: 17px;
+    position: relative;
+    padding-bottom: 20px;
+    display: flex;
+
+    .channelMenuListTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 182px;
+        height: 67px;
+        line-height: 67px;
+        text-align: center;
+        font-size: 22px;
+        font-weight: bold;
+        color: #fff;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765875208713581.png) no-repeat left 0px;
+    }
+
+    .hannelMenuListFloatMenu {
+        margin-left: 166px;
+        margin-top: 11px;
+        width: 1035px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        color: #333333;
+        height: 55px;
+        line-height: 60px;
+        background-color: #fafafa;
+
+        div {
+            width: 96px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762837676175916.png) no-repeat right 22px;
+
+            &:last-child {
+                background: none;
+            }
+        }
+    }
+}
+
+//样式15
+.menuListStyle15 {
+    width: 1200px;
+    height: 60px;
+    margin-top: 24px;
+    position: relative;
+    padding-bottom: 20px;
+    display: flex;
+    background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765875445449836.png) no-repeat left 0px;
+
+
+    .channelMenuListTitle {
+        width: 180px;
+        height: 50px;
+        line-height: 55px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+    }
+
+    .hannelMenuListFloatMenu {
+        margin-left: 15px;
+        width: 1030px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        color: #A72213;
+        font-weight: bold;
+        height: 52px;
+        line-height: 60px;
+
+        div {
+            width: 96px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+        }
+    }
+}
+
+//样式16
+.menuListStyle16 {
+    width: 1200px;
+    height: 44px;
+    margin-top: 24px;
+    position: relative;
+    display: flex;
+    border-bottom: 2px solid #A72213;
+
+    .channelMenuListTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 188px;
+        height: 44px;
+        line-height: 44px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873847989871.png) no-repeat left 0px;
+    }
+
+    .hannelMenuListFloatMenu {
+        margin-left: 175px;
+        width: 1030px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        color: #333333;
+        font-weight: bold;
+        height: 45px;
+        line-height: 45px;
+
+        div {
+            width: 96px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+        }
+    }
+}
+
+//样式17
+.menuListStyle17 {
+    width: 1200px;
+    height: 46px;
+    margin-top: 24px;
+    position: relative;
+    display: flex;
+    border-bottom: 2px solid #A72213;
+
+    .channelMenuListTitle {
+        width: 120px;
+        height: 46px;
+        line-height: 46px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        background-color: #A72213;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+
+    .hannelMenuListFloatMenu {
+        padding-left: 20px;
+        width: 1080px;
+        height: 46px;
+        line-height: 46px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        font-size: 16px;
+        font-weight: bold;
+        color: #333333;
+        background-color: #fafafa;
+        border-top: 1px solid #d9d9d9;
+        border-right: 1px solid #d9d9d9;
+
+
+        div {
+            width: 98px;
+            padding: 0 15px;
+            padding-bottom: 9px;
+            text-align: center;
+            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762839905257434.png) no-repeat right 15px;
+
+            &:last-child {
+                background: none;
+            }
+        }
+    }
+}
+</style>
+ 

src/views/template/style/components/menu/1200x187/1.vue

@@ -22,6 +22,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 </template>
 

src/views/template/style/components/menu/1200x187/7/1.vue

@@ -0,0 +1,290 @@
+<template>
+    <div> 
+
+        <!-- 样式7 --> 
+        <div :class="'menuStyle menuStyle' + this.$store.state.template.editWebsiteClass" >
+                 
+                <div class="box1">
+                                <div :class="['menuBoxBg1', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                                    <div class="menuBox" ref="menuBox">
+                                        <div @click="banUse">首页</div>
+                                        <div v-for="item in this.$store.state.template.webSiteMenu1" @click="banUse">
+                                            {{ item.alias }}
+                                        </div>
+                                    </div>
+                                </div>
+                </div>
+
+                <div class="box2">
+                    
+                                <div :class="['menuBoxBg2', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                                    <div class="menuBox" ref="menuBox">
+                                        <div v-for="item in this.$store.state.template.webSiteMenu2" @click="banUse">
+                                            {{ item.alias }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                </div>
+
+        </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+        banUse() {
+            this.$store.commit('template/alertMessage');
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.menuStyle {
+
+    width: 100%;
+    height: 187px;
+
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+
+    .box1 {
+        width: 100%;
+        height: 64px;
+
+        .menuBoxBg1 {
+            width: 1200px;
+            height: 64px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .menuBox {
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                width: 100%;
+
+                div {
+                    width: 12.5%;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    font-size: 16px;
+                    height: 22px;
+                    line-height: 22px;
+                    text-align: center;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #fff;
+                    // margin-bottom: 15px;
+
+                    /* 当是第17个及以后的div时去掉margin-bottom */
+                    &:nth-child(n+17) {
+                        margin-bottom: 0;
+                    }
+
+                    /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                    &:nth-child(8n+1) {
+                        border-left: none;
+                    }
+
+                    /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                    &:nth-child(8n) {
+                        border-right: none;
+                    }
+
+                    /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .box2 {
+        width: 100%;
+        height: 103px;
+
+        .menuBoxBg2 {
+            margin-top: 20px;
+            width: 1200px;
+            height: 103px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .menuBox {
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                width: 100%;
+
+                div {
+                    width: 12.5%;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    font-size: 16px;
+                    height: 38px;
+                    line-height: 38px;
+                    text-align: center;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #333333;
+                    // margin-bottom: 15px;
+
+                    /* 当是第17个及以后的div时去掉margin-bottom */
+                    &:nth-child(n+17) {
+                        margin-bottom: 0;
+                    }
+
+                    /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                    &:nth-child(8n+1) {
+                        border-left: none;
+                    }
+
+                    /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                    &:nth-child(8n) {
+                        border-right: none;
+                    }
+
+                    /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+
+            input {
+                margin-right: 10px;
+            }
+
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}
+
+//样式5
+@style5color: #3848a0;
+@style5color2: #fafafa;
+// @style5BorderRight: #00796B 1px solid;
+// @style5BorderLeft: #00BCD4 1px solid;
+
+//样式5
+@style7color: #9C130A;
+@style7color2: #fafafa;
+
+
+
+
+.menuStyle5 {
+
+    .box1 {
+        background: @style5color;
+
+        .menuBoxBg1 {
+            background: @style5color;
+
+            .menuBox {
+                div {
+                    background: @style5color;
+                }
+            }
+        }
+    }
+
+    .box2 {
+        margin-top: 20px;
+        background: @style5color2;
+
+        .menuBoxBg2 {
+            background: @style5color2;
+
+            .menuBox {
+                div {
+                    background: @style5color2;
+                }
+            }
+        }
+    }
+}
+
+.menuStyle7 {
+     
+    .box1 {
+        background: @style7color;
+
+        .menuBoxBg1 {
+            background: @style7color;
+
+            .menuBox {
+                div {
+                    background: @style7color;
+                }
+            }
+        }
+    }
+
+    .box2 {
+         
+        background: @style7color2;
+
+        .menuBoxBg2 {
+            background: @style7color2;
+
+            .menuBox {
+                div {
+                    background: @style7color2;
+                }
+            }
+        }
+    }
+}
+ 
+
+</style>

src/views/template/style/components/menu/190x368/7/1.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+
+        <!--皮肤7-->
+
+        <div class="box_1" v-if="componentStyle==1">
+            <h4 class="box_h4">导航列表</h4>
+
+            <div class="btn_box">
+                <div class="left_btn">关于我们</div>
+                <div class="left_btn">本网概况</div>
+                <div class="left_btn left_btn_only">联系我们</div>
+                <div class="left_btn">网站地图</div>
+                <div class="left_btn">会员服务</div>
+            </div>
+
+        </div>
+
+        <div class="box_2" v-if="componentStyle==2">
+            <h4 class="box_h4">导航列表</h4>
+
+            <div class="btn_box">
+                <div class="left_btn">关于我们</div>
+                <div class="left_btn">本网概况</div>
+                <div class="left_btn left_btn_only">联系我们</div>
+                <div class="left_btn">网站地图</div>
+                <div class="left_btn">会员服务</div>
+            </div>
+
+        </div>
+
+        <div class="box_3" v-if="componentStyle==3">
+            <h4 class="box_h4">导航列表</h4>
+
+            <div class="btn_box">
+                <div class="left_btn">关于我们</div>
+                <div class="left_btn">本网概况</div>
+                <div class="left_btn left_btn_only">联系我们</div>
+                <div class="left_btn">网站地图</div>
+                <div class="left_btn">会员服务</div>
+            </div>
+
+        </div>
+
+        <div class="box_4" v-if="componentStyle==4">
+            <h4 class="box_h4">导航列表</h4>
+
+            <div class="btn_box">
+                <div class="left_btn">关于我们</div>
+                <div class="left_btn">本网概况</div>
+                <div class="left_btn left_btn_only">联系我们</div>
+                <div class="left_btn">网站地图</div>
+                <div class="left_btn">会员服务</div>
+            </div>
+
+        </div>
+   
+   
+   </div>
+</template>
+
+<script>
+export default {
+    props: {
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+ 
+
+
+//皮肤7-样式
+
+.box_1{
+    width:100%;overflow:hidden;
+
+    .box_h4{line-height:60px;height:60px;text-align:center;
+                color:#fff;font-size:20px;margin:0px;background:#A72213;}
+    .btn_box{margin-top:10px;border:solid 1px #eee;border-bottom:solid 2px #A72213;box-sizing:border-box;}
+    .left_btn{line-height:59px;height:59px;width:100%; font-weight:bold;box-sizing:border-box;
+                 border-bottom:solid 1px #eee;text-align:center;font-size:16px;color:#333;}
+    .left_btn_only{ background:#A72213;color:#fff; }
+}
+
+.box_2{
+    width:100%;overflow:hidden;
+
+    .box_h4{line-height:60px;height:60px;text-align:center;border:solid 1px #eee;
+                color:#A72213;font-size:20px;margin:0px; font-weight:bold;}
+    .btn_box{margin-top:10px;border:solid 1px #eee;border-bottom:solid 2px #A72213;box-sizing:border-box;}
+    .left_btn{line-height:59px;height:59px;width:100%; font-weight:bold;box-sizing:border-box;
+                 border-bottom:solid 1px #eee;text-align:center;font-size:16px;color:#333;}
+    .left_btn_only{ background:#A72213;color:#fff; }
+}
+
+
+.box_3{
+    width:100%;overflow:hidden;
+
+    .box_h4{line-height:60px;height:60px;text-align:center;
+                color:#fff;font-size:20px;margin:0px;background:#A72213;}
+    .btn_box{margin-top:10px;border:solid 1px #eee;border-bottom:solid 2px #A72213;box-sizing:border-box;
+                        background:#f9fafb;}
+    .left_btn{line-height:59px;height:59px;width:100%; font-weight:bold;box-sizing:border-box;
+                 border-bottom:solid 1px #eee;text-align:center;font-size:16px;color:#333;}
+    .left_btn_only{ background:#A72213;color:#fff; }
+}
+
+
+.box_4{
+    width:100%;overflow:hidden;
+
+    .box_h4{line-height:60px;height:60px;text-align:center;border:solid 1px #eee;
+                color:#A72213;font-size:20px;margin:0px; font-weight:bold;}
+    .btn_box{margin-top:10px;border:solid 1px #eee;border-bottom:solid 2px #A72213;box-sizing:border-box;
+                    background:#f9fafb;}
+    .left_btn{line-height:59px;height:59px;width:100%; font-weight:bold;box-sizing:border-box;
+                 border-bottom:solid 1px #eee;text-align:center;font-size:16px;color:#333;}
+    .left_btn_only{ background:#A72213;color:#fff; }
+}
+
+
+</style>

src/views/template/style/components/search/700x46/7/1.vue

@@ -0,0 +1,242 @@
+<template>
+    <div>
+        <!--样式1-->
+        <div class="searchInputBox" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 1">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                搜索
+            </div>
+        </div>
+        <!--样式2-->
+        <div class="searchInputBox searchInputStyle2" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 2">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                搜索
+            </div>
+        </div>
+        <!--样式3-->
+        <div class="searchInputBox searchInputStyle3" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 3">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                搜索
+            </div>
+        </div>
+        <!--样式4-->
+        <div class="searchInputBox searchInputStyle4" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 4">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                搜索
+            </div>
+        </div>
+        <!--样式5-->
+        <div class="searchInputBox searchInputStyle5" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 5">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                搜索
+            </div>
+        </div>
+        <!--样式6-->
+        <div class="searchInputBox searchInputStyle6" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 6">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453899633083.png" alt="">
+            </div>
+        </div>
+        <!--样式7-->
+        <div class="searchInputBox searchInputStyle7" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 7">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+                <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453860334284.png" alt="">
+            </div>
+        </div>
+        <!--样式8-->
+        <div class="searchInputBox searchInputStyle7" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 8">
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+                <img src="http://192.168.1.234:19000/pre/image/png/20251223/176645388251004.png" alt="">
+            </div>
+        </div>
+        <!--样式9-->
+        <div class="searchInputBox searchInputStyle9" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 9">    
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                <span>搜索</span> 
+                <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453899633083.png" alt="">
+            </div>
+        </div>
+        <!--样式10-->
+        <div class="searchInputBox searchInputStyle10" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 10">    
+            <div class="searchInputBorder">
+                <input type="text" placeholder="请输入搜索内容" />
+            </div>
+            <div class="searchBtn">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453899633083.png" alt="">
+                <span>搜索</span> 
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.searchInputBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .searchInputBorder {
+        width: 582px;
+        height: 46px;
+        input {
+            width: 582px;
+            height: 46px;
+            font-size:16px;
+            color:#333333;
+            border:1px solid #E6E6E6;
+            outline: none;
+            box-sizing: border-box;
+            padding:20px 13px;
+        }
+    }
+    .searchBtn {
+        width: 120px;
+        height: 46px;
+        text-align: center;
+        line-height: 46px;
+        color:#fff;
+        background: #A72213;
+        cursor: pointer;
+    }
+}
+//样式2
+.searchInputStyle2 {
+    .searchInputBorder {
+        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
+    }
+    .searchBtn {
+        color:#333333;
+        border:1px solid #E6E6E6;
+        box-sizing: border-box;
+        border-left: none;
+        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
+        background: #fff;
+    }
+}
+//样式3
+.searchInputStyle3 {
+    .searchBtn{
+        background-color: #333333;
+    }
+}
+//样式4
+.searchInputStyle4 {
+    .searchBtn {
+        margin-left: 5px;
+        color:#fff;
+        border:1px solid #E6E6E6;
+        box-sizing: border-box;
+        border-left: none;
+        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
+        background: #A72213;
+    }
+}
+//样式5
+.searchInputStyle5 {
+    .searchBtn {
+        margin-left: 5px;
+        color:#fff;
+        background: #333333;
+    }
+}
+//样式6
+.searchInputStyle6 {
+    .searchBtn {
+        background: #A72213;
+        img {
+            margin-top: 11px;
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+//样式7
+.searchInputStyle7 {
+    .searchInputBorder {
+        width: 702px;
+        height: 44px;
+        position: relative;
+        border: 1px solid #E6E6E6;
+        input{
+            height: 44px;;
+            border: none;
+        }
+        img{
+            position: absolute;
+            right: 20px;
+            top: 11px;
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+//样式9
+.searchInputStyle9 {
+    .searchBtn {
+        img{
+            width: 16px;
+            height: 16px;
+            margin-left: 5px;
+            margin-top: 16px;
+            vertical-align: -4px;
+        }
+    }
+}
+//样式10
+.searchInputStyle10 {
+    .searchBtn {
+        img{
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+            margin-top: 16px;
+            vertical-align: -4px;
+        }
+    }
+}
+</style>
+

src/views/template/style/sector/body/about/1200x1249/7/1.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="alongArticleBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="listRouterBox">
+                当前位置：首页 > <span>关于我们</span>
+            </div>
+
+            <div class="listContentBox">
+
+
+                <div :class="['aboutMenu line_1', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="18" :sectorName="this.$store.state.template.pageData.aloneArticle[dataSort].content.sectorName"/>
+ 
+                        
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <menu7Style :componentStyle="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[0].component_style"/>
+                        </div>
+
+                        
+                    </div>
+                    
+                <div :class="['listContentBoxLeft', {369: this.$store.state.template.previewStatus==false}]">
+                    <aboutArticle7Style />
+                </div>
+            </div>
+
+
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+ 
+import menu7Style from '../../../../../../style/components/menu/190x368/7/1.vue'
+import aboutArticle7Style from '../../../../../../style/components/main/960x1170/7/1.vue'
+
+
+
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+         
+        menu7Style,
+        aboutArticle7Style,
+
+        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-top: 2px dashed #999;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listNewsTitle {
+    font-size: 22px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 2px solid #004564;
+    color: #004564;
+    box-sizing: border-box;
+    margin-top: 28px;
+}
+.line_1{border-left: none;}
+
+
+.alongArticleBigBox{
+    width: 100%;
+    height: 1170px;
+    .listBox{
+        width: 1200px;
+        height: 1170px;
+        margin: 0 auto;
+        position: relative;
+        box-sizing: content-box;
+        .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;
+            .listContentBoxLeft {
+                width: 960px;float:right;
+                height: 1170px;
+                position: relative;
+            }
+        }
+        .paginationBox {
+            height: 100px;
+            .paginationBoxLeft {
+                width: 1200px;
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+    .aboutMenu {
+        width: 190px;
+        height: 368px;position:relative;
+        float:left; margin-top:33px;
+         
+        box-sizing: content-box;
+    }
+} 
+</style>
+

src/views/template/style/sector/body/about/1200x1710/7/1.vue

@@ -0,0 +1,249 @@
+<template>
+    <div class="alongListBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+
+            <div class="listRouterBox">
+                当前位置：首页 > <span>关于我们</span>
+            </div>
+            <div class="listNewsTitle" v-if="this.$store.state.template.editWebsiteClass==1">自动生成</div>
+            <div class="listNewsTitle_skin2" v-if="this.$store.state.template.editWebsiteClass==2">自动生成</div>
+
+            <div class=" clearfix">
+
+                <div class="listContentBox">
+
+                    <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="14" :sectorName="this.$store.state.template.pageData.aloneList[dataSort].content.sectorName"/>
+                        
+
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <list7Style :componentStyle="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[1].component_style"/>
+                        </div>
+
+                        
+                    </div>
+                </div>
+
+                <div :class="['aboutMenu', {buildingBorder_3: this.$store.state.template.previewStatus==false}]">
+
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="18" :sectorName="this.$store.state.template.pageData.aloneList[dataSort].content.sectorName"/>
+                    
+                    <div v-if="this.$store.state.template.editWebsiteClass==7">
+                        <menu7Style :componentStyle="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[0].component_style"/>
+                    </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'
+ 
+// 皮肤7-单页列表通栏
+// import list5Style from '../../../../../../style/components/list/900x1050/5.vue'
+// import list7Style from '../../../../../../style/components/list/1200x1467/7/1.vue'
+import list7Style from '../../../../../../style/components/list/962x1467/7/1.vue'
+
+ 
+ 
+import menu7Style from '../../../../../../style/components/menu/190x368/7/1.vue'
+
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: { 
+        editBtn,
+        convertBtn,
+  
+        menu7Style,
+        list7Style,
+        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-right: none;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder_3 {
+    border: 2px dashed #999;
+    border-left: none;
+}
+
+
+
+
+.listNewsTitle {
+    font-size: 22px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 2px solid #004564;
+    color: #004564;
+    box-sizing: border-box;
+    margin-top: 28px;
+}
+.listNewsTitle_skin2 {
+    font-size: 22px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 2px solid #A91B33;
+    color: #A91B33;
+    box-sizing: border-box;
+    margin-top: 28px;
+}
+.alongListBigBox{
+    width: 100%;
+    height: 1710px;
+    .listBox{
+        width: 1200px;
+        height: 1710px;
+        margin: 0 auto;
+        position: relative;
+        box-sizing: content-box;
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            float:right;
+            justify-content: space-between;
+            align-items: center;
+            .listContentBoxLeft {
+                width: 962px;
+                height: 1467px;margin-top: 28px;
+                position: relative;
+            }
+        }
+        .paginationBox {
+            height: 100px;  
+            margin-top:33px;
+            box-sizing: content-box;
+            .paginationBoxLeft {
+                width: 962px;float:right;
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+    .aboutMenu {
+        width: 190px;
+        height: 368px;
+        float:left;
+        box-sizing: content-box;
+        margin-top:30px;position:relative;
+    }
+}
+.paginationBoxLeft {
+    width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #A72213;
+    }
+    .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;background-color: #F6F6F6;
+        border-radius: 4px;border: #EAEAEA 1px solid;
+        line-height: 34px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #A72213;
+        color: #fff;
+    }
+
+    .el-pagination.is-background::v-deep .el-pager li:not(.active):hover {
+        color: #A72213;
+    }
+}
+</style>
+

src/views/template/style/sector/body/article/article/1200x1667/7/1.vue

@@ -0,0 +1,162 @@
+<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}]">
+                    <article7Style />
+                </div>
+                <div class="listContentBoxRight">
+
+                    <div :class="['listContentBoxRightTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15" :sectorName="this.$store.state.template.pageData.article[dataSort].content.sectorName"/>
+                         
+
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <news7style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[1].componentData.name" :componentStyle="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style"/>
+                        </div>
+
+                    </div>
+                    <div :class="['listContentBoxRightBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16" :sectorName="this.$store.state.template.pageData.article[dataSort].content.sectorName"/>
+ 
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <hotNews7style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[2].componentData.name" :componentStyle="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style"/>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            
+ 
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+ 
+ 
+import article7Style from '../../../../../../../style/components/article/900x1587/7/1.vue'
+
+import news7style from '../../../../../../../style/components/list/270x450/7/1.vue'
+import hotNews7style from '../../../../../../../style/components/list/270x580/7/1.vue'
+// src\views\template\style\components\list\270x450\7\1.vue
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+         
+        atWork,
+
+        hotNews7style,
+        news7style,
+        article7Style,
+    },
+    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;
+    border-bottom: none;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listBigBox{
+    width: 100%;
+    height: 1587px;
+    .listBox{
+        width: 1200px;
+        height: 1667px;
+        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: flex-start;
+            margin-top: 17px;
+            .listContentBoxLeft {
+                width: 900px;
+                height: 1587px;
+                position: relative;
+            }
+            .listContentBoxRight {
+                width: 270px;
+                height: 1050px;
+                .listContentBoxRightTop {
+                    width: 270px;
+                    height: 440px;
+                    margin-bottom: 30px;
+                    position: relative;
+                }
+                .listContentBoxRightBottom {
+                    width: 270px;
+                    height: 580px;
+                    position: relative;
+                }
+            }
+        }
+        
+    }
+}
+</style>
+

src/views/template/style/sector/body/class/menu/1200x100/1.vue

@@ -39,6 +39,13 @@
                 <div v-if="this.$store.state.template.editWebsiteClass==6">
                     <menu6Style :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style"/>
                 </div>
+
+                <div v-if="this.$store.state.template.editWebsiteClass==7">
+                    <menu7Style :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style"/>
+                </div>
+
+
+
             </div>
             <!-- 列表页 -->
             <div v-if="this.$store.state.template.pageStatus == 3">
@@ -60,6 +67,12 @@
                 <div v-if="this.$store.state.template.editWebsiteClass==6">
                     <menu6Style :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style"/>
                 </div>
+
+
+                <div v-if="this.$store.state.template.editWebsiteClass==7">
+                    <menu7Style :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style"/>
+                </div>
+
             </div>
         </div>
     </div>
@@ -76,6 +89,11 @@ import menu3Style from '../../../../../../style/components/menu/1200x100/3.vue'
 import menu4Style from '../../../../../../style/components/menu/1200x100/4.vue'
 import menu5Style from '../../../../../../style/components/menu/1200x100/5.vue'
 import menu6Style from '../../../../../../style/components/menu/1200x100/6.vue'
+
+import menu7Style from '../../../../../../style/components/menu/1200x100/7.vue'
+
+
+
 //组件研发中
 import atWork from '../../../../../../public/atWork.vue'
 export default {
@@ -88,6 +106,7 @@ export default {
         menu4Style,
         menu5Style,
         menu6Style,
+        menu7Style,
         atWork
     },
     props: {

src/views/template/style/sector/body/index/banner/1200x480/7/2.vue

@@ -0,0 +1,163 @@
+ <template>
+    <div :class="['bannerBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"
+            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName" />
+            
+        <!-- 样式1  start----------------------->
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式1  end----------------------->
+            
+        <!-- 样式2  start----------------------->
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式2  end----------------------->
+            
+        <!-- 样式3  start----------------------->
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式3  end----------------------->
+
+        <!-- 样式4  start----------------------->
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式3  end----------------------->
+
+
+        
+    </div>
+</template>
+
+<script>
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+import banner2Style from '../../../../../../../style/components/banner/swiper/720x405/2.vue'
+import list5Style from '../../../../../../../style/components/banner/list/450x405/5.vue'
+
+import big_banner2Style from '../../../../../../../style/components/banner/swiper/720x480/7/2.vue'
+import big_list5Style from '../../../../../../../style/components/banner/list/450x480/7/7.vue'
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        convertBtn,
+        banner2Style,
+        list5Style,
+
+        big_banner2Style,
+        big_list5Style,
+        
+        atWork//组件研发中
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            // component_style: this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style,
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+
+.bannerBigBox {
+    
+    width: 1200px;
+    height: 480px;
+    position: relative;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: content-box;
+
+    .componentBorder1 {
+        border-left: 0;
+        border-top: 0;
+        border-bottom: 0;
+    }
+
+    .componentBorder2 {
+        border-right: 0;
+        border-top: 0;
+        border-bottom: 0;
+    }
+
+    .bannerLayerBox {
+        width: 790px;
+        height: 480px;
+        position: relative;
+
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+
+    .NewsListBox {
+        width: 380px;
+        height: 480px;
+        position: relative;
+        overflow:hidden;
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+}
+</style>

src/views/template/style/sector/body/index/banner/1200x480/7/3.vue

@@ -0,0 +1,175 @@
+<template>
+    <div :class="['bannerBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+
+        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"
+            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName" />
+ 
+            
+        <!-- 样式1  start----------------------->
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 3">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 3">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式1  end----------------------->
+            
+        <!-- 样式2  start----------------------->
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+        
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式2  end----------------------->
+            
+        <!-- 样式3  start----------------------->
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 4">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 4">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式3  end----------------------->
+
+        <!-- 样式4  start----------------------->
+        <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
+        
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_list5Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
+            v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                <big_banner2Style :dataSort="dataSort" />
+            </div>
+        </div>
+        <!-- 样式3  end----------------------->
+
+        
+    </div>
+</template>
+
+<script>
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+import banner2Style from '../../../../../../../style/components/banner/swiper/720x405/2.vue'
+import list5Style from '../../../../../../../style/components/banner/list/450x405/5.vue'
+
+// import big_banner2Style from '../../../../../../style/components/banner/swiper/720x480/2.vue'
+// import big_list5Style from '../../../../../../style/components/banner/list/450x480/7.vue'
+
+import big_banner2Style from '../../../../../../../style/components/banner/swiper/720x480/7/3.vue'
+import big_list5Style from '../../../../../../../style/components/banner/list/450x480/7/6.vue'
+
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        convertBtn,
+        banner2Style,
+        list5Style,
+
+        big_banner2Style,
+        big_list5Style,
+        
+        atWork//组件研发中
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            // component_style: this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style,
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+
+.bannerBigBox {
+    
+    width: 1200px;
+    height: 480px;
+    position: relative;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: content-box;
+
+    .componentBorder1 {
+        border-left: 0;
+        border-top: 0;
+        border-bottom: 0;
+    }
+
+    .componentBorder2 {
+        border-right: 0;
+        border-top: 0;
+        border-bottom: 0;
+    }
+
+    .bannerLayerBox {
+        width: 790px;
+        height: 480px;
+        position: relative;
+
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+
+    .NewsListBox {
+        width: 380px;
+        height: 480px;
+        position: relative;
+        overflow:hidden;
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+}
+</style>

src/views/template/style/sector/body/index/link/1200x326/7/1.vue

@@ -0,0 +1,251 @@
+<template>
+     
+
+    <div :class="['linkSectorBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        
+            <div class="index_1_top_box">
+                <h4 class="index_1_top_h4">
+                    <span class=" ">查询服务</span>
+                </h4> 
+            </div>
+
+            <div class="index_1_ul clearfix" v-if="this.$store.state.template.editWebsiteClass==7">
+
+                
+                <div class="index_1_li">
+
+                        <div class="index_1_li_img_tip">
+                            <div class="index_1_li_img_box"></div>
+                        </div>
+
+                        <div class="index_1_li_head">人员查询</div>
+                        <div class="index_1_li_text">全国政务信息一体化办公室</div>
+
+                        <div class="index_1_li_btn_box">
+                            <div class="index_1_li_btn">点击查询</div>
+                        </div>
+
+                </div>
+                
+                <div class="index_1_li">
+                        <div class="index_1_li_img_tip">
+                            <div class="index_1_li_img_box"></div>
+                        </div>
+
+                        <div class="index_1_li_head">车辆查询</div>
+                        <div class="index_1_li_text">全国政务信息一体化办公室</div>
+
+                        <div class="index_1_li_btn_box">
+                            <div class="index_1_li_btn">点击查询</div>
+                        </div>
+                </div>
+                
+                <div class="index_1_li">
+
+                        <div class="index_1_li_img_tip">
+                            <div class="index_1_li_img_box"></div>
+                        </div>
+
+                        <div class="index_1_li_head">调研选题</div>
+                        <div class="index_1_li_text">全国政务信息一体化办公室</div>
+
+                        <div class="index_1_li_btn_box">
+                            <div class="index_1_li_btn">点击查询</div>
+                        </div>
+                </div>
+                
+                <div class="index_1_li">
+                        <div class="index_1_li_img_tip">
+                            <div class="index_1_li_img_box"></div>
+                        </div>
+
+                        <div class="index_1_li_head">地市中心</div>
+                        <div class="index_1_li_text">全国政务信息一体化办公室</div>
+
+                        <div class="index_1_li_btn_box">
+                            <div class="index_1_li_btn">点击查询</div>
+                        </div>
+                </div>
+                
+                <div class="index_1_li">
+
+                        <div class="index_1_li_img_tip">
+                            <div class="index_1_li_img_box"></div>
+                        </div>
+
+                        <div class="index_1_li_head">介绍信查询</div>
+                        <div class="index_1_li_text">全国政务信息一体化办公室</div>
+
+                        <div class="index_1_li_btn_box">
+                            <div class="index_1_li_btn">点击查询</div>
+                        </div>
+                </div>
+
+
+            </div>
+
+    </div>
+
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.linkSectorBox {
+    width: 1200px;
+    height: 326px;
+    margin: 0 auto;
+}
+
+//样式7 start ---------------------------------------->
+
+    .index_1_top_box{height:42px;text-align:center; margin:24px auto 24px;}
+    .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
+                        padding:0px 20px;margin:0px auto;
+                    }
+    .index_1_top_h4::after{content:'';position:absolute;
+            left:-440px;top:14px; 
+        height:20px;width:440px; 
+        
+        background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
+        background-size: auto 100%;   
+    }
+    .index_1_top_h4::before{content:'';position:absolute;
+            right:-440px;top:14px;
+        height:20px;width:440px;  
+        background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
+        background-size: auto 100%;   
+
+    }
+
+    .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
+
+                        color:#333;font-size:32px;
+                        font-weight:normal;
+    }
+
+     .index_1_ul{overflow:hidden;}               
+     .index_1_li{float:left;width:210px;height:227px;margin-right:37px;
+                    box-sizing:border-box; 
+                    background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766472116169936.png) no-repeat left 0px;
+                background-size:100% 100% ;
+                
+                }    
+ 
+    .index_1_li:nth-last-of-type(1){margin-right:0px;float:right;}
+    .index_1_li:nth-last-of-type(2){margin-right:0px; }
+
+     .index_1_li a{display:block;width:100%;height:100%;}   
+     .index_1_li_img_tip{overflow:hidden;}
+     .index_1_li_img_box{float:right;width:42px;height:42px;margin:20px 20px 0px 0px; 
+        background: no-repeat center 0px;
+                background-size: auto 100%;   
+    }
+     .index_1_li_head{height:21px;line-height:21px;color:#333;font-size:16px;
+                        width:100%;box-sizing:border-box;padding:0px 30px;  
+                        margin-top:8px;
+                        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    }
+     .index_1_li_text{
+        height:13px;line-height:13px;color:#999;font-size:10px;
+        width:100%;box-sizing:border-box;padding:0px 30px;  
+        margin-top:13px;
+
+        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+     }
+     .index_1_li_btn_box{text-align:center;margin-top:43px;}
+     .index_1_li_btn{
+        line-height:30px;height:30px;color:#A72213;font-size:10px;display:inline-block;
+        padding:0px 20px;border:solid 1px #A72213;border-radius:15px;
+        text-align:center;
+     }
+ 
+   
+     .index_1_li:nth-of-type(1) .index_1_li_img_box{ background-image:url(http://192.168.1.234:19000/pre/image/png/20251223/1766472547424308.png);}
+     .index_1_li:nth-of-type(2) .index_1_li_img_box{ background-image:url(http://192.168.1.234:19000/pre/image/png/20251223/1766472569511503.png);}
+     .index_1_li:nth-of-type(3) .index_1_li_img_box{ background-image:url(http://192.168.1.234:19000/pre/image/png/20251223/176647258751430.png);}
+     .index_1_li:nth-of-type(4) .index_1_li_img_box{ background-image:url(http://192.168.1.234:19000/pre/image/png/20251223/1766472628882180.png);}
+     .index_1_li:nth-of-type(5) .index_1_li_img_box{ background-image:url(http://192.168.1.234:19000/pre/image/png/20251223/1766472653772806.png);}
+
+//样式7 end ---------------------------------------->
+
+
+
+//样式5 start ---------------------------------------->
+.topicon{
+    width: 1200px;
+    height: 70px;
+    margin-bottom: 26px;
+    border-bottom: 2px dashed #999;
+}
+.linkSectorStyle5Box {
+    width: 1196px;
+    height: 150px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 2px dashed #999;
+    .linkSectorItem {
+        width: 224px;
+        box-sizing: border-box;
+        padding:62px 30px;
+        cursor: pointer;
+        text-align: center;
+        .linkSectorItemTitle {
+            font-size:22px;
+            font-weight: bold;
+        }
+        &:nth-child(1) {
+            color:#5b7bb9;
+        }
+        &:nth-child(2) {
+            color:#5bb7b5;
+        }
+        &:nth-child(3) {
+            color:#b9775c;
+        }
+        &:nth-child(4) {
+            color:#767299;
+        }
+        &:nth-child(5) {
+            color:#986262;
+        }
+    }
+    .bg1 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/17606663709625.png) no-repeat center center;}
+    .bg2 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666387890517.png) no-repeat center center;}
+    .bg3 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666397238636.png) no-repeat center center;}
+    .bg4 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666408499485.png) no-repeat center center;}
+    .bg5 {background: url(https://img.bjzxtw.org.cn/pre/image/png/20251017/1760666421127301.png) no-repeat center center;}
+}
+//样式5 end ---------------------------------------->
+</style>

src/views/template/style/sector/body/index/list/1200x1150/7/2.vue

@@ -0,0 +1,371 @@
+<template>
+    <div class="commentSectorBox">
+         
+        <div :class="['commentSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+
+             <div class="line_5">
+                 <div class="index_1_top_box">
+                     <h4 class="index_1_top_h4">
+                         <span class=" "> 行业聚焦</span>
+                     </h4> 
+                 </div>
+
+             </div>   
+                
+
+            <div class="index_left">
+                
+                <div class="index_left_in">
+                    
+                    <div class="index_1" :class="{'line_1': this.$store.state.template.previewStatus==false}">
+  
+                        <convertBtn 
+                            :id="id"
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+                        
+                        <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="index_1.text" :sizeImg="index_1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+  
+                        <index_1_style_1 
+                            :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData[0].name" 
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style"/>
+  
+                    </div>
+
+                    <div class="index_2" :class="{'line_2': this.$store.state.template.previewStatus==false}">
+                        
+     
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="1" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="1" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+                        
+                        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="index_2.text" :sizeImg="index_2.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+ 
+
+
+                        
+                        <index_2_style_1 
+                            :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData[0].name" 
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style"/>
+ 
+                    </div>
+                </div>
+                
+                <div class="index_3" :class="{'line_3': this.$store.state.template.previewStatus==false}"> <!-- 选项卡 -->
+                    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="2" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="2" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+                        
+                        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="index_3.text" :sizeImg="index_3.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+  
+
+                        <index_3_style_1 
+                            :name1="this.$store.state.template.pageData.class[dataSort].content.componentList[2].componentData[0].name" 
+                            :name2="this.$store.state.template.pageData.class[dataSort].content.componentList[2].componentData[1].name" 
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[2].component_style"/>
+
+                            
+
+                </div>    
+
+
+            </div>
+
+            <div class="index_right" :class="{'line_4': this.$store.state.template.previewStatus==false}"> 
+
+                <div class="index_4">
+                       <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="3" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="3" 
+                            :type="8" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+                        
+                        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="index_4.text" :sizeImg="index_4.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+ 
+
+                        
+                        <index_4_style_1 
+                            :name="this.$store.state.template.pageData.class[dataSort].content.componentList[3].componentData[0].name" 
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[3].component_style"/>
+                                
+
+
+                </div>    
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+ 
+
+//380x520
+import index_1_style_1 from '../../../../../../../style/components/list/380x520/7/1.vue'
+import index_2_style_1 from '../../../../../../../style/components/list/380x520/7/2.vue'
+
+import index_3_style_1 from '../../../../../../../style/components/list/790x500/7/1.vue'
+
+import index_4_style_1 from '../../../../../../../style/components/list/380x1040/7/1.vue'
+ 
+
+
+
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+         
+
+        index_1_style_1,
+        index_2_style_1,
+
+        index_3_style_1,
+        index_4_style_1,
+
+
+
+        
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftDataTop:{
+                text:6,
+                img:2
+            },
+            leftDataBottom:{
+                text:14,
+                img:2
+            },
+            rightData:{
+                text:0,
+                img:7
+            },
+
+            index_1:{
+                text:7,
+                img:0
+            },
+
+            index_2:{
+                text:11,
+                img:1
+            },
+
+            index_3:{
+                text:10,
+                img:3
+            },
+
+            index_4:{
+                text:8,
+                img:4
+            },
+
+
+
+
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder,.buildingBorder2,.buildingBorder3,.buildingBorder4 {
+    border: 2px dashed #999;
+    
+}
+.buildingBorder2 {
+    border-right: none;
+    border-top: none;
+}
+.buildingBorder3 {
+    border-left: none;
+    border-top: none;
+}
+.buildingBorder4 {
+    border-left: none;
+    border-bottom: none;
+}
+.commentSectorBox {
+    width:100%;
+    height: 1150px;
+     
+    .commentSector {
+        width: 1200px;
+        height: 1150px;
+        margin: 0 auto;
+         
+        align-items: flex-start;
+        justify-content: space-between;
+        box-sizing: content-box;
+        .commentSectorLeft {
+            width: 790px;
+            height: 1038px;
+            .commentSectorLeftTop {
+                width: 720px;
+                height: 300px;
+                margin-bottom: 28px;
+                position: relative;
+                box-sizing: content-box;
+            }
+            .commentSectorLeftBottom {
+                width: 720px;
+                height: 620px;
+                position: relative;
+            }
+        }
+        .commentSectorRight {
+            width: 380px;
+            height: 1038px;
+            box-sizing: content-box;
+            position: relative;
+        }
+    }
+}
+
+.commentSectorLeft{display:none;}
+.commentSectorRight{display:none;} 
+
+.index_1_top_box{height:42px;text-align:center; margin:24px auto 24px;width:100%; }
+    .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
+                        padding:0px 20px;margin:0px auto;
+                    }
+    .index_1_top_h4::after{content:'';position:absolute;
+            left:-440px;top:14px; 
+        height:20px;width:440px; 
+        
+        background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
+        background-size: auto 100%;   
+    }
+    .index_1_top_h4::before{content:'';position:absolute;
+            right:-440px;top:14px;
+        height:20px;width:440px;  
+        background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
+        background-size: auto 100%;   
+
+    }
+
+
+    .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
+                        color:#333;font-size:32px;
+                        font-weight:normal;
+                    }
+
+
+
+.clearfix{overflow:hidden;}
+
+.line_1,.line_2,.line_3,.line_4,.line_5,
+.line_com{
+    border: 2px dashed #999;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+  
+}
+
+.line_1{border-left:none; border-top:none; }
+.line_2{  border-top:none; }
+.line_3{ border-left:none; border-bottom:none;}
+.line_4{ border-right:none; border-top:none; border-bottom:none;}
+.line_5{ border-right:none;  border-left:none;  border-top:none; }
+
+
+.index_left{float:left;width:790px;height:1045px; }
+.index_right{float:right;width:380px;height:1052px;overflow:hidden;}
+
+.index_left_in{overflow:hidden;width:100%;}
+.index_1{float:left;width:380px;height:519px;position:relative;overflow:hidden;}
+.index_2{float:right;width:380px;height:519px;overflow:hidden;position:relative;}
+
+.index_3{width:790px;height:500px;margin-top:26px;overflow:hidden;position:relative;}
+.index_4{position:relative;}
+
+
+
+</style>
+

src/views/template/style/sector/body/index/list/1200x430/7/2.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="newsPhotoSectorBox">
+        <div :class="['newsPhotoSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+ 
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="4" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="4" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                        />
+                        
+                        <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="4" :size="index_1.text" :sizeImg="index_1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+
+                        <roll_style_1 
+                            :name1="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData[0].name" 
+                            :name2="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData[1].name" 
+                            :componentStyle="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style"/>
+
+
+ 
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+//选项卡组件
+ 
+
+import roll_style_1 from '../../../../../../../style/components/list/1200x430/7/2.vue'
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+  
+        roll_style_1
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            index_1:{
+                text:12,
+                img:4
+            },
+            tabData1:{
+                text:5,
+                img:0
+            },
+            tabData2:{
+                text:5,
+                img:0
+            },
+            tabData3:{
+                text:5,
+                img:0
+            },
+            tabData4:{
+                text:5,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder,.buildingBorder2,.buildingBorder3,.buildingBorder4,.buildingBorder5 {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border-right: none;
+    border-left: none;
+    border-top: none;
+}
+.buildingBorder3 {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+.buildingBorder4 {
+    border-right: none;
+    border-bottom: none;
+    border-top: none;
+}
+.buildingBorder5 {
+    border-right: none;
+    border-left: none;
+}
+.newsPhotoSectorBox {
+    width:100%;
+    height: 430px;
+    .newsPhotoSector {
+        position: relative;
+        width: 1200px;
+        height: 430px;
+        margin:0 auto;
+    }
+}
+</style>
+

src/views/template/style/sector/body/index/list/1200x720/7/1.vue

@@ -0,0 +1,302 @@
+<template>
+    <div class="channelNewsSectorBox">
+ 
+
+        <section class="min_1200 clearfix" :class="{ box_line_1: this.$store.state.template.previewStatus == false }">
+ 
+            <div class="clearfix">
+                 
+                <div :class="{ box_line_6: this.$store.state.template.previewStatus == false }">
+                    <div class="index_1_top_box">
+                        <h4 class="index_1_top_h4">
+                            <span class=" ">行业聚焦</span>
+                        </h4> 
+                    </div>
+                </div>
+
+                <div class="clearfix">
+                    
+
+                    <div class="left_box_1" :class="{ box_line_2: this.$store.state.template.previewStatus == false }">
+
+                         
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="9" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                        />
+                            <!--频道页按钮-->
+                        <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                
+                                :sort="0" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==2"
+                                :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                            />
+                        <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData1.text" :sizeImg="leftData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                   
+ 
+                        <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                            <left7Style
+                                :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"
+                                :componentStyle="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style" />
+                        </div>
+ 
+                    </div>
+
+                    <div class="min_box_1" :class="{ box_line_3: this.$store.state.template.previewStatus == false }">
+                        
+
+
+                             <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                :sort="1" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==1"
+                                :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                            />
+                                <!--频道页按钮-->
+                            <convertBtn 
+                                    :id="id" 
+                                    :dataSort="dataSort" 
+                                    
+                                    :sort="1" 
+                                    :type="9" 
+                                    v-if="this.$store.state.template.pageStatus==2"
+                                    :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                                />
+                            <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="midData1.text" :sizeImg="midData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                    
+
+                            
+                            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                                <mid7Style
+                                    :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"
+                                    :componentStyle="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style" />
+                            </div>
+
+
+                    </div>
+
+                    <div class="right_box_1" :class="{ box_line_5: this.$store.state.template.previewStatus == false }">
+
+                           <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                :sort="2" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==1"
+                                :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                            />
+                                <!--频道页按钮-->
+                            <convertBtn 
+                                    :id="id" 
+                                    :dataSort="dataSort" 
+                                    
+                                    :sort="2" 
+                                    :type="9" 
+                                    v-if="this.$store.state.template.pageStatus==2"
+                                    :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                                />
+                            <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="rightData1.text" :sizeImg="rightData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+
+                            <right7Style
+                                    :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"
+                                    :componentStyle="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style" />
+
+                    </div>
+
+
+                </div>
+
+            </div>
+            
+        </section>        
+
+        
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+//1.585x500 
+import left5Style from '../../../../../../../style/components/list/585x500/1/1.vue'
+//2.585x500
+import right5Style from '../../../../../../../style/components/list/585x500/1/2.vue'
+
+
+//3.left
+import left7Style from '../../../../../../../style/components/list/380x610/7/1.vue'
+import mid7Style from '../../../../../../../style/components/list/380x610/7/2.vue'
+import right7Style from '../../../../../../../style/components/list/380x610/7/3.vue'
+
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        left5Style,
+        right5Style,
+        left7Style,
+        mid7Style,
+        right7Style,
+        atWork
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+            rightData1: {
+                text:10,
+                img: 0
+            },
+
+            midData1: {
+                text:3,
+                img: 3
+            },
+
+            leftData1: {
+                text:6,
+                img: 3
+            },
+
+
+            leftData: {
+                text: 9,
+                img: 3
+            },
+            rightData: {
+                text: 6,
+                img: 3
+            }
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+ 
+.channelNewsSectorBox {
+
+    width: 100%;
+    height: 720px;
+    box-sizing: content-box;
+
+    .channelNewsSector {
+
+        width: 1200px;
+        height: 600px;
+        margin: 0 auto;
+
+        .channelNewsSectorTitle {
+            width: 1200px;
+            height: 70px;
+            line-height: 70px;
+            margin-bottom: 30px;
+        }
+
+        .channelNewsSectorContent {
+            width: 100%;
+            height: 500px;
+            display: flex;
+
+            .channelNewsSectorLeft {
+                width: 585px;
+                height: 496px;
+                position: relative;
+                margin-right: 30px;
+            }
+
+            .channelNewsSectorRight {
+                width: 585px;
+                height: 496px;
+                position: relative;
+            }
+        }
+    }
+ 
+
+}
+
+.min_1200{
+    width:1200px;margin:0px auto; height:720px;display:block;
+
+}
+.clearfix{overflow:hidden;}
+
+.box_line_1,.box_line_2,.box_line_3,.box_line_4,.box_line_5,.box_line_6{border:dashed 2px #999; box-sizing:border-box;}
+
+.box_line_2{border-left:none;border-bottom:none;border-top:none;  }
+.box_line_3{ border-bottom:none; border-top:none; }
+.box_line_4{border-right:none;border-bottom:none; border-top:none; }
+.box_line_5{border-right:none;border-bottom:none; border-top:none; }
+.box_line_6{border-right:none;border-left:none; border-top:none; }
+
+
+
+.left_box_1{width:380px;height:610px;position:relative;float:left;margin-right:28px;overflow:hidden;}
+
+.min_box_1{width:380px;height:610px;position:relative;float:left;overflow:hidden;}
+
+.right_box_1{width:380px;height:610px;position:relative;float:right;overflow:hidden;}
+
+
+
+    .index_1_top_box{height:42px;text-align:center; margin:20px auto 34px;}
+    .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
+                        padding:0px 20px;margin:0px auto;
+                    }
+    .index_1_top_h4::after{content:'';position:absolute;
+            left:-440px;top:14px; 
+        height:20px;width:440px; 
+        
+        background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
+        background-size: auto 100%;   
+    }
+    .index_1_top_h4::before{content:'';position:absolute;
+            right:-440px;top:14px;
+        height:20px;width:440px;  
+        background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
+        background-size: auto 100%;   
+
+    }
+
+    .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
+
+                        color:#333;font-size:32px;
+                        font-weight:normal;
+    }
+
+
+</style>

src/views/template/style/sector/body/index/list/1200x720/7/2.vue

@@ -0,0 +1,370 @@
+<template>
+    <div class="channelNewsSectorBox">
+
+        <div style="display:none;" :class="['channelNewsSector', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+
+ 
+            <div
+
+                :class="['channelNewsSectorTitle', { componentBorderTop: this.$store.state.template.previewStatus == false }]">
+                <img src="https://img.bjzxtw.org.cn/pre/image/png/20251111/1762847683404338.png" alt="">
+            </div>
+
+            <div
+
+
+                :class="['channelNewsSectorContent', { componentBorderBottom: this.$store.state.template.previewStatus == false }]">
+                <div
+                    :class="['channelNewsSectorLeft', { componentBorder1: this.$store.state.template.previewStatus == false }]">
+                    <convertBtn 
+                        :id="id" 
+                        :dataSort="dataSort" 
+                        :sort="0" 
+                        :type="4" 
+                        v-if="this.$store.state.template.pageStatus == 2"
+                        :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName" 
+                    />
+                    <div v-if="this.$store.state.template.editWebsiteClass == 5">
+                        <left5Style
+                            :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style" />
+                    </div>
+                </div>
+                <div
+                    :class="['channelNewsSectorRight', { componentBorder2: this.$store.state.template.previewStatus == false }]">
+                    <convertBtn 
+                        :id="id" 
+                        :dataSort="dataSort"
+                        :sort="1" 
+                        :type="5"
+                        v-if="this.$store.state.template.pageStatus == 2"
+                        :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName" 
+                    />
+                    <div v-if="this.$store.state.template.editWebsiteClass == 5">
+                        <right5Style
+                            :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"
+                            :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style" />
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <section class="min_1200 clearfix" :class="{ box_line_1: this.$store.state.template.previewStatus == false }">
+ 
+            <div class="clearfix">
+                 
+                <div :class="{ box_line_6: this.$store.state.template.previewStatus == false }">
+                    <div class="index_1_top_box">
+                        <h4 class="index_1_top_h4">
+                            <span class=" ">热点关注</span>
+                        </h4> 
+                    </div>
+                </div>
+
+                <div class="clearfix">
+                    
+
+                    <div class="left_box_1" :class="{ box_line_2: this.$store.state.template.previewStatus == false }">
+                         
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="0" 
+                            :type="9" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                        />
+                            <!--频道页按钮-->
+                        <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                
+                                :sort="0" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==2"
+                                :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                            />
+                        <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData1.text" :sizeImg="leftData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                   
+ 
+                        <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                            <left7Style
+                                :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"
+                                :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style" />
+                        </div>
+ 
+                    </div>
+
+                    <div class="min_box_1" :class="{ box_line_3: this.$store.state.template.previewStatus == false }">
+                        
+
+
+                             <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                :sort="1" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==1"
+                                :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                            />
+                                <!--频道页按钮-->
+                            <convertBtn 
+                                    :id="id" 
+                                    :dataSort="dataSort" 
+                                    
+                                    :sort="1" 
+                                    :type="9" 
+                                    v-if="this.$store.state.template.pageStatus==2"
+                                    :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                                />
+                            <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="midData1.text" :sizeImg="midData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                    
+
+                            
+                            <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                                <mid7Style
+                                    :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"
+                                    :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style" />
+                            </div>
+
+
+                    </div>
+
+                    <div class="right_box_1" :class="{ box_line_5: this.$store.state.template.previewStatus == false }">
+
+                           <convertBtn 
+                                :id="id" 
+                                :dataSort="dataSort" 
+                                :sort="2" 
+                                :type="9" 
+                                v-if="this.$store.state.template.pageStatus==1"
+                                :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                            />
+                                <!--频道页按钮-->
+                            <convertBtn 
+                                    :id="id" 
+                                    :dataSort="dataSort" 
+                                    
+                                    :sort="2" 
+                                    :type="9" 
+                                    v-if="this.$store.state.template.pageStatus==2"
+                                    :sectorName="this.$store.state.template.pageData.class[dataSort].content.sectorName"
+                                />
+                            <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="rightData1.text" :sizeImg="rightData1.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+
+                            <right7Style
+                                    :name="this.$store.state.template.pageData.class[dataSort].content.componentList[2].componentData.name"
+                                    :componentStyle="this.$store.state.template.pageData.class[dataSort].content.componentList[2].component_style" />
+
+                    </div>
+
+
+                </div>
+
+            </div>
+            
+        </section>        
+
+        
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../../public/convertBtn.vue'
+//1.585x500 
+import left5Style from '../../../../../../../style/components/list/585x500/1/1.vue'
+//2.585x500
+import right5Style from '../../../../../../../style/components/list/585x500/1/2.vue'
+
+
+//3.left
+import left7Style from '../../../../../../../style/components/list/380x610/7/1.vue'
+import mid7Style from '../../../../../../../style/components/list/380x610/7/2.vue'
+import right7Style from '../../../../../../../style/components/list/380x610/7/3.vue'
+
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        left5Style,
+        right5Style,
+        left7Style,
+        mid7Style,
+        right7Style,
+        atWork
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+            rightData1: {
+                text:10,
+                img: 0
+            },
+
+            midData1: {
+                text:3,
+                img: 3
+            },
+
+            leftData1: {
+                text:6,
+                img: 3
+            },
+
+
+            leftData: {
+                text: 9,
+                img: 3
+            },
+            rightData: {
+                text: 6,
+                img: 3
+            }
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+.buildingBorder {
+
+    border: 2px dashed #999;
+}
+
+.channelNewsSectorBox {
+
+    width: 100%;
+    height: 720px;
+    box-sizing: content-box;
+
+    .channelNewsSector {
+
+        width: 1200px;
+        height: 600px;
+        margin: 0 auto;
+
+        .channelNewsSectorTitle {
+            width: 1200px;
+            height: 70px;
+            line-height: 70px;
+            margin-bottom: 30px;
+        }
+
+        .channelNewsSectorContent {
+            width: 100%;
+            height: 500px;
+            display: flex;
+
+            .channelNewsSectorLeft {
+                width: 585px;
+                height: 496px;
+                position: relative;
+                margin-right: 30px;
+            }
+
+            .channelNewsSectorRight {
+                width: 585px;
+                height: 496px;
+                position: relative;
+            }
+        }
+    }
+
+    .componentBorderTop {
+        border-bottom: 2px dashed #999;
+    }
+
+    .componentBorderBottom {
+        border-top: 2px dashed #999;
+    }
+
+    .componentBorder1 {
+        border-right: 2px dashed #999;
+    }
+
+    .componentBorder2 {
+        border-left: 2px dashed #999;
+    }
+
+
+}
+
+.min_1200{
+    width:1200px;margin:0px auto; height:720px;display:block;
+
+}
+.clearfix{overflow:hidden;}
+
+.box_line_1,.box_line_2,.box_line_3,.box_line_4,.box_line_5,.box_line_6{border:dashed 2px #999; box-sizing:border-box;}
+
+.box_line_2{border-left:none;border-bottom:none;border-top:none;  }
+.box_line_3{ border-bottom:none; border-top:none; }
+.box_line_4{border-right:none;border-bottom:none; border-top:none; }
+.box_line_5{border-right:none;border-bottom:none; border-top:none; }
+.box_line_6{border-right:none;border-left:none; border-top:none; }
+
+
+
+.left_box_1{width:380px;height:610px;position:relative;float:left;margin-right:28px;overflow:hidden;}
+
+.min_box_1{width:380px;height:610px;position:relative;float:left;overflow:hidden;}
+
+.right_box_1{width:380px;height:610px;position:relative;float:right;overflow:hidden;}
+
+
+
+    .index_1_top_box{height:42px;text-align:center; margin:24px auto 24px;}
+    .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
+                        padding:0px 20px;margin:0px auto;
+                    }
+    .index_1_top_h4::after{content:'';position:absolute;
+            left:-440px;top:14px; 
+        height:20px;width:440px; 
+        
+        background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
+        background-size: auto 100%;   
+    }
+    .index_1_top_h4::before{content:'';position:absolute;
+            right:-440px;top:14px;
+        height:20px;width:440px;  
+        background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
+        background-size: auto 100%;   
+
+    }
+
+    .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
+
+                        color:#333;font-size:32px;
+                        font-weight:normal;
+    }
+
+
+</style>

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

@@ -0,0 +1,278 @@
+<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" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
+                    <div v-if="this.$store.state.template.editWebsiteClass==7">
+                        <list7Style :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style"/>
+                    </div>
+
+                </div>
+                <div class="listContentBoxRight">
+
+                    <div :class="['listContentBoxRightTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                        
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
+                         
+
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <news7style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[1].componentData.name" :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style"/>
+                        </div>
+
+
+                    </div>
+                    <div :class="['listContentBoxRightBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
+ 
+
+                        <div v-if="this.$store.state.template.editWebsiteClass==7">
+                            <hotNews7style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[2].componentData.name" :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style"/>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="paginationBox">
+
+
+                <div :class="'paginationBoxLeft paginationBoxLeft' + this.$store.state.template.editWebsiteClass">
+                    <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'
+ 
+
+import list7Style from '../../../../../../../style/components/list/900x1400/7/1.vue'
+import news7style from '../../../../../../../style/components/list/270x450/7/1.vue'
+import hotNews7style from '../../../../../../../style/components/list/270x580/7/1.vue'
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+         
+        hotNews7style,
+        news7style,
+        list7Style,
+        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: 1610px;
+    .listBox{
+        width: 1200px;
+        height: 1610px;
+        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: 28px;
+            .listContentBoxLeft {
+                width: 900px;
+                height: 1400px;
+                position: relative;
+            }
+            .listContentBoxRight {
+                width: 270px;
+                height: 1400px;
+                .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;
+            }
+        }
+
+         
+
+
+    }
+}
+ 
+  .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+    background-color: #A72213;
+}
+
+ 
+.el-pagination.is-background::v-deep .btn-prev,
+ .el-pagination.is-background::v-deep .btn-next,
+  .el-pagination.is-background::v-deep .el-pager li{
+        height:33px;line-height:33px; 
+        border: 1px solid #EAEAEA;
+        border-radius:4px;margin:0px 10px;
+        padding:0px 12px;background:#F6F6F6;
+
+}
+
+
+//样式1
+.paginationBoxLeft1 {
+    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;
+    }
+}
+//样式2
+.paginationBoxLeft2 {
+    width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #A91B33;
+    }
+    .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: #A91B33;
+        color: #fff;
+    }
+}
+</style>
+

src/views/template/style/sector/body/search/list/1200x1720/7/1.vue

@@ -0,0 +1,350 @@
+<template>
+    <div class="searchListBigBox">
+        <div :class="['listBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+            <div :class="['searchInputBox', { buildingBorder2: this.$store.state.template.previewStatus == false }]">
+
+                <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="17"
+                    :sectorName="this.$store.state.template.pageData.search[dataSort].content.sectorName" />
+
+                <!-- <div v-if="this.$store.state.template.editWebsiteClass == 5">
+                    <searchInput5Style :dataSort="dataSort" />
+                </div> -->
+
+                <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                    <searchInput7Style :dataSort="dataSort" />
+                </div>
+
+            </div>
+            <div class="listRouterBox">
+                当前位置：首页 > <span>搜索</span>
+            </div>
+            <div class="listContentBox">
+                <div
+                    :class="['listContentBoxLeft', { buildingBorder3: this.$store.state.template.previewStatus == false }]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="14"
+                        :sectorName="this.$store.state.template.pageData.search[dataSort].content.sectorName" />
+
+                    <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                        <list7Style
+                            :componentStyle="this.$store.state.template.pageData.search[dataSort].content.componentList[1].component_style" />
+                    </div>
+
+                </div>
+            </div>
+            <div class="paginationBox">
+                <div :class="'paginationBoxLeft paginationBoxLeft' + this.$store.state.template.editWebsiteClass">
+                    <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'
+//1200x1040 
+// import list5Style from '../../../../../../../style/components/list/900x2040/1.vue'
+// import list7Style from '../../../../../../../style/components/list/900x2040/1.vue'
+import list7Style from '../../../../../../../style/components/list/1200x1400/7/1.vue'
+
+//1200x1040
+// import searchInput7Style from '../../../../../../../style/components/search/700x46/5.vue'
+import searchInput7Style from '../../../../../../../style/components/search/700x46/7/1.vue'
+
+
+//组件研发中
+import atWork from '../../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+
+        list7Style,
+        // searchInput5Style,
+        searchInput7Style,
+        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-bottom: 2px dashed #999;
+}
+
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-left: none;
+    border-right: none;
+}
+
+.searchListBigBox {
+    width: 100%;
+    height: 1720px;
+
+    .listBox {
+        width: 1200px;
+        height: 1720px;
+        margin: 0 auto;
+
+        .searchInputBox {
+            height: 46px;
+            margin: 0 auto 34px;
+             
+            box-sizing: border-box;
+            position: relative;
+            box-sizing: content-box;
+        }
+
+        .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: 30px;
+
+            .listContentBoxLeft {
+                width: 1200px;
+                height: 1400px;
+                position: relative;
+            }
+        }
+
+        .paginationBox {
+            height: 100px;
+
+            .paginationBoxLeft {
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+
+}
+
+.paginationBoxLeft {
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #A72213;
+    }
+
+    .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;background-color: #F6F6F6;
+        height: 34px;
+        border-radius: 4px;
+        line-height: 34px;
+    }
+
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #A72213;
+        color: #fff;
+    }
+}
+//样式2
+.paginationBoxLeft2 {
+    // width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #A91B33;
+    }
+    .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: #A91B33;
+        color: #fff;
+    }
+}
+//样式3
+.paginationBoxLeft3 {
+    // width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #c82200;
+    }
+    .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: #c82200;
+        color: #fff;
+    }
+}
+//样式4
+.paginationBoxLeft4 {
+    // width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #fe8f00;
+    }
+    .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: #fe8f00;
+        color: #fff;
+    }
+}
+//样式5
+.paginationBoxLeft5 {
+    // width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #3848a0;
+    }
+    .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: #3848a0;
+        color: #fff;
+    }
+}
+</style>

src/views/template/style/sector/foot/1200x680/1.vue

@@ -1,9 +1,12 @@
 <template>
     <div>
-        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass">
+        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass== 5 || this.$store.state.template.editWebsiteClass== 6">
+
             <div class="footerLogoBox">
+                 
                 <img src="http://192.168.1.234:19000/pre/image/jpeg/20251224/1766538399880609.jpg" alt="" v-if="this.$store.state.template.editWebsiteClass==5">
                 <img src=" http://192.168.1.234:19000/pre/image/png/20251218/1766050741394985.png" alt="" v-if="this.$store.state.template.editWebsiteClass==6">
+                 
             </div>
             <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                 <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
@@ -61,6 +64,78 @@
                 </div>
             </div>
         </div>
+
+        <!-- 皮肤7皮肤7 -->
+        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass == 7">
+            
+            <div class="index_1_top_box">
+                <h4 class="index_1_top_h4">
+                    <span class=" ">友情链接 </span>
+                </h4> 
+            </div>
+
+            <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
+                    :key="item.id">
+            </div> 
+            <div class="textLinkBox">
+                <div class="textLinkBoxLeft">
+                    <span>友情链接：</span>
+                </div>
+                <div class="textLinkBoxRight">
+                    <span v-for="item in this.$store.state.template.webSiteFooterInfo.link_text" :key="item.id">{{
+                        item.title }}</span>
+                </div>
+            </div>
+            <div class="footerMenuBox">
+                <div class="footerMenu">
+                    <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">
+                        {{ item.name }}
+                    </div> 
+                </div>
+            </div>
+            <div class="footInfoBox">
+                <div :class="['footerInfoBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                    <div class="footerInfoBoxContent" v-if="this.$store.state.template.webSiteFooterInfo">
+                        <div class="footerInfoBoxContentLeft">
+                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.company_logo">
+                        </div>
+                        <div class="footerInfoBoxContentMain">
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.statement"
+                                class="foot_text_html_css"></p>
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.organizer"
+                                class="foot_text_html_css"></p>
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.copyright_information"
+                                class="foot_text_html_css"></p>
+                            <p>
+                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.icp_number"
+                                    class="foot_text_html_css"></span>
+                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.record_number"
+                                    class="foot_text_html_css"></span>
+                            </p>
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.email"
+                                class="foot_text_html_css"></p>
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.company_address"
+                                class="foot_text_html_css"></p>
+                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.contact_number"
+                                class="foot_text_html_css"></p>
+                        </div>
+                        <div class="footerInfoBoxContentRight">
+                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
+                        </div>
+                    </div>
+                    <div class="footerInfoBoxBottom"> 
+                        
+                        <img :src="item.logo_url" 
+                            v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot"
+                            :key="item.id">
+
+
+                    </div>
+                </div>
+            </div>
+        </div> 
+
     </div>
 </template>
 
@@ -307,4 +382,53 @@ export default {
         background-color: @style6color;
     }
 }
+
+//样式7 
+@style7color: #A72213;
+@style7BorderRight: #D9D9D9 1px solid;
+
+.footerStyle7 {
+
+             .index_1_top_box{height:42px;text-align:center; margin:0px auto 54px;}
+        .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
+                            padding:0px 20px;margin:0px auto;
+                        }
+        .index_1_top_h4::after{content:'';position:absolute;
+                left:-440px;top:14px; 
+            height:20px;width:440px; 
+            
+            background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
+            background-size: auto 100%;   
+        }
+        .index_1_top_h4::before{content:'';position:absolute;
+                right:-440px;top:14px;
+            height:20px;width:440px;  
+            background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
+            background-size: auto 100%;   
+
+        }
+
+        .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
+                            color:#333;font-size:32px;
+                            font-weight:normal;
+                        }
+
+        .footerMenuBox {
+            background-color: #FAFAFA;
+        }
+        
+        .footerMenu { 
+            div {
+                border-right: @style7BorderRight;
+                width: 260px!important;
+                color: #333!important;
+            }
+        }
+
+        .footInfoBox {
+            background-color: @style7color;
+        }
+}
+
+
 </style>

src/views/template/style/sector/head/1200x250/1.vue

@@ -16,6 +16,7 @@
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
             </div>
         </div>
+
         <!-- 皮肤6样式 -->
         <div class="style6" v-if="this.$store.state.template.editWebsiteClass == 6">
             <div class="headTopBoxBg">
@@ -32,6 +33,27 @@
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
             </div>
         </div>
+
+        <div class="headTopBox_7" v-if="this.$store.state.template.editWebsiteClass == 7">
+
+            <div class="headTopBoxBg">
+
+                <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
+                <div class="headTopInfoRight">
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748328204272390.png" alt="搜索">搜索</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329860825368.png" alt="广告服务">广告服务</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329883541848.png" alt="登录">登录</div>
+                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/174832996345491.png" alt="注册">注册</div>
+                </div>
+            </div>
+
+            <div class="headLogoBox">
+                <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
+            </div>
+
+        </div>
+
+
     </div>
 </template>
 
@@ -61,6 +83,7 @@ export default {
 <style scoped lang="less">
 //风格1
 .headStyle5 {
+
     width: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -203,5 +226,93 @@ export default {
             }
         }
     }
+
+    
+    .headTopBox_7 {
+        position: relative;
+        width: 100%;
+        height: 250px;
+        .headTopBoxBg {
+
+            width: 1200px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            margin: 0 auto;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .headTopInfoLeft {
+                font-size: 12px;
+                color:#fff;
+            }
+            .headTopInfoRight {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .headInfoItem {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 10px;
+                    cursor: pointer;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+                .headInfoItem:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .headLogoBox {
+
+
+            width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            height: 220px;
+            align-items: center;
+            justify-content: space-between;
+            .logo {
+                max-width: 350px;
+                max-height: 105px;
+                margin-top: -25px;
+            }
+            .headAdTopBox {
+                position: relative;
+                img{
+                    display: block;
+                }
+                .templateEditBtnBox {
+                    right: 0;
+                }
+            }
+        }
+    }
+    .headTopBox_7::before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        /* 你的背景图 */
+        background-image: url('http://192.168.1.234:19000/pre/image/jpeg/20251212/1765503792914829.jpg'); 
+        background-size: cover; /* 覆盖容器 */
+        // background-position: center; /* 居中显示 */
+        z-index: 0; /* 确保背景图在内容下方 */
+    }
+    .headTopBox_7 > * {
+        position: relative;
+        z-index: 1; /* 高于背景图的 z-index: 0 */
+    }   
+
+
 }
+
+
+
+
+
 </style>

src/views/template/style/sector/menu/1200x187/1.vue

@@ -2,18 +2,25 @@
     <div>
         <menuStyle  v-if="this.$store.state.template.editWebsiteClass == 5"/>
         <menuStyle6  v-if="this.$store.state.template.editWebsiteClass == 6"/>
+        <menuStyle7  v-if="this.$store.state.template.editWebsiteClass == 7"/>
+
     </div>
 </template>
 
 <script>
+  
 import menuStyle from '@/views/template/style/components/menu/1200x187/1.vue';
 import menuStyle6 from '@/views/template/style/components/menu/1200x167/1.vue';
 
+ 
+import menuStyle7 from '@/views/template/style/components/menu/1200x187/7/1.vue';
+
 export default {
     props: {},
     components: {
         menuStyle,
         menuStyle6,
+        menuStyle7,
     },
     data() {
         return {

src/views/template/style/sector/menu/1200x187/7/1.vue

@@ -0,0 +1,290 @@
+<template>
+    <div> 
+
+        <!-- 样式7 --> 
+        <div :class="'menuStyle menuStyle' + this.$store.state.template.editWebsiteClass" >
+                 
+                <div class="box1">
+                                <div :class="['menuBoxBg1', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                                    <div class="menuBox" ref="menuBox">
+                                        <div @click="banUse">首页</div>
+                                        <div v-for="item in this.$store.state.template.webSiteMenu1" @click="banUse">
+                                            {{ item.alias }}
+                                        </div>
+                                    </div>
+                                </div>
+                </div>
+
+                <div class="box2">
+                    
+                                <div :class="['menuBoxBg2', { componentBorder: this.$store.state.template.previewStatus == false }]">
+                                    <div class="menuBox" ref="menuBox">
+                                        <div v-for="item in this.$store.state.template.webSiteMenu2" @click="banUse">
+                                            {{ item.alias }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                </div>
+
+        </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+        banUse() {
+            this.$store.commit('template/alertMessage');
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.menuStyle {
+
+    width: 100%;
+    height: 187px;
+
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+
+    .box1 {
+        width: 100%;
+        height: 64px;
+
+        .menuBoxBg1 {
+            width: 1200px;
+            height: 64px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .menuBox {
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                width: 100%;
+
+                div {
+                    width: 12.5%;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    font-size: 16px;
+                    height: 22px;
+                    line-height: 22px;
+                    text-align: center;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #fff;
+                    // margin-bottom: 15px;
+
+                    /* 当是第17个及以后的div时去掉margin-bottom */
+                    &:nth-child(n+17) {
+                        margin-bottom: 0;
+                    }
+
+                    /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                    &:nth-child(8n+1) {
+                        border-left: none;
+                    }
+
+                    /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                    &:nth-child(8n) {
+                        border-right: none;
+                    }
+
+                    /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .box2 {
+        width: 100%;
+        height: 103px;
+
+        .menuBoxBg2 {
+            margin-top: 20px;
+            width: 1200px;
+            height: 103px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .menuBox {
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                width: 100%;
+
+                div {
+                    width: 12.5%;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    font-size: 16px;
+                    height: 38px;
+                    line-height: 38px;
+                    text-align: center;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #333333;
+                    // margin-bottom: 15px;
+
+                    /* 当是第17个及以后的div时去掉margin-bottom */
+                    &:nth-child(n+17) {
+                        margin-bottom: 0;
+                    }
+
+                    /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                    &:nth-child(8n+1) {
+                        border-left: none;
+                    }
+
+                    /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                    &:nth-child(8n) {
+                        border-right: none;
+                    }
+
+                    /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+
+            input {
+                margin-right: 10px;
+            }
+
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}
+
+//样式5
+@style5color: #3848a0;
+@style5color2: #fafafa;
+// @style5BorderRight: #00796B 1px solid;
+// @style5BorderLeft: #00BCD4 1px solid;
+
+//样式5
+@style7color: #9C130A;
+@style7color2: #fafafa;
+
+
+
+
+.menuStyle5 {
+
+    .box1 {
+        background: @style5color;
+
+        .menuBoxBg1 {
+            background: @style5color;
+
+            .menuBox {
+                div {
+                    background: @style5color;
+                }
+            }
+        }
+    }
+
+    .box2 {
+        margin-top: 20px;
+        background: @style5color2;
+
+        .menuBoxBg2 {
+            background: @style5color2;
+
+            .menuBox {
+                div {
+                    background: @style5color2;
+                }
+            }
+        }
+    }
+}
+
+.menuStyle7 {
+     
+    .box1 {
+        background: @style7color;
+
+        .menuBoxBg1 {
+            background: @style7color;
+
+            .menuBox {
+                div {
+                    background: @style7color;
+                }
+            }
+        }
+    }
+
+    .box2 {
+         
+        background: @style7color2;
+
+        .menuBoxBg2 {
+            background: @style7color2;
+
+            .menuBox {
+                div {
+                    background: @style7color2;
+                }
+            }
+        }
+    }
+}
+ 
+
+</style>