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

<template>
    <!--样式1-->
    <div class="headLineStyle" v-if="componentStyle == 1">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" />
            <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>
    <!--样式2-->
    <div class="headLineStyle" v-if="componentStyle == 2">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" />
            <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_style2_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式3-->
    <div class="headLineStyle" v-if="componentStyle == 3">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" />
            <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_style3_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式4-->
    <div class="headLineStyle headLineContent4" v-if="componentStyle == 4">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" />
            <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>
    <!--样式5-->
    <div class="headLineStyle headLineContent5" v-if="componentStyle == 5">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" v-if="activeTab == index" />
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
            <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
        </div>
    </div>
    <!--样式6-->
    <div class="headLineStyle headLineContent5" v-if="componentStyle == 6">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array_1" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043865140375.jpg" v-if="activeTab == index" />
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
        </div>
    </div>
    <!--样式7-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 7">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" />
            <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>
    <!--样式8-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 8">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" />
            <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_style2_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式9-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 9">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" />
            <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_style3_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式10-->
    <div class="headLineStyle headLineContent10" v-if="componentStyle == 10">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" />
            <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>
    <!--样式11-->
    <div class="headLineStyle headLineContent11" v-if="componentStyle == 11">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" v-if="activeTab == index" />
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
            <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
        </div>
    </div>
    <!--样式12-->
    <div class="headLineStyle headLineContent11" v-if="componentStyle == 12">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array_1" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <img src="http://192.168.1.234:19000/pre/image/jpeg/20251218/1766043990716302.jpg" v-if="activeTab == index" />
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
        </div>
    </div>
    <!--样式13-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 13">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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>
    <!--样式14-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 14">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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_style2_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式15-->
    <div class="headLineStyle headLineContent7" v-if="componentStyle == 15">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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_style3_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!--样式16-->
    <div class="headLineStyle headLineContent10" v-if="componentStyle == 16">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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>
    <!--样式17-->
    <div class="headLineStyle headLineContent11" v-if="componentStyle == 17">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
            <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
        </div>
    </div>
    <!--样式18-->
    <div class="headLineStyle headLineContent11" v-if="componentStyle == 18">
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array_1" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
        </div>
    </div>
    <!--样式19-->
    <div class="headLineStyle headLineContent19" v-if="componentStyle == 19">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044067976048.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>
    <!-- 样式20 -->
    <div class="headLineStyle headLineContent20" v-if="componentStyle == 20">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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>
    <!-- 样式21 -->
    <div class="headLineStyle headLineContent20" v-if="componentStyle == 21">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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_style2_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!-- 样式22 -->
    <div class="headLineStyle headLineContent20" v-if="componentStyle == 22">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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_style3_News2Array" :key="item.id">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <!-- 样式23 -->
    <div class="headLineStyle headLineContent23" v-if="componentStyle == 23">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-if="templateData.length > 0">
            <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>
    <!--样式24-->
    <div class="headLineStyle headLineContent24" v-if="componentStyle == 24">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
            <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
        </div>
    </div>
    <!--样式25-->
    <div class="headLineStyle headLineContent24" v-if="componentStyle == 25">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766044091191368.png" />
        <div class="headLineTitle" v-for="(item, index) in component_style1_News1Array_1" :key="item.id"
            :class="{ 'active': activeTab == index }">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" v-if="activeTab == index">
                {{ item.title }} 
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
            <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    componentStyle: Number,//样式编号
    templateData: Array,//新闻数据
});
//组件样式1 start ---------------------------------------->
console.log(props.templateData)
const activeTab = ref(0);
const component_style1_News1 = ref({});
const component_style1_News1Array = ref([]);
const component_style1_News1Array_1 = ref([]);
const component_style1_News2Array = ref([]);
const component_style2_News2Array = ref([]);
const component_style3_News2Array = ref([]);
component_style1_News1.value = props.templateData[0];
component_style1_News1Array.value = props.templateData.slice(0, 3);
component_style1_News1Array_1.value = props.templateData.slice(0, 2);
component_style1_News2Array.value = props.templateData.slice(1, 4);
component_style2_News2Array.value = props.templateData.slice(1, 3);
component_style3_News2Array.value = props.templateData.slice(1, 2);
//组件样式1 end ---------------------------------------->
</script>

<style lang="less" scoped>
//基础样式 start ---------------------------------------->
.headLineStyle {
    width: 1200px;
    height: 110px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 100px 0 100px;
    .headLineTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        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;
            }
        }
    }
}

//样式4
.headLineContent4 {
    line-height: 100px;

    .headLineTitle {
        margin-bottom: 0;
    }
}

//样式5
.headLineContent5 {
    padding: 15px 100px 15px 100px;
    .headLineTitle {
        margin-bottom: 0;
    }
    .headLineContent {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            width: 360px;
            height: 5px;
            background: #ccdae0;
            margin-right: 10px;
        }

        .active {
            background: #004564;
        }
    }
}

//样式7
.headLineContent7 {
    .headLineTitle {
        img {
            margin-right: 30px;
        }
    }
}

//样式10
.headLineContent10 {
    line-height: 100px;

    .headLineTitle {
        margin-bottom: 0;
        img {
            margin-right: 30px;
        }
    }
}

//样式11
.headLineContent11 {
    padding: 15px 100px 15px 100px;
    .headLineTitle {
        margin-bottom: 0;
        img {
            margin-right: 30px;
        }
        a{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }        
    }

    .headLineContent {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            width: 360px;
            height: 5px;
            background: #ccdae0;
            margin-right: 10px;
        }

        .active {
            background: #004564;
        }
    }
}

//样式19
.headLineContent19 {
    padding: 35px 50px 35px 50px;
    line-height: 140px;
    margin-bottom: 0;

    .headLineTitle {
        width: 1100px;
        height: 70px;
        line-height: 140px;
        background-color: #f6fcff;
        position: relative;

        img {
            width: 46px;
            height: 46px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }
}

//样式20
.headLineContent20 {
    width: 1196px;
    height: 110px;
    background-color: #fafafa;
    position: relative;
    padding-top: 5px;

    img {
        width: 63px;
        height: 32px;
        position: absolute;
        top: 15px;
        left: 30px;
    }
}

//样式23
.headLineContent23 {
    width: 1196px;
    height: 110px;
    background-color: #fafafa;
    position: relative;
    padding: 32px 100px;

    img {
        width: 63px;
        height: 32px;
        position: absolute;
        top: 38px;
        left: 30px;
    }
}

//样式24
.headLineContent24 {
    width: 1196px;
    height: 110px;
    background-color: #fafafa;
    position: relative;
    padding: 15px 100px;

    img {
        width: 63px;
        height: 32px;
        position: absolute;
        top: 25px;
        left: 30px;
    }

    .headLineTitle{
        margin-bottom: 0;
    }

    .headLineContent {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            width: 360px;
            height: 5px;
            background: #ccdae0;
            margin-right: 10px;
        }

        .active {
            background: #004564;
        }
    }
}

//基础样式 end ----------------------------------------></style>