完成头条通栏组件的开发

完成头条通栏组件的开发

assets/css/ad/adversing.less

@@ -3,8 +3,7 @@
   width: 1200px;
   height: 90px;
   margin:0 auto;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   overflow: hidden;
   a {
       display: block;

assets/css/public/nav.less

@@ -3,6 +3,7 @@
     width: 100%;
     height: 130px;
     background: #1C5468;
+    margin-bottom: 30px;
     .componentBorder {
         border-left: 2px dashed #999;
         border-right: 2px dashed #999;

components/template/component/headLine/1200x140/1.vue

@@ -1,103 +1,164 @@
 <template>
-    <div>
-        <div class="headLineStyle1">
-            <div class="headLineTitle">
-                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
-                <NuxtLink 
-                    :href="getLinkPathDetail(templateData[0])" 
-                    :title="templateData[0].title"
-                    :target="templateData[0].islink == 1 ? '_blank' : '_self'">
-                    <div class="left_content">
-                        {{ templateData[0].title }}
-                    </div>
-                </NuxtLink>
-            </div>
-            <div class="headLineContent">
+    <div class="headLineStyle1" v-if="style=='1'">
+        <div class="headLineTitle">
+            <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
+            <NuxtLink 
+                :href="getLinkPathDetail(component_style1_News1)" 
+                :title="component_style1_News1.title"
+                :target="component_style1_News1.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ component_style1_News1.title }}
+            </NuxtLink>
+        </div>
+        <div class="headLineContent">
+            <div v-for="item in component_style1_News2Array" :key="item.id">
                 <NuxtLink 
-                    :href="getLinkPathDetail(templateData[0])" 
-                    :title="templateData[0].title"
-                    :target="templateData[0].islink == 1 ? '_blank' : '_self'">
-                    <div class="left_content">
-                        {{ templateData[0].title }}
-                    </div>
+                    :href="getLinkPathDetail(item)" 
+                    :title="item.title"
+                    :target="item.islink == 1 ? '_blank' : '_self'"
+                >
+                    {{ item.title }}
                 </NuxtLink>
             </div>
         </div>
-        <!-- <div class="headLineStyle1_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
-            <div class="headTip">
-                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
-            </div>
-            <div class="headLineContentBox" ref="contentBox">
-                <div class="headLineSlider" :style="sliderStyle">
-                    <div class="headLineTitleBox">
-                        <div class="headLineTop">
-                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
-                        </div>
-                        <div class="headLineBottom">
-                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
-                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
-                            <div>抢抓人工智能发展的历史性机遇</div>
-                        </div>
+    </div>
+    <div class="headLineStyle1_skin2" v-if="style=='2'">
+        <div class="headTip">
+            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
+        </div>
+        <div class="headLineContentBox" ref="contentBox">
+            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
+                <div class="headLineTitleBox">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News1)" 
+                            :title="component_style2_News1.title"
+                            :target="component_style2_News1.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News1.title }}
+                        </NuxtLink>
                     </div>
-                    <div class="headLineTitleBox">
-                        <div class="headLineTop">
-                            民航局：禁止旅客携带无3C标识及被召回的充电宝乘坐境内航班
-                        </div>
-                        <div class="headLineBottom">
-                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
-                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
-                            <div>抢抓人工智能发展的历史性机遇</div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News1Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
                         </div>
                     </div>
-                    <div class="headLineTitleBox">
-                        <div class="headLineTop">
-                            吴奇隆刘诗诗一家三口同框 共同带孩子回家破婚变传闻
+                </div>
+                <div class="headLineTitleBox" v-if="templateData.length > 4">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News2)" 
+                            :title="component_style2_News2.title"
+                            :target="component_style2_News2.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News2.title }}
+                        </NuxtLink>
+                    </div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News2Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
                         </div>
