zizhujianzhan_web/components/template/component/headLine/1200x140/6.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/png/20251218/1766019286582583.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>
    <!--样式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/png/20251218/1766019286582583.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_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/png/20251218/1766019286582583.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_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/png/20251218/1766019286582583.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>
    <!--样式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/png/20251218/1766019286582583.png"
                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/png/20251218/1766019286582583.png"
                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/png/20251218/1766026791458071.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>
    <!--样式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/png/20251218/1766026791458071.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_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/png/20251218/1766026791458071.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_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/png/20251218/1766026791458071.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>
    <!--样式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/png/20251218/1766026791458071.png"
                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/png/20251218/1766026791458071.png"
                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/1766027258906505.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/1766027282851131.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/1766027282851131.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/1766027282851131.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/1766027282851131.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/1766027282851131.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/1766027282851131.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>
    <!--样式26-->
    <div class="headLineStyle1_skin2" v-if="componentStyle == 26">
        <div class="headTip">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027294575187.png">
        </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_style26_News1)"
                            :title="component_style26_News1.title"
                            :target="component_style26_News1.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style26_News1.title, 33) }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style26_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 > 4">
                    <div class="headLineTop">
                        <NuxtLink :href="getLinkPathDetail(component_style26_News2)"
                            :title="component_style26_News2.title"
                            :target="component_style26_News2.islink == 1 ? '_blank' : '_self'">
                            {{ component_style26_News2.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style26_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 > 8">
                    <div class="headLineTop">
                        <NuxtLink :href="getLinkPathDetail(component_style26_News3)"
                            :title="component_style26_News3.title"
                            :target="component_style26_News3.islink == 1 ? '_blank' : '_self'">
                            {{ component_style26_News3.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style26_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 > 4"></div>
            <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }" v-if="templateData.length > 8"></div>
        </div>
    </div>
    <!--样式27-->
    <div class="headLineStyle1_skin2" v-if="componentStyle == 27">
        <div class="headTip">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027294575187.png">
        </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_style27_News1)"
                            :title="component_style27_News1.title"
                            :target="component_style27_News1.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style27_News1.title, 33) }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style27_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_style27_News2)"
                            :title="component_style27_News2.title"
                            :target="component_style27_News2.islink == 1 ? '_blank' : '_self'">
                            {{ component_style27_News2.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style27_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_style27_News3)"
                            :title="component_style27_News3.title"
                            :target="component_style27_News3.islink == 1 ? '_blank' : '_self'">
                            {{ component_style27_News3.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style27_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>
    <!--样式28-->
    <div class="headLineStyle1_skin26" v-if="componentStyle == 28">
        <div class="headTip">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027294575187.png">
        </div>
        <div class="headLineContentBox" ref="contentBox">
            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
                <div class="headLineTitleBox" v-if="templateData.length > 0">
                    <div class="headLineTop">
                        <NuxtLink :href="getLinkPathDetail(component_style28_News1)"
                            :title="component_style28_News1.title"
                            :target="component_style28_News1.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style28_News1.title, 33) }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style28_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 > 2">
                    <div class="headLineTop">
                        <NuxtLink :href="getLinkPathDetail(component_style28_News2)"
                            :title="component_style28_News2.title"
                            :target="component_style28_News2.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style28_News2.title, 33) }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style28_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 > 4">
                    <div class="headLineTop">
                        <NuxtLink :href="getLinkPathDetail(component_style28_News3)"
                            :title="component_style28_News3.title"
                            :target="component_style28_News3.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style28_News3.title, 33) }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style28_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 }"></div>
            <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
            <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
        </div>
    </div>
    <!--样式29-->
    <div class="headLineStyle1_skin26" v-if="componentStyle == 29">
        <div class="headTip">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027294575187.png">
        </div>
        <div class="headLineContentBox" ref="contentBox">
            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
                <div class="headLineTitleBox" v-if="templateData.length > 0">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News1)"
                            :title="component_style29_News1.title"
                            :target="component_style29_News1.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News1.title, 33) }}
                        </NuxtLink>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 1">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News2)"
                            :title="component_style29_News2.title"
                            :target="component_style29_News2.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News2.title, 33) }}
                        </NuxtLink>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 2">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News3)"
                            :title="component_style29_News3.title"
                            :target="component_style29_News3.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News3.title, 33) }}
                        </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>
    <!--样式30-->
    <div class="headLineStyle1_skin26 headLineStyle1_skin30" v-if="componentStyle == 30">
        <div class="headTip">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027294575187.png">
        </div>
        <div class="headLineContentBox" ref="contentBox">
            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
                <div class="headLineTitleBox" v-if="templateData.length > 0">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News1)"
                            :title="component_style29_News1.title"
                            :target="component_style29_News1.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News1.title, 33) }}
                        </NuxtLink>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 1">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News2)"
                            :title="component_style29_News2.title"
                            :target="component_style29_News2.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News2.title, 33) }}
                        </NuxtLink>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 2">
                    <div class="headLineMiddle">
                        <NuxtLink :href="getLinkPathDetail(component_style29_News3)"
                            :title="component_style29_News3.title"
                            :target="component_style29_News3.islink == 1 ? '_blank' : '_self'">
                            {{ getTitleLength(component_style29_News3.title, 33) }}
                        </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>
    <!-- 样式31 -->
    <div class="headLineStyle headLineStyle1_skin31" v-if="componentStyle == 31">
        <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>
    <!-- 样式32 -->
    <div class="headLineStyle headLineStyle1_skin32" v-if="componentStyle == 32">
        <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>
    <!-- 样式33 -->
    <div class="headLineStyle headLineStyle1_skin33" v-if="componentStyle == 33">
        <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>
    <!-- 样式34 -->
    <div class="headLineStyle headLineStyle1_skin34" v-if="componentStyle == 34">
        <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>
    <!-- 样式35 -->
    <div class="headLineStyle headLineStyle1_skin35" v-if="componentStyle == 35">
        <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>
    <!-- 样式36 -->
    <div class="headLineStyle headLineStyle1_skin36" v-if="componentStyle == 36">
        <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>
    <!-- 样式37 -->
    <div class="headLineStyle headLineStyle1_skin37" v-if="componentStyle == 37">
        <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>
    <!-- 样式38 -->
    <div class="headLineStyle headLineStyle1_skin38" v-if="componentStyle == 38">
        <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>
    <!-- 样式39 -->
    <div class="headLineStyle headLineStyle1_skin39" v-if="componentStyle == 39">
        <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>
    <!-- 样式40 -->
    <div class="headLineStyle headLineStyle1_skin40" v-if="componentStyle == 40">
        <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>
    <!-- 样式41 -->
    <div class="headLineStyle headLineStyle1_skin41" v-if="componentStyle == 41">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027320372637.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>
    <!-- 样式42 -->
    <div class="headLineStyle headLineStyle1_skin42" v-if="componentStyle == 42">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027320372637.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>
    <!-- 样式43 -->
    <div class="headLineStyle headLineStyle1_skin43" v-if="componentStyle == 43">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027333360652.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>
    <!-- 样式44 -->
    <div class="headLineStyle headLineStyle1_skin44" v-if="componentStyle == 44">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027343341830.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>
    <!-- 样式45 -->
    <div class="headLineStyle headLineStyle1_skin45" v-if="componentStyle == 45">
        <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>
    <!-- 样式46 -->
    <div class="headLineStyle headLineStyle1_skin46" v-if="componentStyle == 46">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027670138761.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>
    <!-- 样式47 -->
    <div class="headLineStyle headLineStyle1_skin47" v-if="componentStyle == 47">
        <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027686415326.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>
    <!-- 样式48 -->
    <div class="headLineStyle headLineStyle1_skin48" v-if="componentStyle == 48">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/176602771556896.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>
    <!-- 样式49 -->
    <div class="headLineStyle headLineStyle1_skin49" v-if="componentStyle == 49">
        <div class="headLineTitle" v-if="templateData.length > 0">
            <img src="http://192.168.1.234:19000/pre/image/png/20251218/1766027730101829.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>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
const activeTab = ref(0);
//获得新闻数据
const props = defineProps({
    componentStyle: Number,//样式编号
    templateData: Array,//新闻数据
});

//组件样式1/2 start ---------------------------------------->
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_News1.value = props.templateData[1];
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 ---------------------------------------->


//组件样式26/27 start ---------------------------------------->
//样式1 - 一屏4条
const component_style26_News1 = ref({})
const component_style26_News1Array = ref([])
const component_style26_News2 = ref({})
const component_style26_News2Array = ref([])
const component_style26_News3 = ref({})
const component_style26_News3Array = ref([])

if (props.templateData.length > 0) {
    if (props.templateData.length > 0) {
        component_style26_News1.value = props.templateData[0]
        component_style26_News1Array.value = props.templateData.slice(1, 4)
    }
    if (props.templateData.length > 4) {
        component_style26_News2.value = props.templateData[5]
        component_style26_News2Array.value = props.templateData.slice(6, 8)
    }
    if (props.templateData.length > 8) {
        component_style26_News3.value = props.templateData[9]
        component_style26_News3Array.value = props.templateData.slice(9, 12)
    }
}

//样式2 - 一屏3条
const component_style27_News1 = ref({})
const component_style27_News1Array = ref([])
const component_style27_News2 = ref({})
const component_style27_News2Array = ref([])
const component_style27_News3 = ref({})
const component_style27_News3Array = ref([])

if (props.templateData.length > 0) {
    if (props.templateData.length > 0) {
        component_style27_News1.value = props.templateData[0]
        component_style27_News1Array.value = props.templateData.slice(1, 3)
    }
    if (props.templateData.length > 3) {
        component_style27_News2.value = props.templateData[3]
        component_style27_News2Array.value = props.templateData.slice(4, 6)
    }
    if (props.templateData.length > 6) {
        component_style27_News3.value = props.templateData[7]
        component_style27_News3Array.value = props.templateData.slice(7, 9)
    }
}

//样式3 - 一屏2条
const component_style28_News1 = ref({})
const component_style28_News1Array = ref([])
const component_style28_News2 = ref({})
const component_style28_News2Array = ref([])
const component_style28_News3 = ref({})
const component_style28_News3Array = ref([])

if (props.templateData.length > 0) {
    if (props.templateData.length > 0) {
        component_style28_News1.value = props.templateData[0]
        component_style28_News1Array.value = props.templateData.slice(1, 2)
    }
    if (props.templateData.length > 2) {
        component_style28_News2.value = props.templateData[2]
        component_style28_News2Array.value = props.templateData.slice(3, 4)
    }
    if (props.templateData.length > 4) {
        component_style28_News3.value = props.templateData[4]
        component_style28_News3Array.value = props.templateData.slice(5, 6)
    }
}

///组件样式29 - 一屏1条
const component_style29_News1 = ref({})
const component_style29_News2 = ref({})
const component_style29_News3 = ref({})

if (props.templateData.length > 0) {
    if (props.templateData.length > 0) {
        component_style29_News1.value = props.templateData[0]
    }
    if (props.templateData.length > 1) {
        component_style29_News2.value = props.templateData[1]
    }
    if (props.templateData.length > 2) {
        component_style29_News3.value = props.templateData[2]
    }
}

//滚动
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;
};
//组件样式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: #154079;
        }

        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;
            }
        }
    }
}

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

