完成新闻图文组合3

完成新闻图文组合3

components/template/component/list/450x440/1.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -13,7 +12,6 @@
         <div class="listNewsTitle_skin2" v-if="skinId=='2'">
             <span>
                 <NuxtLink
-                    class="active"
                     v-if="titleLink.cid"
                     :href="getLinkPath(titleLink)"
                     :title="titleLink.alias"

components/template/component/list/450x440/2.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -13,7 +12,6 @@
         <div class="listNewsTitle_skin2" v-if="skinId=='2'">
             <span>
                 <NuxtLink
-                    class="active"
                     v-if="titleLink.cid"
                     :href="getLinkPath(titleLink)"
                     :title="titleLink.alias"

components/template/component/list/450x950/1.vue

@@ -1,5 +1,45 @@
 <template>
-    3333
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentItem" v-for="(item,index) in component_style1_News1Array">
+                <NuxtLink 
+                    :href="getLinkPathDetail(item)" 
+                    :title="item.title"
+                    :target="item.islink == 1 ? '_blank' : '_self'"
+                >
+                    <div class="listNewsContentItemLeft">
+                        <img :src="item.imgurl" />
+                        <span class="icon1" v-if="index==0"></span>
+                        <span class="icon2" v-if="index==1"></span>
+                        <span class="icon3" v-if="index==2"></span>
+                    </div>
+                    <div class="listNewsContentItemRight">
+                        {{ item.title }}
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -11,9 +51,110 @@ const props = defineProps({
     templateData:Array,//新闻数据
     skinId:String,//皮肤id
 });
-
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+component_style1_News1Array.value = props.templateData.img.slice(0,7);
+//样式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 {
+        .listNewsContentItem {
+            width: 450px;
+            height: 110px;
+            margin-bottom: 20px;
+            background: #F9FAFB;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            a {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                span {
+                    position: absolute;
+                    top: -3px;
+                    left: 10px;
+                    display: block;
+                    width: 20px;
+                    height: 20px;
+                }
+                span.icon1 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437491337294.jpg') no-repeat center center;
+                }
+                span.icon2 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437499146137.jpg') no-repeat center center;
+                }
+                span.icon3 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437506412478.jpg') no-repeat center center;
+                }
+            }
+            .listNewsContentItemRight {
+                width: 280px;
+                height: 110px;
+                padding:15px 8px;
+                box-sizing: border-box;
+                font-size: 18px;
+                color: #333333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+            }
+        }
+    }
+}
 </style>

components/template/component/list/450x950/2.vue

@@ -1,5 +1,45 @@
 <template>
-    3333
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentItem" v-for="(item,index) in component_style1_News1Array">
+                <NuxtLink 
+                    :href="getLinkPathDetail(item)" 
+                    :title="item.title"
+                    :target="item.islink == 1 ? '_blank' : '_self'"
+                >
+                    <div class="listNewsContentItemLeft">
+                        <img :src="item.imgurl" />
+                        <span class="icon1" v-if="index==0"></span>
+                        <span class="icon2" v-if="index==1"></span>
+                        <span class="icon3" v-if="index==2"></span>
+                    </div>
+                    <div class="listNewsContentItemRight">
+                        {{ item.title }}
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -11,9 +51,110 @@ const props = defineProps({
     templateData:Array,//新闻数据
     skinId:String,//皮肤id
 });
-
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+component_style1_News1Array.value = props.templateData.img.slice(0,7);
+//样式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 {
+        .listNewsContentItem {
+            width: 450px;
+            height: 110px;
+            margin-bottom: 20px;
+            background: #F9FAFB;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            a {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                span {
+                    position: absolute;
+                    top: 0;
+                    left: 10px;
+                    display: block;
+                    width: 20px;
+                    height: 20px;
+                }
+                span.icon1 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437491337294.jpg') no-repeat center center;
+                }
+                span.icon2 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437499146137.jpg') no-repeat center center;
+                }
+                span.icon3 {
+                    background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437506412478.jpg') no-repeat center center;
+                }
+            }
+            .listNewsContentItemRight {
+                width: 280px;
+                height: 110px;
+                padding:15px 8px;
+                box-sizing: border-box;
+                font-size: 18px;
+                color: #333333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+            }
+        }
+    }
+}
 </style>