-                        <div class="headLineBottom">
-                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
-                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
-                            <div>抢抓人工智能发展的历史性机遇</div>
+                    </div>
+                </div>
+                <div class="headLineTitleBox" v-if="templateData.length > 8">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News3)" 
+                            :title="component_style2_News3.title"
+                            :target="component_style2_News3.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News3.title }}
+                        </NuxtLink>
+                    </div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News3Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="headLineIcon">
-                <div @mouseover="setActive(0)" :class="{active: activeIndex === 0}"></div>
-                <div @mouseover="setActive(1)" :class="{active: activeIndex === 1}"></div>
-                <div @mouseover="setActive(2)" :class="{active: activeIndex === 2}"></div>
-            </div>
-        </div> -->
+        </div>
+        <div class="headLineIcon">
+            <div @mouseover="setActive(0)" :class="{active: activeIndex === 0}" v-if="templateData.length > 0"></div>
+            <div @mouseover="setActive(1)" :class="{active: activeIndex === 1}" v-if="templateData.length > 4"></div>
+            <div @mouseover="setActive(2)" :class="{active: activeIndex === 2}" v-if="templateData.length > 8"></div>
+        </div>
     </div>
 </template>
 
 <script setup>
 //引入vue
-import { ref,onMounted } from 'vue';
+import {ref} from 'vue';
 //获得新闻数据
 const props = defineProps({
+    style:String,//组件样式
     templateData:Array,//新闻数据
 });
+//组件样式1 start ---------------------------------------->
+const component_style1_News1 = ref({});
+const component_style1_News2Array = ref([]);
+component_style1_News1.value = props.templateData[0];
+component_style1_News2Array.value = props.templateData.slice(1,4); 
+//组件样式1 end ---------------------------------------->
 
+//组件样式2 start ---------------------------------------->
+const component_style2_News1 = ref({})
+const component_style2_News1Array = ref([])
+const component_style2_News2 = ref({})
+const component_style2_News2Array = ref([])
+const component_style2_News3 = ref({})
+const component_style2_News3Array = ref([])
 
