admin-2025-12-25-skin7

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

@@ -404,6 +404,30 @@
             </div>
             <div class="sectorItemTitle">带广告新闻组合</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>
+        
+        <!-- 皮肤7-通栏版式-带选项卡图文组合 -->
+
+
+
+
     </div>
 </template>
 
@@ -1799,6 +1823,186 @@ export default {
                 ]
             },
             // 皮肤6 纯图片选项卡通栏 end---------------------------------------->
+
+            
+            //选项卡-新闻图文组合4-皮肤7 start-  热点关注--------------------------------------->
+            newsTextTabsImgSector: {
+                "sectorName": "newsTextTabsImgSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": 
+                            {
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "请选择导航..",
+                                "level": "",
+                                "imgSize": 0,
+                                "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": 2,
+                        "componentData": 
+                            {
+
+                                "category_id": "",
+                                "category_arr": "",
+                                "name": "请选择导航..",
+                                "level": "",
+                                "imgSize": 1,
+                                "textSize": 11,
+                                "child": {
+                                    "id": "",
+                                    "imgSize": "",
+                                    "textSize": ""
+                                },
+                                "listType": [
+                                    "id",
+                                    "title",
+                                    "imgurl",
+                                    "author",
+                                    "updated_at",
+                                    "introduce",
+                                    "islink",
+                                    "linkurl",
+                                    "copyfrom",
+                                    "cat_arr_id",
+                                    "catid",
+                                    "pinyin"
+                                ],
+                            },
+                          
+                    },
+                    {
+                        //选项卡-皮肤7
+                        "component_type": 4,
+                        "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"
+                                ],
+                            },
+                    },
+                ]
+            },
+
+
         }
     },
     methods: {

src/views/template/page/pageIndex.vue

@@ -140,6 +140,16 @@
                         <div v-if="item.type == 'photoTabsSector'" class="moduleBox">
                             <photoTabsSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+
+
+                        <!-- 皮肤7.新闻多图组合3 皮肤7 热点关注 选项卡-->
+                        <div v-if="item.type == 'newsTextTabsImgSector'" class="moduleBox">
+                            <newsTextTabsImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+
+
+
+
                     </div>
                 </grid-item>
             </grid-layout>
@@ -215,6 +225,11 @@ import photoTabsSector from '../style/sector/body/index/list/1200x430/6_1.vue';
 
 //2.引入自助建站组件 end------------------------------------------------------------>
 
+//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
+ 
+import newsTextTabsImgSector from '../style/sector/body/index/list/1200x1150/7/1.vue';
+
+
 
 export default {
     components: {
@@ -247,6 +262,10 @@ export default {
         photoTabsSector,//皮肤6 纯图片选项卡通栏
         footerSector,//全局页尾
         footerSectorStyle5,//全局页尾皮肤5
+
+        newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
+
+
     },
     data() {
         return {

src/views/template/style/components/ad/1200x90/1.vue

@@ -23,10 +23,13 @@ export default {
                 "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756088981912537.jpg",
                 "http://192.168.1.234:19000/pre/image/jpeg/20251223/1766483147860978.jpg", //皮肤5
                 "http://192.168.1.234:19000/pre/image/png/20251218/1766041303638810.png", //皮肤6
+                "http://192.168.1.234:19000/pre/image/jpeg/20251224/1766543103356259.jpg", //皮肤7
                 "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756089046963566.jpg",
                 "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756089100963223.jpg",
                 "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756089122529907.jpg",
-                "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756089147944865.jpg"
+                "https://img.bjzxtw.org.cn/pre/image/jpeg/20250825/1756089147944865.jpg",
+
+
             ]
         };
     },

src/views/template/style/components/headLine/1200x140/7/1.vue

@@ -0,0 +1,1333 @@
+<template>
+    <div>
+        <!--样式1-->
+        <div class="headLineStyle"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式2-->
+        <div class="headLineStyle"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                 深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式3-->
+        <div class="headLineStyle"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>npm run dev
+            </div>
+        </div>
+        <!--样式4-->
+        <div class="headLineStyle headLineContent4"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+        </div>
+        <!--样式5-->
+        <div class="headLineStyle headLineContent5"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 5">
+            <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+                <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
+            </div>
+        </div>
+        <!--样式6-->
+        <div class="headLineStyle headLineContent5"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 6">
+            <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+            </div>
+        </div>
+        <!--样式7-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 7">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                 
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式8-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 8">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式9-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 9">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+            </div>
+        </div>
+        <!--样式10-->
+        <div class="headLineStyle headLineContent10"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 10">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+        </div>
+        <!--样式11-->
+        <div class="headLineStyle headLineContent11"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 11">
+            <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+                <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
+            </div>
+        </div>
+        <!--样式12-->
+        <div class="headLineStyle headLineContent11"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 12">
+            <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+            </div>
+        </div>
+        <!--样式13-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 13">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式14-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 14">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式15-->
+        <div class="headLineStyle headLineContent7"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 15">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+            </div>
+        </div>
+        <!--样式16-->
+        <div class="headLineStyle headLineContent10"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 16">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+        </div>
+        <!--样式17-->
+        <div class="headLineStyle headLineContent11"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 17">
+            <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+                <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
+            </div>
+        </div>
+        <!--样式18-->
+        <div class="headLineStyle headLineContent11"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 18">
+            <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+            </div>
+        </div>
+        <!--样式19-->
+        <div class="headLineStyle headLineContent19"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 19">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574830547503.png" />
+
+                                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+        </div>
+        <!-- 样式20 -->
+        <div class="headLineStyle headLineContent20"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 20">
+            
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式21 -->
+        <div class="headLineStyle headLineContent20"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 21">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!-- 样式22 -->
+        <div class="headLineStyle headLineContent20"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 22">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+            </div>
+        </div>
+        <!-- 样式23 -->
+        <div class="headLineStyle headLineContent23"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 23">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+        </div>
+        <!--样式24-->
+        <div class="headLineStyle headLineContent24"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 24">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+                <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
+            </div>
+        </div>
+        <!--样式25-->
+        <div class="headLineStyle headLineContent24"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 25">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
+            <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
+                :class="{ 'active': activeTab == index }" v-if="activeTab == index">
+                {{ item.title }}
+            </div>
+            <div class="headLineContent">
+                <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
+                <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
+            </div>
+        </div>
+        <!--样式26-->
+        <div class="headLineStyle1_skin26"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 26">
+            <div class="headTip">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
+                
+                
+            </div>
+            <div class="headLineContentBox" ref="contentBox">
+                <div class="headLineSlider">
+                    <div class="headLineTitleBox" v-for="i in 3" :key="index">
+                        <div class="headLineTop">
+                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
+                        </div>
+                        <div class="headLineBottom">
+                            <div v-for="(item, index) in titleList" :key="index">{{ item.title }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="headLineIcon">
+                <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
+                <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
+                <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
+            </div>
+        </div>
+        <!--样式27-->
+        <div class="headLineStyle1_skin26"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 27">
+            <div class="headTip">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
+            </div>
+            <div class="headLineContentBox" ref="contentBox">
+                <div class="headLineSlider">
+                    <div class="headLineTitleBox" v-for="i in 3" :key="index">
+                        <div class="headLineTop">
+                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
+                        </div>
+                        <div class="headLineBottom">
+                            <div v-for="(item, index) in titleList1" :key="index">{{ item.title }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="headLineIcon">
+                <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
+                <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
+                <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
+            </div>
+        </div>
+        <!--样式28-->
+        <div class="headLineStyle1_skin26"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 28">
+            <div class="headTip">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
+            </div>
+            <div class="headLineContentBox" ref="contentBox">
+                <div class="headLineSlider">
+                    <div class="headLineTitleBox" v-for="i in 3" :key="index">
+                        <div class="headLineTop">
+                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
+                        </div>
+                        <div class="headLineBottom">
+                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="headLineIcon">
+                <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
+                <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
+                <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
+            </div>
+        </div>
+        <!--样式29-->
+        <div class="headLineStyle1_skin26"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 29">
+            <div class="headTip">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
+            </div>
+            <div class="headLineContentBox" ref="contentBox">
+                <div class="headLineSlider">
+                    <div class="headLineTitleBox" v-for="i in 3" :key="index">
+                        <div class="headLineMiddle">
+                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="headLineIcon">
+                <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
+                <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
+                <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
+            </div>
+        </div>
+        <!--样式30-->
+        <div class="headLineStyle1_skin26 headLineStyle1_skin30"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 30">
+            <div class="headTip">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
+            </div>
+            <div class="headLineContentBox" ref="contentBox">
+                <div class="headLineSlider">
+                    <div class="headLineTitleBox" v-for="i in 3" :key="index">
+                        <div class="headLineMiddle">
+                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="headLineIcon">
+                <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
+                <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
+                <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
+            </div>
+        </div>
+        <!-- 样式31 -->
+        <div class="headLineStyle headLineStyle1_skin31"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 31">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式32 -->
+        <div class="headLineStyle headLineStyle1_skin32"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 32">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式33 -->
+        <div class="headLineStyle headLineStyle1_skin33"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 33">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式34 -->
+        <div class="headLineStyle headLineStyle1_skin34"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 34">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式35 -->
+        <div class="headLineStyle headLineStyle1_skin35"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 35">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式36 -->
+        <div class="headLineStyle headLineStyle1_skin36"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 36">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!-- 样式37 -->
+        <div class="headLineStyle headLineStyle1_skin37"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 37">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式38 -->
+        <div class="headLineStyle headLineStyle1_skin38"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 38">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!-- 样式39 -->
+        <div class="headLineStyle headLineStyle1_skin39"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 39">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式40 -->
+        <div class="headLineStyle headLineStyle1_skin40"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 40">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!-- 样式41 -->
+        <div class="headLineStyle headLineStyle1_skin41"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 41">
+              
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576345343133.png">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!-- 样式42 -->
+        <div class="headLineStyle headLineStyle1_skin42"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 42">
+             
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576345343133.png">
+            
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式43-->
+        <div class="headLineStyle headLineStyle1_skin43"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 43">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576504667797.png" />
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式44-->
+        <div class="headLineStyle headLineStyle1_skin44"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 44">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622190772928.png"/>
+            
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式45-->
+        <div class="headLineStyle headLineStyle1_skin45"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 45">
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+        <!--样式46-->
+        <div class="headLineStyle headLineStyle1_skin46"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 46">
+             
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622765452955.png"/>
+
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式47-->
+        <div class="headLineStyle headLineStyle1_skin47"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 47">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766623103788150.png" />
+            
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式48-->
+        <div class="headLineStyle headLineStyle1_skin48"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 48">
+            <div class="headLineTitle">
+                <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622765452955.png" />
+                
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+        <!--样式49-->
+        <div class="headLineStyle headLineStyle1_skin49"
+            v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 49">
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766623378213254.png" />
+            <div class="headLineTitle">
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            activeIndex: 0,//皮肤2新增
+            activeTab: 0,//皮肤1
+            titleList: [
+                {
+                    title: '深入推进周边命运共同体建设 以人工智能引领科研范式变革',
+                },
+                {
+                    title: '深刻理解新形势下中国周边工作的理念与行动',
+                },
+                {
+                    title: '构建周边命运共同体 携手开创亚洲新未来',
+                }
+            ],
+            titleList1: [
+                {
+                    title: '深入推进周边命运共同体建设 以人工智能引领科研范式变革',
+                },
+                {
+                    title: '深刻理解新形势下中国周边工作的理念与行动',
+                }
+            ],
+        };
+    },
+    methods: {
+        setActive(index) {
+            this.activeIndex = index;
+            this.$refs.contentBox.scrollTo({
+                top: index * 100,
+                behavior: 'smooth'
+            });
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+@themeColor1: #9C130A;
+
+//基本样式
+.headLineStyle {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #9C130A;
+        margin-bottom: 10px;
+
+        img {
+            margin-right: 20px;
+        }
+    }
+
+    .headLineContent {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color: #333333;
+
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+//样式4
+.headLineContent4 {
+    line-height: 80px;
+}
+
+//样式5
+.headLineContent5 {
+    .headLineContent {
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        div {
+            width: 360px;
+            height: 5px;
+            background: #ccdae0;
+            margin-right: 10px;
+        }
+
+        .active {
+            background: @themeColor1;
+        }
+    }
+}
+
+//样式7
+.headLineContent7 {
+    .headLineTitle {
+        img {
+            margin-right: 30px;
+        }
+    }
+}
+
+//样式10
+.headLineContent10 {
+    line-height: 80px;
+
+    .headLineTitle {
+        img {
+            margin-right: 30px;
+        }
+    }
+}
+
+//样式11
+.headLineContent11 {
+    .headLineTitle {
+        img {
+            margin-right: 30px;
+        }
+    }
+
+    .headLineContent {
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        div {
+            width: 360px;
+            height: 5px;
+            background: #ccdae0;
+            margin-right: 10px;
+        }
+
+        .active {
+            background: @themeColor1;
+        }
+    }
+}
+
+//样式19
+.headLineContent19 {
+    padding: 35px 50px 35px 50px;
+    line-height: 140px;
+    margin-bottom: 0;
+
+    .headLineTitle {
+        width: 1100px;
+        height: 70px;
+        line-height: 140px;
+        background-color: #f6fcff;
+        position: relative;
+
+        img {
+            width: 46px;
+            height: 46px;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+    }
+}
+
+//样式20
+.headLineContent20 {
+    width: 1196px;
+    height: 136px;
+    background-color: #fafafa;
+    position: relative;
+    padding-top: 32px;
+
+    img {
+        width: 63px;
+        height: 32px;
+        position: absolute;
+        top: 34px;
+        left: 30px;
+    }
+}
+
+//样式23
+.headLineContent23 {
+    width: 1196px;
+    height: 136px;
+    background-color: #fafafa;
+    position: relative;
+    padding: 50px 100px 50px 100px;
+
+    img {
+        width: 63px;
+        height: 32px;
+        position: absolute;
+        top: 53px;
+        left: 30px;
+    }
+}
+
+//样式24
+.headLineContent24 {
+    width: 1196px;
+    height: 136px;
+    background-color: #fafafa;
+    position: relative;
+
+    img {
+        width: 63px;
+        height: 32px;
+        position: absolute;
+        top: 34px;
+        left: 30px;
+    }
+
+    .headLineContent {
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        div {
+            width: 360px;
+            height: 5px;
+            background: #ccdae0;
+            margin-right: 10px;
+        }
+
+        .active {
+            background: @themeColor1;
+        }
+    }
+}
+
+//样式26 样式27
+.headLineStyle1_skin26 {
+    border: 1px solid #E4E4E4;
+    width: 1200px;
+    height: 140px;
+    box-sizing: border-box;
+    padding: 32px 15px 32px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .headLineContentBox {
+        width: 1000px;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        scrollbar-width: none;
+
+        .headLineSlider {
+            display: flex;
+            flex-direction: column; // 改为垂直方向
+            width: 100%;
+            height: 210px; // 3个titleBox，每个70px高
+        }
+    }
+
+    .headLineTitleBox {
+        text-align: center;
+        height: 70px; // 明确设置高度
+        width: 100%;
+        margin-bottom: 30px;
+        flex-shrink: 0; // 防止收缩
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .headLineTop {
+            font-size: 30px;
+            color: #9C130A;
+            margin-bottom: 15px;
+            font-weight: bold;
+        }
+
+        .headLineMiddle {
+            font-size: 30px;
+            color: #9C130A;
+            font-weight: bold;
+        }
+
+        .headLineBottom {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            div {
+                width: 32%;
+                margin-right: 30px;
+                font-size: 18px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    .headLineIcon {
+        div {
+            width: 10px;
+            height: 10px;
+            background: #EDEDED;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.active {
+                background: #9C130A;
+            }
+
+            &:hover {
+                background: #9C130A;
+            }
+        }
+    }
+}
+
+//样式30
+.headLineStyle1_skin30 {
+    border: none;
+}
+
+//样式31
+.headLineStyle1_skin31 {
+    width: 1200px;
+    height: 138px;
+    border-top: 1px solid #9C130A;
+    border-bottom: 1px solid #9C130A;
+
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+
+//样式32
+.headLineStyle1_skin32 {
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+
+//样式33
+.headLineStyle1_skin33 {
+    width: 1200px;
+    height: 138px;
+    border-top: 1px solid #333333;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #333333;
+        }
+    }
+}
+
+//样式34
+.headLineStyle1_skin34 {
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #333333;
+        }
+    }
+}
+
+//样式35
+.headLineStyle1_skin35 {
+    width: 1200px;
+    height: 138px;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #333333;
+        }
+    }
+}
+
+//样式36
+.headLineStyle1_skin36 {
+    width: 1200px;
+    height: 138px;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #333333;
+        }
+    }
+}
+
+//样式37
+.headLineStyle1_skin37 {
+    width: 1200px;
+    height: 138px;
+    border-top: 1px solid #333333;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #999999;
+        }
+    }
+}
+
+//样式38
+.headLineStyle1_skin38 {
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #999999;
+        }
+    }
+}
+
+//样式39
+.headLineStyle1_skin39 {
+    width: 1200px;
+    height: 138px;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #999999;
+        }
+    }
+}
+
+//样式40
+.headLineStyle1_skin40 {
+    width: 1200px;
+    height: 138px;
+    border-bottom: 1px solid #333333;
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #999999;
+        }
+    }
+}
+
+//样式41
+.headLineStyle1_skin41 {
+    width: 1196px;
+    height: 130px;
+    background-color: #f9fafb;
+    border-top: 2px solid #9C130A;
+    position: relative;
+    margin-top: 5px;
+
+    img {
+        position: absolute;
+        top: -6px;
+        left: -10px;
+        width: 100px;
+        height: 47px;
+    }
+
+    .headLineTitle {
+        margin-bottom: 20px;
+    }
+
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+
+//样式42
+.headLineStyle1_skin42 {
+    width: 1196px;
+    height: 130px;
+    background-color: #f9fafb;
+    border-top: 2px solid #333333;
+    position: relative;
+    margin-top: 5px;
+
+    img {
+        position: absolute;
+        top: -6px;
+        left: -10px;
+        width: 100px;
+        height: 47px;
+    }
+
+    .headLineTitle {
+        color: #333333;
+        margin-bottom: 15px;
+    }
+
+    .headLineContent {
+        div {
+            color: #333333;
+        }
+    }
+}
+//样式43
+.headLineStyle1_skin43 {
+    position: relative;
+    img{
+        position: absolute;
+        top: 30px;
+        left: 93px;
+        width: 46px;
+        height: 76px;
+    }
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+}
+//样式44
+.headLineStyle1_skin44 {
+    position: relative;
+    img{
+        position: absolute;
+        top: 27px;
+        left: 50px;
+        width: 92px;
+        height: 82px;
+    }
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+}
+//样式45
+.headLineStyle1_skin45 {
+    background-color: #fafafa;width:100%;height:100%;
+    .headLineTitle {
+        margin-bottom: 20px;
+    }
+}
+//样式46
+.headLineStyle1_skin46 {
+    position: relative;
+    img{
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 70px;
+        height: 32px;
+    }
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+//样式47
+.headLineStyle1_skin47 {
+    padding:30px 120px;
+    position: relative;
+    img{
+        position: absolute;
+        top: 36px;
+        left: 30px;
+        width: 64px;
+        height: 71px;
+    }
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+//样式48
+.headLineStyle1_skin48 {
+
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+}
+//样式49
+.headLineStyle1_skin49 {
+    padding:30px 130px;
+    position: relative;
+    img{
+        position: absolute;
+        top: 18px;
+        left: 90px;
+        width: 54px;
+        height: 54px;
+    }
+    .headLineTitle {
+        margin-bottom: 15px;
+    }
+    .headLineContent {
+        div {
+            color: #9C130A;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,482 @@
+<template>
+    <div>
+        
+         <div class="ul_box_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 pageData.slice(0,2)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+ 
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(2,6)" >{{ item.title }}</div>
+            </div>
+
+            <div class="img_ul">
+
+                <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(5,9)" >{{ item.title }}</div>
+            </div>
+
+         </div>
+        
+         <div class="ul_box_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,4)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+
+            </div>
+
+            <div class="ul_box">
+
+                <div class="ul_li" v-for="(item,index) in pageData.slice(2,12)" >{{ item.title }}</div>
+            </div>
+
+         </div>
+         
+        <div class="ul_box_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,2)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(2,6)" >{{ item.title }}</div>
+            </div>
+
+            <div class="img_ul">
+
+                <div class="img_ul_li" v-for="(per_obj,per_index) in pageData.slice(2,4)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(4,8)" >{{ item.title }}</div>
+            </div>
+
+        </div>
+        
+        <div class="ul_box_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,4)">
+                    
+                    <img class="img_ul_li_img" :src="per_obj.src" alt="">
+                    <div  class="img_ul_li_dot4">{{ per_obj.text }}</div>
+
+                </div>
+
+            </div>
+
+            <div class="ul_box">
+
+                <div class="ul_li" v-for="(item,index) in pageData.slice(2,12)" >{{ item.title }}</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:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:""},
+					{year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:""},
+					{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:""},
+				],
+            activeTab: 0
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+//基本样式
+.tabsNewsBox {
+    .tabsNewsTitle {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        border-bottom: 1px solid #999999;
+        height: 38px;
+        margin-bottom: 15px;
+
+        div {
+            height: 35px;
+            width: 138px;
+            line-height: 32px;
+            font-size: 22px;
+            font-weight: bold;
+            color: #333333;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #3848A0;
+            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762224944805589.png") bottom left no-repeat;
+        }
+    }
+
+    .tabsNewsContent {
+        width: 100%;
+        height: 370px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        .tabsNewsContentLeft {
+            position: relative;
+            width: 585px;
+            height: 370px;
+            margin-right: 30px;
+            cursor: pointer;
+
+            img {
+                width: 585px;
+                height: 370px;
+            }
+
+            div {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 585px;
+                height: 60px;
+                line-height: 60px;
+                color: #fff;
+                font-size: 18px;
+                font-weight: bold;
+                padding-left: 20px;
+            }
+        }
+
+        .tabsNewsContentRight {
+            width: 585px;
+            height: 370px;
+            padding-top: 5px;
+
+            div {
+                width: 580px;
+                color: #333333;
+                font-size: 18px;
+                margin-bottom: 22px;
+                padding-left: 16px;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;
+
+                &:nth-child(1),
+                &:nth-child(4),
+                &:nth-child(7) {
+                    font-weight: bold;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+    .style2 {
+        .tabsNewsContentLeft {
+            margin-right: 0;
+        }
+
+        .tabsNewsContentRight {
+            margin-right: 30px;
+        }
+    }
+
+    .style3 {
+        .tabsNewsContentRight {
+            div {
+                padding-left: 16px;
+                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+            }
+        }
+    }
+
+    .style4 {
+        .tabsNewsContentLeft {
+            margin-right: 0;
+        }
+
+        .tabsNewsContentRight {
+            margin-right: 30px;
+
+            div {
+                padding-left: 16px;
+                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+            }
+        }
+    }
+
+    .style6 {
+        .tabsNewsContentLeft {
+            margin-right: 0;
+        }
+
+        .tabsNewsContentRight {
+            margin-right: 30px;
+        }
+    }
+
+    .style7 {
+        .tabsNewsContentRight {
+            div {
+                padding-left: 16px;
+                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+            }
+        }
+    }
+
+    .style8 {
+        .tabsNewsContentLeft {
+            margin-right: 0;
+        }
+
+        .tabsNewsContentRight {
+            margin-right: 30px;
+
+            div {
+                padding-left: 16px;
+                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+            }
+        }
+    }
+
+    // 下边框为虚线
+    .dashed {
+        border-bottom: dashed 1px #999999;
+    }
+
+}
+
+.tabsNewsBox{display:none;}
+
+.ul_box_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;flex: 1;
+                        margin-top:17px;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+    .ul_box{
+
+        margin-top:23px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                margin-bottom:24px;
+                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; }
+
+    }
+}
+
+.ul_box_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:23px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                margin-bottom:24px;
+                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; }
+
+    }
+} 
+
+
+.ul_box_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;flex:1;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+    .ul_box{
+
+        margin-top:23px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                margin-bottom:24px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li:nth-of-type(1){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; }
+
+    }
+}
+
+
+.ul_box_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;flex:1;
+                    overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;
+        }
+
+
+    .ul_box{
+
+        margin-top:23px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:16px;
+                margin-bottom:24px;
+                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(4n-3){font-weight:bold;}
+
+
+
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:6px;height:6px;background:#F2F2F2; }
+
+    }
+} 
+
+
+
+</style>

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

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

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