components/template/component/list/720x300/1.vue

@@ -1,5 +1,64 @@
 <template>
-    1111
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+           <div class="listNewsContentItemLeft">
+                <div class="listNewsContentItemLeftItem" 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="listNewsContentItemLeftTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+           </div>
+           <div class="listNewsContentItemRight">
+                <div class="listNewsContentItemRightItem">
+                    <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="listNewsContentItemRightItem">
+                    <div v-for="item in component_style1_News2Array_2">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(item)" 
+                            :title="item.title"
+                            :target="item.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ item.title }}
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -11,9 +70,125 @@ const props = defineProps({
     templateData:Array,//新闻数据
     skinId:String,//皮肤id
 });
-
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News2Array = ref([]);
+const component_style1_News2Array_2 = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,2);
+component_style1_News2Array.value = props.templateData.text.slice(0,3);
+component_style1_News2Array_2.value = props.templateData.text.slice(3,6);
+//样式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: flex-start;
+        margin-bottom: 20px;
+        .listNewsContentItemLeft {
+            .listNewsContentItemLeftItem {
+                width: 170px;
+                height: 110px;
+                display: block;
+                position: relative;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+            }
+            .listNewsContentItemLeftTitle {
+                position: absolute;
+                bottom: 0;
+                z-index: 1;
+                width: 100%;
+                color: #fff;
+                height: 28px;
+                background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                box-sizing: border-box;
+                padding: 0 5px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                line-height: 28px;
+                font-size: 14px;
+            }
+        }
+        .listNewsContentItemRight {
+            flex: 1;
+            overflow: hidden;
+            .listNewsContentItemRightItem {
+                padding: 10px;
+                box-sizing: border-box;
+                height: 110px;
+                margin-bottom: 20px;
+                background: #F9FAFB;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                div {
+                    box-sizing: border-box;
+                    height: 24px;
+                    line-height: 24px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    margin-bottom: 10px;
+                    background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    a {
+                        color:#333333;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>

components/template/component/list/720x300/2.vue

@@ -1,5 +1,74 @@
 <template>
-    1111
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemRight">
+                    <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="listNewsContentItemLeft" 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="listNewsContentItemLeftTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+           </div>
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft" 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="listNewsContentItemLeftTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+                <div class="listNewsContentItemRight">
+                    <div v-for="item in component_style1_News2Array_2">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(item)" 
+                            :title="item.title"
+                            :target="item.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ item.title }}
+                        </NuxtLink>
+                    </div>
+                </div>
+           </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -11,9 +80,120 @@ const props = defineProps({
     templateData:Array,//新闻数据
     skinId:String,//皮肤id
 });
-
+//样式1与样式2共用 start ---------------------------------------->
+const component_style1_News1Array = ref({});
+const component_style1_News1Array_2 = ref({});
+const component_style1_News2Array = ref([]);
+const component_style1_News2Array_2 = ref([]);
+component_style1_News1Array.value = props.templateData.img.slice(0,1);
+component_style1_News1Array_2.value = props.templateData.img.slice(1,2);
+component_style1_News2Array.value = props.templateData.text.slice(0,3);
+component_style1_News2Array_2.value = props.templateData.text.slice(3,6);
+//样式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 {
+        .listNewsContentItem {
+            display: flex;
+            background: #F9FAFB;
+            align-items: flex-start;
+            margin-bottom: 20px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .listNewsContentItemLeft {
+                width: 170px;
+                height: 110px;
+                position: relative;
+                img {
+                    display: block;
+                    width: 170px;
+                    height: 110px;
+                }
+                .listNewsContentItemLeftTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 28px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 5px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 28px;
+                    font-size: 14px;
+                }
+            }
+            .listNewsContentItemRight {
+                padding: 10px;
+                box-sizing: border-box;
+                flex: 1;
+                height: 110px;
+                overflow: hidden;
+                div {
+                    box-sizing: border-box;
+                    height: 24px;
+                    line-height: 24px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    color:#333333;
+                    margin-bottom: 10px;
+                    background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }
+}
 </style>

components/template/component/list/720x440/1.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -13,7 +12,6 @@
         <div class="listNewsTitle_skin2" v-if="skinId=='2'">
             <span>
                 <NuxtLink
-                    class="active"
                     v-if="titleLink.cid"
                     :href="getLinkPath(titleLink)"
                     :title="titleLink.alias"

components/template/component/list/720x440/2.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -11,14 +10,15 @@
             </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>
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
         </div>
         <div class="listNewsContent">
             <div class="listNewsContentRight">

components/template/component/list/720x440/3.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -13,7 +12,6 @@
         <div class="listNewsTitle_skin2" v-if="skinId=='2'">
             <span>
                 <NuxtLink
-                    class="active"
                     v-if="titleLink.cid"
                     :href="getLinkPath(titleLink)"
                     :title="titleLink.alias"

components/template/component/list/720x440/4.vue

@@ -2,7 +2,6 @@
     <div class="listNewsBox">
         <div class="listNewsTitle" v-if="skinId=='1'">
             <NuxtLink
-                class="active"
                 v-if="titleLink.cid"
                 :href="getLinkPath(titleLink)"
                 :title="titleLink.alias"
@@ -13,7 +12,6 @@
         <div class="listNewsTitle_skin2" v-if="skinId=='2'">
             <span>
                 <NuxtLink
-                    class="active"
                     v-if="titleLink.cid"
                     :href="getLinkPath(titleLink)"
                     :title="titleLink.alias"

components/template/component/list/720x620/1.vue

@@ -1,5 +1,51 @@
 <template>
-    2222
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentTop">
+                <div class="listNewsContentLeftTop" 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="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+            <div class="listNewsContentBottom">
+                <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>
@@ -11,9 +57,115 @@ const props = defineProps({
     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 {
+            width: 720px;
+            height: 245px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            .listNewsContentLeftTop {
+                position: relative;
+                img {
+                    width: 350px;
+                    height: 245px;
+                    display: block;
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 44px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 10px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 44px;
+                    font-size: 18px;
+                }
+            }
+        }
+        .listNewsContentBottom {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            div {
+                color:#333333;
+                font-size:18px;
+                line-height: 24px;
+                height: 24px;
+                margin-bottom: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 345px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                &:nth-child(1),&:nth-child(2),&:nth-child(7),&:nth-child(8){
+                    font-weight: bold;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }
+}
 </style>

components/template/component/list/720x620/2.vue

@@ -1,5 +1,53 @@
 <template>
-    2222
+    <div class="listNewsBox">
+        <div class="listNewsTitle" v-if="skinId==1">
+            <NuxtLink
+                v-if="titleLink.cid"
+                :href="getLinkPath(titleLink)"
+                :title="titleLink.alias"
+            >
+                {{titleLink.alias}}
+            </NuxtLink>
+        </div>
+        <div class="listNewsTitle_skin2" v-if="skinId==2">
+            <span>
+                <NuxtLink
+                    v-if="titleLink.cid"
+                    :href="getLinkPath(titleLink)"
+                    :title="titleLink.alias"
+                >
+                    {{titleLink.alias}}
+                </NuxtLink>
+            </span>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsBigContentBottom">
+                <div class="listNewsContentBottom">
+                    <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 class="listNewsContentTop">
+                <div class="listNewsContentLeftTop" 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="listNewsContentLeftTopTitle">{{ item.title }}</div>
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -11,9 +59,118 @@ const props = defineProps({
     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 {
+            width: 720px;
+            height: 245px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeftTop {
+                position: relative;
+                img {
+                    width: 350px;
+                    height: 245px;
+                    display: block;
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom: 0;
+                    z-index: 1;
+                    width: 100%;
+                    color: #fff;
+                    height: 44px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    box-sizing: border-box;
+                    padding: 0 10px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 44px;
+                    font-size: 18px;
+                }
+            }
+        }
+        .listNewsBigContentBottom {
+            height: 295px;
+            margin-bottom: 20px;
+        }
+        .listNewsContentBottom {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            div {
+                color:#333333;
+                font-size:18px;
+                line-height: 24px;
+                height: 24px;
+                margin-bottom: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 345px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                &:nth-child(1),&:nth-child(2),&:nth-child(7),&:nth-child(8){
+                    font-weight: bold;
+                }
+                a {
+                    color:#333333;
+                }
+            }
+        }
+    }
+}
 </style>

components/template/sector/body/list/1200x470/1.vue

@@ -2,7 +2,7 @@
     <div class="manyPictureSectorBox">
         <div class="manyPictureSector">
             <div class="manyPictureSectorLeft">
-                <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                <div v-if="templateData.componentList[0].component_style.toString()=='2'">
                     <left1Style 
                         v-if="templateData.componentList[0].data.text.length > 0" 
                         :titleLink="componentTitle1" 
@@ -11,7 +11,7 @@
                     />
                     <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
                 </div>
-                <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                <div v-if="templateData.componentList[0].component_style.toString()=='1'">
                     <left2Style 
                         v-if="templateData.componentList[0].data.text.length > 0" 
                         :titleLink="componentTitle1" 

components/template/sector/body/list/1200x980/1.vue

@@ -6,7 +6,7 @@
         <div class="commentSector">
             <div class="commentSectorLeft">
                 <div class="commentSectorLeftTop">
-                    <div v-if="templateData.componentList[0].component_style.toString()=='1'">
+                    <div v-if="templateData.componentList[0].component_style.toString()=='2'">
                         <leftTop1Style 
                             v-if="templateData.componentList[0].data.text.length > 0" 
                             :titleLink="componentTitle1" 
@@ -15,7 +15,7 @@
                         />
                         <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="300" />
                     </div>
-                    <div v-if="templateData.componentList[0].component_style.toString()=='2'">
+                    <div v-if="templateData.componentList[0].component_style.toString()=='1'">
                         <leftTop2Style 
                             v-if="templateData.componentList[0].data.text.length > 0" 
                             :titleLink="componentTitle1" 
@@ -26,7 +26,7 @@
                     </div>
                 </div>
                 <div class="commentSectorLeftBottom">
-                    <div v-if="templateData.componentList[1].component_style.toString()=='1'">
+                    <div v-if="templateData.componentList[1].component_style.toString()=='2'">
                         <leftBottom1Style 
                             v-if="templateData.componentList[1].data.text.length > 0" 
                             :titleLink="componentTitle2" 
@@ -35,7 +35,7 @@
                         />
                         <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="620" />
                     </div>
-                    <div v-if="templateData.componentList[1].component_style.toString()=='2'">
+                    <div v-if="templateData.componentList[1].component_style.toString()=='1'">
                         <leftBottom2Style 
                             v-if="templateData.componentList[1].data.text.length > 0" 
                             :titleLink="componentTitle2" 
@@ -47,7 +47,7 @@
                 </div>
             </div>
             <div class="commentSectorRight">
-                <div v-if="templateData.componentList[2].component_style.toString()=='1'">
+                <div v-if="templateData.componentList[2].component_style.toString()=='2'">
                     <right1Style 
                         v-if="templateData.componentList[2].data.text.length > 0" 
                         :titleLink="componentTitle3" 
@@ -56,7 +56,7 @@
                     />
                     <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="950" />
                 </div>
-                <div v-if="templateData.componentList[2].component_style.toString()=='2'">
+                <div v-if="templateData.componentList[2].component_style.toString()=='1'">
                     <right2Style 
                         v-if="templateData.componentList[2].data.text.length > 0" 
                         :titleLink="componentTitle3"