-//样式2的效果 start ---------------------------------------->
-//选中的
-const activeIndex = ref(0);
-const setActive = (index) => {
-    activeIndex.value = index;
+if(props.templateData.length>0){
+    if(props.templateData.length>0){
+        component_style2_News1.value = props.templateData[0]
+        component_style2_News1Array.value = props.templateData.slice(1,4)
+    }
+    if(props.templateData.length>4){
+        component_style2_News2.value = props.templateData[4]
+        component_style2_News2Array.value = props.templateData.slice(5,8)
+    }
+    if(props.templateData.length>8){
+        component_style2_News3.value = props.templateData[8]
+        component_style2_News3Array.value = props.templateData.slice(9,12)
+    }
 }
-const sliderStyle = () => {
+
+const activeIndex = ref(0);
+const sliderStyle = computed(() => {
     // 每个headLineTitleBox的高度是70px + 间距30px = 100px
-    const translateY = -(this.activeIndex * 100);
+    const translateY = -(activeIndex.value * 100);
     return {
         transform: `translateY(${translateY}px)`,
         transition: 'transform 0.3s ease-in-out'
     };
-}
-//样式2的效果 end ---------------------------------------->
-    
+});
+const setActive = (index) => {
+    activeIndex.value = index;
+};
+//组件样式2 end ---------------------------------------->
 </script>
 
 <style lang="less">
+//皮肤1 样式1 start---------------------------------------->
 .headLineStyle1 {
     width: 1200px;
     height: 140px;
@@ -108,34 +169,38 @@ const sliderStyle = () => {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 30px;
-        font-weight: bold;
-        color: #004564;
         margin-bottom: 10px;
+        a {
+            font-weight: bold;
+            font-size: 30px;
+            color: #004564;
+        }
         img {
             margin-right: 20px;
         }
-        a {
-            color: #004564; 
-        }
     }
     .headLineContent{
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 18px;
-        color:#333333;
         div {
             margin-right: 40px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            a {
+                font-size: 18px;
+                color:#333333;
+            }
             &:last-child {
                 margin-right: 0;
             }
         }
     }
 }
+//皮肤1 样式1 end---------------------------------------->
+
+//皮肤2 样式1 start---------------------------------------->
 .headLineStyle1_skin2 {
     border:1px solid #E4E4E4;
     width: 1200px;
@@ -167,10 +232,12 @@ const sliderStyle = () => {
         flex-direction: column;
         justify-content: center;
         .headLineTop {
-            font-size: 30px;
-            color:#A91B33;
-            margin-bottom: 15px;
+            margin-bottom: 8px;
             font-weight: bold;
+            a {
+                font-size: 30px;
+                color:#A91B33;
+            }
         }
         .headLineBottom {
             display: flex;
@@ -179,11 +246,13 @@ const sliderStyle = () => {
             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;
                 }
@@ -210,4 +279,5 @@ const sliderStyle = () => {
         }
     }
 }
+//皮肤2 样式1 start---------------------------------------->
 </style>

components/template/component/headLine/1200x140/2.vue

@@ -1,13 +1,279 @@
 <template>
-    <div>
-        2222
+    <div class="headLineStyle1" v-if="style=='1'">
+        <div class="headLineTitle">
+            <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
+            <NuxtLink 
+                :href="getLinkPathDetail(component_style1_News1)" 
+                :title="component_style1_News1.title"
+                :target="component_style1_News1.islink == 1 ? '_blank' : '_self'"
+            >
+                {{ component_style1_News1.title }}
+            </NuxtLink>
+        </div>
+        <div class="headLineContent">
+            <div v-for="item in component_style1_News2Array" :key="item.id">
+                <NuxtLink 
+                    :href="getLinkPathDetail(item)" 
+                    :title="item.title"
+                    :target="item.islink == 1 ? '_blank' : '_self'"
+                >
+                    {{ item.title }}
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+    <div class="headLineStyle1_skin2" v-if="style=='2'">
+        <div class="headTip">
+            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
+        </div>
+        <div class="headLineContentBox" ref="contentBox">
+            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
+                <div class="headLineTitleBox">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News1)" 
+                            :title="component_style2_News1.title"
+                            :target="component_style2_News1.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News1.title }}
+                        </NuxtLink>
+                    </div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News1Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+                <div class="headLineTitleBox" v-if="templateData.length > 3">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News2)" 
+                            :title="component_style2_News2.title"
+                            :target="component_style2_News2.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News2.title }}
+                        </NuxtLink>
+                    </div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News2Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+                <div class="headLineTitleBox" v-if="templateData.length > 6">
+                    <div class="headLineTop">
+                        <NuxtLink 
+                            :href="getLinkPathDetail(component_style2_News3)" 
+                            :title="component_style2_News3.title"
+                            :target="component_style2_News3.islink == 1 ? '_blank' : '_self'"
+                        >
+                            {{ component_style2_News3.title }}
+                        </NuxtLink>
+                    </div>
+                    <div class="headLineBottom">
+                        <div v-for="item in component_style2_News3Array" :key="item.id">
+                            <NuxtLink 
+                                :href="getLinkPathDetail(item)" 
+                                :title="item.title"
+                                :target="item.islink == 1 ? '_blank' : '_self'"
+                            >
+                                {{ item.title }}
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="headLineIcon">
+            <div @mouseover="setActive(0)" :class="{active: activeIndex === 0}" v-if="templateData.length > 0"></div>
+            <div @mouseover="setActive(1)" :class="{active: activeIndex === 1}" v-if="templateData.length > 3"></div>
+            <div @mouseover="setActive(2)" :class="{active: activeIndex === 2}" v-if="templateData.length > 6"></div>
+        </div>
     </div>
 </template>
 
 <script setup>
+//引入vue
+import {ref} from 'vue';
+//获得新闻数据
+const props = defineProps({
+    style:String,//组件样式
+    templateData:Array,//新闻数据
+});
+//组件样式1 start ---------------------------------------->
+const component_style1_News1 = ref({});
+const component_style1_News2Array = ref([]);
+component_style1_News1.value = props.templateData[0];
+component_style1_News2Array.value = props.templateData.slice(1,3); 
+//组件样式1 end ---------------------------------------->
+
+//组件样式2 start ---------------------------------------->
+const component_style2_News1 = ref({})
+const component_style2_News1Array = ref([])
+const component_style2_News2 = ref({})
+const component_style2_News2Array = ref([])
+const component_style2_News3 = ref({})
+const component_style2_News3Array = ref([])
+
+if(props.templateData.length>0){
+    if(props.templateData.length>0){
+        component_style2_News1.value = props.templateData[0]
+        component_style2_News1Array.value = props.templateData.slice(1,3)
+    }
+    if(props.templateData.length>3){
+        component_style2_News2.value = props.templateData[3]
+        component_style2_News2Array.value = props.templateData.slice(4,6)
+    }
+    if(props.templateData.length>6){
+        component_style2_News3.value = props.templateData[6]
+        component_style2_News3Array.value = props.templateData.slice(7,9)
+    }
+}
 
