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

<template>
    <div>
        <div class="headLineStyle1">
            <div class="headLineTitle">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
                <NuxtLink 
                    :href="getLinkPathDetail(templateData[0])" 
                    :title="templateData[0].title"
                    :target="templateData[0].islink == 1 ? '_blank' : '_self'">
                    <div class="left_content">
                        {{ templateData[0].title }}
                    </div>
                </NuxtLink>
            </div>
            <div class="headLineContent">
                <NuxtLink 
                    :href="getLinkPathDetail(templateData[0])" 
                    :title="templateData[0].title"
                    :target="templateData[0].islink == 1 ? '_blank' : '_self'">
                    <div class="left_content">
                        {{ templateData[0].title }}
                    </div>
                </NuxtLink>
            </div>
        </div>
        <!-- <div class="headLineStyle1_skin2" v-if="this.$store.state.template.editWebsiteClass==2">
            <div class="headTip">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750901450165042.jpg">
            </div>
            <div class="headLineContentBox" ref="contentBox">
                <div class="headLineSlider" :style="sliderStyle">
                    <div class="headLineTitleBox">
                        <div class="headLineTop">
                            深入推进周边命运共同体建设 以人工智能引领科研范式变革
                        </div>
                        <div class="headLineBottom">
                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
                            <div>抢抓人工智能发展的历史性机遇</div>
                        </div>
                    </div>
                    <div class="headLineTitleBox">
                        <div class="headLineTop">
                            民航局：禁止旅客携带无3C标识及被召回的充电宝乘坐境内航班
                        </div>
                        <div class="headLineBottom">
                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
                            <div>抢抓人工智能发展的历史性机遇</div>
                        </div>
                    </div>
                    <div class="headLineTitleBox">
                        <div class="headLineTop">
                            吴奇隆刘诗诗一家三口同框 共同带孩子回家破婚变传闻
                        </div>
                        <div class="headLineBottom">
                            <div>深刻理解新形势下中国周边工作的理念与行动</div>
                            <div>构建周边命运共同体 携手开创亚洲新未来</div>
                            <div>抢抓人工智能发展的历史性机遇</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> -->
    </div>
</template>

<script setup>
//引入vue
import { ref,onMounted } from 'vue';
//获得新闻数据
const props = defineProps({
    templateData:Array,//新闻数据
});


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

<style lang="less">
.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;
        font-size: 30px;
        font-weight: bold;
        color: #004564;
        margin-bottom: 10px;
        img {
            margin-right: 20px;
        }
        a {
            color: #004564; 
        }
    }
    .headLineContent{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color:#333333;
        div {
            margin-right: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
.headLineStyle1_skin2 {
    border:1px solid #E4E4E4;
    width: 1200px;
    height: 140px;
    box-sizing: border-box;
    padding:32px 15px 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .headLineContentBox {
        width: 1000px;
        height: 70px;
        overflow: hidden;
        position: relative;
        .headLineSlider {
            display: flex;
            flex-direction: column; // 改为垂直方向
            width: 100%;
            height: 210px; // 3个titleBox，每个70px高
        }
    }
    .headLineTitleBox {
        text-align: center;
        height: 70px; // 明确设置高度
        width: 100%;
        margin-bottom: 30px;
        flex-shrink: 0; // 防止收缩
        display: flex;
        flex-direction: column;
        justify-content: center;
        .headLineTop {
            font-size: 30px;
            color:#A91B33;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .headLineBottom {
            display: flex;
            align-items: center;
            justify-content: center;
            div {
                width: 32%;
                margin-right: 30px;
                font-size: 18px;
                color:#333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
    .headLineIcon {
        div {
            width: 10px;
            height: 10px;
            background: #EDEDED;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.3s ease;
            &:last-child {
                margin-bottom: 0;
            }
            &.active {
                background: #A91B33;
            }
            &:hover {
                background: #A91B33;
            }
        }
    }
}
</style>