@@ -0,0 +1,464 @@
+<template>
+    <div class="listNewsBox">
+
+        <div class="listNewsTitle_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
+
+            <span>{{name}}</span>
+        </div>
+     
+         <div class="ul_box_1" v-if="componentStyle == 1">
+
+
+
+            <h4 class="ul_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="ul_img_box">
+                <img class="" src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg" title="" alt="">
+                <span class="ul_img_dot1">滑坡发生山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</span>
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(0,4)"  >{{ item.title }}</div>
+            </div>
+
+         </div>
+
+         <div class="ul_box_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,4)"  >{{ item.title }}</div>
+            </div>
+            <div class="ul_img_box">
+                    <img class="" src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg" title="" alt="">
+                    <span class="ul_img_dot1">滑坡发生山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</span>
+            </div>
+
+         </div>
+
+         <div class="ul_box_3" v-if="componentStyle == 3">
+
+            <h4 class="ul_head">
+                <span class=" ">{{name}}</span>
+            </h4>
+
+            <div class="ul_img_box">
+                    <img class="" src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg" title="" alt="">
+                    <span class="ul_img_dot1">滑坡发生山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</span>
+            </div>
+
+            <div class="ul_box">
+                <div class="ul_li" v-for="(item,index) in pageData.slice(0,4)"  >{{ item.title }}</div>
+            </div>
+
+         </div>
+
+         <div class="ul_box_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,4)"  >{{ item.title }}</div>
+            </div>
+            <div class="ul_img_box">
+                    <img class="" src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766477567550742.jpg" title="" alt="">
+                    <span class="ul_img_dot1">滑坡发生山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</span>
+            </div>
+
+         </div>
+
+         <div class="ul_box_5" v-if="componentStyle == 5">
+
+            <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,12)"  >{{ item.title }}</div>
+            </div>
+
+         </div>
+
+         <div class="ul_box_6" v-if="componentStyle == 6">
+
+            <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,11)"  >{{ item.title }}</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:"2024-05",day:"05",title:"国际观察：以对历史文明的敬重促进中美民心相通",time:"2025-02-17",text:"近日，中国驻美国使馆在华盛顿代表中方接收美方民间机构代表、莫里斯艺术法律事务所代为返还的虎型牌饰文物。此次返还 的虎型牌饰文物具有典型的鄂尔多斯青铜艺术风格，是春秋至战国时期中国北方草原文物的重要代表，对于研究中国古代草原 文化与族群交流具有重要意义。",src:""},
+                {year:"2025-06",day:"06",title:"中国式现代化是实干出来的现代化（国际论坛）",time:"2025-02-21",text:"每一个五年规划的制定与落实，都凝结了顶层设计、制度执行与社会动员的合力，使中国的现代化建设具有连续性与可预期性",src:""},
+                {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;}
+
+
+.ul_box_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_img_box{width:100%;height:268px;position:relative;margin-top:20px;}
+     .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;
+     }
+
+    .ul_box{
+
+        margin-top:28px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+    }
+}
+
+.ul_box_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_img_box{width:100%;height:268px;position:relative;margin-top:28px;}
+     .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;
+     }
+
+    .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:9px;
+                margin-bottom:20px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li:last-child{
+            margin-bottom: 0;
+        }
+
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+    }
+}
+ 
+
+.ul_box_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_img_box{width:100%;height:268px;position:relative;margin-top:20px;}
+     .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;
+     }
+
+    .ul_box{
+
+        margin-top:28px;overflow:hidden;width:100%;
+
+        .ul_li{line-height:24px;height:24px;position:relative;color:#333;font-size:18px;text-indent:9px;
+                margin-bottom:20px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li:nth-of-type(1){font-weight:bold;}
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+    }
+}
+
+.ul_box_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_img_box{width:100%;height:268px;position:relative;margin-top:28px;}
+     .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;
+     }
+
+    .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:9px;
+                margin-bottom:20px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li:nth-of-type(1){font-weight:bold;}
+        .ul_li:last-child{
+            margin-bottom: 0;
+        }
+
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+    }
+}
+
+.ul_box_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:9px;
+                margin-bottom:19px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li::before{content:'';position:absolute;left:0px;top:10px; 
+            width:4px;height:4px;background:#F2F2F2;border-radius:2px; }
+
+    }
+}
+
+.ul_box_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:9px;
+                margin-bottom:19px;
+                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        .ul_li:nth-of-type(1){font-weight:bold;}
+
+        .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/790x500/7/1.vue