//皮肤2 样式1 start---------------------------------------->
.headLineStyle1_skin2 {
    border: 1px solid #E4E4E4;
    width: 1200px;
    height: 110px;
    box-sizing: border-box;
    padding: 0 15px 0 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 {
            margin-bottom: 8px;
            font-weight: bold;

            a {
                font-size: 30px;
                color: #154079;
            }
        }

        .headLineBottom {
            display: flex;
            align-items: center;
            justify-content: center;

            div {
                width: 32%;
                margin-right: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                a {
                    font-size: 18px;
                    color: #333333;
                }

                &: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: #154079;
            }

            &:hover {
                background: #154079;
            }
        }
    }
}

//皮肤2 样式1 start---------------------------------------->
//样式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: #154079;
        }
    }
}

//样式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: #154079;
        }
    }
}

//样式19
.headLineContent19 {
    padding: 20px 50px;
    margin-bottom: 0;

    .headLineTitle {
        width: 1100px;
        height: 70px;
        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: #154079;
        }
    }
}

//样式26 样式27
.headLineStyle1_skin26 {
    border: 1px solid #E4E4E4;
    width: 1200px;
    height: 110px;
    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;
        scrollbar-width: none;

        .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: #154079;
            margin-bottom: 6px;
            font-weight: bold;

            a {
                color: #154079;
            }
        }

        .headLineMiddle {
            font-size: 30px;
            color: #154079;
            font-weight: bold;

            a {
                color: #154079;
            }
        }

        .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;
                }

                a {
                    color: #333333;
                }
            }
        }
    }

    .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: #154079;
            }

            &:hover {
                background: #154079;
            }
        }
    }
}