+const activeIndex = ref(0);
+const sliderStyle = computed(() => {
+    // 每个headLineTitleBox的高度是70px + 间距30px = 100px
+    const translateY = -(activeIndex.value * 100);
+    return {
+        transform: `translateY(${translateY}px)`,
+        transition: 'transform 0.3s ease-in-out'
+    };
+});
+const setActive = (index) => {
+    activeIndex.value = index;
+};
+//组件样式2 end ---------------------------------------->
 </script>
 
 <style lang="less">
+//皮肤1 样式1 start---------------------------------------->
+.headLineStyle1 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 10px;
+        a {
+            font-weight: bold;
+            font-size: 30px;
+            color: #004564;
+        }
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            a {
+                font-size: 18px;
+                color:#333333;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+//皮肤1 样式1 end---------------------------------------->
 
+//皮肤2 样式1 start---------------------------------------->
+.headLineStyle1_skin2 {
+    border:1px solid #E4E4E4;
+    width: 1200px;
+    height: 140px;
+    box-sizing: border-box;
+    padding:32px 15px 32px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .headLineContentBox {
+        width: 1000px;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        .headLineSlider {
+            display: flex;
+            flex-direction: column; // 改为垂直方向
+            width: 100%;
+            height: 210px; // 3个titleBox，每个70px高
+        }
+    }
+    .headLineTitleBox {
+        text-align: center;
+        height: 70px; // 明确设置高度
+        width: 100%;
+        margin-bottom: 30px;
+        flex-shrink: 0; // 防止收缩
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .headLineTop {
+            font-size: 30px;
+            color:#A91B33;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+        .headLineBottom {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            div {
+                width: 32%;
+                margin-right: 30px;
+                font-size: 18px;
+                color:#333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+    .headLineIcon {
+        div {
+            width: 10px;
+            height: 10px;
+            background: #EDEDED;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &.active {
+                background: #A91B33;
+            }
+            &:hover {
+                background: #A91B33;
+            }
+        }
+    }
+}
+//皮肤2 样式1 start---------------------------------------->
 </style>

components/template/component/public/nodata.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="atWorkBox">
+        <div class="atWorkStyle1" v-if="dataStyle == 1" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="当前板块暂无内容！" >
+                <div class="atWorkTitle">对不起，当前板块暂无内容！</div>
+            </div>
+        </div>
+        <div class="atWorkStyle2" v-if="dataStyle == 2" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="当前板块暂无内容！" v-show="dataHeight>80">
+                <div class="atWorkTitle">对不起，当前板块暂无内容！</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+//引入vue
+import { ref } from 'vue';
+//获得数据
+const props = defineProps({
+    dataStyle: Number,//样式
+    dataWidth: Number,//宽度
+    dataHeight: Number,//高度
+});
+const dataStyle = ref(props.dataStyle);
+const dataWidth = ref(props.dataWidth);
+const dataHeight = ref(props.dataHeight);
+</script>
+
+<style lang="less">
+.atWorkBox {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    .atWorkStyle1 {
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            display: block;
+            margin: 0 auto;
+            margin-bottom: 20px;
+        }
+        .atWorkTitle {
+            font-size: 16px;
+            color: #999;
+            text-align: center;
+        }
+    }
+    .atWorkStyle2 {
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        .atWorkImgBox {
+            display:flex;
+            align-items: center;
+            justify-content: center;
+        }
+        img {
+            display: block;
+            margin-right: 20px;
+        }
+        .atWorkTitle {
+            font-size: 16px;
+            color: #999;
+            text-align: center;
+        }
+    }
+}
+</style>