@@ -0,0 +1,608 @@
+<template>
+    <div>
+             
+            <div class="box_1" v-if="componentStyle == 1">
+
+                <h4 class="ul_head">
+                    <!-- <span class="ul_head_only">名优品牌</span>
+                    <span class=" ">民生调研</span> -->
+
+                    <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="box_1_in">
+                    <div class="box_1_card">
+
+                        <div class="img_ul">
+                            <div class="img_ul_li" v-for="(item,index) in pageData.slice(0,3)">
+                                <img class="" :src="item.src" title="" alt="">
+                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
+                            </div>
+                        </div>
+                        
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+            </div>
+            
+            <div class="box_2" v-if="componentStyle == 2">
+
+                <h4 class="ul_head">
+                    <!-- <span class="ul_head_only">名优品牌</span>
+                    <span class=" ">民生调研</span> -->
+
+                    <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="box_1_in">
+                    <div class="box_1_card">
+
+                        <div class="img_ul">
+                            <div class="img_ul_li" v-for="(item,index) in pageData.slice(0,3)">
+                                <img class="" :src="item.src" title="" alt="">
+                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
+                            </div>
+                        </div>
+                        
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </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="box_1_in">
+                    <div class="box_1_card">
+
+                        <div class="img_ul">
+                            <div class="img_ul_li" v-for="(item,index) in pageData.slice(0,3)">
+                                <img class="" :src="item.src" title="" alt="">
+                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
+                            </div>
+                        </div>
+                        
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+            </div>
+
+            <div class="box_4" v-if="componentStyle == 4">
+
+                <h4 class="ul_head">
+                    <!-- <span class="ul_head_only">名优品牌</span>
+                    <span class=" ">民生调研</span> -->
+
+                    <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="box_1_in">
+                    <div class="box_1_card">
+
+                        <div class="img_ul">
+                            <div class="img_ul_li" v-for="(item,index) in pageData.slice(0,3)">
+                                <img class="" :src="item.src" title="" alt="">
+                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
+                            </div>
+                        </div>
+                        
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+            </div>
+            
+            <div class="box_5" v-if="componentStyle == 5">
+
+
+                <h4 class="ul_head">
+                    <!-- <span class="ul_head_only">名优品牌</span>
+                    <span class=" ">民生调研</span> -->
+
+                    <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="box_1_in">
+                    <div class="box_1_card">
+  
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+            </div>
+            
+            <div class="box_6" v-if="componentStyle == 6">
+
+
+                <h4 class="ul_head">
+                    <!-- <span class="ul_head_only">名优品牌</span>
+                    <span class=" ">民生调研</span> -->
+
+                    <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="box_1_in">
+                    <div class="box_1_card">
+  
+                        <div class="ul_box">
+
+                            <div class="ul_li" v-for="(item,index) in pageData.slice(0,10)">
+                                <a class=" " href="" title="">
+                                    <div class="ul_li_time"> {{ item.time }} </div>
+                                    <div class="ul_li_dot1"> {{ item.title }} </div>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+            </div>
+            
+            
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name1:{
+            type:String,
+            default:""
+        },
+        name2:{
+            type:String,
+            default:""
+        },
+        componentStyle:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            activeTab:0,
+            ul_head_only:0,
+			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:""},
+					{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">
+    .tabsNewsBox{display:none;}
+
+    .box_1{
+
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+        .img_ul{width:185px;float:left;}
+        .img_ul_li{width:100%;height:130px;position:relative;margin-bottom:20px;}
+        .img_ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+        .img_ul_li img{display:block;width:100%;height:100%;}
+        .img_ul_li_dot1{position:absolute;bottom:0px;left:0px;width:100%;
+                        height:30px;line-height:30px;text-align:center;font-size:12px;
+                        color:#fff; box-sizing:border-box;
+                        padding:0px 21px; 
+                        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    }
+        
+        .ul_box{width:585px;float:right;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    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(5n-4) *{font-weight:bold; }       
+
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+
+    .box_2{
+        
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+        .img_ul{width:185px;float:right;}
+        .img_ul_li{width:100%;height:130px;position:relative;margin-bottom:20px;}
+        .img_ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+        .img_ul_li img{display:block;width:100%;height:100%;}
+        .img_ul_li_dot1{position:absolute;bottom:0px;left:0px;width:100%;
+                        height:30px;line-height:30px;text-align:center;font-size:12px;
+                        color:#fff; box-sizing:border-box;
+                        padding:0px 21px; 
+                        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    }
+        
+        .ul_box{width:585px;float:left;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    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(5n-4) *{font-weight:bold; }       
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+    
+
+    .box_3{
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+        .img_ul{width:185px;float:left;}
+        .img_ul_li{width:100%;height:130px;position:relative;margin-bottom:20px;}
+        .img_ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+        .img_ul_li img{display:block;width:100%;height:100%;}
+        .img_ul_li_dot1{position:absolute;bottom:0px;left:0px;width:100%;
+                        height:30px;line-height:30px;text-align:center;font-size:12px;
+                        color:#fff; box-sizing:border-box;
+                        padding:0px 21px; 
+                        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    }
+        
+        .ul_box{width:585px;float:right;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+         .ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+
+
+    .box_4{
+        
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+        .img_ul{width:185px;float:right;}
+        .img_ul_li{width:100%;height:130px;position:relative;margin-bottom:20px;}
+        .img_ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+        .img_ul_li img{display:block;width:100%;height:100%;}
+        .img_ul_li_dot1{position:absolute;bottom:0px;left:0px;width:100%;
+                        height:30px;line-height:30px;text-align:center;font-size:12px;
+                        color:#fff; box-sizing:border-box;
+                        padding:0px 21px; 
+                        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
+                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                    }
+        
+        .ul_box{width:585px;float:left;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+         .ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+           
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+    
+
+    .box_5{
+
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+         
+        .ul_box{width:100%;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    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(5n-4) *{font-weight:bold; }       
+
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+
+    .box_6{
+
+        .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;}
+    
+        .box_1_in{}
+        .box_1_card{overflow:hidden;margin-top:19px;}
+         
+        .ul_box{width:100%;}
+        .ul_li{ height:21px;margin-bottom:24px;}
+        .ul_li_time{ float:right;min-width:47px;height:21px;line-height:21px;font-size:16px;color:#999;margin-left:44px;}
+        .ul_li_dot1{ height:21px;line-height:21px;font-size:16px;color:#333;position:relative;text-indent:16px;
+                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                }
+         .ul_li:nth-last-of-type(1){margin-bottom:0px;}       
+
+        .ul_li_dot1::before{content:"";position:absolute;top:7px;left:0px;width:6px;height:6px;
+                            background-color:#F2F2F2;}
+    }
+
+//基本样式
+.tabsNewsBox {
+    .tabsNewsTitle {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        border-bottom: 1px solid #999999;
+        height: 38px;
+        div {
+            height:35px;
+            width: 138px;
+            line-height: 32px;
+            font-size: 22px;
+            font-weight: bold;
+            color: #333333;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &.activeTab {
+                color: #3848A0;
+                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762224944805589.png") bottom left no-repeat;
+            }
+        }
+    }
+    .tabsNewsContent {
+        .textTop{
+            display: flex;
+            height: 100px;
+            padding-left: 0;
+            div{
+                background: #fff;
+                padding-left: 0;
+                margin-top: 0;
+            }
+            .time{
+                display: block;
+                width: 100px;
+                height: 100px;
+                background: #eaf3ff;
+                padding: 0 12px ;
+                div{
+                    background-color: #eaf3ff;
+                    display: block;
+                }
+                
+                .day{
+                    width: 100%;
+                    height: 57px;
+                    line-height: 57px;
+                    font-size: 38px;
+                    color: #3848A0;
+                    text-align: center;
+                    border-bottom: 1px solid #3848A0;
+                }
+                .month{
+                    width: 100%;
+                    height: 43px;
+                    line-height: 43px;
+                    font-size: 16px;
+                    color: #3848A0;
+                    text-align: center;
+                }
+            }
+            .text{
+                width: 615px;
+                height: 100px;
+                display: block;
+                margin-right: 50px;
+                .title{
+                    width: 100%;
+                    height: 24px;
+                    line-height: 24px;
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #333333;
+                    margin-bottom: 20px;
+                }
+                .content{
+                    width: 100%;
+                    max-height: 63px;
+                    line-height: 20px;
+                    font-size: 16px;
+                    color: #999999;
+                }
+            }
+        }
+        div {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px;
+            height: 21px;
+            line-height: 21px;
+            color: #333333;
+            cursor: pointer;
+            span {
+                color: #999999;
+            }
+        }
+    }
+    //样式1,2
+    .style1,
+    .style2 {
+        div {
+            padding-left: 16px;
+            background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;
+        }
+    }
+    //样式3,4
+    .style3,
+    .style4 {
+        div {
+            padding-left: 16px;
+            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+        }
+    }
+    // 下边框为虚线
+    .dashed {
+        border:dashed 1px #999999;
+    }
+    //样式5,6
+    .style5,
+    .style6 {
+        div {  
+            padding-left: 16px;
+            background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;
+        }
+    }
+    //样式7,8
+    .style7,
+    .style8 {
+        div {
+            padding-left: 16px;
+            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
+        }
+    }
+}
+</style>
+

src/views/template/style/sector/body/index/headLine/1200x140/1.vue

@@ -19,6 +19,12 @@
         <div v-if="this.$store.state.template.editWebsiteClass==6">
             <headLineStyle6 :dataSort="dataSort"/>
         </div>
+
+        <div v-if="this.$store.state.template.editWebsiteClass==7">
+            <headLineStyle7 :dataSort="dataSort"/>
+        </div>
+
+
     </div>
 </template>
 
@@ -30,6 +36,10 @@ import headLineStyle3 from '../../../../../../style/components/headLine/1200x140
 import headLineStyle4 from '../../../../../../style/components/headLine/1200x140/4.vue'
 import headLineStyle5 from '../../../../../../style/components/headLine/1200x140/5.vue'
 import headLineStyle6 from '../../../../../../style/components/headLine/1200x140/6.vue'
+ 
+// 皮肤7
+import headLineStyle7 from '../../../../../../style/components/headLine/1200x140/7/1.vue'
+
 
 import atWork from '../../../../../../public/atWork.vue'
 
@@ -42,6 +52,8 @@ export default {
         headLineStyle4,
         headLineStyle5,
         headLineStyle6,
+        
+        headLineStyle7,
         atWork//组件研发中
     },
     props: {

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

@@ -0,0 +1,365 @@
+<template>
+    <div class="commentSectorBox">
+         
+        <div :class="['commentSector', {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_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="1" 
+                            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="1" 
+                            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="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.index[dataSort].content.componentList[0].componentData.name" 
+                            :componentStyle="this.$store.state.template.pageData.index[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.index[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.index[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.index[dataSort].content.componentList[1].componentData.name" 
+                            :componentStyle="this.$store.state.template.pageData.index[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="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="2" 
+                            :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="2" :type="4" :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.index[dataSort].content.componentList[2].componentData[0].name" 
+                            :name2="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData[1].name" 
+                            :componentStyle="this.$store.state.template.pageData.index[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="1" 
+                            v-if="this.$store.state.template.pageStatus==1"
+                            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"
+                        />
+    
+                        <convertBtn 
+                            :id="id" 
+                            :dataSort="dataSort" 
+                            :sort="3" 
+                            :type="1" 
+                            v-if="this.$store.state.template.pageStatus==2"
+                            :sectorName="this.$store.state.template.pageData.index[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.index[dataSort].content.componentList[3].componentData.name" 
+                            :componentStyle="this.$store.state.template.pageData.index[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/1200x1040/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:10,
+                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_com{
+    border: 2px dashed #999;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+  
+}
+
+.line_1{border-left:none; }
+.line_2{  }
+.line_3{ border-left:none; border-bottom:none;}
+.line_4{ border-right:none; border-bottom: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>
+