//样式30
.headLineStyle1_skin30 {
    border: none;
}

//样式31
.headLineStyle1_skin31 {
    width: 1200px;
    height: 110px;
    border-top: 1px solid #154079;
    border-bottom: 1px solid #154079;

    .headLineTitle {
        padding-top: 10px;
        margin-bottom: 15px;
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}

//样式32
.headLineStyle1_skin32 {

    .headLineTitle {
        margin-bottom: 15px;
        padding-top: 10px;
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}

//样式33
.headLineStyle1_skin33 {
    width: 1200px;
    height: 110px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-top: 10px;
        margin-bottom: 15px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #333333;

            a {
                color: #333333;
            }
        }
    }
}

//样式34
.headLineStyle1_skin34 {
    .headLineTitle {
        color: #333333;
        margin-top: 25px;
        margin-bottom: 15px;
        padding-top: 10px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #333333;

            a {
                color: #333333;
            }
        }
    }
}

//样式35
.headLineStyle1_skin35 {
    width: 1200px;
    height: 110px;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #333333;

            a {
                color: #333333;
            }
        }
    }
}

//样式36
.headLineStyle1_skin36 {
    width: 1200px;
    height: 110px;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #333333;

            a {
                color: #333333;
            }
        }
    }
}

//样式37
.headLineStyle1_skin37 {
    width: 1200px;
    height: 110px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;
        margin-top: 10px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #999999;

            a {
                color: #999999;
            }
        }
    }
}

