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

<template>
    <div class="headLineStyle1" v-if="style=='1'">
        <div class="headLineTitle">
            <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
            <NuxtLink 
                :href="getLinkPathDetail(component_style1_News1)" 
                :title="component_style1_News1.title"
                :target="component_style1_News1.islink == 1 ? '_blank' : '_self'"
            >
                {{ component_style1_News1.title }}
            </NuxtLink>
        </div>
        <div class="headLineContent">
            <div v-for="item in component_style1_News2Array" :key="item.id">
                <NuxtLink 
                    :href="getLinkPathDetail(item)" 
                    :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'"
                >
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
    <div class="headLineStyle1_skin2" v-if="style=='2'">
        <div class="headTip">
            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
        </div>
        <div class="headLineContentBox" ref="contentBox">
            <div class="headLineSlider" :style="sliderStyle" v-if="templateData.length > 0">
                <div class="headLineTitleBox">
                    <div class="headLineTop">
                        <NuxtLink 
                            :href="getLinkPathDetail(component_style2_News1)" 
                            :title="component_style2_News1.title"
                            :target="component_style2_News1.islink == 1 ? '_blank' : '_self'"
                        >
                            {{ component_style2_News1.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style2_News1Array" :key="item.id">
                            <NuxtLink 
                                :href="getLinkPathDetail(item)" 
                                :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'"
                            >
                                {{ item.title }}
                            </NuxtLink>
                        </div>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 4">
                    <div class="headLineTop">
                        <NuxtLink 
                            :href="getLinkPathDetail(component_style2_News2)" 
                            :title="component_style2_News2.title"
                            :target="component_style2_News2.islink == 1 ? '_blank' : '_self'"
                        >
                            {{ component_style2_News2.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style2_News2Array" :key="item.id">
                            <NuxtLink 
                                :href="getLinkPathDetail(item)" 
                                :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'"
                            >
                                {{ item.title }}
                            </NuxtLink>
                        </div>
                    </div>
                </div>
                <div class="headLineTitleBox" v-if="templateData.length > 8">
                    <div class="headLineTop">
                        <NuxtLink 
                            :href="getLinkPathDetail(component_style2_News3)" 
                            :title="component_style2_News3.title"
                            :target="component_style2_News3.islink == 1 ? '_blank' : '_self'"
                        >
                            {{ component_style2_News3.title }}
                        </NuxtLink>
                    </div>
                    <div class="headLineBottom">
                        <div v-for="item in component_style2_News3Array" :key="item.id">
                            <NuxtLink 
                                :href="getLinkPathDetail(item)" 
                                :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'"
                            >
                                {{ item.title }}
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="headLineIcon">
            <div @mouseover="setActive(0)" :class="{active: activeIndex === 0}" v-if="templateData.length > 0"></div>
            <div @mouseover="setActive(1)" :class="{active: activeIndex === 1}" v-if="templateData.length > 4"></div>
            <div @mouseover="setActive(2)" :class="{active: activeIndex === 2}" v-if="templateData.length > 8"></div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import {ref} from 'vue';
//获得新闻数据
const props = defineProps({
    style:String,//组件样式
    templateData:Array,//新闻数据
});
//组件样式1 start ---------------------------------------->
const component_style1_News1 = ref({});
const component_style1_News2Array = ref([]);
component_style1_News1.value = props.templateData[0];
component_style1_News2Array.value = props.templateData.slice(1,4); 
//组件样式1 end ---------------------------------------->

//组件样式2 start ---------------------------------------->
const component_style2_News1 = ref({})
const component_style2_News1Array = ref([])
const component_style2_News2 = ref({})
const component_style2_News2Array = ref([])
const component_style2_News3 = ref({})
const component_style2_News3Array = ref([])

if(props.templateData.length>0){
    if(props.templateData.length>0){
        component_style2_News1.value = props.templateData[0]
        component_style2_News1Array.value = props.templateData.slice(1,4)
    }
    if(props.templateData.length>4){
        component_style2_News2.value = props.templateData[4]
        component_style2_News2Array.value = props.templateData.slice(5,8)
    }
    if(props.templateData.length>8){
        component_style2_News3.value = props.templateData[8]
        component_style2_News3Array.value = props.templateData.slice(9,12)
    }
}

const activeIndex = ref(0);
const sliderStyle = computed(() => {
    // 每个headLineTitleBox的高度是70px + 间距30px = 100px
    const translateY = -(activeIndex.value * 100);
    return {
        transform: `translateY(${translateY}px)`,
        transition: 'transform 0.3s ease-in-out'
    };
});
const setActive = (index) => {
    activeIndex.value = index;
};
//组件样式2 end ---------------------------------------->
</script>

<style lang="less">
//皮肤1 样式1 start---------------------------------------->
.headLineStyle1 {
    width: 1200px;
    height: 140px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px 100px 30px 100px;
    .headLineTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        a {
            font-weight: bold;
            font-size: 30px;
            color: #004564;
        }
        img {
            margin-right: 20px;
        }
    }
    .headLineContent{
        display: flex;
        align-items: center;
        justify-content: center;
        div {
            margin-right: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            a {
                font-size: 18px;
                color:#333333;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
//皮肤1 样式1 end---------------------------------------->

//皮肤2 样式1 start---------------------------------------->
.headLineStyle1_skin2 {
    border:1px solid #E4E4E4;
    width: 1200px;
    height: 140px;
    box-sizing: border-box;
    padding:32px 15px 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .headLineContentBox {
        width: 1000px;
        height: 70px;
        overflow: hidden;
        position: relative;
        .headLineSlider {
            display: flex;
            flex-direction: column; // 改为垂直方向
            width: 100%;
            height: 210px; // 3个titleBox，每个70px高
        }
    }
    .headLineTitleBox {
        text-align: center;
        height: 70px; // 明确设置高度
        width: 100%;
        margin-bottom: 30px;
        flex-shrink: 0; // 防止收缩
        display: flex;
        flex-direction: column;
        justify-content: center;
        .headLineTop {
            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---------------------------------------->
</style>