浏览代码

新闻图文组合2开发中

新闻图文组合2开发中
dangyunlong 2 天之前
父节点
当前提交
e9159310c9

+ 89 - 0
components/template/component/banner/list/450x405/1.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="BannerListBoxStyle1" v-if="skinId=='1'">
+        <div v-for="item in component_News" :key="item.id">
+            <NuxtLink 
+                :href="getLinkPathDetail(item)" 
+                :title="item.title"
+                :target="item.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ item.title }}
+            </NuxtLink>
+        </div>
+    </div>
+    <div class="BannerListBoxStyle1_skin2" v-if="skinId=='2'">
+        <div v-for="item in component_News" :key="item.id">
+            <NuxtLink 
+                :href="getLinkPathDetail(item)" 
+                :title="item.title"
+                :target="item.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ item.title }}
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    skinId:String,//皮肤编号
+    templateData:Array,//新闻数据
+});
+//获取新闻数据
+const component_News = ref(props.templateData);
+</script>
+
+<style lang="less" scoped>
+.BannerListBoxStyle1 {
+    div {
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height:26px;
+        line-height: 26px;
+        margin-bottom: 16px;
+        a {
+            font-size:18px;
+            color: #333;
+        }
+        &:nth-child(1),&:nth-child(6){
+            a {
+                color: #004564;
+                font-weight: bold;
+            }
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+.BannerListBoxStyle1_skin2 {
+    div {
+        cursor: pointer;
+        font-size:18px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height:26px;
+        line-height: 26px;
+        margin-bottom: 16px;
+        a {
+            font-size:18px;
+            color: #333;
+        }
+        &:nth-child(1),&:nth-child(6){
+            a {
+                color: #A91B33;
+                font-weight: bold;
+            }
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>

+ 66 - 0
components/template/component/banner/list/450x405/2.vue

@@ -0,0 +1,66 @@
+<template>
+    <!--皮肤1和皮肤2的 第二个样式是一样的-->
+    <div class="BannerListBoxStyle1" v-if="skinId=='1'">
+        <div v-for="item in component_News" :key="item.id">
+            <NuxtLink 
+                :href="getLinkPathDetail(item)" 
+                :title="item.title"
+                :target="item.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ item.title }}
+            </NuxtLink>
+        </div>
+    </div>
+    <!--皮肤1和皮肤2的 第二个样式是一样的-->
+    <div class="BannerListBoxStyle1" v-if="skinId=='2'">
+        <div v-for="item in component_News" :key="item.id">
+            <NuxtLink 
+                :href="getLinkPathDetail(item)" 
+                :title="item.title"
+                :target="item.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ item.title }}
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    skinId:String,//皮肤编号
+    templateData:Array,//新闻数据
+});
+//获取新闻数据
+const component_News = ref(props.templateData);
+</script>
+
+<style lang="less" scoped>
+.BannerListBoxStyle1 {
+    div {
+        cursor: pointer;
+        font-size:18px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height:26px;
+        line-height: 26px;
+        margin-bottom: 16px;
+        a {
+            color: #333;
+        }
+        &:nth-child(1),&:nth-child(6){
+            a {
+                color: #333333;
+                font-weight: bold;
+            } 
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>

+ 161 - 0
components/template/component/banner/swiper/720x450/1.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="swiperStyle1">
+        <el-carousel :interval="3000" height="405px" indicator-position="none" arrow="always" @change="change_fun">
+            <el-carousel-item v-for="(item, index) in imagelist" :key="item">
+                <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :target="item.islink == 1 ? '_blank' : '_self'">
+                    <img :src="item.imgurl">
+                    <span class="swiper_dot1 dot1">
+                        {{ item.title }}
+                    </span>
+                </NuxtLink>
+            </el-carousel-item>
+        </el-carousel>
+        <div class="roll_num_box">
+            <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>
+            /
+            {{ roll_num_lang }}
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import { ref } from 'vue'
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+//获得新闻数据
+const props = defineProps({
+    skinId:String,//皮肤编号
+    templateData:Array,//新闻数据
+});
+//焦点图效果 start---------------------------------------->
+const roll_num_lang = ref(4);
+const roll_num_this = ref(0);
+const change_fun = (the_1) => {
+    roll_num_this.value = the_1
+}
+const imagelist = ref("")
+imagelist.value = props.templateData;
+roll_num_lang.value = props.templateData.length;
+//焦点图效果 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//样式1 start---------------------------------------->
+.swiperStyle1 {
+    width: 100%;
+    height: 405px;
+    position: relative;
+    .roll_num_box {
+        position: absolute;
+        z-index: 100;
+        left: 60px;
+        bottom: 0px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 16px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    img {
+        width: 100%;
+        height: 405px;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 0 144px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+        /deep/.el-carousel__arrow--left {
+            position: absolute;
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+
+            left: 9px;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -28px;
+        }
+        /deep/.el-carousel__arrow--right {
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            position: absolute;
+            right: 9;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -28px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 10px;
+            height: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #255590;
+            width: 25px;
+            opacity: 1;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #DD7D18;
+        width: 58px;
+        opacity: 1;
+    }
+}
+//样式1 end---------------------------------------->
+</style>

+ 14 - 9
components/template/component/headLine/1200x140/1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="headLineStyle1" v-if="style=='1'">
+    <div class="headLineStyle1" v-if="skinId=='1'">
         <div class="headLineTitle">
             <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
             <NuxtLink 
@@ -22,7 +22,7 @@
             </div>
         </div>
     </div>
-    <div class="headLineStyle1_skin2" v-if="style=='2'">
+    <div class="headLineStyle1_skin2" v-if="skinId=='2'">
         <div class="headTip">
             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
         </div>
@@ -109,7 +109,7 @@
 import {ref} from 'vue';
 //获得新闻数据
 const props = defineProps({
-    style:String,//组件样式
+    skinId:String,//组件样式
     templateData:Array,//新闻数据
 });
 //组件样式1 start ---------------------------------------->
@@ -157,19 +157,19 @@ const setActive = (index) => {
 //组件样式2 end ---------------------------------------->
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 //皮肤1 样式1 start---------------------------------------->
 .headLineStyle1 {
     width: 1200px;
-    height: 140px;
+    height: 110px;
     margin: 0 auto;
     box-sizing: border-box;
-    padding: 30px 100px 30px 100px;
+    padding: 0 100px 0 100px;
     .headLineTitle {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: 10px;
+        margin-bottom: 20px;
         a {
             font-weight: bold;
             font-size: 30px;
@@ -204,9 +204,9 @@ const setActive = (index) => {
 .headLineStyle1_skin2 {
     border:1px solid #E4E4E4;
     width: 1200px;
-    height: 140px;
+    height: 110px;
     box-sizing: border-box;
-    padding:32px 15px 32px 40px;
+    padding:0 15px 0 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -234,6 +234,11 @@ const setActive = (index) => {
         .headLineTop {
             margin-bottom: 8px;
             font-weight: bold;
+            img {
+                display: block;
+                width: 350px;
+                height: 245px;
+            }
             a {
                 font-size: 30px;
                 color:#A91B33;

+ 17 - 13
components/template/component/headLine/1200x140/2.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="headLineStyle1" v-if="style=='1'">
+    <div class="headLineStyle1" v-if="skinId=='1'">
         <div class="headLineTitle">
             <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
             <NuxtLink 
@@ -22,7 +22,7 @@
             </div>
         </div>
     </div>
-    <div class="headLineStyle1_skin2" v-if="style=='2'">
+    <div class="headLineStyle1_skin2" v-if="skinId=='2'">
         <div class="headTip">
             <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
         </div>
@@ -109,7 +109,7 @@
 import {ref} from 'vue';
 //获得新闻数据
 const props = defineProps({
-    style:String,//组件样式
+    skinId:String,//组件样式
     templateData:Array,//新闻数据
 });
 //组件样式1 start ---------------------------------------->
@@ -157,19 +157,19 @@ const setActive = (index) => {
 //组件样式2 end ---------------------------------------->
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 //皮肤1 样式1 start---------------------------------------->
 .headLineStyle1 {
     width: 1200px;
-    height: 140px;
+    height: 110px;
     margin: 0 auto;
     box-sizing: border-box;
-    padding: 30px 100px 30px 100px;
+    padding: 0 100px 0 100px;
     .headLineTitle {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: 10px;
+        margin-bottom: 20px;
         a {
             font-weight: bold;
             font-size: 30px;
@@ -204,9 +204,9 @@ const setActive = (index) => {
 .headLineStyle1_skin2 {
     border:1px solid #E4E4E4;
     width: 1200px;
-    height: 140px;
+    height: 110px;
     box-sizing: border-box;
-    padding:32px 15px 32px 40px;
+    padding:0 15px 0 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -232,10 +232,12 @@ const setActive = (index) => {
         flex-direction: column;
         justify-content: center;
         .headLineTop {
-            font-size: 30px;
-            color:#A91B33;
             margin-bottom: 8px;
             font-weight: bold;
+            a {
+                font-size: 30px;
+                color:#A91B33;
+            }
         }
         .headLineBottom {
             display: flex;
@@ -244,11 +246,13 @@ const setActive = (index) => {
             div {
                 width: 32%;
                 margin-right: 30px;
-                font-size: 18px;
-                color:#333333;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                a {
+                    font-size: 18px;
+                    color:#333333;
+                }
                 &:last-child {
                     margin-right: 0;
                 }

+ 168 - 0
components/template/component/list/450x440/1.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <span>
+                <NuxtLink
+                    class="active"
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentItem" v-for="item in component_style1_News1Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentItemTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div v-for="item in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+const component_style1_News1Array = ref([]);
+const component_style1_News2Array = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,3);
+component_style1_News2Array.value = props.templateData.text.slice(0,6);
+</script>
+
+<style lang="less" scoped>
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    .listNewsContent {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .listNewsContentLeft {
+            margin-right: 15px;
+            .listNewsContentItem {
+                position: relative;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding:0 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                }
+            }
+        }
+        .listNewsContentRight {
+            div{
+                padding-left: 16px;
+                box-sizing: border-box;
+                background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left 9px;
+                font-size:18px;
+                color:#333333;
+                line-height: 24px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                margin-bottom: 10px;
+                &:nth-child(2),&:nth-child(4) {
+                    margin-bottom: 26px;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }  
+}
+</style>

+ 168 - 0
components/template/component/list/450x440/2.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <span>
+                <NuxtLink
+                    class="active"
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentRight">
+                <div v-for="item in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentItem" v-for="item in component_style1_News1Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentItemTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+const component_style1_News1Array = ref([]);
+const component_style1_News2Array = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,3);
+component_style1_News2Array.value = props.templateData.text.slice(0,6);
+</script>
+
+<style lang="less" scoped>
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    .listNewsContent {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .listNewsContentLeft {
+            margin-right: 15px;
+            .listNewsContentItem {
+                position: relative;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding:0 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                }
+            }
+        }
+        .listNewsContentRight {
+            div{
+                padding-left: 16px;
+                box-sizing: border-box;
+                background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left 9px;
+                font-size:18px;
+                color:#333333;
+                line-height: 24px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                margin-bottom: 10px;
+                &:nth-child(2),&:nth-child(4) {
+                    margin-bottom: 26px;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }  
+}
+</style>

+ 19 - 0
components/template/component/list/450x440/3.vue

@@ -0,0 +1,19 @@
+<template>
+    3333
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 19 - 0
components/template/component/list/450x440/4.vue

@@ -0,0 +1,19 @@
+<template>
+    44444
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 211 - 0
components/template/component/list/720x440/1.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <span>
+                <NuxtLink
+                    class="active"
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftTop">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                        v-for="item in component_style1_News1Array"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+                <div class="listNewsContentLeftBottom">
+                    <div v-for="item in component_style1_News1Array_2">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(item)" 
+                            :title="item.title"
+                            :target="item.islink == 1 ? '_blank' : '_self'"
+                        >
+                            <img :src="item.imgurl" />
+                            <div class="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div v-for="item in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News1Array_2 = ref({});
+const component_style1_News2Array = ref([]);
+
+component_style1_News1Array.value = props.templateData.img.slice(0,1);
+component_style1_News1Array_2.value = props.templateData.img.slice(1,3);
+component_style1_News2Array.value = props.templateData.text;
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+// 样式1 start ---------------------------------------->
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        color:#004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    // 样式2 start ---------------------------------------->
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    // 样式2 end ---------------------------------------->
+    .listNewsContent {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .listNewsContentLeft {
+            width: 350px;
+            height: 380px;
+            img {
+                display: block;
+            }
+            .listNewsContentLeftTop {
+                margin-bottom: 20px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 350px;
+                    height: 245px;
+                }
+            }
+            .listNewsContentLeftBottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                position: relative;
+                &>div {
+                    position: relative;
+                }
+                img {
+                    width: 170px;
+                    height: 110px;
+                }
+            }
+            .listNewsContentLeftTopTitle {
+                position: absolute;
+                bottom:0;
+                z-index:1;
+                width: 100%;
+                color:#fff;
+                height: 50px;
+                background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                line-height: 65px;
+                box-sizing: border-box;
+                padding:0 8px;
+            }
+        }
+        .listNewsContentRight {
+            width: 350px;
+            height: 380px;
+            div {
+                padding-left: 16px;
+                box-sizing: border-box;
+                background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: 20px;
+                height: 24px;
+                line-height: 24px;
+                font-size: 18px;
+                display: block;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                &:first-child,&:nth-child(4),&:nth-child(7) {
+                    color:#333333;
+                    font-weight: bold;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }
+}
+// 样式1 end ---------------------------------------->
+</style>

+ 205 - 0
components/template/component/list/720x440/2.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentRight">
+                <div v-for="item in component_style1_News2Array">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftTop">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                        v-for="item in component_style1_News1Array"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+                <div class="listNewsContentLeftBottom">
+                    <div v-for="item in component_style1_News1Array_2">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(item)" 
+                            :title="item.title"
+                            :target="item.islink == 1 ? '_blank' : '_self'"
+                        >
+                            <img :src="item.imgurl" />
+                            <div class="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    skinId:String,//皮肤编号
+    templateData:Array,//新闻数据
+});
+
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News1Array_2 = ref({});
+const component_style1_News2Array = ref([]);
+
+component_style1_News1Array.value = props.templateData.img.slice(0,1);
+component_style1_News1Array_2.value = props.templateData.img.slice(1,3);
+component_style1_News2Array.value = props.templateData.text;
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        color:#004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    .listNewsContent {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .listNewsContentLeft {
+            width: 350px;
+            height: 380px;
+            img {
+                display: block;
+            }
+            .listNewsContentLeftTop {
+                margin-bottom: 20px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 350px;
+                    height: 245px;
+                }
+            }
+            .listNewsContentLeftBottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                position: relative;
+                &>div {
+                    position: relative;
+                }
+                img {
+                    width: 170px;
+                    height: 110px;
+                }
+            }
+            .listNewsContentLeftTopTitle {
+                position: absolute;
+                bottom:0;
+                z-index:1;
+                width: 100%;
+                color:#fff;
+                height: 50px;
+                background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                line-height: 65px;
+                box-sizing: border-box;
+                padding:0 8px;
+            }
+        }
+        .listNewsContentRight {
+            width: 350px;
+            height: 380px;
+            div {
+                padding-left: 16px;
+                box-sizing: border-box;
+                background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                color:#333333;
+                font-size:18px;
+                margin-bottom: 20px;
+                height: 24px;
+                line-height: 24px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                &:first-child,&:nth-child(4),&:nth-child(7) {
+                    color:#333333;
+                    font-weight: bold;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }
+}
+</style>

+ 178 - 0
components/template/component/list/720x440/3.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <span>
+                <NuxtLink
+                    class="active"
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentTop">
+                <div v-for="item in component_style1_News1Array" class="listNewsContentTopItem">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentTopItemTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="listNewsContentBottom">
+                <div v-for="item in component_style1_News2Array" class="listNewsContentTopItem">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        {{ item.title }}
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News2Array = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,2);
+component_style1_News2Array.value = props.templateData.text;
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        color:#004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    .listNewsContent {
+        .listNewsContentTop {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            height: 110px;
+            .listNewsContentTopItem {
+                width: 350px;
+                height: 110px;
+                a{
+                    display: block;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentTopItemTitle {
+                    font-size: 18px;
+                    color: #333333;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 3;
+                }
+            }
+        }
+        .listNewsContentBottom {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            justify-content: space-between;
+            div {
+                width: 350px;
+                height: 24px;
+                line-height: 24px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: 20px;
+                &:nth-last-child(-n+2) {
+                    margin-bottom: 0;
+                }
+                &:nth-child(1),
+                &:nth-child(2),
+                &:nth-child(7),
+                &:nth-child(8) {
+                    font-weight: bold;
+                }
+                a {
+                    font-size: 18px;
+                    color: #333333;
+                }
+            }
+        }
+    }
+}
+</style>

+ 184 - 0
components/template/component/list/720x440/4.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId=='1'">
+            <NuxtLink
+                class="active"
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId=='2'">
+            <span>
+                <NuxtLink
+                    class="active"
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentBottomBox">
+                <div class="listNewsContentBottom">
+                    <div v-for="item in component_style1_News2Array" class="listNewsContentTopItem">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(item)" 
+                            :title="item.title"
+                            :target="item.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ item.title }}
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <div class="listNewsContentTop">
+                <div v-for="item in component_style1_News1Array" class="listNewsContentTopItem">
+                    <NuxtLink 
+                        :href="getLinkPathDetail(item)" 
+                        :title="item.title"
+                        :target="item.islink == 1 ? '_blank' : '_self'"
+                    >
+                        <img :src="item.imgurl" />
+                        <div class="listNewsContentTopItemTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    titleLink:Object,//板块名称
+    templateData:Array,//新闻数据
+    skinId:String,//皮肤id
+});
+
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News2Array = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,2);
+component_style1_News2Array.value = props.templateData.text;
+//样式1与样式2共用 end ---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+.listNewsBox {
+    position: relative;
+    .listNewsTitle {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #004564;
+        color:#004564;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#004564;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+    }
+    .listNewsTitle_skin2 {
+        font-size:22px;
+        font-weight:bold;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 2px solid #A91B33;
+        color:#A91B33;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        a {
+            color:#A91B33;
+            display: block;
+            height: 25px;
+            line-height: 25px;
+        }
+        span {
+            color:#A91B33;
+            height: 25px;
+            line-height: 25px;
+            border-left: 3px solid #A91B33;
+            padding-left: 12px;
+            display: block;
+        }
+    }
+    .listNewsContent {
+        height: 374px;
+        .listNewsContentTop {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentTopItem {
+                width: 350px;
+                height: 110px;
+                a{
+                    display: block;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentTopItemTitle {
+                    font-size: 18px;
+                    color: #333333;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 3;
+                }
+            }
+        }
+        .listNewsContentBottomBox {
+            height: 244px;
+            margin-bottom: 20px;
+        }
+        .listNewsContentBottom {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            div {
+                width: 350px;
+                height: 24px;
+                line-height: 24px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: 20px;
+                &:nth-last-child(-n+2) {
+                    margin-bottom: 0;
+                }
+                &:nth-child(1),
+                &:nth-child(2),
+                &:nth-child(7),
+                &:nth-child(8) {
+                    font-weight: bold;
+                }
+                a {
+                    font-size: 18px;
+                    color: #333333;
+                }
+            }
+        }
+    }
+}
+</style>

+ 1 - 1
components/template/component/public/nodata.vue

@@ -29,7 +29,7 @@ const dataWidth = ref(props.dataWidth);
 const dataHeight = ref(props.dataHeight);
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .atWorkBox {
     width: 100%;
     height: 100%;

+ 1 - 1
components/template/sector/body/ad/1200x90/1.vue

@@ -22,6 +22,6 @@ const props = defineProps({
 const imgurl = requestAd(props.adData,props.adTag)
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
     @import url('@/assets/css/ad/adversing.less');
 </style>

+ 67 - 5
components/template/sector/body/index/banner/1200x410/1.vue

@@ -1,15 +1,77 @@
 <template>
-    1111
+    <div class="bannerBigBox">
+        <div class="bannerLayerBox">
+            <swiperStyle1 
+                v-if="templateData.componentList[0].data.img.length > 0" 
+                :skinId="skinId" 
+                :templateData="templateData.componentList[0].data.img" 
+            />
+            <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
+        </div>
+        <!--新闻列表-->
+        <div class="NewsListBox">
+            <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                <listStyle1
+                    v-if="templateData.componentList[0].data.text.length > 0" 
+                    :skinId="skinId" 
+                    :templateData="templateData.componentList[0].data.text" 
+                />
+                <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
+            </div>
+            <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                <listStyle2
+                    v-if="templateData.componentList[0].data.text.length > 0" 
+                    :skinId="skinId" 
+                    :templateData="templateData.componentList[0].data.text" 
+                />
+                <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
-
+//轮播图样式1
+import swiperStyle1 from '@/components/template/component/banner/swiper/720x450/1.vue'
+//列表样式1
+import listStyle1 from '@/components/template/component/banner/list/450x405/1.vue'
+//列表样式2
+import listStyle2 from '@/components/template/component/banner/list/450x405/2.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
 
 const props = defineProps({
-    
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
 });
 </script>
 
-<style lang="less">
-
+<style lang="less" scoped>
+.bannerBigBox{
+    width: 1200px;
+    height: 410px;
+    position: relative;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: content-box;
+    margin-bottom: 30px;
+    .bannerLayerBox {
+        width: 720px;
+        height: 410px;
+        position: relative;
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+    .NewsListBox {
+        width: 450px;
+        height: 410px;
+        position: relative;
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+}
 </style>

+ 6 - 6
components/template/sector/body/index/headLine/1200x140/1.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="headLineBigBox">
         <!--板式1-->
-        <div v-if="skinId==1">
+        <div v-if="templateData.componentList[0].component_style.toString()=='1'">
             <style1 
                 v-if="templateData.componentList[0].data.text.length > 0" 
                 :templateData="templateData.componentList[0].data.text" 
-                :style="templateData.componentList[0].component_style.toString()"
+                :skinId="skinId"
             />
             <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
         </div>
         <!--板式2-->
-        <div v-if="skinId==2">
+        <div v-if="templateData.componentList[0].component_style.toString()=='2'">
             <style2
                 v-if="templateData.componentList[0].data.text.length > 0" 
                 :templateData="templateData.componentList[0].data.text" 
-                :style="templateData.componentList[0].component_style.toString()"
+                :skinId="skinId"
             />
             <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
         </div>
@@ -35,10 +35,10 @@ const props = defineProps({
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .headLineBigBox {
     width: 1200px;
-    height: 140px;
+    height: 110px;
     position: relative;
     margin: 0 auto;
     margin-bottom: 30px;

+ 188 - 0
components/template/sector/body/index/link/1200x230/1.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="linkSectorBox">
+        <!-- 
+            注意 ,该组件可以在首页与频道页中通用
+         -->
+        <div v-if="skinId==1" class="linkSectorStyle1Box">
+            <div class="linkSectorItem bg1">
+                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
+                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026862529548.png" /></div>
+                    <div class="linkSectorItemTitle">人员查询</div>
+                </NuxtLink>
+            </div>
+            <div class="linkSectorItem bg1">
+                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
+                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026870493018.png" /></div>
+                    <div class="linkSectorItemTitle">车辆查询</div>
+                </NuxtLink>
+            </div>
+            <div class="linkSectorItem bg1">
+                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
+                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026884699420.png" /></div>
+                    <div class="linkSectorItemTitle">调研选题</div>
+                </NuxtLink>
+            </div>
+            <div class="linkSectorItem bg1">
+                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
+                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026896833808.png" /></div>
+                    <div class="linkSectorItemTitle">地市中心</div>
+                </NuxtLink>
+            </div>
+            <div class="linkSectorItem bg1">
+                <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
+                    <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/175202690385632.png" /></div>
+                    <div class="linkSectorItemTitle">介绍信查询</div>
+                </NuxtLink>
+            </div>
+        </div>
+        <div v-if="skinId==2" class="linkSectorStyle2Box">
+            <div class="linkSectorItem bg1">
+                    <div class="linkSectorItemTitle">人员查询</div>
+                    <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                    <div class="linkSectorItemBtn">
+                        <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html" target="_blank">
+                            点击查询
+                        </NuxtLink>
+                    </div>
+            </div>
+            <div class="linkSectorItem bg2">
+                <div class="linkSectorItemTitle">车辆查询</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">
+                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html" target="_blank">
+                        点击查询
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="linkSectorItem bg3">
+                <div class="linkSectorItemTitle">调研选题</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">
+                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html" target="_blank">
+                        点击查询
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="linkSectorItem bg4">
+                <div class="linkSectorItemTitle">地市中心</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">
+                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html" target="_blank">
+                        点击查询
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="linkSectorItem bg5">
+                <div class="linkSectorItemTitle">介绍信查询</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">
+                    <NuxtLink href="http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html" target="_blank">
+                        点击查询
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
+});
+</script>
+
+<style lang="less" scoped>
+.linkSectorBox {
+    width: 1200px;
+    height: 230px;
+    margin: 0 auto;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: content-box;
+}
+//样式1 start ---------------------------------------->
+.linkSectorStyle1Box {
+    width: 1200px;
+    height: 230px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .linkSectorItem {
+        width: 210px;
+        height: 230px;
+        box-sizing: border-box;
+        padding:30px;
+        background: #F9FAFB;
+        cursor: pointer;
+        .linkSectorItemImg {
+            text-align: center;
+            border-bottom:1px solid #D3D3D3;
+            padding-bottom: 10px;
+            height: 85px;
+            img {
+                display: block;
+                margin: 20px auto;
+            }
+        }
+        .linkSectorItemTitle {
+            font-size: 16px;
+            color:#333333;
+            text-align: center;
+            padding-top:30px;
+        }
+    }
+}
+//样式1 end ---------------------------------------->
+
+//样式2 start ---------------------------------------->
+.linkSectorStyle2Box {
+    width: 1200px;
+    height: 230px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .linkSectorItem {
+        width: 210px;
+        height: 230px;
+        box-sizing: border-box;
+        padding:70px 30px;
+        cursor: pointer;
+        .linkSectorItemTitle {
+            font-size:16px;
+            color:#333333;
+            margin-bottom: 13px;
+        }
+        .linkSectorItemContent {
+            font-size:12px;
+            color:#999999;
+            margin-bottom: 43px;
+        }
+        .linkSectorItemBtn {
+            width: 80px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            border:1px solid #A91B33;
+            color:#A91B33;
+            border-radius: 15px;
+            font-size: 12px;
+            margin: 0 auto;
+            cursor: pointer;
+            a {
+                color:#A91B33;
+            }
+        }
+    }
+    .bg1 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922702993953.png) no-repeat center center;}
+    .bg2 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922720998099.png) no-repeat center center;}
+    .bg3 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922727860324.png) no-repeat center center;}
+    .bg4 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922744808118.png) no-repeat center center;}
+    .bg5 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922748574101.png) no-repeat center center;}
+}
+//样式2 end ---------------------------------------->
+</style>

+ 107 - 0
components/template/sector/body/list/1200x470/1.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="manyPictureSectorBox">
+        <div class="manyPictureSector">
+            <div class="manyPictureSectorLeft">
+                <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                    <left1Style 
+                        v-if="templateData.componentList[0].data.text.length > 0" 
+                        :titleLink="componentTitle1" 
+                        :templateData="templateData.componentList[0].data"
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+                <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                    <left2Style 
+                        v-if="templateData.componentList[0].data.text.length > 0" 
+                        :titleLink="componentTitle1" 
+                        :templateData="templateData.componentList[0].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+            </div>
+            <div class="manyPictureSectorRight">
+               <div v-if="templateData.componentList[1].component_style.toString()=='1'">
+                    <right1Style 
+                        v-if="templateData.componentList[1].data.text.length > 0" 
+                        :titleLink="componentTitle2" 
+                        :templateData="templateData.componentList[1].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+                <div v-if="templateData.componentList[1].component_style.toString()=='2'">
+                    <right2Style 
+                        v-if="templateData.componentList[1].data.text.length > 0" 
+                        :titleLink="componentTitle2" 
+                        :templateData="templateData.componentList[1].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//左侧样式1
+import left1Style from '@/components/template/component/list/720x440/1.vue'
+//左侧样式2
+import left2Style from '@/components/template/component/list/720x440/2.vue'
+//右侧样式1
+import right1Style from '@/components/template/component/list/450x440/1.vue'
+//右侧样式2
+import right2Style from '@/components/template/component/list/450x440/2.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
+
+const props = defineProps({
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
+});
+
+//该栏目下有两个组件 此时需要提供children_count来判断是否跳转到频道页
+const componentTitle1 = {
+    alias:props.templateData.componentList[0].data.alias,
+    aLIas_pinyin:props.templateData.componentList[0].data.pinyin,
+    is_url: props.templateData.componentList[0].data.is_url,
+    children_count: props.templateData.componentList[0].data.children_count,
+    cid:props.templateData.componentList[0].data.category_id
+}
+const componentTitle2 = {
+    alias:props.templateData.componentList[1].data.alias,
+    aLIas_pinyin:props.templateData.componentList[1].data.pinyin,
+    is_url: props.templateData.componentList[1].data.is_url,
+    children_count: props.templateData.componentList[1].data.children_count,
+    cid:props.templateData.componentList[1].data.category_id
+}
+</script>
+
+<style lang="less" scoped>
+.manyPictureSectorBox {
+    width: 100%;
+    height: 440px;
+    margin-bottom: 30px;
+    box-sizing: content-box;
+    .manyPictureSector {
+        width: 1200px;
+        height: 440px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .manyPictureSectorLeft {
+        width: 720px;
+        height: 440px;
+        position: relative;
+    }
+    .manyPictureSectorRight {
+        width: 450px;
+        height:440px;
+        position: relative;
+    }
+}
+</style>

+ 110 - 0
components/template/sector/body/list/1200x470/2.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="manyPictureSectorBox">
+        <!-- 
+            注意 ,该组件可以在首页与频道页中通用
+         -->
+        <div class="manyPictureSector">
+            <div class="manyPictureSectorLeft">
+                <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                    <left1Style 
+                        v-if="templateData.componentList[0].data.text.length > 0" 
+                        :titleLink="componentTitle1" 
+                        :templateData="templateData.componentList[0].data"
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+                <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                    <left2Style 
+                        v-if="templateData.componentList[0].data.text.length > 0" 
+                        :titleLink="componentTitle1" 
+                        :templateData="templateData.componentList[0].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+            </div>
+            <div class="manyPictureSectorRight">
+                <div v-if="templateData.componentList[1].component_style.toString()=='1'">
+                    <right1Style 
+                        v-if="templateData.componentList[1].data.text.length > 0" 
+                        :titleLink="componentTitle2" 
+                        :templateData="templateData.componentList[1].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+                <div v-if="templateData.componentList[1].component_style.toString()=='2'">
+                    <right2Style 
+                        v-if="templateData.componentList[1].data.text.length > 0" 
+                        :titleLink="componentTitle2" 
+                        :templateData="templateData.componentList[1].data" 
+                        :skinId="skinId"
+                    />
+                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//左侧样式1
+import left1Style from '@/components/template/component/list/720x440/3.vue'
+//左侧样式2
+import left2Style from '@/components/template/component/list/720x440/4.vue'
+//右侧样式1
+import right1Style from '@/components/template/component/list/450x440/3.vue'
+//右侧样式2
+import right2Style from '@/components/template/component/list/450x440/4.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
+
+const props = defineProps({
+    skinId: Number,//皮肤id
+    templateData:Object,//新闻数据
+});
+
+//该栏目下有两个组件 此时需要提供children_count来判断是否跳转到频道页
+const componentTitle1 = {
+    alias:props.templateData.componentList[0].data.alias,
+    aLIas_pinyin:props.templateData.componentList[0].data.pinyin,
+    is_url: props.templateData.componentList[0].data.is_url,
+    children_count: props.templateData.componentList[0].data.children_count,
+    cid:props.templateData.componentList[0].data.category_id
+}
+const componentTitle2 = {
+    alias:props.templateData.componentList[1].data.alias,
+    aLIas_pinyin:props.templateData.componentList[1].data.pinyin,
+    is_url: props.templateData.componentList[1].data.is_url,
+    children_count: props.templateData.componentList[1].data.children_count,
+    cid:props.templateData.componentList[1].data.category_id
+}
+</script>
+
+<style lang="less" scoped>
+.manyPictureSectorBox {
+    width: 100%;
+    height: 440px;
+    margin-bottom: 30px;
+    box-sizing: content-box;
+    .manyPictureSector {
+        width: 1200px;
+        height: 440px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .manyPictureSectorLeft {
+        width: 720px;
+        height: 440px;
+        position: relative;
+    }
+    .manyPictureSectorRight {
+        width: 450px;
+        height:440px;
+        position: relative;
+    }
+}
+</style>

+ 432 - 438
pages/index.vue

@@ -5,442 +5,18 @@
     <templateMenu></templateMenu>
     <!-- 内容 -->
     <div>
-        <!-- <div>当前皮肤:{{ skinId }}</div> -->
-        <!--广告组件-->
-        <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
         <!--头条-->
         <templateHeadline :skinId="skinId" :templateData="testTemplateData"></templateHeadline>
-        <!--头条-->
-
-
-
-
-
-
-        <!-- <HomeAdvertising :imgurl="adImg1"></HomeAdvertising> -->
-        <!--头条-->
-        <!-- <HomePageMessage></HomePageMessage> -->
-        <!-- 第一部分 -->
-        <!-- <div class="part1">
-            <div class="inner">
-                <div class="part1_left">
-                    <div class="hengxian">
-                        <em></em>
-                    </div>
-                    <div class="part1_left_title">
-                        <img src="../public/index/nav01.png" alt="">
-                        <NuxtLink class="active" v-if="pageData[0].cid" :href="getLinkPath(pageData[0])"
-                            :title="pageData[0].alias">
-                            {{ pageData[0].alias }}
-                        </NuxtLink>
-                    </div>
-                    <div class="part1_left_content">
-                        <div class="part1_left_content1">
-                            <div class="part1_left_photo">
-                                <div class="part1_left_photo11" v-for="item in boxData1" :key="index">
-                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <img :src="item.imgurl" :alt="item.title">
-                                        <div class="left_content">
-                                            {{ item.title }}
-                                        </div>
-                                    </NuxtLink>
-                                </div>
-                            </div>
-                            <ul class="part1_left_context">
-                                <li class="part1_left_contextList" v-for="item in boxData1data2" :key="index">
-                                    {{ item.title }}
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="part1_left_content2">
-                            <ul class="part1_left_context222">
-                                <li class="part1_left_contextList222" v-for="item in boxData1data3" :key="index">
-                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        {{ item.title }}
-                                    </NuxtLink>
-                                </li>
-                            </ul>
-                            <ul class="part1_left_context222">
-                                <li class="part1_left_contextList222" v-for="item in boxData1data4" :key="index">
-                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        {{ item.title }}
-                                    </NuxtLink>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="part1_right">
-                    <div class="part1_right_title">
-                        <NuxtLink :class="{ 'part1_right_titlelist': true, 'active': hoverStatus == 1 }"
-                            @mouseenter="qhPic(1)" v-if="pageData[1].cid" :href="getLinkPath(pageData[1])"
-                            :title="pageData[1].alias">
-                            {{ pageData[1].alias }}
-                        </NuxtLink>
-                        <NuxtLink :class="{ 'part1_right_titlelist': true, 'active': hoverStatus == 2 }"
-                            @mouseenter="qhPic(2)" v-if="pageData[2].cid" :href="getLinkPath(pageData[2])"
-                            :title="pageData[2].alias">
-                            {{ pageData[2].alias }}
-                        </NuxtLink>
-                    </div>
-                    <div v-if="hoverStatus == 1">
-                        <div class="part1_right_photo_text">
-                            <div v-for="item in boxData2" :key="index">
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <img :src="item.imgurl" :alt="item.title">
-                                    <div class="part1_right_text">
-                                        {{ item.title }}
-                                    </div>
-                                </NuxtLink>
-                            </div>
-                        </div>
-                        <ul class="part1_right_content">
-                            <li class="part1_right_contentList" v-for="item in boxData2data2" :key="index">
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <em></em>
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </li>
-                        </ul>
-                    </div>
-                    <div v-if="hoverStatus == 2">
-                        <div class="part1_right_photo_text">
-                            <div v-for="item in boxData3" :key="index">
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <img :src="item.imgurl" :alt="item.title">
-                                    <div class="part1_right_text">
-                                        {{ item.title }}
-                                    </div>
-                                </NuxtLink>
-                            </div>
-                        </div>
-                        <ul class="part1_right_content">
-                            <li class="part1_right_contentList" v-for="item in boxData3data2" :key="index">
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <em></em>
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div> -->
-
-        <!-- 广告位 2 -->
-        <!-- <HomeAdvertising :imgurl="adImg2"></HomeAdvertising> -->
-
-        <!-- 第二部分 -->
-        <!-- <div class="part2">
-            <div class="inner">
-                <div class="part2_left">
-                    <div class="part2_hengxian">
-                        <em></em>
-                    </div>
-                    <div class="part2_left_title">
-                        <img src="../public/index/nav02.png" alt="">
-                        <NuxtLink class="active" v-if="pageData[3].cid" :href="getLinkPath(pageData[3])"
-                            :title="pageData[3].alias">
-                            {{ pageData[3].alias }}
-                        </NuxtLink>
-                    </div>
-                    <div class="part2_left_content1">
-                        <ul class="part2_left_content111">
-                            <li class="part2_left_content1_list" v-for="item in boxData4" :key="index">
-                                <NuxtLink :href="getLinkPath1(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <span class="nav2_title">{{ item.alias }}</span>
-                                </NuxtLink>
-                                <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    <span class="nav2_title_content">
-                                        {{ item.title }}
-                                    </span>
-                                </NuxtLink>
-                            </li>
-                        </ul>
-                    </div>
-                    <ul class="part2_left_content2">
-                        <li class="part2_left_content2list" v-for="item in boxData4data2" :key="index">
-                            <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title" class="part2_left_content222img">
-                                <div class="content2_text">
-                                    <span class="content2_text_content">
-                                        {{ item.title }}
-                                    </span>
-                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <span class="content2_text_title">{{ item.alias }}</span>
-                                    </NuxtLink>
-                                </div>
-                            </NuxtLink>
-                        </li>
-                        <div class="adlogo3" v-if="adImg3">
-                            <a href="http://sannongdy.org.cn/" v-if="adImg3.image_url == null" target="_blank"
-                                :title="adImg3.place_name">
-                                <img :src="adImg3.thumb" :alt="adImg3.place_name" data-tag="imgurl.ad_tag">
-                            </a>
-                            <a :href="adImg3.image_url" v-else :title="adImg3.ad_name">
-                                <img :src="adImg3.image_src" :alt="adImg3.ad_name" data-tag="imgurl.ad_tag">
-                            </a>
-                        </div>
-                    </ul>
-                </div>
-                <div class="part2_right">
-                    <div class="part2_right_title">
-                        <NuxtLink v-if="pageData[4].cid" :href="getLinkPath(pageData[4])" :title="pageData[4].alias">
-                            {{ pageData[4].alias }}
-                        </NuxtLink>
-                    </div>
-                    <ul class="part2_right_content">
-                        <li class="part2_right_contentList" v-for="(item, index) in boxData5" :key="index">
-                            <span class="listNumber">{{ index + 1 }}</span>
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                {{ item.title }}
-                            </NuxtLink>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div> -->
-
-        <!-- 第三部分 -->
-        <!-- <div class="part3">
-            <div class="inner">
-                <div class="part3_left">
-                    <div class="part3_hengxian">
-                        <em></em>
-                    </div>
-                    <div class="part3_left_title">
-                        <img src="../public/index/nav03.png" alt="">
-                        <NuxtLink class="active" v-if="pageData[5].cid" :href="getLinkPath(pageData[5])"
-                            :title="pageData[5].alias">
-                            {{ pageData[5].alias }}
-                        </NuxtLink>
-                    </div>
-                    <div class="part3_left_content">
-                        <div class="part3_left_content1">
-                            <div class="part3_left_content1_photo1">
-                                <div v-for="item in boxData6" :key="index">
-                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <img :src="item.imgurl" :alt="item.title">
-                                        <div class="part3_left_content1_text">
-                                            {{ item.title }}
-                                        </div>
-                                    </NuxtLink>
-                                </div>
-                            </div>
-                            <div class="part3_left_content1_photo2">
-                                <div class="part3_left_content1_photo2list" v-for="item in boxData6data2" :key="index">
-                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <img :src="item.imgurl" :alt="item.title">
-                                        <div class="part3_left_content1_text">
-                                            {{ item.title }}
-                                        </div>
-                                    </NuxtLink>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="part3_left_content2">
-                            <ul class="part3_left_content2_text">
-                                <li class="part3_left_content2_list" v-for="item in boxData6data3" :key="index">
-                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <span class="nav3_title">{{ item.alias }}</span>
-                                    </NuxtLink>
-                                    <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <span class="nav3_title_content">
-                                            {{ item.title }}
-                                        </span>
-                                    </NuxtLink>
-                                </li>
-                            </ul>
-                            <ul class="part3_left_content2_text">
-                                <li class="part3_left_content2_list" v-for="item in boxData6data4" :key="index">
-                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <span class="nav3_title">{{ item.alias }}</span>
-                                    </NuxtLink>
-                                    <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
-                                        :target="item.islink == 1 ? '_blank' : '_self'">
-                                        <span class="nav3_title_content">
-                                            {{ item.title }}
-                                        </span>
-                                    </NuxtLink>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="part3_right">
-                    <div class="part3_right_title">
-                        <NuxtLink class="active" v-if="pageData[6].cid" :href="getLinkPath(pageData[6])"
-                            :title="pageData[6].alias">
-                            {{ pageData[6].alias }}
-                        </NuxtLink>
-                    </div>
-                    <div class="part3_right_content">
-                        <div class="right_photo_text" v-for="item in boxData7" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title">
-                                <div class="right_text">
-                                    {{ item.title }}
-                                </div>
-                            </NuxtLink>
-                        </div>
-                        <ul class="rightcontent_text">
-                            <li class="rightcontent_textlist" v-for="item in boxData7data3" :key="index">
-                                <em></em>
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </li>
-                        </ul>
-                        <div class="right_photo_text" v-for="item in boxData7data2" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title">
-                                <div class="right_text">
-                                    {{ item.title }}
-                                </div>
-                            </NuxtLink>
-                        </div>
-                        <ul class="rightcontent_text">
-                            <li class="rightcontent_textlist" v-for="item in boxData7data4" :key="index">
-                                <em></em>
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                    :target="item.islink == 1 ? '_blank' : '_self'">
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div> -->
-        <!-- <HomeAdvertising :imgurl="adImg4"></HomeAdvertising> -->
-        <!-- 第四部分 -->
-        <!-- <div class="part4">
-            <div class="inner">
-                <div class="part4_one">
-                    <div class="part4_title">
-                        <div class="part4_hengxian">
-                            <em></em>
-                        </div>
-                        <div class="part4_left_title">
-                            <img src="../public/index/nav03.png" alt="">
-                            <NuxtLink class="active" v-if="pageData[7].cid" :href="getLinkPath(pageData[7])"
-                                :title="pageData[7].alias">
-                                {{ pageData[7].alias }}
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <div class="part4_photo_text">
-                        <div v-for="item in boxData8" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title">
-                                <span class="text">{{ item.title }}</span>
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <ul class="part4_photo_content">
-                        <li class="part4_photo_contentlist" v-for="item in boxData8data2" :key="index">
-                            <NuxtLink :href="getLinkPath1(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <span class="nav11_title">{{ item.alias }}</span>
-                            </NuxtLink>
-                            <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <span class="nav11_title_content">
-                                    {{ item.title }}
-                                </span>
-                            </NuxtLink>
-                        </li>
-                    </ul>
-                </div>
-                <div class="part4_one">
-                    <div class="part4_title">
-                        <div class="part4_hengxian">
-                            <em></em>
-                        </div>
-                        <div class="part4_left_title">
-                            <img src="../public/index/nav03.png" alt="">
-                            <NuxtLink class="active" v-if="pageData[8].cid" :href="getLinkPath(pageData[8])"
-                                :title="pageData[8].alias">
-                                {{ pageData[8].alias }}
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <div class="part4_photo_text">
-                        <div v-for="item in boxData9" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title">
-                                <span class="text">{{ item.title }}</span>
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <ul class="part4_photo_content">
-                        <li class="part4_photo_contentlist" v-for="item in boxData9data2" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <span class="nav11_title_content2">
-                                    {{ item.title }}
-                                </span>
-                            </NuxtLink>
-                        </li>
-                    </ul>
-                </div>
-                <div class="part4_one">
-                    <div class="part4_title">
-                        <div class="part4_hengxian">
-                            <em></em>
-                        </div>
-                        <div class="part4_left_title">
-                            <img src="../public/index/nav03.png" alt="">
-                            <NuxtLink class="active" v-if="pageData[9].cid" :href="getLinkPath(pageData[9])"
-                                :title="pageData[9].alias">
-                                {{ pageData[9].alias }}
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <div class="part4_photo_text">
-                        <div v-for="item in boxData10" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <img :src="item.imgurl" :alt="item.title">
-                                <span class="text">{{ item.title }}</span>
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <ul class="part4_photo_content">
-                        <li class="part4_photo_contentlist" v-for="item in boxData10data2" :key="index">
-                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
-                                :target="item.islink == 1 ? '_blank' : '_self'">
-                                <span class="nav11_title_content2">
-                                    {{ item.title }}
-                                </span>
-                            </NuxtLink>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div> -->
+        <!--轮播图-->
+        <templateBanner :skinId="skinId" :templateData="testTemplateData"></templateBanner>
+        <!--广告组件-->
+        <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
+        <!--静态外链通栏-->
+        <templateStaticLink :skinId="skinId" :templateData="testTemplateData2"></templateStaticLink>
+        <!--图文组合1-->
+        <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
+        <!--图文组合2-->
+        <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
     </div>
     <!-- 底部 -->
     <templateFoot></templateFoot>
@@ -457,6 +33,14 @@ import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
 import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
 //0.2.2 网站头条
 import templateHeadline from '@/components/template/sector/body/index/headLine/1200x140/1.vue'
+//0.2.3 轮播图
+import templateBanner from '@/components/template/sector/body/index/banner/1200x410/1.vue'
+//0.2.4 静态外链通栏
+import templateStaticLink from '@/components/template/sector/body/index/link/1200x230/1.vue'
+//0.2.5 图文组合1
+import templateNewSector1 from '@/components/template/sector/body/list/1200x470/1.vue'
+//0.2.6 图文组合2
+import templateNewSector2 from '@/components/template/sector/body/list/1200x470/2.vue'
 
 //0.加载全局模板组件 end---------------------------------------->
 
@@ -504,11 +88,8 @@ const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement'
     query: {},
 });
 if (adResponseStatus.code == 200) {
-    //console.log(responseStatus.data)
     templateBaseStore.setAdList(adResponseStatus.data)
     adData.value = adResponseStatus.data;
-    //获取广告
-    //adImg.value = requestAd(templateBaseStore.webAdList,templateBaseStore.webSiteInfo.website_head.ad_key + "_" + "top")
 }
 //1.获得基本信息单元 end---------------------------------------->
 
@@ -522,6 +103,313 @@ const testTemplateData = {
             "component_style": 1,//样式
             "sort": 1,//组件位置
             "data": {
+                "alias":"一级导航名称",
+                "category_id": 11,
+                "pinyin": "sannongzixun",
+                "text": [
+                    {
+                        "id": 50079,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
+                        "islink": 0,
+                        "pinyin": "sannongtansuo/jiaodianfangtan"
+                    },
+                    {
+                        "id": 50136,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50137,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    }
+                ],
+                "img": [
+                    {
+                        "id": 3843,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "linyuting123",
+                        "updated_at": "2025-05-30 13:50:54",
+                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "cat_arr_id": "[1,201]",
+                        "catid": 201,
+                        "level": "[1,2,3]",
+                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
+                    },
+                    {
+                        "id": 3406,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:46",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[2]",
+                        "catid": 2,
+                        "level": "[2,3]",
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 3276,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:45",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[1]",
+                        "catid": 1,
+                        "level": "[2]",
+                        "pinyin": "sannongzixunwangzhengcefagui"
+                    },
+                    {
+                        "id": 3261,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:44",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[11]",
+                        "catid": 11,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun"
+                    },
+                    {
+                        "id": 3186,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:43",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[14,240]",
+                        "catid": 240,
+                        "level": "[2,3]",
+                        "pinyin": "sannongkejiao/nongyekepu"
+                    },
+                    {
+                        "id": 2552,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-04-16 11:04:29",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": null,
+                        "catid": 36,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun/gaoduanzixun"
+                    }
+                ]
+            }
+        },
+        {
+            "component_type": 1,//1=新闻 2=广告
+            "component_style": 1,//样式
+            "sort": 1,//组件位置
+            "data": {
+                "alias":"一级导航名称2",
+                "category_id": 11,
+                "pinyin": "sannongzixun",
+                "text": [
+                    {
+                        "id": 50079,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
+                        "islink": 0,
+                        "pinyin": "sannongtansuo/jiaodianfangtan"
+                    },
+                    {
+                        "id": 50136,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50137,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 50138,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
+                        "islink": 0,
+                        "pinyin": "sannongzhichuang"
+                    }
+                ],
+                "img": [
+                    {
+                        "id": 3843,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "linyuting123",
+                        "updated_at": "2025-05-30 13:50:54",
+                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "cat_arr_id": "[1,201]",
+                        "catid": 201,
+                        "level": "[1,2,3]",
+                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
+                    },
+                    {
+                        "id": 3406,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:46",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[2]",
+                        "catid": 2,
+                        "level": "[2,3]",
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 3276,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:45",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[1]",
+                        "catid": 1,
+                        "level": "[2]",
+                        "pinyin": "sannongzixunwangzhengcefagui"
+                    },
+                    {
+                        "id": 3261,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:44",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[11]",
+                        "catid": 11,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun"
+                    },
+                    {
+                        "id": 3186,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:43",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[14,240]",
+                        "catid": 240,
+                        "level": "[2,3]",
+                        "pinyin": "sannongkejiao/nongyekepu"
+                    },
+                    {
+                        "id": 2552,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-04-16 11:04:29",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": null,
+                        "catid": 36,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun/gaoduanzixun"
+                    }
+                ]
+            }
+        },
+        {
+            "component_type": 1,//1=新闻 2=广告
+            "component_style": 1,//样式
+            "sort": 3,//组件位置
+            "data": {
+                "alias":"一级导航名称3",
+                "category_id": 11,
+                "pinyin": "sannongzixun",
                 "text": [
                     {
                         "id": 50079,
@@ -572,9 +460,115 @@ const testTemplateData = {
                         "pinyin": "sannongzhichuang"
                     }
                 ],
+                "img": [
+                    {
+                        "id": 3843,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "linyuting123",
+                        "updated_at": "2025-05-30 13:50:54",
+                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "cat_arr_id": "[1,201]",
+                        "catid": 201,
+                        "level": "[1,2,3]",
+                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
+                    },
+                    {
+                        "id": 3406,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:46",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[2]",
+                        "catid": 2,
+                        "level": "[2,3]",
+                        "pinyin": "sannongzhichuang"
+                    },
+                    {
+                        "id": 3276,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:45",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[1]",
+                        "catid": 1,
+                        "level": "[2]",
+                        "pinyin": "sannongzixunwangzhengcefagui"
+                    },
+                    {
+                        "id": 3261,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:44",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[11]",
+                        "catid": 11,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun"
+                    },
+                    {
+                        "id": 3186,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-05-30 13:50:43",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": "[14,240]",
+                        "catid": 240,
+                        "level": "[2,3]",
+                        "pinyin": "sannongkejiao/nongyekepu"
+                    },
+                    {
+                        "id": 2552,
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
+                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
+                        "author": "佚名",
+                        "updated_at": "2025-04-16 11:04:29",
+                        "introduce": "描述",
+                        "islink": 0,
+                        "linkurl": "",
+                        "copyfrom": "本网",
+                        "cat_arr_id": null,
+                        "catid": 36,
+                        "level": "[2]",
+                        "pinyin": "xinnongcun/gaoduanzixun"
+                    }
+                ]
             }
         }
-    ],    
+    ],
+}
+
+//静态链接测试数据
+const testTemplateData2 = {
+    "sectorName": "linkSector",
+    "componentList": [
+        {
+            "component_type": 3,
+            "component_style": 1,
+            "sort": 1,
+            "componentData": {}
+        }
+    ],
+    "sort": 4
 }
 //2.页面数据 end---------------------------------------->
 </script>