//样式38
.headLineStyle1_skin38 {
    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;
        padding-top: 10px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #999999;

            a {
                color: #999999;
            }
        }
    }
}

//样式39
.headLineStyle1_skin39 {
    width: 1200px;
    height: 110px;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;
        padding-top: 10px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #999999;

            a {
                color: #999999;
            }
        }
    }
}

//样式40
.headLineStyle1_skin40 {
    width: 1200px;
    height: 110px;
    border-bottom: 1px solid #333333;

    .headLineTitle {
        color: #333333;
        margin-bottom: 15px;
        padding-top: 10px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #999999;

            a {
                color: #999999;
            }
        }
    }
}

//样式41
.headLineStyle1_skin41 {
    width: 1196px;
    height: 110px;
    background-color: #f9fafb;
    border-top: 2px solid #154079;
    position: relative;
    margin-top: 5px;

    img {
        position: absolute;
        top: -6px;
        left: -10px;
        width: 100px;
        height: 47px;
    }

    .headLineTitle {
        margin-top: 12px;
        margin-bottom: 10px;
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}

//样式42
.headLineStyle1_skin42 {
    width: 1196px;
    height: 110px;
    background-color: #f9fafb;
    border-top: 2px solid #333333;
    position: relative;
    margin-top: 5px;

    img {
        position: absolute;
        top: -6px;
        left: -10px;
        width: 100px;
        height: 47px;
    }

    .headLineTitle {
        color: #333333;
        margin-bottom: 10px;
        margin-top: 12px;

        a {
            color: #333333;
        }
    }

    .headLineContent {
        div {
            color: #333333;

            a {
                color: #333333;
            }
        }
    }
}

// 样式43
.headLineStyle1_skin43 {
    width: 1196px;
    height: 110px;
    background-color: #fff;
    position: relative;
    margin-top: 5px;
    padding: 0 160px;

    img {
        position: absolute;
        top: 13px;
        left: 80px;
        width: 46px;
        height: 76px;
    }
}

// 样式44
.headLineStyle1_skin44 {
    width: 1196px;
    height: 110px;
    background-color: #fff;
    position: relative;
    margin-top: 5px;
    padding: 0 160px;

    img {
        position: absolute;
        top: 10px;
        left: 40px;
        width: 92px;
        height: 82px;
    }
}

// 样式45
.headLineStyle1_skin45 {
    width: 1196px;
    height: 110px;
    background-color: #fafafa;
    position: relative;
    margin-top: 5px;
    padding: 0 160px;

    .headLineTitle {
        a {
            margin-top: 5px;
        }
    }
}

//样式46
.headLineStyle1_skin46 {
    width: 1196px;
    height: 110px;
    position: relative;
    margin-top: 5px;

    img {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 60px;
        height: 29px;
    }

    .headLineTitle {
        color: #333333;
        margin-bottom: 10px;
        padding-top: 10px;
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}

//样式47
.headLineStyle1_skin47 {
    width: 1196px;
    height: 110px;
    position: relative;
    margin-top: 5px;
    padding: 0 145px;

    img {
        position: absolute;
        top: 15px;
        left: 40px;
        width: 64px;
        height: 71px;
    }

    .headLineTitle {
        color: #333333;
        margin-bottom: 10px;
        padding-top: 10px;
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}

//样式48
.headLineStyle1_skin48 {
    width: 1196px;
    height: 110px;
    margin-top: 5px;
    padding: 0 110px;

    .headLineTitle {
        position: relative;
        color: #333333;
        margin-bottom: 10px;
        padding-top: 10px;

        img {
            position: absolute;
            top: 24px;
            left: 15px;
            width: 31px;
            height: 19px;
        }
    }
}

//样式49
.headLineStyle1_skin49 {
    width: 1196px;
    height: 110px;
    margin-top: 5px;
    padding: 0 110px;

    .headLineTitle {
        position: relative;
        color: #333333;
        margin-bottom: 10px;
        padding-top: 10px;

        img {
            position: absolute;
            top: 7px;
            left: -40px;
            width: 54px;
            height: 54px;
        }
    }

    .headLineContent {
        div {
            color: #154079;

            a {
                color: #154079;
            }
        }
    }
}
</style>