admin-2026-1-19-skin7

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

@@ -1,43 +1,37 @@
 <template>
     <div class="sectorBox">
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.adSector"
-            @click="addModule('adSector', 12, adSector)" 
-            @drag="drag('adSector', 12, adSector)"
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.adSector"
+            @click="addModule('adSector', 12, adSector)" @drag="drag('adSector', 12, adSector)"
             @dragend="dragend('adSector', 12, adSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.adSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.adSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.adSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.adSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.adSector.sectorName }}</div>
         </div>
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.aboutArticleSector"
-            @click="addModule('aboutArticleSector', 115, aboutArticleSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.aboutArticleSector"
+            @click="addModule('aboutArticleSector', 115, aboutArticleSector)"
             @drag="drag('aboutArticleSector', 115, aboutArticleSector)"
             @dragend="dragend('aboutArticleSector', 115, aboutArticleSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.aboutArticleSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.aboutArticleSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.aboutArticleSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.aboutArticleSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.aboutArticleSector.sectorName }}</div>
         </div>
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.aboutArticleupdownSector"
-            @click="addModule('aboutArticleupdownSector', 136, aboutArticleupdownSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.aboutArticleupdownSector"
+            @click="addModule('aboutArticleupdownSector', 136, aboutArticleupdownSector)"
             @drag="drag('aboutArticleupdownSector', 136, aboutArticleupdownSector)"
             @dragend="dragend('aboutArticleupdownSector', 136, aboutArticleupdownSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.aboutArticleupdownSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.aboutArticleupdownSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.aboutArticleupdownSector.sectorImg" />
+            </div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.aboutArticleupdownSector.sectorName }}
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.aboutArticleupdownSector.sectorName}}</div>
         </div>
         <!-- <div class="sectorItemBox" 
             @click="addModule('adSector', 12, adSector)" 
@@ -61,34 +55,24 @@
             </div>
             <div class="sectorItemTitle">通用型单页详情</div>
         </div> -->
-
-        
         <!-- 皮肤7 -->
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.aboutDetailSector"
-            @click="addModule('aboutDetailSector', 128, aboutDetailSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.aboutDetailSector"
+            @click="addModule('aboutDetailSector', 128, aboutDetailSector)"
             @drag="drag('aboutDetailSector', 128, aboutDetailSector)"
             @dragend="dragend('aboutDetailSector', 128, aboutDetailSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.aboutDetailSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.aboutDetailSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.aboutDetailSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.aboutDetailSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.aboutDetailSector.sectorName }}</div>
         </div>
-
-
-
     </div>
 </template>
-
 <script>
-
 export default {
     props: {
         type: {
-
         },
     },
     data() {
@@ -109,7 +93,7 @@ export default {
                     "height": 90, //高度
                     "name": "",//广告名称
                     "price": 0,//价格
-                    "introduce":"",//介绍
+                    "introduce": "",//介绍
                     "website_id": "",//网站id
                     "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                     "typeid": 2,//广告类型 - 2 图片
@@ -117,7 +101,6 @@ export default {
                 }
             },
             //添加通栏广告模块 end---------------------------------------->
-
             //通用单页详情模块 start---------------------------------------->
             aboutArticleSector: {
                 "sectorName": "aboutArticleSector",//板块名称
@@ -127,7 +110,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "fcat_id": 1, 
+                            "fcat_id": 1,
                             "listType": [
                                 "id",
                                 "list_title",
@@ -136,7 +119,7 @@ export default {
                                 "fcat_id",
                                 "created_at",
                                 "updated_at",
-                                "type_id"    
+                                "type_id"
                             ],
                         }
                     },
@@ -148,7 +131,6 @@ export default {
                 ],
             },
             //通用单页详情模块 end---------------------------------------->
-
             //皮肤6 通用单页详情模块 start---------------------------------------->
             aboutArticleupdownSector: {
                 "sectorName": "aboutArticleupdownSector",//板块名称
@@ -163,7 +145,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "fcat_id": 1, 
+                            "fcat_id": 1,
                             "listType": [
                                 "id",
                                 "list_title",
@@ -172,15 +154,13 @@ export default {
                                 "fcat_id",
                                 "created_at",
                                 "updated_at",
-                                "type_id"    
+                                "type_id"
                             ],
                         }
                     }
                 ],
             },
             //皮肤6 通用单页详情模块 end---------------------------------------->
-
-            
             //皮肤7-通用单页详情模块 start---------------------------------------->
             aboutDetailSector: {
                 "sectorName": "aboutDetailSector",//板块名称
@@ -190,7 +170,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "fcat_id": 1, 
+                            "fcat_id": 1,
                             "listType": [
                                 "id",
                                 "list_title",
@@ -199,7 +179,7 @@ export default {
                                 "fcat_id",
                                 "created_at",
                                 "updated_at",
-                                "type_id"    
+                                "type_id"
                             ],
                         }
                     },
@@ -210,8 +190,6 @@ export default {
                     }
                 ],
             },
