zizhujianzhan_web/components/template/component/headLine/1200x140/2.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/1766046342186913.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/1766046342186913.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/1766046342186913.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/1766046342186913.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/1766046342186913.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/1766046342186913.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/1766046367616675.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/1766046367616675.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/1766046367616675.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/1766046367616675.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/1766046367616675.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/1766046367616675.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/176604638975835.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/1766046424308425.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/1766046424308425.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/1766046424308425.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/1766046424308425.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/1766046424308425.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/1766046424308425.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/176604644820176.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/176604644820176.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/176604644820176.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/176604644820176.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/176604644820176.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>
</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_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: #A91B33;
        }

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

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

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

//皮肤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: #A91B33;
        }
    }
}

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

//样式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: #A91B33;
        }
    }
}
//样式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:#A91B33;
            margin-bottom: 6px;
            font-weight: bold;
            a{
                color: #A91B33;
            }
        }
        .headLineMiddle {
            font-size: 30px;
            color:#A91B33;
            font-weight: bold;
            a{
                color: #A91B33;
            }
        }
        .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: #A91B33;
            }
            &:hover {
                background: #A91B33;
            }
        }
    }
}
//样式30
.headLineStyle1_skin30 {
    border:none;
}
</style>