components/template/sector/body/index/banner/1200x410/1.vue

@@ -0,0 +1,15 @@
+<template>
+    1111
+</template>
+
+<script setup>
+
+
+const props = defineProps({
+    
+});
+</script>
+
+<style lang="less">
+
+</style>

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

@@ -1,10 +1,22 @@
 <template>
     <div class="headLineBigBox">
-        <div> 
-            <style1 :templateData="templateData.componentList[0].data.text"/>
+        <!--板式1-->
+        <div v-if="skinId==1">
+            <style1 
+                v-if="templateData.componentList[0].data.text.length > 0" 
+                :templateData="templateData.componentList[0].data.text" 
+                :style="templateData.componentList[0].component_style.toString()"
+            />
+            <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
         </div>
-        <div>
-            <!-- <style2/> -->
+        <!--板式2-->
+        <div v-if="skinId==2">
+            <style2
+                v-if="templateData.componentList[0].data.text.length > 0" 
+                :templateData="templateData.componentList[0].data.text" 
+                :style="templateData.componentList[0].component_style.toString()"
+            />
+            <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
         </div>
     </div>
 </template>
@@ -14,12 +26,13 @@
 import style1 from '@/components/template/component/headLine/1200x140/1.vue'
 //样式2
 import style2 from '@/components/template/component/headLine/1200x140/2.vue'
+//暂无数据
+import nodata from '@/components/template/component/public/nodata.vue'
 
 const props = defineProps({
     skinId: Number,//皮肤id
     templateData:Object,//新闻数据
 });
-
 </script>
 
 <style lang="less">
@@ -28,6 +41,7 @@ const props = defineProps({
     height: 140px;
     position: relative;
     margin: 0 auto;
+    margin-bottom: 30px;
     .templateEditBtnBox {
         right: 0;
     }

error.vue

@@ -2,8 +2,8 @@
     <div class="errorBox">
       <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346180738003.jpg" alt="页面不存在" v-if="errorCode == 404">
       <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346208700657.jpg" alt="服务器渲染错误" v-if="errorCode == 500">
-      <div class="errorText" v-if="errorCode == 404">对不起，您访问的页面不存在（{{ errorText }}）</div>
-      <div class="errorText" v-if="errorCode == 500">服务器渲染错误（{{ errorText }}）</div>
+      <div class="errorText" v-if="errorCode == 404">对不起，您访问的页面不存在</div>
+      <div class="errorText" v-if="errorCode == 500">服务器渲染错误</div>
       <div @click="goHome" class="goHome">返回网站首页</div>
     </div>
   </template>
@@ -18,7 +18,8 @@
       const errorText = ref('')
       errorCode.value = error.value.statusCode;
       errorText.value = error.value.message;
-      //console.log('错误代码:', errorCode.value);
+      console.log('错误代码:', errorCode.value);
+      console.log('错误明细:', errorText.value);
       //1.处理错误 end ---------------------------------------->
   
       //2.处理跳转 start ---------------------------------------->

pages/index.vue

@@ -10,6 +10,11 @@
         <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
         <!--头条-->
         <templateHeadline :skinId="skinId" :templateData="testTemplateData"></templateHeadline>
+        <!--头条-->
+
+
+
+
 
 
         <!-- <HomeAdvertising :imgurl="adImg1"></HomeAdvertising> -->
@@ -451,7 +456,7 @@ import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
 //0.2.1 广告组件
 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'
+import templateHeadline from '@/components/template/sector/body/index/headLine/1200x140/1.vue'
 
 //0.加载全局模板组件 end---------------------------------------->
 
@@ -520,25 +525,49 @@ const testTemplateData = {
                 "text": [
                     {
                         "id": 50079,
-                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                         "islink": 0,
                         "pinyin": "sannongtansuo/jiaodianfangtan"
                     },
                     {
                         "id": 50136,
-                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                         "islink": 0,
                         "pinyin": "sannongzhichuang"
                     },
                     {
                         "id": 50137,
-                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "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": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
+                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
                         "islink": 0,
                         "pinyin": "sannongzhichuang"
                     }