-
-
         }
     },
     methods: {
@@ -245,7 +223,7 @@ export default {
             this.$store.commit('template/dragend', data);
         },
         //设置组件预览状态
-        componentPreviewStatus(status,src) {
+        componentPreviewStatus(status, src) {
             let setData = {
                 status: status,
                 img: src
@@ -263,34 +241,28 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 .sectorBox {
     height: 100%;
-
     .sectorItemBox {
         box-sizing: border-box;
         padding: 0 20px 40px 20px;
         cursor: pointer;
-
         .sectorItem {
             border: 1px solid #333644;
             padding: 10px;
             border-radius: 8px;
-
             &:hover {
                 background: #333644;
                 transform: scale(1.1);
                 transition: all 0.2s ease-in-out;
             }
-
             img {
                 display: block;
                 width: 100%;
                 min-height: 20px;
             }
         }
-
         .sectorItemTitle {
             color: #fff;
             font-size: 14px;

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

@@ -1,32 +1,24 @@
 <template>
     <div class="sectorBox">
-        <div 
-            v-if="this.$store.state.template.sectorList.adSector"
-            class="sectorItemBox" 
-            @click="addModule('adSector', 12, adSector)"
-            @drag="drag('adSector', 12, adSector)" 
+        <div v-if="this.$store.state.template.sectorList.adSector" class="sectorItemBox"
+            @click="addModule('adSector', 12, adSector)" @drag="drag('adSector', 12, adSector)"
             @dragend="dragend('adSector', 12, adSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.adSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.adSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.adSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.adSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.adSector.sectorName }}</div>
         </div>
-        <div 
-            v-if="this.$store.state.template.sectorList.articleSector"
-            class="sectorItemBox" 
-            @click="addModule('articleSector', 161, articleSector)"
-            @drag="drag('articleSector', 161, articleSector)" 
+        <div v-if="this.$store.state.template.sectorList.articleSector" class="sectorItemBox"
+            @click="addModule('articleSector', 161, articleSector)" @drag="drag('articleSector', 161, articleSector)"
             @dragend="dragend('articleSector', 161, articleSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.articleSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.articleSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.articleSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.articleSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.articleSector.sectorName }}</div>
         </div>
         <!-- <div 
             class="sectorItemBox" 
@@ -52,38 +44,24 @@
             </div>
             <div class="sectorItemTitle">通用型文章详情</div>
         </div> -->
-
-        
         <!-- 皮肤7 -->
-        <div 
-            v-if="this.$store.state.template.sectorList.detailPageSector"
-            class="sectorItemBox" 
+        <div v-if="this.$store.state.template.sectorList.detailPageSector" class="sectorItemBox"
             @click="addModule('detailPageSector', 170, detailPageSector)"
-            @drag="drag('detailPageSector', 170, detailPageSector)" 
+            @drag="drag('detailPageSector', 170, detailPageSector)"
             @dragend="dragend('detailPageSector', 170, detailPageSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.detailPageSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.detailPageSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.detailPageSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.detailPageSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.detailPageSector.sectorName }}</div>
         </div>
-
-
-
-
-
-
     </div>
 </template>
-
 <script>
-
 export default {
     props: {
         type: {
-
         },
     },
     data() {
@@ -104,7 +82,7 @@ export default {
                     "height": 90, //高度
                     "name": "",//广告名称
                     "price": 0,//价格
-                    "introduce":"",//介绍
+                    "introduce": "",//介绍
                     "website_id": "",//网站id
                     "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                     "typeid": 2,//广告类型 - 2 图片
@@ -112,7 +90,6 @@ export default {
                 }
             },
             //模块1栏广告模块 end---------------------------------------->
-
             //模块2通用型文章详情模块 start---------------------------------------->
             articleSector: {
                 "sectorName": "articleSector",
@@ -122,7 +99,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "article_id":"",
+                            "article_id": "",
                             "listType": [
                                 "id",
                                 "catid",
@@ -173,14 +150,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -205,14 +182,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -235,8 +212,6 @@ export default {
                 ]
             },
             //模块2通用型文章详情模块 end---------------------------------------->
-
-            
             //皮肤7模块2通用型文章详情模块 start----------------------------------------皮肤7详情页>
             detailPageSector: {
                 "sectorName": "detailPageSector",
@@ -246,7 +221,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "article_id":"",
+                            "article_id": "",
                             "listType": [
                                 "id",
                                 "catid",
@@ -297,14 +272,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -329,14 +304,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -358,9 +333,6 @@ export default {
                     }
                 ]
             },
-
-
-
         }
     },
     methods: {
@@ -394,7 +366,7 @@ export default {
             this.$store.commit('template/dragend', data);
         },
         //设置组件预览状态
-        componentPreviewStatus(status,src) {
+        componentPreviewStatus(status, src) {
             let setData = {
                 status: status,
                 img: src
@@ -412,7 +384,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 .sectorBox {
     height: 100%;

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

@@ -1,72 +1,58 @@
 <template>
     <div class="sectorBox">
-        <div 
-            v-if="this.$store.state.template.sectorList.channelMenu"
-            class="sectorItemBox" 
-            @click="addModule('channelMenu', 13, channelMenu)"
-            @drag="drag('channelMenu', 13, channelMenu)" 
+        <div v-if="this.$store.state.template.sectorList.channelMenu" class="sectorItemBox"
+            @click="addModule('channelMenu', 13, channelMenu)" @drag="drag('channelMenu', 13, channelMenu)"
             @dragend="dragend('channelMenu', 13, channelMenu)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelMenu.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.channelMenu.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.channelMenu.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelMenu.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.channelMenu.sectorName }}</div>
         </div>
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.adSector"
-            @click="addModule('adSector', 12, adSector)" 
-            @drag="drag('adSector', 12, adSector)"
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.adSector"
+            @click="addModule('adSector', 12, adSector)" @drag="drag('adSector', 12, adSector)"
             @dragend="dragend('adSector', 12, adSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.adSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.adSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.adSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.adSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.adSector.sectorName }}</div>
         </div>
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.fixedListSector"
-            @click="addModule('fixedListSector', 125, fixedListSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.fixedListSector"
+            @click="addModule('fixedListSector', 125, fixedListSector)"
             @drag="drag('fixedListSector', 125, fixedListSector)"
             @dragend="dragend('fixedListSector', 125, fixedListSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.fixedListSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.fixedListSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.fixedListSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.fixedListSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.fixedListSector.sectorName }}</div>
         </div>
         <!-- 皮肤5固定列表 -->
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.newsListSector"
-            @click="addModule('newsListSector', 225, newsListSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.newsListSector"
+            @click="addModule('newsListSector', 225, newsListSector)"
             @drag="drag('newsListSector', 225, newsListSector)"
             @dragend="dragend('newsListSector', 225, newsListSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsListSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.newsListSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.newsListSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsListSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.newsListSector.sectorName }}</div>
         </div>
         <!-- 皮肤6固定列表 -->
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.ListbigSector"
-            @click="addModule('ListbigSector', 139, ListbigSector)" 
-            @drag="drag('ListbigSector', 139, ListbigSector)"
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.ListbigSector"
+            @click="addModule('ListbigSector', 139, ListbigSector)" @drag="drag('ListbigSector', 139, ListbigSector)"
             @dragend="dragend('ListbigSector', 139, ListbigSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.ListbigSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.ListbigSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.ListbigSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.ListbigSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.ListbigSector.sectorName }}</div>
         </div>
         <!-- <div 
             class="sectorItemBox" 
@@ -102,51 +88,37 @@
             </div>
             <div class="sectorItemTitle">通用型文章列表</div>
         </div> -->
-
-
-        
         <!-- 皮肤7 -->
-             
-        <div class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.bigListaPageSector"
-            @click="addModule('bigListaPageSector', 164, bigListaPageSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.bigListaPageSector"
+            @click="addModule('bigListaPageSector', 164, bigListaPageSector)"
             @drag="drag('bigListaPageSector', 164, bigListaPageSector)"
             @dragend="dragend('bigListaPageSector', 164, bigListaPageSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.bigListaPageSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.bigListaPageSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.bigListaPageSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.bigListaPageSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.bigListaPageSector.sectorName }}</div>
         </div>
-
         <!-- 皮肤7模块1频道菜单 -->
-        
-        <div 
-            v-if="this.$store.state.template.sectorList.channelNavigationSector"
-            class="sectorItemBox" 
+        <div v-if="this.$store.state.template.sectorList.channelNavigationSector" class="sectorItemBox"
             @click="addModule('channelNavigationSector', 13, channelNavigationSector)"
-            @drag="drag('channelNavigationSector', 13, channelNavigationSector)" 
+            @drag="drag('channelNavigationSector', 13, channelNavigationSector)"
             @dragend="dragend('channelNavigationSector', 13, channelNavigationSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelNavigationSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.channelNavigationSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.channelNavigationSector.sectorImg" />
+            </div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.channelNavigationSector.sectorName }}
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelNavigationSector.sectorName}}</div>
         </div>
-
     </div>
 </template>
-
 <script>
-
 export default {
     props: {
         type: {
-
         },
     },
     data() {
@@ -180,7 +152,7 @@ export default {
                     "height": 90, //高度
                     "name": "",//广告名称
                     "price": 0,//价格
-                    "introduce":"",//介绍
+                    "introduce": "",//介绍
                     "website_id": "",//网站id
                     "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                     "typeid": 2,//广告类型 - 2 图片
@@ -188,7 +160,6 @@ export default {
                 }
             },
             //添加通栏广告模块 start---------------------------------------->
-
             // 固定列表模块 start---------------------------------------->
             fixedListSector: {
                 "sectorName": "fixedListSector",//板块名称
@@ -198,7 +169,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "category_id":"",
+                            "category_id": "",
                             "pageType": {
                                 "page": 1,
                                 "pageSize": 20
@@ -224,14 +195,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -256,14 +227,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -286,7 +257,6 @@ export default {
                 ],
             },
             // 固定列表模块 end---------------------------------------->
-
             // 新固定列表模块 start---------------------------------------->
             newsListSector: {
                 "sectorName": "newsListSector",//板块名称
@@ -296,7 +266,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "category_id":"",
+                            "category_id": "",
                             "pageType": {
                                 "page": 1,
                                 "pageSize": 10
@@ -322,14 +292,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -354,14 +324,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -384,7 +354,6 @@ export default {
                 ],
             },
             // 新固定列表模块 end---------------------------------------->
-
             // 
             // 皮肤6 固定列表模块 start---------------------------------------->
             ListbigSector: {
@@ -395,7 +364,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "category_id":"",
+                            "category_id": "",
                             "pageType": {
                                 "page": 1,
                                 "pageSize": 10
@@ -421,14 +390,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -453,14 +422,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -482,8 +451,6 @@ export default {
                     }
                 ],
             },
-
-
             // 固定列表模块 start-皮肤7----------------------------------------fixedListSector>
             bigListaPageSector: {
                 "sectorName": "bigListaPageSector",//板块名称
@@ -493,7 +460,7 @@ export default {
                         "component_style": 1,
                         "sort": 1,
                         "componentData": {
-                            "category_id":"",
+                            "category_id": "",
                             "pageType": {
                                 "page": 1,
                                 "pageSize": 10
@@ -519,14 +486,14 @@ export default {
                         "component_style": 1,
                         "sort": 2,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"最新资讯",
-                            "level":4,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "最新资讯",
+                            "level": 4,
                             "imgSize": 2,
                             "textSize": 4,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -551,14 +518,14 @@ export default {
                         "component_style": 1,
                         "sort": 3,
                         "componentData": {
-                            "category_id":"",
-                            "category_arr":"",
-                            "name":"热点精选",
-                            "level":5,
+                            "category_id": "",
+                            "category_arr": "",
+                            "name": "热点精选",
+                            "level": 5,
                             "imgSize": 0,
                             "textSize": 8,
-                            "child":{
-                                "id":"",
+                            "child": {
+                                "id": "",
                                 "imgSize": "",
                                 "textSize": ""
                             },
@@ -580,7 +547,6 @@ export default {
                     }
                 ],
             },
-
             //皮肤7==模块1频道菜单 start----------------------------------------channelMenu>
             channelNavigationSector: {
                 "sectorName": "channelNavigationSector",//板块名称
@@ -592,9 +558,7 @@ export default {
                         "componentData": {}
                     }
                 ],
-            },    
-
-
+            },
             // 新固定列表模块 end---------------------------------------->
         }
     },
@@ -629,7 +593,7 @@ export default {
             this.$store.commit('template/dragend', data);
         },
         //设置组件预览状态
-        componentPreviewStatus(status,src) {
+        componentPreviewStatus(status, src) {
             let setData = {
                 status: status,
                 img: src
@@ -647,34 +611,28 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 .sectorBox {
     height: 100%;
-
     .sectorItemBox {
         box-sizing: border-box;
         padding: 0 20px 40px 20px;
         cursor: pointer;
-
         .sectorItem {
             border: 1px solid #333644;
             padding: 10px;
             border-radius: 8px;
-
             &:hover {
                 background: #333644;
                 transform: scale(1.1);
                 transition: all 0.2s ease-in-out;
             }
-
             img {
                 display: block;
                 width: 100%;
                 min-height: 20px;
             }
         }
-
         .sectorItemTitle {
             color: #fff;
             font-size: 14px;

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

@@ -1,61 +1,48 @@
 <template>
     <div class="sectorBox">
-        <div 
-            v-if="this.$store.state.template.sectorList.adSector"
-            class="sectorItemBox" 
-            @click="addModule('adSector', 12, adSector)" 
-            @drag="drag('adSector', 12, adSector)"
+        <div v-if="this.$store.state.template.sectorList.adSector" class="sectorItemBox"
+            @click="addModule('adSector', 12, adSector)" @drag="drag('adSector', 12, adSector)"
             @dragend="dragend('adSector', 12, adSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.adSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.adSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.adSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.adSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.adSector.sectorName }}</div>
         </div>
-        <div 
-            class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.searchListSector"
-            @click="addModule('searchListSector', 133, searchListSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.searchListSector"
+            @click="addModule('searchListSector', 133, searchListSector)"
             @drag="drag('searchListSector', 133, searchListSector)"
             @dragend="dragend('searchListSector', 133, searchListSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.searchListSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.searchListSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.searchListSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.searchListSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.searchListSector.sectorName }}</div>
         </div>
-        <div 
-            class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.searchListpicSector"
-            @click="addModule('searchListpicSector', 233, searchListpicSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.searchListpicSector"
+            @click="addModule('searchListpicSector', 233, searchListpicSector)"
             @drag="drag('searchListpicSector', 233, searchListpicSector)"
             @dragend="dragend('searchListpicSector', 233, searchListpicSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.searchListpicSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.searchListpicSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.searchListpicSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.searchListpicSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.searchListpicSector.sectorName }}</div>
         </div>
         <!-- 皮肤6搜索列表模块 -->
-         <div 
-            class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.SearchbigListSector"
-            @click="addModule('SearchbigListSector', 153, SearchbigListSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.SearchbigListSector"
+            @click="addModule('SearchbigListSector', 153, SearchbigListSector)"
             @drag="drag('SearchbigListSector', 153, SearchbigListSector)"
             @dragend="dragend('SearchbigListSector', 153, SearchbigListSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.SearchbigListSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.SearchbigListSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.SearchbigListSector.sectorImg" />
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.SearchbigListSector.sectorName}}</div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.SearchbigListSector.sectorName }}</div>
         </div>
         <!-- <div class="sectorItemBox" 
             @click="addModule('adSector', 12, adSector)" 
@@ -79,34 +66,25 @@
             </div>
             <div class="sectorItemTitle">通用型搜索列表</div>
         </div> -->
-
-        
         <!-- 皮肤7 -->
-        <div 
-            class="sectorItemBox" 
-            v-if="this.$store.state.template.sectorList.SevenSearchbigListscSector"
-            @click="addModule('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)" 
+        <div class="sectorItemBox" v-if="this.$store.state.template.sectorList.SevenSearchbigListscSector"
+            @click="addModule('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)"
             @drag="drag('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)"
             @dragend="dragend('SevenSearchbigListscSector', 175, SevenSearchbigListscSector)"
             @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.SevenSearchbigListscSector.sectorImg)"
-            @mouseleave="componentPreviewStatus(false,'')"
-        >
+            @mouseleave="componentPreviewStatus(false, '')">
             <div class="sectorItem">
-                <img :src="this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorImg"/>
+                <img :src="this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorImg" />
+            </div>
+            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorName }}
             </div>
-            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.SevenSearchbigListscSector.sectorName}}</div>
         </div>
-
-
     </div>
 </template>
-
 <script>
-
 export default {
     props: {
         type: {
-
         },
     },
     data() {
@@ -127,7 +105,7 @@ export default {
                     "height": 90, //高度
                     "name": "",//广告名称
                     "price": 0,//价格
-                    "introduce":"",//介绍
+                    "introduce": "",//介绍
                     "website_id": "",//网站id
                     "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                     "typeid": 2,//广告类型 - 2 图片
@@ -135,7 +113,6 @@ export default {
                 }
             },
             //添加通栏广告模块 end---------------------------------------->
-
             //通用型搜索列表模块 start---------------------------------------->
             searchListSector: {
                 "sectorName": "searchListSector",//板块名称
@@ -153,7 +130,6 @@ export default {
                 ],
             },
             //通用型搜索列表模块 end---------------------------------------->
-            
             //皮肤5搜索列表模块 start---------------------------------------->
             searchListpicSector: {
                 "sectorName": "searchListpicSector",//板块名称
@@ -171,7 +147,6 @@ export default {
                 ],
             },
             //皮肤5搜索列表模块 end---------------------------------------->
-
             //皮肤6搜索列表模块 start---------------------------------------->
             SearchbigListSector: {
                 "sectorName": "SearchbigListSector",//板块名称
@@ -189,8 +164,6 @@ export default {
                 ],
             },
             //皮肤6搜索列表模块 end---------------------------------------->
-
-            
             //皮肤7搜索列表模块 start---------------------------------------->
             SevenSearchbigListscSector: {
                 "sectorName": "SevenSearchbigListscSector",//板块名称
@@ -207,9 +180,6 @@ export default {
                     }
                 ],
             },
-
-
-
         }
     },
     methods: {
@@ -243,7 +213,7 @@ export default {
             this.$store.commit('template/dragend', data);
         },
         //设置组件预览状态
-        componentPreviewStatus(status,src) {
+        componentPreviewStatus(status, src) {
             let setData = {
                 status: status,
                 img: src
@@ -261,34 +231,28 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 .sectorBox {
     height: 100%;
-
     .sectorItemBox {
         box-sizing: border-box;
         padding: 0 20px 40px 20px;
         cursor: pointer;
-
         .sectorItem {
             border: 1px solid #333644;
             padding: 10px;
             border-radius: 8px;
-
             &:hover {
                 background: #333644;
                 transform: scale(1.1);
                 transition: all 0.2s ease-in-out;
             }
-
             img {
                 display: block;
                 width: 100%;
                 min-height: 20px;
             }
         }
-
         .sectorItemTitle {
             color: #fff;
             font-size: 14px;

src/views/template/page/pageAboutArticle.vue

@@ -2,46 +2,30 @@
     <div>
         <!-- 1.页头板块 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
         <!--使用gridKey来强制更新视图-->
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-            :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.aloneArticle.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.aloneArticle"
-                :layout.sync="this.$store.state.template.pageData.aloneArticle" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0, 0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey
-            ">
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.aloneArticle" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.aloneArticle"
+                :layout.sync="this.$store.state.template.pageData.aloneArticle" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey
+                    ">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.aloneArticle" :key="item.i"
+                    :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
@@ -55,13 +39,10 @@
                         <div v-if="item.type == 'aboutArticleupdownSector'" class="moduleBox">
                             <aboutArticleupdownSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-
                         <!-- 皮肤7 -->
                         <div v-if="item.type == 'aboutDetailSector'" class="moduleBox">
                             <aboutDetailSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                     </div>
                 </grid-item>
             </grid-layout>
@@ -73,14 +54,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -99,11 +78,8 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
-
-
 // 皮肤7
 import aboutDetailSector from '../style/sector/body/about/1200x1249/7/1.vue';
-
 export default {
     components: {
         GridLayout,//画布
@@ -117,7 +93,6 @@ export default {
         aboutArticleupdownSector,//固定列表
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚Style5
-
         aboutDetailSector,//皮肤7
     },
     data() {
@@ -164,7 +139,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -191,7 +165,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -202,12 +175,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -218,57 +189,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -277,16 +238,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -299,59 +258,49 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+ 
+ </style>

src/views/template/page/pageAboutList.vue

@@ -2,46 +2,30 @@
     <div>
         <!-- 1.页头板块 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
         <!--使用gridKey来强制更新视图-->
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-                :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.aloneList.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.aloneList"
-                :layout.sync="this.$store.state.template.pageData.aloneList" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0, 0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey
-            ">
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.aloneList" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.aloneList"
+                :layout.sync="this.$store.state.template.pageData.aloneList" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey
+                    ">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.aloneList" :key="item.i"
+                    :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
@@ -55,14 +39,10 @@
                         <div v-if="item.type == 'ListupdownSector'" class="moduleBox">
                             <ListupdownSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-                        
                         <!-- 皮肤7-单页列表通栏 -->
                         <div v-if="item.type == 'pageListSector'" class="moduleBox">
                             <pageListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-
                     </div>
                 </grid-item>
             </grid-layout>
@@ -74,14 +54,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 import headSector from '../style/sector/head/1200x200/1.vue';
@@ -94,14 +72,8 @@ import footerSector from '../style/sector/foot/1200x580/1.vue';
 import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
-
-
 // 皮肤7-单页列表通栏
-// import aboutListSector from '../style/sector/body/about/1200x1290/1.vue';
 import pageListSector from '../style/sector/body/about/1200x1710/7/1.vue';
-
-
-
 export default {
     components: {
         GridLayout,
@@ -161,7 +133,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -188,7 +159,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -199,12 +169,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -215,57 +183,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -274,16 +232,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -296,57 +252,47 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }

src/views/template/page/pageArticle.vue

@@ -1,44 +1,27 @@
 <template>
     <div>
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-                :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.article.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.article"
-                :layout.sync="this.$store.state.template.pageData.article" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0,0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey"
-            >
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.article" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.article"
+                :layout.sync="this.$store.state.template.pageData.article" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.article" :key="item.i"
+                    :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
@@ -49,13 +32,10 @@
                         <div v-if="item.type == 'articleSector'" class="moduleBox">
                             <articleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                         <!-- detailPageSector皮肤7 -->
                         <div v-if="item.type == 'detailPageSector'" class="moduleBox">
                             <detailPageSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-
                     </div>
                 </grid-item>
             </grid-layout>
@@ -66,14 +46,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -90,12 +68,8 @@ import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //通用型文章详情
 import articleSector from '../style/sector/body/article/article/1200x1710/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
-
-
 // 皮肤7详情页
 import detailPageSector from '../style/sector/body/article/article/1200x1667/7/1.vue';
-
-
 export default {
     components: {
         GridLayout,//画布
@@ -108,7 +82,6 @@ export default {
         articleSector,//通用型文章详情
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚Style5
-
         detailPageSector,//皮肤7
     },
     data() {
@@ -155,7 +128,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -182,7 +154,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -193,12 +164,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -209,26 +178,23 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
@@ -236,29 +202,23 @@ export default {
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -267,16 +227,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -289,60 +247,50 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
-
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+// 
+// </style>

src/views/template/page/pageClass.vue

@@ -2,45 +2,28 @@
     <div>
         <!-- 全局组件：页头 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-                :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.class.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.class"
-                :layout.sync="this.$store.state.template.pageData.class" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0,0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey"
-            >
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.class" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.class"
+                :layout.sync="this.$store.state.template.pageData.class" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.class" :key="item.i" :i="item.i"
+                    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <!--右侧悬浮按钮-->
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
@@ -105,36 +88,26 @@
                         <div v-if="item.type == 'ChannelNewsAndPhoto'" class="moduleBox">
                             <ChannelNewsAndPhoto :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-                        
                         <!-- 皮肤7-新闻图文组合4-通栏版式-带选项卡图文组合 -->
                         <div v-if="item.type == 'newsTextTabsImgSector'" class="moduleBox">
                             <newsTextTabsImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-                        
                         <!-- 12 皮肤7- 热点关注 -->
                         <div v-if="item.type == 'skinSevenNewsHyjjSector'" class="moduleBox">
                             <skinSevenNewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                         <!-- 14.滚动图文组合--皮肤7 -->
                         <div v-if="item.type == 'scrollTextImgSevenSkinchannelSector'" class="moduleBox">
                             <scrollTextImgSevenSkinchannelSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-                        
                         <!-- 15.子导航菜单 --皮肤7 channelMenu-->
                         <div v-if="item.type == 'channelNavigationSector'" class="moduleBox">
                             <channelNavigationSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-
                     </div>
                 </grid-item>
             </grid-layout>
         </div>
-
         <!-- 全局组件：页尾 -->
         <div class="FixedModuleBoxBottom">
             <footerSector v-if="this.$store.state.template.editWebsiteClass <= 4" />
@@ -142,14 +115,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -190,27 +161,16 @@ import ChannelNewsSector from '../style/sector/body/index/list/1200x330/1.vue';
 import ChannelNewsPhoto from '../style/sector/body/index/list/1200x400/6.vue';
 // 皮肤6 不带标题图文组合2
 import ChannelNewsAndPhoto from '../style/sector/body/index/list/1200x480/6_2.vue';
-
-
-
 //新闻图文组合4-皮肤7-带选项卡图文组合 行业聚焦
 // import newsTextTabsImgSector from '../style/sector/body/index/list/1200x480/6_2.vue';
 import newsTextTabsImgSector from '../style/sector/body/index/list/1200x1150/7/2.vue';
-
 //14 皮肤7-------------------------------------------------------------热点关注>
 import skinSevenNewsHyjjSector from '../style/sector/body/index/list/1200x720/7/2.vue';
-
-
 //   皮肤7-合并为一个组件的焦点图通栏  轮播图
 import scrollTextImgSevenSkinchannelSector from '../style/sector/body/index/banner/1200x480/7/3.vue';
-
-
 //频道菜单-子导航菜单皮肤7channelMenu
 import channelNavigationSector from '../style/sector/body/class/menu/1200x100/1.vue';
-
-
 //2.引入自助建站组件 end------------------------------------------------------------>
-
 export default {
     components: {
         GridLayout,//画布
@@ -235,7 +195,6 @@ export default {
         ChannelNewsSector,// 皮肤6 不带标题图文组合1
         ChannelNewsPhoto,// 皮肤6 带标题图文组合2
         ChannelNewsAndPhoto,// 皮肤6 不带标题图文组合2
-        
         newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合   行业聚焦
         skinSevenNewsHyjjSector,//14 皮肤7-----热点关注>
         scrollTextImgSevenSkinchannelSector,//14 皮肤7-合并为一个组件的焦点图通栏  轮播图
@@ -285,7 +244,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -312,7 +270,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -323,12 +280,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -339,57 +294,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -398,16 +343,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -420,60 +363,48 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
-
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/template/page/pageIndex.vue

@@ -2,14 +2,16 @@
     <div>
         <!-- 全局组件：页头 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
-        </div> 
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
+        </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
-        </div> 
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
+        </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
@@ -21,33 +23,14 @@
             <div>请点击一个左侧板块，开始您的网站创建</div>
         </div> -->
         <!--使用gridKey来强制更新视图-->
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-                :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.index.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.index"
-                :layout.sync="this.$store.state.template.pageData.index" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0,0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey"
-            >
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.index" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.index"
+                :layout.sync="this.$store.state.template.pageData.index" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i"
+                    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <!--右侧悬浮按钮-->
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
@@ -60,8 +43,8 @@
                         <div v-if="item.type == 'adSector'" class="moduleBox">
                             <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                         <!-- 2.头条通栏 -->
-                         <div v-if="item.type == 'headLineSector'" class="moduleBox">
+                        <!-- 2.头条通栏 -->
+                        <div v-if="item.type == 'headLineSector'" class="moduleBox">
                             <headLineSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
                         <!-- 3.焦点图通栏 -->
@@ -140,39 +123,30 @@
                         <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>
-
                         <!-- 皮肤7-行业聚焦 -->
                         <div v-if="item.type == 'skinSevenNewsHyjjSector'" class="moduleBox">
                             <skinSevenNewsHyjjSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                         <!-- 14.皮肤7-1200-选项卡 -->
                         <div v-if="item.type == 'mixTabSector'" class="moduleBox">
                             <mixTabSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        
                         <!-- 皮肤7-合并为一个组件的焦点图通栏  轮播图-->
                         <div v-if="item.type == 'bigBannerSectorMerge'" class="moduleBox">
                             <bigBannerSectorMerge :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        
                         <!-- 14 皮肤7-外连面板-带查询服务-组件1------------------------------------------------------------>
                         <div v-if="item.type == 'biglinkCxfwSector'" class="moduleBox">
                             <biglinkCxfwSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        
                     </div>
                 </grid-item>
             </grid-layout>
         </div>
-
         <!-- 全局组件：页尾 -->
         <div class="FixedModuleBoxBottom">
             <footerSector v-if="this.$store.state.template.editWebsiteClass <= 4" />
@@ -180,14 +154,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -240,29 +212,17 @@ import newsTitleTabsSector from '../style/sector/body/index/list/1200x540/1.vue'
 import TabsTextPhotoTwo from '../style/sector/body/index/list/1200x480/6_1.vue';
 //皮肤6 纯图片选项卡通栏
 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';
-
 //14 皮肤7-行业聚焦------------------------------------------------------------>
 import skinSevenNewsHyjjSector from '../style/sector/body/index/list/1200x720/7/1.vue';
-
-
 //14 皮肤7-1200-选项卡------------------------------------------------------------>
 import mixTabSector from '../style/sector/body/index/list/1200x430/7/2.vue';
-
-
 //14 皮肤7-合并为一个组件的焦点图通栏  轮播图
 import bigBannerSectorMerge from '../style/sector/body/index/banner/1200x480/7/2.vue';
-
-
 //14 皮肤7-外连面板-带查询服务-组件1------------------------------------------------------------>
 import biglinkCxfwSector from '../style/sector/body/index/link/1200x326/7/1.vue';
-
-
 export default {
     components: {
         GridLayout,//画布
@@ -294,7 +254,6 @@ export default {
         photoTabsSector,//皮肤6 纯图片选项卡通栏
         footerSector,//全局页尾
         footerSectorStyle5,//全局页尾皮肤5
-
         newsTextTabsImgSector,//新闻图文组合4-皮肤7-通栏版式-带选项卡图文组合 热点关注
         skinSevenNewsHyjjSector,//皮肤7-行业聚焦
         mixTabSector,//皮肤7-1200-选项卡
@@ -345,7 +304,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -372,7 +330,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -383,12 +340,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -399,56 +354,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -457,16 +403,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -498,60 +442,49 @@ export default {
             //   background: #000;
             // }
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
-
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+ </style>

src/views/template/page/pageList.vue

@@ -2,46 +2,30 @@
     <div>
         <!-- 1.页头板块 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
         <!--使用gridKey来强制更新视图-->
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-            :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.list.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.list"
-                :layout.sync="this.$store.state.template.pageData.list" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0, 0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey
-            ">
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.list" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.list"
+                :layout.sync="this.$store.state.template.pageData.list" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey
+                    ">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.list" :key="item.i" :i="item.i"
+                    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
@@ -66,17 +50,14 @@
                         <div v-if="item.type == 'ListbigSector'" class="moduleBox">
                             <ListbigSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        
                         <!-- 皮肤7  -->
                         <div v-if="item.type == 'bigListaPageSector'" class="moduleBox">
                             <bigListaPageSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
- 
                         <!-- 皮肤7  -->
                         <div v-if="item.type == 'channelNavigationSector'" class="moduleBox">
                             <channelNavigationSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                     </div>
                 </grid-item>
             </grid-layout>
@@ -88,14 +69,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -112,7 +91,6 @@ import fixedListSector from '../style/sector/body/list/list/1200x1220/1.vue';
 import newsListSector from '../style/sector/body/list/list/1200x2250/1.vue';
 // 皮肤6 固定列表
 import ListbigSector from '../style/sector/body/list/list/1200x1390/1.vue';
-
 //底部
 import footerSector from '../style/sector/foot/1200x580/1.vue';
 import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
@@ -120,18 +98,10 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
-
-
-
 // 皮肤7列表页专用列表组件-900x1400
 import bigListaPageSector from '../style/sector/body/list/list/7/1200x1610/1.vue';
-
 //频道菜单-子导航菜单皮肤7channelMenu
 import channelNavigationSector from '../style/sector/body/class/menu/1200x100/1.vue';
-
-
-
-
 export default {
     components: {
         GridLayout,//画布
@@ -147,10 +117,8 @@ export default {
         ListbigSector,//皮肤6 固定列表
         footerSector,
         footerSectorStyle5,//全局页脚5
-
         channelNavigationSector,//皮肤7模块1频道菜单
         bigListaPageSector,//皮肤7列表页专用列表组件-900x1400
-
     },
     data() {
         return {
@@ -196,7 +164,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -223,7 +190,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -234,12 +200,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -250,57 +214,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -309,16 +263,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -331,57 +283,47 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }

src/views/template/page/pageSearch.vue

@@ -2,46 +2,30 @@
     <div>
         <!-- 1.页头板块 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <headSector  v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <headSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <headSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
-            <menuSector v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4"/>
-            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5"/>
+            <menuSector
+                v-if="this.$store.state.template.editWebsiteClass > 0 && this.$store.state.template.editWebsiteClass <= 4" />
+            <menuSectorStyle5 v-if="this.$store.state.template.editWebsiteClass >= 5" />
         </div>
         <!-- 固定背景图 -->
         <div class="fixedBg" v-if="this.$store.state.template.editWebsiteClass == 6">
             <img src="http://192.168.1.234:19000/pre/image/png/20251218/176604033999762.png" alt="">
         </div>
         <!--使用gridKey来强制更新视图-->
-        <div 
-            id="content" 
-            class="canvasBox"
-        >
-            <grid-layout 
-            :auto-size="true"
+        <div id="content" class="canvasBox">
+            <grid-layout :auto-size="true"
                 :class="this.$store.state.template.pageData.search.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-                ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.search"
-                :layout.sync="this.$store.state.template.pageData.search" 
-                :col-num="12" 
-                :row-height="rowHeight"
-                :margin="[0, 0]" 
-                :is-draggable="true" 
-                :is-resizable="true" 
-                :key="this.$store.state.template.gridKey
-            ">
-                <grid-item 
-                    v-for="(item, index) in this.$store.state.template.pageData.search" 
-                    :key="item.i" 
-                    :i="item.i"
-                    :x="item.x" 
-                    :y="item.y" 
-                    :w="item.w" 
-                    :h="item.h" 
-                    :is-resizable="false"
-                >
+                ref="gridlayout" :layout="this.$store.state.template.pageData.search"
+                :layout.sync="this.$store.state.template.pageData.search" :col-num="12" :row-height="rowHeight"
+                :margin="[0, 0]" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey
+                    ">
+                <grid-item v-for="(item, index) in this.$store.state.template.pageData.search" :key="item.i" :i="item.i"
+                    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
@@ -62,12 +46,10 @@
                         <div v-if="item.type == 'SearchbigListSector'" class="moduleBox">
                             <SearchbigListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        
                         <!-- 4.固定列表7 皮肤7-->
                         <div v-if="item.type == 'SevenSearchbigListscSector'" class="moduleBox">
                             <SevenSearchbigListscSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
                     </div>
                 </grid-item>
             </grid-layout>
@@ -79,14 +61,12 @@
         </div>
     </div>
 </template>
-
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
 //1.页面公用组件 end------------------------------------------------------------>
-
 //引入自助建站组件 start------------------------------------------------------------>
 //全局组件
 //顶部
@@ -108,13 +88,8 @@ import footerSectorStyle5 from '../style/sector/foot/1200x680/1.vue';
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
-
-
 //皮肤7列表页是固定的
 import SevenSearchbigListscSector from '../style/sector/body/search/list/1200x1720/7/1.vue';
-
-
-
 export default {
     components: {
         GridLayout,//画布
@@ -129,7 +104,6 @@ export default {
         SearchbigListSector,//皮肤6搜索列表模块
         footerSector,//全局页脚
         footerSectorStyle5,//全局页脚5
-
         SevenSearchbigListscSector,//皮肤7搜索列表模块
     },
     data() {
@@ -176,7 +150,6 @@ export default {
             });
         },
         //0.全局操作 end ------------------------------------------------------------>
-
         //1.模块操作 start ------------------------------------------------------------>
         //1.1 移动模块
         moveModule(i, moveType) {
@@ -203,7 +176,6 @@ export default {
     }
 }
 </script>
-
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
@@ -214,12 +186,10 @@ export default {
     margin: 10px 0;
     padding: 10px;
 }
-
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
     border: 2px dashed #eee;
 }
-
 .moduleBox {
     display: flex;
     width: 100%;
@@ -230,57 +200,47 @@ export default {
     background-color: transparent;
     //border: 2px dashed #eee;
 }
-
 .moduleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //固定的模块
 .FixedModuleBox {
     width: 100%;
     //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
-
-.fixedBg{
+.fixedBg {
     width: 100%;
     height: 720px;
     position: absolute;
     top: 422px;
     left: 0;
     z-index: 0;
-    img{
+    img {
         width: 100%;
         height: 100%;
     }
 }
-
 .FixedModuleBoxBottom {
     width: 100%;
 }
-
 .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
     color: #999;
     text-align: center;
-
     img {
         margin-bottom: 20px;
     }
-
     padding: 100px;
     //background: #F5F7FB;
     //margin-bottom: 20px;
 }
-
 .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;
 }
-
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
-
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -289,16 +249,14 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
-
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right:10px;
+        right: 10px;
         z-index: 99;
         display: flex;
         align-items: center;
         justify-content: center;
-
         span {
             width: 38px;
             height: 38px;
@@ -311,59 +269,49 @@ export default {
             border-radius: 8px;
             background-color: #fff1cc;
             transition: all 0.3s;
-
             &:hover {
                 color: #333;
             }
         }
     }
 }
-
 .grid-layout {
     grid-gap: 0;
     row-gap: 0;
 }
-
 //画布调整
 .canvasBox {
     margin-top: 20px;
 }
-
 .FixedMainModuleBox {
-  min-height: 450px;
-  background-color: #fff;
-  background: url('../../../assets/template/creat.png') no-repeat center center;
+    min-height: 450px;
+    background-color: #fff;
+    background: url('../../../assets/template/creat.png') no-repeat center center;
 }
-
 .FixedMainModuleBoxAuto {
-  min-height: 450px;
-  background-color: transparent;
+    min-height: 450px;
+    background-color: transparent;
 }
-
 //占位元素颜色
 ::v-deep .vue-grid-placeholder {
-  background: #ccc !important;
-  opacity: 0.3;
+    background: #ccc !important;
+    opacity: 0.3;
 }
-
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+ </style>

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

@@ -1,9 +1,8 @@
 <template>
     <div>
-        <div class="imgSector"><img :src="adList[this.$store.state.template.editWebsiteClass-1]" alt="自助建站广告示例图"></div>
+        <div class="imgSector"><img :src="adList[this.$store.state.template.editWebsiteClass - 1]" alt="自助建站广告示例图"></div>
     </div>
 </template>
-
 <script>
 export default {
     components: {
@@ -28,14 +27,11 @@ export default {
                 "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",
-
-
             ]
         };
     },
 };
 </script>
-
 <style scoped lang="less">
 .imgSector {
     img {

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

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

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

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

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

@@ -1,9 +1,9 @@
 <template>
     <div>
         <!--样式5-->
-        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass==7">
-            <el-carousel :interval="3333" height="480px" indicator-position="bottom" 
-                arrow="always" @change="change_fun">
+        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass == 7">
+            <el-carousel :interval="3333" height="480px" indicator-position="bottom" arrow="always"
+                @change="change_fun">
                 <el-carousel-item v-for="item in imagelist" :key="item.id">
                     <img :src="item.src">
                     <span class="swiper_dot1 dot1">
@@ -17,7 +17,6 @@
         </div>
     </div>
 </template>
-
 <script>
 import '@/styles/theme/body/index/banner/style1.less';
 export default {
@@ -34,7 +33,6 @@ export default {
             imagelist: [
                 {
                     id: 1,
-                     
                     src: 'http://192.168.1.234:19000/pre/image/jpeg/20251223/17664691719166.jpg',
                     title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
                 },
@@ -57,20 +55,17 @@ export default {
         }
     },
     mounted() {
-
     },
 };
 </script>
-
 <style scoped lang="less">
 //样式5
 .bannerSwiperStyle5 {
     position: relative;
-
     img {
         width: 100%;
         height: 100%;
-        display:block;
+        display: block;
     }
     .roll_num_box {
         position: absolute;
@@ -105,9 +100,9 @@ export default {
         left: 0;
         z-index: 10;
         box-sizing: border-box;
-        background:rgba(0, 0, 0, 0.6);
-        box-sizing:border-box;padding-right:40%;
-
+        background: rgba(0, 0, 0, 0.6);
+        box-sizing: border-box;
+        padding-right: 40%;
     }
     .el-carousel {
         /deep/.el-carousel__arrow i {
@@ -116,14 +111,12 @@ export default {
         .roll_1_box {
             position: relative;
         }
-
-        
         /deep/.el-carousel__arrow--left {
             left: 20px;
             width: 34px;
             height: 80px;
             color: #eee;
-            background: rgba(0,0,0,0.5);
+            background: rgba(0, 0, 0, 0.5);
             border-radius: 50%;
             position: absolute;
             border: none;
@@ -159,16 +152,16 @@ export default {
             width: 6px;
             height: 6px;
             border: none;
-             
             background: #fff;
             opacity: 1;
         }
         /deep/ .is-active .el-carousel__button {
             // 指示器激活按钮
             background: #9C130A;
-            width: 6px;height: 6px;
-            opacity: 1;border-radius:0px;
-
+            width: 6px;
+            height: 6px;
+            opacity: 1;
+            border-radius: 0px;
         }
         /deep/ .el-carousel__container {
             height: 100%;
@@ -185,9 +178,8 @@ export default {
         width: 58px;
         opacity: 1;
     }
-    /deep/ .el-carousel__indicator--horizontal{padding:12px 5px;}
-
-
-
+    /deep/ .el-carousel__indicator--horizontal {
+        padding: 12px 5px;
+    }
 }
 </style>

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

@@ -1,24 +1,19 @@
 <template>
     <div>
         <!--样式5-->
-        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass==7">
-            <el-carousel :interval="3333" height="480px" indicator-position="bottom" 
-                arrow="always" @change="change_fun">
+        <div class="bannerSwiperStyle5" v-if="this.$store.state.template.editWebsiteClass == 7">
+            <el-carousel :interval="3333" height="480px" indicator-position="bottom" arrow="always"
+                @change="change_fun">
                 <el-carousel-item v-for="item in imagelist" :key="item.id">
-                     
                     <img src="http://192.168.1.234:19000/pre/image/jpeg/20251223/1766485965938177.jpg">
                     <span class="swiper_dot1 dot1">
                         {{ item.title }}
                     </span>
-                </el-carousel-item>
-                <!-- <div class="roll_num_box">
-                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
-                </div> -->
+                </el-carousel-item> 
             </el-carousel>
         </div>
     </div>
 </template>
-
 <script>
 import '@/styles/theme/body/index/banner/style1.less';
 export default {
@@ -54,20 +49,17 @@ export default {
         }
     },
     mounted() {
-
     },
 };
 </script>
-
 <style scoped lang="less">
 //样式5
 .bannerSwiperStyle5 {
     position: relative;
-
     img {
         width: 100%;
         height: 100%;
-        display:block;
+        display: block;
     }
     .roll_num_box {
         position: absolute;
@@ -95,18 +87,17 @@ export default {
         line-height: 60px;
         height: 60px;
         color: #fff;
-        font-size: 18px;font-weight:bold;
+        font-size: 18px;
+        font-weight: bold;
         text-indent: 20px;
         position: absolute;
         bottom: 0;
         left: 0;
         z-index: 10;
         box-sizing: border-box;
-        background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
-
-
-        box-sizing:border-box;padding-right:40%;
-
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
+        box-sizing: border-box;
+        padding-right: 40%;
     }
     .el-carousel {
         /deep/.el-carousel__arrow i {
@@ -115,14 +106,13 @@ export default {
         .roll_1_box {
             position: relative;
         }
-
-        
-        /deep/.el-carousel__arrow--left {display:none;
+        /deep/.el-carousel__arrow--left {
+            display: none;
             left: 20px;
             width: 34px;
             height: 80px;
             color: #eee;
-            background: rgba(0,0,0,0.5);
+            background: rgba(0, 0, 0, 0.5);
             border-radius: 50%;
             position: absolute;
             border: none;
@@ -132,7 +122,8 @@ export default {
             font-size: 24px;
             line-height: 56px;
         }
-        /deep/.el-carousel__arrow--right {display:none;
+        /deep/.el-carousel__arrow--right {
+            display: none;
             right: 20px;
             width: 34px;
             height: 80px;
@@ -158,16 +149,16 @@ export default {
             width: 12px;
             height: 12px;
             border: none;
-             
             background: #ccc;
             opacity: 1;
         }
         /deep/ .is-active .el-carousel__button {
             // 指示器激活按钮
             background: #fff;
-            width: 12px;height: 12px;
-            opacity: 1;border-radius:0px;
-
+            width: 12px;
+            height: 12px;
+            opacity: 1;
+            border-radius: 0px;
         }
         /deep/ .el-carousel__container {
             height: 100%;
@@ -184,9 +175,8 @@ export default {
         width: 58px;
         opacity: 1;
     }
-    /deep/ .el-carousel__indicator--horizontal{padding:12px 5px;}
-
-
-
+    /deep/ .el-carousel__indicator--horizontal {
+        padding: 12px 5px;
+    }
 }
 </style>

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

@@ -18,7 +18,7 @@
             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>
@@ -76,7 +76,6 @@
             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">
@@ -90,7 +89,6 @@
             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">
@@ -214,16 +212,13 @@
             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>
@@ -296,8 +291,6 @@
             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">
@@ -527,7 +520,6 @@
         <!-- 样式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">
                 深入推进周边命运共同体建设 以人工智能引领科研范式变革
@@ -541,9 +533,7 @@
         <!-- 样式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>
@@ -568,8 +558,7 @@
         <!--样式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"/>
-            
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622190772928.png" />
             <div class="headLineTitle">
                 深入推进周边命运共同体建设 以人工智能引领科研范式变革
             </div>
@@ -592,9 +581,7 @@
         <!--样式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"/>
-
+            <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622765452955.png" />
             <div class="headLineTitle">
                 深入推进周边命运共同体建设 以人工智能引领科研范式变革
             </div>
@@ -608,7 +595,6 @@
         <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>
@@ -623,7 +609,6 @@
             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">
@@ -647,7 +632,6 @@
         </div>
     </div>
 </template>
-
 <script>
 export default {
     props: {
@@ -691,14 +675,11 @@ export default {
         }
     },
     mounted() {
-
     },
 };
 </script>
-
 <style scoped lang="less">
 @themeColor1: #9C130A;
-
 //基本样式
 .headLineStyle {
     width: 1200px;
@@ -706,7 +687,6 @@ export default {
     margin: 0 auto;
     box-sizing: border-box;
     padding: 30px 100px 30px 100px;
-
     .headLineTitle {
         display: flex;
         align-items: center;
@@ -715,37 +695,31 @@ export default {
         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 {
@@ -753,20 +727,17 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-
         div {
             width: 360px;
             height: 5px;
             background: #ccdae0;
             margin-right: 10px;
         }
-
         .active {
             background: @themeColor1;
         }
     }
 }
-
 //样式7
 .headLineContent7 {
     .headLineTitle {
@@ -775,18 +746,15 @@ export default {
         }
     }
 }
-
 //样式10
 .headLineContent10 {
     line-height: 80px;
-
     .headLineTitle {
         img {
             margin-right: 30px;
         }
     }
 }
-
 //样式11
 .headLineContent11 {
     .headLineTitle {
@@ -794,39 +762,33 @@ export default {
             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;
@@ -836,7 +798,6 @@ export default {
         }
     }
 }
-
 //样式20
 .headLineContent20 {
     width: 1196px;
@@ -844,7 +805,6 @@ export default {
     background-color: #fafafa;
     position: relative;
     padding-top: 32px;
-
     img {
         width: 63px;
         height: 32px;
@@ -853,7 +813,6 @@ export default {
         left: 30px;
     }
 }
-
 //样式23
 .headLineContent23 {
     width: 1196px;
@@ -861,7 +820,6 @@ export default {
     background-color: #fafafa;
     position: relative;
     padding: 50px 100px 50px 100px;
-
     img {
         width: 63px;
         height: 32px;
@@ -870,14 +828,12 @@ export default {
         left: 30px;
     }
 }
-
 //样式24
 .headLineContent24 {
     width: 1196px;
     height: 136px;
     background-color: #fafafa;
     position: relative;
-
     img {
         width: 63px;
         height: 32px;
@@ -885,26 +841,22 @@ export default {
         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;
@@ -915,14 +867,12 @@ export default {
     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; // 改为垂直方向
@@ -930,7 +880,6 @@ export default {
             height: 210px; // 3个titleBox，每个70px高
         }
     }
-
     .headLineTitleBox {
         text-align: center;
         height: 70px; // 明确设置高度
@@ -940,25 +889,21 @@ export default {
         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;
@@ -967,14 +912,12 @@ export default {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-
                 &:last-child {
                     margin-right: 0;
                 }
             }
         }
     }
-
     .headLineIcon {
         div {
             width: 10px;
@@ -983,196 +926,164 @@ export default {
             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;
@@ -1181,7 +1092,6 @@ export default {
     border-top: 2px solid #9C130A;
     position: relative;
     margin-top: 5px;
-
     img {
         position: absolute;
         top: -6px;
@@ -1189,18 +1099,15 @@ export default {
         width: 100px;
         height: 47px;
     }
-
     .headLineTitle {
         margin-bottom: 20px;
     }
-
     .headLineContent {
         div {
             color: #9C130A;
         }
     }
 }
-
 //样式42
 .headLineStyle1_skin42 {
     width: 1196px;
@@ -1209,7 +1116,6 @@ export default {
     border-top: 2px solid #333333;
     position: relative;
     margin-top: 5px;
-
     img {
         position: absolute;
         top: -6px;
@@ -1217,12 +1123,10 @@ export default {
         width: 100px;
         height: 47px;
     }
-
     .headLineTitle {
         color: #333333;
         margin-bottom: 15px;
     }
-
     .headLineContent {
         div {
             color: #333333;
@@ -1232,7 +1136,7 @@ export default {
 //样式43
 .headLineStyle1_skin43 {
     position: relative;
-    img{
+    img {
         position: absolute;
         top: 30px;
         left: 93px;
@@ -1246,7 +1150,7 @@ export default {
 //样式44
 .headLineStyle1_skin44 {
     position: relative;
-    img{
+    img {
         position: absolute;
         top: 27px;
         left: 50px;
@@ -1259,7 +1163,9 @@ export default {
 }
 //样式45
 .headLineStyle1_skin45 {
-    background-color: #fafafa;width:100%;height:100%;
+    background-color: #fafafa;
+    width: 100%;
+    height: 100%;
     .headLineTitle {
         margin-bottom: 20px;
     }
@@ -1267,7 +1173,7 @@ export default {
 //样式46
 .headLineStyle1_skin46 {
     position: relative;
-    img{
+    img {
         position: absolute;
         top: 0px;
         right: 0px;
@@ -1285,9 +1191,9 @@ export default {
 }
 //样式47
 .headLineStyle1_skin47 {
-    padding:30px 120px;
+    padding: 30px 120px;
     position: relative;
-    img{
+    img {
         position: absolute;
         top: 36px;
         left: 30px;
@@ -1305,16 +1211,15 @@ export default {
 }
 //样式48
 .headLineStyle1_skin48 {
-
     .headLineTitle {
         margin-bottom: 15px;
     }
 }
 //样式49
 .headLineStyle1_skin49 {
-    padding:30px 130px;
+    padding: 30px 130px;
     position: relative;
-    img{
+    img {
         position: absolute;
         top: 18px;
         left: 90px;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,137 +1,81 @@
 <template>
     <div>
-        
-         <div class="ul_box_1" v-if="componentStyle == 1">
+        <div class="ul_box_1" v-if="componentStyle == 1">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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)">
-                    
+                <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 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 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)">
-                    
+                <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 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 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">
-
+        </div>
+        <div class="ul_box_2" v-if="componentStyle == 2">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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)">
-                    
+                <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 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 class="ul_li" v-for="(item, index) in pageData.slice(2, 12)">{{ item.title }}</div>
             </div>
-
-         </div>
-         
+        </div>
         <div class="ul_box_3" v-if="componentStyle == 3">
-
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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)">
-                    
+                <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 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 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)">
-                    
+                <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 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 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>
+                <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)">
-                    
+                <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 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 class="ul_li" v-for="(item, index) in pageData.slice(2, 12)">{{ item.title }}</div>
             </div>
-
-         </div>
-         
-
-        
-    
-    
-    
+        </div>
     </div>
 </template>
-
 <script>
 export default {
     props: {
@@ -146,32 +90,28 @@ export default {
     },
     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:""},
-				],
+            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 {
@@ -182,7 +122,6 @@ export default {
         border-bottom: 1px solid #999999;
         height: 38px;
         margin-bottom: 15px;
-
         div {
             height: 35px;
             width: 138px;
@@ -198,26 +137,22 @@ export default {
             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;
@@ -231,12 +166,10 @@ export default {
                 padding-left: 20px;
             }
         }
-
         .tabsNewsContentRight {
             width: 585px;
             height: 370px;
             padding-top: 5px;
-
             div {
                 width: 580px;
                 color: #333333;
@@ -248,30 +181,25 @@ export default {
                 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 {
@@ -280,32 +208,26 @@ export default {
             }
         }
     }
-
     .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 {
@@ -314,169 +236,334 @@ export default {
             }
         }
     }
-
     .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;
+.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_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_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_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_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-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_li::before {
+            content: '';
+            position: absolute;
+            left: 0px;
+            top: 10px;
+            width: 6px;
+            height: 6px;
+            background: #F2F2F2;
         }
-
-
-    .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_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_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_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_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(4n-3) {
+            font-weight: bold;
+        }
+        .ul_li::before {
+            content: '';
+            position: absolute;
+            left: 0px;
+            top: 10px;
+            width: 6px;
+            height: 6px;
+            background: #F2F2F2;
         }
-        .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

@@ -3,174 +3,123 @@
         <!-- <div class="listNewsTitle" v-if="this.$store.state.template.editWebsiteClass==1">
             {{name}}
         </div> -->
- 
-
-         <div class="ul_box_1" v-if="componentStyle == 1">
-            
+        <div class="ul_box_1" v-if="componentStyle == 1">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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" 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 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">
-
+        </div>
+        <div class="ul_box_2" v-if="componentStyle == 2">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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" 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">
-
+                <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>
+                <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" 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 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">
-
+        </div>
+        <div class="ul_box_4" v-if="componentStyle == 4">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 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">
-
+        </div>
+        <div class="ul_box_5" v-if="componentStyle == 5">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 class="ul_li" v-for="(item, index) in pageData.slice(0, 10)"> {{ item.text }}</div>
             </div>
-
-         </div>
-
+        </div>
     </div>
 </template>
-
 <script>
 export default {
-    
     props: {
-        name:{
-            type:String,
-            default:""
+        name: {
+            type: String,
+            default: ""
         },
-        componentStyle:{
-            type:Number,
-            default:0
+        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日在天津市举行。这是中国第五次主办上合组织峰会，也是上合组织成立以来规模最 大的一次峰会。上合组织天津峰会吸引全球目光，获得各方高度关注和积极评价。"},
-                  
+            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;
+        font-size: 22px;
+        font-weight: bold;
         height: 40px;
         line-height: 40px;
         border-bottom: 2px solid #004564;
-        color:#004564;
+        color: #004564;
         margin-bottom: 20px;
         box-sizing: border-box;
     }
@@ -221,7 +170,7 @@ export default {
                     line-height: 24px;
                     padding-left: 16px;
                     font-size: 18px;
-                    color:#333333;
+                    color: #333333;
                     margin-bottom: 10px;
                     background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
                     &:last-child {
@@ -236,11 +185,11 @@ export default {
     }
 }
 //样式4
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle4 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757379542529609.png) no-repeat left center;
                 }
             }
@@ -248,11 +197,11 @@ export default {
     }
 }
 //样式5
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle5 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757386056889702.png) no-repeat left center;
                 }
             }
@@ -260,11 +209,11 @@ export default {
     }
 }
 //样式6
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle6 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     padding-left: 0px;
                     background: none;
                 }
@@ -273,11 +222,11 @@ export default {
     }
 }
 //样式9
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle9 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     &:first-child {
                         font-weight: 400;
                     }
@@ -286,187 +235,416 @@ export default {
         }
     }
 }
-
-.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;}
-
-
-
-
-
-
-
+.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_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_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_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;}
-
-
+.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

@@ -1,162 +1,128 @@
 <template>
     <div class="listNewsBox">
-
-        <div class="listNewsTitle_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
-
-            <span>{{name}}</span>
+        <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">
-
-
-
+        <div class="ul_box_1" v-if="componentStyle == 1">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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="">
+                <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 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">
-
+        </div>
+        <div class="ul_box_2" v-if="componentStyle == 2">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 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>
+                <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">
-
+        </div>
+        <div class="ul_box_3" v-if="componentStyle == 3">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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>
+                <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 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">
-
+        </div>
+        <div class="ul_box_4" v-if="componentStyle == 4">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 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>
+                <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">
-
+        </div>
+        <div class="ul_box_5" v-if="componentStyle == 5">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 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">
-
+        </div>
+        <div class="ul_box_6" v-if="componentStyle == 6">
             <h4 class="ul_head">
-                <span class=" ">{{name}}</span>
+                <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 class="ul_li" v-for="(item, index) in pageData.slice(0, 11)">{{ item.title }}</div>
             </div>
-
-         </div>
-
-
-    
+        </div>
     </div>
 </template>
-
 <script>
 export default {
-    
     props: {
-        name:{
-            type:String,
-            default:""
+        name: {
+            type: String,
+            default: ""
         },
-        componentStyle:{
-            type:Number,
-            default:0
+        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:""},
+            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;
+        font-size: 22px;
+        font-weight: bold;
         height: 40px;
         line-height: 40px;
         border-bottom: 2px solid #A91B33;
-        color:#A91B33;
+        color: #A91B33;
         margin-bottom: 20px;
         box-sizing: border-box;
         span {
-            color:#A91B33;
+            color: #A91B33;
             height: 30px;
             line-height: 30px;
             border-left: 3px solid #A91B33;
@@ -210,7 +176,7 @@ export default {
                     line-height: 24px;
                     padding-left: 16px;
                     font-size: 18px;
-                    color:#333333;
+                    color: #333333;
                     margin-bottom: 10px;
                     background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
                     &:last-child {
@@ -222,11 +188,11 @@ export default {
     }
 }
 //样式4
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle4 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757379542529609.png) no-repeat left center;
                 }
             }
@@ -234,11 +200,11 @@ export default {
     }
 }
 //样式5
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle5 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     background: url(https://img.bjzxtw.org.cn/pre/image/png/20250909/1757386056889702.png) no-repeat left center;
                 }
             }
@@ -246,11 +212,11 @@ export default {
     }
 }
 //样式6
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle6 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     padding-left: 0px;
                     background: none;
                 }
@@ -259,11 +225,11 @@ export default {
     }
 }
 //样式9
-.listNewsBox{
+.listNewsBox {
     .listNewsStyle9 {
-        .listNewsContentItem{
-            .listNewsContentItemRight{
-                div{
+        .listNewsContentItem {
+            .listNewsContentItemRight {
+                div {
                     &:first-child {
                         font-weight: 400;
                     }
@@ -272,193 +238,430 @@ export default {
         }
     }
 }
-
-.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;
+.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_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_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{
+        .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_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_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_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_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:nth-of-type(1){font-weight:bold;}
-        .ul_li:last-child{
+        .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_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_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_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_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;
         }
-        .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/380x610/7/1.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
 <template>
     <div>
         <!--样式1-->
-        <div class="searchInputBox" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 1">
+        <div class="searchInputBox"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 1">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -10,7 +11,8 @@
             </div>
         </div>
         <!--样式2-->
-        <div class="searchInputBox searchInputStyle2" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 2">
+        <div class="searchInputBox searchInputStyle2"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 2">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -19,7 +21,8 @@
             </div>
         </div>
         <!--样式3-->
-        <div class="searchInputBox searchInputStyle3" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 3">
+        <div class="searchInputBox searchInputStyle3"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 3">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -28,7 +31,8 @@
             </div>
         </div>
         <!--样式4-->
-        <div class="searchInputBox searchInputStyle4" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 4">
+        <div class="searchInputBox searchInputStyle4"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 4">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -37,7 +41,8 @@
             </div>
         </div>
         <!--样式5-->
-        <div class="searchInputBox searchInputStyle5" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 5">
+        <div class="searchInputBox searchInputStyle5"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 5">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -46,7 +51,8 @@
             </div>
         </div>
         <!--样式6-->
-        <div class="searchInputBox searchInputStyle6" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 6">
+        <div class="searchInputBox searchInputStyle6"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 6">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
@@ -55,64 +61,63 @@
             </div>
         </div>
         <!--样式7-->
-        <div class="searchInputBox searchInputStyle7" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 7">
+        <div class="searchInputBox searchInputStyle7"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 7">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
                 <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453860334284.png" alt="">
             </div>
         </div>
         <!--样式8-->
-        <div class="searchInputBox searchInputStyle7" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 8">
+        <div class="searchInputBox searchInputStyle7"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 8">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
                 <img src="http://192.168.1.234:19000/pre/image/png/20251223/176645388251004.png" alt="">
             </div>
         </div>
         <!--样式9-->
-        <div class="searchInputBox searchInputStyle9" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 9">    
+        <div class="searchInputBox searchInputStyle9"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 9">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
             <div class="searchBtn">
-                <span>搜索</span> 
+                <span>搜索</span>
                 <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453899633083.png" alt="">
             </div>
         </div>
         <!--样式10-->
-        <div class="searchInputBox searchInputStyle10" v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 10">    
+        <div class="searchInputBox searchInputStyle10"
+            v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 10">
             <div class="searchInputBorder">
                 <input type="text" placeholder="请输入搜索内容" />
             </div>
             <div class="searchBtn">
                 <img src="http://192.168.1.234:19000/pre/image/png/20251223/1766453899633083.png" alt="">
-                <span>搜索</span> 
+                <span>搜索</span>
             </div>
         </div>
     </div>
 </template>
-
 <script>
 export default {
     props: {
-        dataSort:{
-            type:Number,
-            default:0
+        dataSort: {
+            type: Number,
+            default: 0
         }
     },
     data() {
         return {
-            
         };
     },
     methods: {
-        
     },
     mounted() {
-
     },
 };
 </script>
-
 <style scoped lang="less">
 //基本样式
 .searchInputBox {
@@ -125,12 +130,12 @@ export default {
         input {
             width: 582px;
             height: 46px;
-            font-size:16px;
-            color:#333333;
-            border:1px solid #E6E6E6;
+            font-size: 16px;
+            color: #333333;
+            border: 1px solid #E6E6E6;
             outline: none;
             box-sizing: border-box;
-            padding:20px 13px;
+            padding: 20px 13px;
         }
     }
     .searchBtn {
@@ -138,7 +143,7 @@ export default {
         height: 46px;
         text-align: center;
         line-height: 46px;
-        color:#fff;
+        color: #fff;
         background: #A72213;
         cursor: pointer;
     }
@@ -149,8 +154,8 @@ export default {
         box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
     }
     .searchBtn {
-        color:#333333;
-        border:1px solid #E6E6E6;
+        color: #333333;
+        border: 1px solid #E6E6E6;
         box-sizing: border-box;
         border-left: none;
         box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
@@ -159,7 +164,7 @@ export default {
 }
 //样式3
 .searchInputStyle3 {
-    .searchBtn{
+    .searchBtn {
         background-color: #333333;
     }
 }
@@ -167,8 +172,8 @@ export default {
 .searchInputStyle4 {
     .searchBtn {
         margin-left: 5px;
-        color:#fff;
-        border:1px solid #E6E6E6;
+        color: #fff;
+        border: 1px solid #E6E6E6;
         box-sizing: border-box;
         border-left: none;
         box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
@@ -179,7 +184,7 @@ export default {
 .searchInputStyle5 {
     .searchBtn {
         margin-left: 5px;
-        color:#fff;
+        color: #fff;
         background: #333333;
     }
 }
@@ -201,11 +206,12 @@ export default {
         height: 44px;
         position: relative;
         border: 1px solid #E6E6E6;
-        input{
-            height: 44px;;
+        input {
+            height: 44px;
+            ;
             border: none;
         }
-        img{
+        img {
             position: absolute;
             right: 20px;
             top: 11px;
@@ -217,7 +223,7 @@ export default {
 //样式9
 .searchInputStyle9 {
     .searchBtn {
-        img{
+        img {
             width: 16px;
             height: 16px;
             margin-left: 5px;
@@ -229,7 +235,7 @@ export default {
 //样式10
 .searchInputStyle10 {
     .searchBtn {
-        img{
+        img {
             width: 16px;
             height: 16px;
             margin-right: 5px;
@@ -239,4 +245,3 @@ export default {
     }
 }
 </style>
-

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

@@ -1,94 +1,73 @@
 <template>
     <div class="alongArticleBigBox">
-        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+        <div :class="['listBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
             <div class="listRouterBox">
                 当前位置：首页 > <span>关于我们</span>
             </div>
-
             <div class="listContentBox">
-
-
-                <div :class="['aboutMenu line_1', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-
-                        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="18" :sectorName="this.$store.state.template.pageData.aloneArticle[dataSort].content.sectorName"/>
- 
-                        
-                        <div v-if="this.$store.state.template.editWebsiteClass==7">
-                            <menu7Style :componentStyle="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[0].component_style"/>
-                        </div>
-
-                        
+                <div :class="['aboutMenu line_1', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="18"
+                        :sectorName="this.$store.state.template.pageData.aloneArticle[dataSort].content.sectorName" />
+                    <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                        <menu7Style
+                            :componentStyle="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[0].component_style" />
                     </div>
-                    
-                <div :class="['listContentBoxLeft', {369: this.$store.state.template.previewStatus==false}]">
+                </div>
+                <div :class="['listContentBoxLeft', { 369: this.$store.state.template.previewStatus == false }]">
                     <aboutArticle7Style />
                 </div>
             </div>
-
-
-
-
         </div>
     </div>
 </template>
-
 <script>
 //编辑按钮
 import editBtn from '../../../../../../public/editBtn.vue'
 import convertBtn from '../../../../../../public/convertBtn.vue'
- 
 import menu7Style from '../../../../../../style/components/menu/190x368/7/1.vue'
 import aboutArticle7Style from '../../../../../../style/components/main/960x1170/7/1.vue'
-
-
-
 //组件研发中
 import atWork from '../../../../../../public/atWork.vue'
 export default {
     components: {
         editBtn,
         convertBtn,
-         
         menu7Style,
         aboutArticle7Style,
-
         atWork
     },
     props: {
-        id:{
-            type:Number,
-            default:0
+        id: {
+            type: Number,
+            default: 0
         },
-        y:{
-            type:Number,
-            default:0
+        y: {
+            type: Number,
+            default: 0
         },
-        dataSort:{
-            type:Number,
-            default:0
+        dataSort: {
+            type: Number,
+            default: 0
         }
     },
     data() {
         return {
-            leftData:{
-                text:0,
-                img:3
+            leftData: {
+                text: 0,
+                img: 3
             },
-            rightData:{
-                text:9,
-                img:0
+            rightData: {
+                text: 9,
+                img: 0
             }
         };
     },
     methods: {
-        
     },
     mounted() {
-        
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;
@@ -114,25 +93,25 @@ export default {
     box-sizing: border-box;
     margin-top: 28px;
 }
-.line_1{border-left: none;}
-
-
-.alongArticleBigBox{
+.line_1 {
+    border-left: none;
+}
+.alongArticleBigBox {
     width: 100%;
     height: 1170px;
-    .listBox{
+    .listBox {
         width: 1200px;
         height: 1170px;
         margin: 0 auto;
         position: relative;
         box-sizing: content-box;
-        .listRouterBox{
+        .listRouterBox {
             height: 52px;
             border-bottom: 1px solid #D9D9D9;
-            font-size:16px;
-            color:#999999;
-            span{
-                color:#333333;
+            font-size: 16px;
+            color: #999999;
+            span {
+                color: #333333;
             }
         }
         .listContentBox {
@@ -140,7 +119,8 @@ export default {
             // justify-content: space-between;
             // align-items: center;
             .listContentBoxLeft {
-                width: 960px;float:right;
+                width: 960px;
+                float: right;
                 height: 1170px;
                 position: relative;
             }
@@ -158,11 +138,11 @@ export default {
     }
     .aboutMenu {
         width: 190px;
-        height: 368px;position:relative;
-        float:left; margin-top:33px;
-         
+        height: 368px;
+        position: relative;
+        float: left;
+        margin-top: 33px;
         box-sizing: content-box;
     }
-} 
+}
 </style>
-

src/views/template/style/sector/body/ad/1200x90/1.vue

@@ -6,11 +6,9 @@
         </div>
     </div>
 </template>
-
 <script>
 import editBtn from '../../../../../public/editBtn.vue'
 import adStyle from '../../../../../style/components/ad/1200x90/1.vue'
-
 export default {
     components: {
         editBtn,
@@ -32,12 +30,10 @@ export default {
     },
     data() {
         return {
-
         };
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;

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

@@ -1,8 +1,7 @@
- <template>
+<template>
     <div :class="['bannerBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
         <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"
             :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName" />
-            
         <!-- 样式1  start----------------------->
         <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
             v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
@@ -17,7 +16,6 @@
             </div>
         </div>
         <!-- 样式1  end----------------------->
-            
         <!-- 样式2  start----------------------->
         <div :class="['bannerLayerBox', { componentBorder1: $store.state.template.previewStatus == false }]"
             v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
@@ -32,7 +30,6 @@
             </div>
         </div>
         <!-- 样式2  end----------------------->
-            
         <!-- 样式3  start----------------------->
         <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
             v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
@@ -47,7 +44,6 @@
             </div>
         </div>
         <!-- 样式3  end----------------------->
-
         <!-- 样式4  start----------------------->
         <div :class="['NewsListBox', { componentBorder2: $store.state.template.previewStatus == false }]"
             v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
@@ -62,32 +58,23 @@
             </div>
         </div>
         <!-- 样式3  end----------------------->
-
-
-        
     </div>
 </template>
-
 <script>
 import convertBtn from '../../../../../../../public/convertBtn.vue'
 import banner2Style from '../../../../../../../style/components/banner/swiper/720x405/2.vue'
 import list5Style from '../../../../../../../style/components/banner/list/450x405/5.vue'
-
 import big_banner2Style from '../../../../../../../style/components/banner/swiper/720x480/7/2.vue'
 import big_list5Style from '../../../../../../../style/components/banner/list/450x480/7/7.vue'
-
 //组件研发中
 import atWork from '../../../../../../../public/atWork.vue'
-
 export default {
     components: {
         convertBtn,
         banner2Style,
         list5Style,
-
         big_banner2Style,
         big_list5Style,
-        
         atWork//组件研发中
     },
     props: {
@@ -111,14 +98,11 @@ export default {
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;
 }
-
 .bannerBigBox {
-    
     width: 1200px;
     height: 480px;
     position: relative;
@@ -127,34 +111,29 @@ export default {
     justify-content: space-between;
     align-items: center;
     box-sizing: content-box;
-
     .componentBorder1 {
         border-left: 0;
         border-top: 0;
         border-bottom: 0;
     }
-
     .componentBorder2 {
         border-right: 0;
         border-top: 0;
         border-bottom: 0;
     }
-
     .bannerLayerBox {
         width: 790px;
         height: 480px;
         position: relative;
-
         .templateEditBtnBox {
             right: 0;
         }
     }
-
     .NewsListBox {
         width: 380px;
         height: 480px;
         position: relative;
-        overflow:hidden;
+        overflow: hidden;
         .templateEditBtnBox {
             right: 0;
         }

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

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

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

@@ -1,33 +1,30 @@
 <template>
     <div :class="['headLineBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
-        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName"/>
-        <div v-if="this.$store.state.template.editWebsiteClass==1">
-            <headLineStyle1 :dataSort="dataSort"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"
+            :sectorName="this.$store.state.template.pageData.index[dataSort].content.sectorName" />
+        <div v-if="this.$store.state.template.editWebsiteClass == 1">
+            <headLineStyle1 :dataSort="dataSort" />
         </div>
-        <div v-if="this.$store.state.template.editWebsiteClass==2">
-            <headLineStyle2 :dataSort="dataSort"/>
+        <div v-if="this.$store.state.template.editWebsiteClass == 2">
+            <headLineStyle2 :dataSort="dataSort" />
         </div>
-        <div v-if="this.$store.state.template.editWebsiteClass==3">
-            <headLineStyle3 :dataSort="dataSort"/>
+        <div v-if="this.$store.state.template.editWebsiteClass == 3">
+            <headLineStyle3 :dataSort="dataSort" />
         </div>
-        <div v-if="this.$store.state.template.editWebsiteClass==4">
-            <headLineStyle4 :dataSort="dataSort"/>
+        <div v-if="this.$store.state.template.editWebsiteClass == 4">
+            <headLineStyle4 :dataSort="dataSort" />
         </div>
-        <div v-if="this.$store.state.template.editWebsiteClass==5">
-            <headLineStyle5 :dataSort="dataSort"/>
+        <div v-if="this.$store.state.template.editWebsiteClass == 5">
+            <headLineStyle5 :dataSort="dataSort" />
         </div>
-        <div v-if="this.$store.state.template.editWebsiteClass==6">
-            <headLineStyle6 :dataSort="dataSort"/>
+        <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 v-if="this.$store.state.template.editWebsiteClass == 7">
+            <headLineStyle7 :dataSort="dataSort" />
         </div>
-
-
     </div>
 </template>
-
 <script>
 import convertBtn from '../../../../../../public/convertBtn.vue'
 import headLineStyle1 from '../../../../../../style/components/headLine/1200x140/1.vue'
@@ -36,13 +33,9 @@ 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'
-
 export default {
     components: {
         convertBtn,
@@ -52,7 +45,6 @@ export default {
         headLineStyle4,
         headLineStyle5,
         headLineStyle6,
-        
         headLineStyle7,
         atWork//组件研发中
     },
@@ -72,12 +64,10 @@ export default {
     },
     data() {
         return {
-
         };
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;

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

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

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

@@ -1,256 +1,154 @@
 <template>
     <div class="commentSectorBox">
-         
-        <div :class="['commentSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-
+        <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> 
+                </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 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 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 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_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>    
-
+                    <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
+        id: {
+            type: Number,
+            default: 0
         },
-        y:{
-            type:Number,
-            default:0
+        y: {
+            type: Number,
+            default: 0
         },
-        dataSort:{
-            type:Number,
-            default:0
+        dataSort: {
+            type: Number,
+            default: 0
         }
     },
     data() {
         return {
-            leftDataTop:{
-                text:6,
-                img:2
+            leftDataTop: {
+                text: 6,
+                img: 2
             },
-            leftDataBottom:{
-                text:14,
-                img:2
+            leftDataBottom: {
+                text: 14,
+                img: 2
             },
-            rightData:{
-                text:0,
-                img:7
+            rightData: {
+                text: 0,
+                img: 7
             },
-
-            index_1:{
-                text:10,
-                img:0
+            index_1: {
+                text: 10,
+                img: 0
             },
-
-            index_2:{
-                text:11,
-                img:1
+            index_2: {
+                text: 11,
+                img: 1
             },
-
-            index_3:{
-                text:10,
-                img:3
+            index_3: {
+                text: 10,
+                img: 3
             },
-
-            index_4:{
-                text:8,
-                img:4
+            index_4: {
+                text: 8,
+                img: 4
             },
-
-
-
-
         };
     },
     methods: {
-        
     },
     mounted() {
-        
     },
 };
 </script>
-
 <style scoped lang="less">
-.buildingBorder,.buildingBorder2,.buildingBorder3,.buildingBorder4 {
+.buildingBorder,
+.buildingBorder2,
+.buildingBorder3,
+.buildingBorder4 {
     border: 2px dashed #999;
-    
 }
 .buildingBorder2 {
     border-right: none;
@@ -265,14 +163,12 @@ export default {
     border-bottom: none;
 }
 .commentSectorBox {
-    width:100%;
+    width: 100%;
     height: 1150px;
-     
     .commentSector {
         width: 1200px;
         height: 1150px;
         margin: 0 auto;
-         
         align-items: flex-start;
         justify-content: space-between;
         box-sizing: content-box;
@@ -300,66 +196,114 @@ export default {
         }
     }
 }
-
-.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{
+.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;}
-
-
-
+.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>
-

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

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

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

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

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

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

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

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

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

@@ -1,121 +1,101 @@
 <template>
     <div class="listBigBox">
-        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+        <div :class="['listBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
             <div class="listRouterBox">
                 当前位置：首页 > 新闻资讯 > <span>热点话题</span>
             </div>
             <div class="listContentBox">
-                <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
-                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="14" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
-                    <div v-if="this.$store.state.template.editWebsiteClass==7">
-                        <list7Style :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style"/>
+                <div
+                    :class="['listContentBoxLeft', { buildingBorder2: this.$store.state.template.previewStatus == false }]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="14"
+                        :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName" />
+                    <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                        <list7Style
+                            :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style" />
                     </div>
-
                 </div>
                 <div class="listContentBoxRight">
-
-                    <div :class="['listContentBoxRightTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
-                        
-                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
-                         
-
-                        <div v-if="this.$store.state.template.editWebsiteClass==7">
-                            <news7style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[1].componentData.name" :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style"/>
+                    <div
+                        :class="['listContentBoxRightTop', { buildingBorder3: this.$store.state.template.previewStatus == false }]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15"
+                            :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName" />
+                        <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                            <news7style
+                                :name="this.$store.state.template.pageData.list[dataSort].content.componentList[1].componentData.name"
+                                :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style" />
                         </div>
-
-
                     </div>
-                    <div :class="['listContentBoxRightBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
-                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16" :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName"/>
- 
-
-                        <div v-if="this.$store.state.template.editWebsiteClass==7">
-                            <hotNews7style :name="this.$store.state.template.pageData.list[dataSort].content.componentList[2].componentData.name" :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style"/>
+                    <div
+                        :class="['listContentBoxRightBottom', { buildingBorder4: this.$store.state.template.previewStatus == false }]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16"
+                            :sectorName="this.$store.state.template.pageData.list[dataSort].content.sectorName" />
+                        <div v-if="this.$store.state.template.editWebsiteClass == 7">
+                            <hotNews7style
+                                :name="this.$store.state.template.pageData.list[dataSort].content.componentList[2].componentData.name"
+                                :componentStyle="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style" />
                         </div>
-
-
                     </div>
                 </div>
             </div>
-
             <div class="paginationBox">
-
-
                 <div :class="'paginationBoxLeft paginationBoxLeft' + this.$store.state.template.editWebsiteClass">
-                    <el-pagination 
-                        size="small" 
-                        background 
-                        layout="prev, pager, next" 
-                        :total="100" 
-                        :page-size="1" 
-                        :current-page="1" 
-                        prev-text="上一页" 
-                        next-text="下一页"
-                     />
+                    <el-pagination size="small" background layout="prev, pager, next" :total="100" :page-size="1"
+                        :current-page="1" prev-text="上一页" next-text="下一页" />
                 </div>
             </div>
         </div>
     </div>
 </template>
-
 <script>
 //编辑按钮
 import editBtn from '../../../../../../../public/editBtn.vue'
 import convertBtn from '../../../../../../../public/convertBtn.vue'
- 
-
 import list7Style from '../../../../../../../style/components/list/900x1400/7/1.vue'
 import news7style from '../../../../../../../style/components/list/270x450/7/1.vue'
 import hotNews7style from '../../../../../../../style/components/list/270x580/7/1.vue'
-
-
 //组件研发中
 import atWork from '../../../../../../../public/atWork.vue'
 export default {
     components: {
         editBtn,
         convertBtn,
-         
         hotNews7style,
         news7style,
         list7Style,
         atWork
     },
     props: {
-        id:{
-            type:Number,
-            default:0
+        id: {
+            type: Number,
+            default: 0
         },
-        y:{
-            type:Number,
-            default:0
+        y: {
+            type: Number,
+            default: 0
         },
-        dataSort:{
-            type:Number,
-            default:0
+        dataSort: {
+            type: Number,
+            default: 0
         }
     },
     data() {
         return {
-            leftData:{
-                text:0,
-                img:3
+            leftData: {
+                text: 0,
+                img: 3
             },
-            rightData:{
-                text:9,
-                img:0
+            rightData: {
+                text: 9,
+                img: 0
             }
         };
     },
     methods: {
-        
     },
     mounted() {
-        
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;
@@ -132,20 +112,20 @@ export default {
     border: 2px dashed #999;
     border-right: none;
 }
-.listBigBox{
+.listBigBox {
     width: 100%;
     height: 1610px;
-    .listBox{
+    .listBox {
         width: 1200px;
         height: 1610px;
         margin: 0 auto;
-        .listRouterBox{
+        .listRouterBox {
             height: 52px;
             border-bottom: 1px solid #D9D9D9;
-            font-size:16px;
-            color:#999999;
-            span{
-                color:#333333;
+            font-size: 16px;
+            color: #999999;
+            span {
+                color: #333333;
             }
         }
         .listContentBox {
@@ -174,7 +154,6 @@ export default {
                 }
             }
         }
-
         .paginationBox {
             height: 100px;
             .paginationBoxLeft {
@@ -185,29 +164,22 @@ export default {
                 text-align: center;
             }
         }
-
-         
-
-
     }
 }
- 
-  .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+.el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
     background-color: #A72213;
 }
-
- 
 .el-pagination.is-background::v-deep .btn-prev,
- .el-pagination.is-background::v-deep .btn-next,
-  .el-pagination.is-background::v-deep .el-pager li{
-        height:33px;line-height:33px; 
-        border: 1px solid #EAEAEA;
-        border-radius:4px;margin:0px 10px;
-        padding:0px 12px;background:#F6F6F6;
-
+.el-pagination.is-background::v-deep .btn-next,
+.el-pagination.is-background::v-deep .el-pager li {
+    height: 33px;
+    line-height: 33px;
+    border: 1px solid #EAEAEA;
+    border-radius: 4px;
+    margin: 0px 10px;
+    padding: 0px 12px;
+    background: #F6F6F6;
 }
-
-
 //样式1
 .paginationBoxLeft1 {
     width: 800px;
@@ -275,4 +247,3 @@ export default {
     }
 }
 </style>
-

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

@@ -2,18 +2,11 @@
     <div class="searchListBigBox">
         <div :class="['listBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
             <div :class="['searchInputBox', { buildingBorder2: this.$store.state.template.previewStatus == false }]">
-
                 <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="17"
                     :sectorName="this.$store.state.template.pageData.search[dataSort].content.sectorName" />
-
-                <!-- <div v-if="this.$store.state.template.editWebsiteClass == 5">
-                    <searchInput5Style :dataSort="dataSort" />
-                </div> -->
-
                 <div v-if="this.$store.state.template.editWebsiteClass == 7">
                     <searchInput7Style :dataSort="dataSort" />
                 </div>
-
             </div>
             <div class="listRouterBox">
                 当前位置：首页 > <span>搜索</span>
@@ -23,53 +16,33 @@
                     :class="['listContentBoxLeft', { buildingBorder3: this.$store.state.template.previewStatus == false }]">
                     <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="14"
                         :sectorName="this.$store.state.template.pageData.search[dataSort].content.sectorName" />
-
                     <div v-if="this.$store.state.template.editWebsiteClass == 7">
                         <list7Style
                             :componentStyle="this.$store.state.template.pageData.search[dataSort].content.componentList[1].component_style" />
                     </div>
-
                 </div>
             </div>
             <div class="paginationBox">
                 <div :class="'paginationBoxLeft paginationBoxLeft' + this.$store.state.template.editWebsiteClass">
-                    <el-pagination 
-                        size="small" 
-                        background 
-                        layout="prev, pager, next" 
-                        :total="100" 
-                        :page-size="1" 
-                        :current-page="1" 
-                        prev-text="上一页" 
-                        next-text="下一页"
-                    />
+                    <el-pagination size="small" background layout="prev, pager, next" :total="100" :page-size="1"
+                        :current-page="1" prev-text="上一页" next-text="下一页" />
                 </div>
             </div>
         </div>
     </div>
 </template>
-
 <script>
 //编辑按钮
 import editBtn from '../../../../../../../public/editBtn.vue'
 import convertBtn from '../../../../../../../public/convertBtn.vue'
-//1200x1040 
-// import list5Style from '../../../../../../../style/components/list/900x2040/1.vue'
-// import list7Style from '../../../../../../../style/components/list/900x2040/1.vue'
 import list7Style from '../../../../../../../style/components/list/1200x1400/7/1.vue'
-
-//1200x1040
-// import searchInput7Style from '../../../../../../../style/components/search/700x46/5.vue'
 import searchInput7Style from '../../../../../../../style/components/search/700x46/7/1.vue'
-
-
 //组件研发中
 import atWork from '../../../../../../../public/atWork.vue'
 export default {
     components: {
         editBtn,
         convertBtn,
-
         list7Style,
         // searchInput5Style,
         searchInput7Style,
@@ -102,74 +75,59 @@ export default {
         };
     },
     methods: {
-
     },
     mounted() {
-
     },
 };
 </script>
-
 <style scoped lang="less">
 .buildingBorder {
     border: 2px dashed #999;
 }
-
 .buildingBorder2 {
     border-bottom: 2px dashed #999;
 }
-
 .buildingBorder3 {
     border: 2px dashed #999;
     border-left: none;
     border-right: none;
 }
-
 .searchListBigBox {
     width: 100%;
     height: 1720px;
-
     .listBox {
         width: 1200px;
         height: 1720px;
         margin: 0 auto;
-
         .searchInputBox {
             height: 46px;
             margin: 0 auto 34px;
-             
             box-sizing: border-box;
             position: relative;
             box-sizing: content-box;
         }
-
         .listRouterBox {
             height: 52px;
             border-bottom: 1px solid #D9D9D9;
             font-size: 16px;
             color: #999999;
-
             span {
                 color: #333333;
             }
         }
-
         .listContentBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-top: 30px;
-
             .listContentBoxLeft {
                 width: 1200px;
                 height: 1400px;
                 position: relative;
             }
         }
-
         .paginationBox {
             height: 100px;
-
             .paginationBoxLeft {
                 height: 100px;
                 padding-top: 33px;
@@ -178,20 +136,16 @@ export default {
             }
         }
     }
-
 }
-
 .paginationBoxLeft {
     height: 34px;
     display: flex;
     justify-content: center;
     margin: 0;
-
     // 鼠标移入后字体颜色
     .el-pagination::v-deep :hover {
         color: #A72213;
     }
-
     .el-pagination.is-background::v-deep .btn-next,
     .el-pagination.is-background::v-deep .btn-prev {
         width: 70px;
@@ -201,15 +155,14 @@ export default {
         background-color: #F6F6F6;
         border: #EAEAEA 1px solid;
     }
-
     .el-pagination.is-background::v-deep .el-pager li {
         margin: 0px 10px;
-        width: 38px;background-color: #F6F6F6;
+        width: 38px;
+        background-color: #F6F6F6;
         height: 34px;
         border-radius: 4px;
         line-height: 34px;
     }
-
     .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
         background-color: #A72213;
         color: #fff;

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

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass== 5 || this.$store.state.template.editWebsiteClass== 6">
-
+        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass"
+            v-if="this.$store.state.template.editWebsiteClass == 5 || this.$store.state.template.editWebsiteClass == 6">
             <div class="footerLogoBox">
-                 
-                <img src="http://192.168.1.234:19000/pre/image/jpeg/20251224/1766538399880609.jpg" alt="" v-if="this.$store.state.template.editWebsiteClass==5">
-                <img src=" http://192.168.1.234:19000/pre/image/png/20251218/1766050741394985.png" alt="" v-if="this.$store.state.template.editWebsiteClass==6">
-                 
+                <img src="http://192.168.1.234:19000/pre/image/jpeg/20251224/1766538399880609.jpg" alt=""
+                    v-if="this.$store.state.template.editWebsiteClass == 5">
+                <img src=" http://192.168.1.234:19000/pre/image/png/20251218/1766050741394985.png" alt=""
+                    v-if="this.$store.state.template.editWebsiteClass == 6">
             </div>
             <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                 <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
@@ -64,20 +64,18 @@
                 </div>
             </div>
         </div>
-
         <!-- 皮肤7皮肤7 -->
-        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass == 7">
-            
+        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass"
+            v-if="this.$store.state.template.editWebsiteClass == 7">
             <div class="index_1_top_box">
                 <h4 class="index_1_top_h4">
                     <span class=" ">友情链接 </span>
-                </h4> 
+                </h4>
             </div>
-
             <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                 <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
                     :key="item.id">
-            </div> 
+            </div>
             <div class="textLinkBox">
                 <div class="textLinkBoxLeft">
                     <span>友情链接：</span>
@@ -91,7 +89,7 @@
                 <div class="footerMenu">
                     <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">
                         {{ item.name }}
-                    </div> 
+                    </div>
                 </div>
             </div>
             <div class="footInfoBox">
@@ -124,21 +122,15 @@
                             <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
                         </div>
                     </div>
-                    <div class="footerInfoBoxBottom"> 
-                        
-                        <img :src="item.logo_url" 
-                            v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot"
+                    <div class="footerInfoBoxBottom">
+                        <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot"
                             :key="item.id">
-
-
                     </div>
                 </div>
             </div>
-        </div> 
-
+        </div>
     </div>
 </template>
-
 <script>
 // import '@/styles/theme/foot/style1.less';
 // import '@/styles/theme/foot/style2.less';
@@ -153,17 +145,14 @@ export default {
     }
 };
 </script>
-
 <style scoped lang="less">
 //基本样式
 .componentBorder {
     border: 2px dashed #999;
 }
-
 .footerStyle {
     width: 100%;
     margin: 0 auto;
-
     .imgLinkBox {
         width: 1200px;
         height: 140px;
@@ -174,20 +163,17 @@ export default {
         margin: 0 auto;
         margin-bottom: 20px;
         box-sizing: content-box;
-
         img {
             width: 170px;
             height: 60px;
             margin-right: 36px;
             display: block;
             margin-bottom: 20px;
-
             &:nth-child(6n) {
                 margin-right: 0;
             }
         }
     }
-
     .textLinkBox {
         width: 1200px;
         margin: 0 auto;
@@ -195,24 +181,20 @@ export default {
         justify-content: space-between;
         align-items: flex-start;
         box-sizing: content-box;
-
         .textLinkBoxLeft {
             color: #333;
             font-weight: bold;
-
             span {
                 display: block;
                 margin-bottom: 20px;
             }
         }
-
         .textLinkBoxRight {
             width: 1083px;
             color: #333;
             display: flex;
             align-items: flex-start;
             flex-wrap: wrap;
-
             span {
                 margin-right: 50px;
                 display: block;
@@ -220,10 +202,8 @@ export default {
             }
         }
     }
-
     .footerMenuBox {
         border-bottom: none;
-
         .footerMenu {
             width: 1200px;
             margin: 0 auto;
@@ -231,77 +211,64 @@ export default {
             align-items: center;
             justify-content: center;
             height: 50px;
-
             div {
                 color: #fff;
                 font-size: 14px;
                 font-weight: bold;
                 width: 200px;
                 text-align: center;
-
                 &:last-child {
                     border-right: none;
                 }
             }
         }
     }
-
     .footInfoBox {
         width: 100%;
-
         .footerInfoBox {
             width: 1200px;
             padding-bottom: 30px;
             margin: 0 auto;
             box-sizing: content-box;
-
             .footerInfoBoxContent {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-
                 .footerInfoBoxContentLeft {
                     width: 10%;
                     box-sizing: border-box;
                     padding-right: 10px;
-
                     img {
                         width: 100%;
                         display: block;
                     }
                 }
-
                 .footerInfoBoxContentMain {
                     padding-top: 40px;
                     font-size: 14px;
                     text-align: center;
                     color: #fff;
-
                     div {
                         text-align: center;
                         padding-bottom: 10px;
                         color: #333;
                     }
                 }
-
                 .footerInfoBoxContentRight {
                     width: 10%;
                     box-sizing: border-box;
                     padding-left: 10px;
-
                     img {
                         width: 100%;
                         display: block;
                     }
                 }
             }
-
             .footerInfoBoxBottom {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 padding-top: 40px;
-
                 img {
                     width: 10%;
                     display: block;
@@ -310,14 +277,10 @@ export default {
             }
         }
     }
-
-
 }
-
 //样式5
 @style5color: #3848a0;
 @style5BorderRight: #1f308c 1px solid;
-
 .footerStyle5 {
     .footerLogoBox {
         width: 1200px;
@@ -326,32 +289,26 @@ export default {
         justify-content: center;
         align-items: center;
         margin-bottom: 30px;
-
         img {
             width: 1200px;
             height: 70px;
         }
     }
-
     .footerMenuBox {
         background-color: @style5color;
     }
-
     .footerMenu {
         div {
             border-right: @style5BorderRight;
         }
     }
-
     .footInfoBox {
         background-color: @style5color;
     }
 }
-
 //样式6
 @style6color: #16407a;
 @style6BorderRight: #16407a 1px solid;
-
 .footerStyle6 {
     .footerLogoBox {
         width: 1200px;
@@ -361,74 +318,79 @@ export default {
         align-items: center;
         margin-bottom: 30px;
         padding-top: 30px;
-
         img {
             width: 1200px;
             height: 32px;
         }
     }
-
     .footerMenuBox {
         background-color: @style6color;
     }
-
     .footerMenu {
         div {
             border-right: @style6BorderRight;
         }
     }
-
     .footInfoBox {
         background-color: @style6color;
     }
 }
-
 //样式7 
 @style7color: #A72213;
 @style7BorderRight: #D9D9D9 1px solid;
-
 .footerStyle7 {
-
-             .index_1_top_box{height:42px;text-align:center; margin:0px auto 54px;}
-        .index_1_top_h4{display:inline-block;text-align:center;position:relative; 
-                            padding:0px 20px;margin:0px auto;
-                        }
-        .index_1_top_h4::after{content:'';position:absolute;
-                left:-440px;top:14px; 
-            height:20px;width:440px; 
-            
-            background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
-            background-size: auto 100%;   
-        }
-        .index_1_top_h4::before{content:'';position:absolute;
-                right:-440px;top:14px;
-            height:20px;width:440px;  
-            background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
-            background-size: auto 100%;   
-
-        }
-
-        .index_1_top_box>*{text-align:center;height:42px;line-height:42px;
-                            color:#333;font-size:32px;
-                            font-weight:normal;
-                        }
-
-        .footerMenuBox {
-            background-color: #FAFAFA;
-        }
-        
-        .footerMenu { 
-            div {
-                border-right: @style7BorderRight;
-                width: 260px!important;
-                color: #333!important;
-            }
-        }
-
-        .footInfoBox {
-            background-color: @style7color;
+    .index_1_top_box {
+        height: 42px;
+        text-align: center;
+        margin: 0px auto 54px;
+    }
+    .index_1_top_h4 {
+        display: inline-block;
+        text-align: center;
+        position: relative;
+        padding: 0px 20px;
+        margin: 0px auto;
+    }
+    .index_1_top_h4::after {
+        content: '';
+        position: absolute;
+        left: -440px;
+        top: 14px;
+        height: 20px;
+        width: 440px;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px;
+        background-size: auto 100%;
+    }
+    .index_1_top_h4::before {
+        content: '';
+        position: absolute;
+        right: -440px;
+        top: 14px;
+        height: 20px;
+        width: 440px;
+        background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px;
+        background-size: auto 100%;
+    }
+    .index_1_top_box>* {
+        text-align: center;
+        height: 42px;
+        line-height: 42px;
+        color: #333;
+        font-size: 32px;
+        font-weight: normal;
+    }
+    .footerMenuBox {
+        background-color: #FAFAFA;
+    }
+    .footerMenu {
+        div {
+            border-right: @style7BorderRight;
+            width: 260px !important;
+            color: #333 !important;
         }
+    }
+    .footInfoBox {
+        background-color: @style7color;
+    }
 }
-
-
 </style>

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

@@ -3,12 +3,20 @@
         <!-- 皮肤5样式 -->
         <div class="headTopBox" v-if="this.$store.state.template.editWebsiteClass == 5">
             <div class="headTopBoxBg">
-                <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
+                <div class="headTopInfoLeft">您好，欢迎来到{{ this.$store.state.template.webSiteInfo.website_name }}网！</div>
                 <div class="headTopInfoRight">
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036337555000.png" alt="搜索">搜索</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036370151878.png" alt="广告服务">广告服务</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036419886590.png" alt="登录">登录</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036392436233.png" alt="注册">注册</div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036337555000.png" alt="搜索">搜索
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036370151878.png" alt="广告服务">广告服务
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036419886590.png" alt="登录">登录
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036392436233.png" alt="注册">注册
+                    </div>
                 </div>
             </div>
             <!-- 皮肤5头部样式 -->
@@ -16,16 +24,23 @@
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
             </div>
         </div>
-
         <!-- 皮肤6样式 -->
         <div class="style6" v-if="this.$store.state.template.editWebsiteClass == 6">
             <div class="headTopBoxBg">
-                <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
+                <div class="headTopInfoLeft">您好，欢迎来到{{ this.$store.state.template.webSiteInfo.website_name }}网！</div>
                 <div class="headTopInfoRight">
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036337555000.png" alt="搜索">搜索</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036370151878.png" alt="广告服务">广告服务</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036419886590.png" alt="登录">登录</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://192.168.1.234:19000/pre/image/png/20251218/1766036392436233.png" alt="注册">注册</div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036337555000.png" alt="搜索">搜索
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036370151878.png" alt="广告服务">广告服务
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036419886590.png" alt="登录">登录
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://192.168.1.234:19000/pre/image/png/20251218/1766036392436233.png" alt="注册">注册
+                    </div>
                 </div>
             </div>
             <!-- 皮肤6头部样式 -->
@@ -33,35 +48,31 @@
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
             </div>
         </div>
-
         <div class="headTopBox_7" v-if="this.$store.state.template.editWebsiteClass == 7">
-
             <div class="headTopBoxBg">
-
-                <div class="headTopInfoLeft">您好，欢迎来到{{this.$store.state.template.webSiteInfo.website_name}}网！</div>
+                <div class="headTopInfoLeft">您好，欢迎来到{{ this.$store.state.template.webSiteInfo.website_name }}网！</div>
                 <div class="headTopInfoRight">
-                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748328204272390.png" alt="搜索">搜索</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329860825368.png" alt="广告服务">广告服务</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329883541848.png" alt="登录">登录</div>
-                    <div class="headInfoItem" @click="banUse"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/174832996345491.png" alt="注册">注册</div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748328204272390.png" alt="搜索">搜索</div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329860825368.png" alt="广告服务">广告服务
+                    </div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748329883541848.png" alt="登录">登录</div>
+                    <div class="headInfoItem" @click="banUse"><img
+                            src="http://img.bjzxtw.org.cn/pre/image/png/20250527/174832996345491.png" alt="注册">注册</div>
                 </div>
             </div>
-
             <div class="headLogoBox">
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
             </div>
-
         </div>
-
-
     </div>
 </template>
-
 <script>
 // import '@/styles/theme/head/style1.less';
 // import adStyle from '@/views/template/style/components/ad/830x110/1.vue'
 // import editBtn from '../../../../public/editBtn.vue'
-
 export default {
     components: {
         // editBtn,
@@ -72,18 +83,16 @@ export default {
         return {};
     },
     methods: {
-        banUse(){
+        banUse() {
             this.$store.commit('template/alertMessage');
         }
     },
-    mounted(){},
+    mounted() { },
 };
 </script>
-
 <style scoped lang="less">
 //风格1
 .headStyle5 {
-
     width: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -105,7 +114,7 @@ export default {
             justify-content: space-between;
             .headTopInfoLeft {
                 font-size: 12px;
-                color:#666666;
+                color: #666666;
             }
             .headTopInfoRight {
                 display: flex;
@@ -139,7 +148,7 @@ export default {
             }
             .headAdTopBox {
                 position: relative;
-                img{
+                img {
                     display: block;
                 }
                 .templateEditBtnBox {
@@ -148,7 +157,7 @@ export default {
             }
         }
     }
-    .headTopBox::before{
+    .headTopBox::before {
         content: "";
         position: absolute;
         top: 0;
@@ -156,15 +165,18 @@ export default {
         width: 100%;
         height: 100%;
         /* 你的背景图 */
-        background-image: url('http://192.168.1.234:19000/pre/image/jpeg/20251223/1766482865640240.jpg'); 
-        background-size: cover; /* 覆盖容器 */
+        background-image: url('http://192.168.1.234:19000/pre/image/jpeg/20251223/1766482865640240.jpg');
+        background-size: cover;
+        /* 覆盖容器 */
         // background-position: center; /* 居中显示 */
-        z-index: 0; /* 确保背景图在内容下方 */
+        z-index: 0;
+        /* 确保背景图在内容下方 */
     }
-    .headTopBox > * {
+    .headTopBox>* {
         position: relative;
-        z-index: 1; /* 高于背景图的 z-index: 0 */
-    }   
+        z-index: 1;
+        /* 高于背景图的 z-index: 0 */
+    }
     // 风格6
     .style6 {
         position: relative;
@@ -183,7 +195,7 @@ export default {
             justify-content: space-between;
             .headTopInfoLeft {
                 font-size: 12px;
-                color:#ffffff;
+                color: #ffffff;
             }
             .headTopInfoRight {
                 display: flex;
@@ -217,7 +229,7 @@ export default {
             }
             .headAdTopBox {
                 position: relative;
-                img{
+                img {
                     display: block;
                 }
                 .templateEditBtnBox {
@@ -226,14 +238,11 @@ export default {
             }
         }
     }
-
-    
     .headTopBox_7 {
         position: relative;
         width: 100%;
         height: 250px;
         .headTopBoxBg {
-
             width: 1200px;
             height: 30px;
             line-height: 30px;
@@ -245,7 +254,7 @@ export default {
             justify-content: space-between;
             .headTopInfoLeft {
                 font-size: 12px;
-                color:#fff;
+                color: #fff;
             }
             .headTopInfoRight {
                 display: flex;
@@ -266,8 +275,6 @@ export default {
             }
         }
         .headLogoBox {
-
-
             width: 1200px;
             margin: 0 auto;
             display: flex;
@@ -281,7 +288,7 @@ export default {
             }
             .headAdTopBox {
                 position: relative;
-                img{
+                img {
                     display: block;
                 }
                 .templateEditBtnBox {
@@ -290,7 +297,7 @@ export default {
             }
         }
     }
-    .headTopBox_7::before{
+    .headTopBox_7::before {
         content: "";
         position: absolute;
         top: 0;
@@ -298,21 +305,17 @@ export default {
         width: 100%;
         height: 100%;
         /* 你的背景图 */
-        background-image: url('http://192.168.1.234:19000/pre/image/jpeg/20251212/1765503792914829.jpg'); 
-        background-size: cover; /* 覆盖容器 */
+        background-image: url('http://192.168.1.234:19000/pre/image/jpeg/20251212/1765503792914829.jpg');
+        background-size: cover;
+        /* 覆盖容器 */
         // background-position: center; /* 居中显示 */
-        z-index: 0; /* 确保背景图在内容下方 */
+        z-index: 0;
+        /* 确保背景图在内容下方 */
     }
-    .headTopBox_7 > * {
+    .headTopBox_7>* {
         position: relative;
-        z-index: 1; /* 高于背景图的 z-index: 0 */
-    }   
-
-
+        z-index: 1;
+        /* 高于背景图的 z-index: 0 */
+    }
 }
-
-
-
-
-
 </style>

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

@@ -1,20 +1,14 @@
 <template>
     <div>
-        <menuStyle  v-if="this.$store.state.template.editWebsiteClass == 5"/>
-        <menuStyle6  v-if="this.$store.state.template.editWebsiteClass == 6"/>
-        <menuStyle7  v-if="this.$store.state.template.editWebsiteClass == 7"/>
-
+        <menuStyle v-if="this.$store.state.template.editWebsiteClass == 5" />
+        <menuStyle6 v-if="this.$store.state.template.editWebsiteClass == 6" />
+        <menuStyle7 v-if="this.$store.state.template.editWebsiteClass == 7" />
     </div>
 </template>
-
 <script>
-  
 import menuStyle from '@/views/template/style/components/menu/1200x187/1.vue';
 import menuStyle6 from '@/views/template/style/components/menu/1200x167/1.vue';
-
- 
 import menuStyle7 from '@/views/template/style/components/menu/1200x187/7/1.vue';
-
 export default {
     props: {},
     components: {
@@ -24,17 +18,15 @@ export default {
     },
     data() {
         return {
-            menu:[]
+            menu: []
         };
     },
     methods: {
-        banUse(){
+        banUse() {
             this.$store.commit('template/alertMessage');
         }
     },
-    mounted(){},
+    mounted() { },
 };
 </script>
-
-<style scoped lang="less">
-</style>
+<style scoped lang="less"></style>