zizhujianzhan_web/components/template/component/banner/list/450x405/6.vue

<template>
    <!-- 样式1 -->
    <div class="BannerListBox BannerListBoxStyle1" v-if="componentStyle == 1">
        <div class="listNewsText" v-for="item in component_News.slice(0, 6)" :key="item.id">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!-- 样式2 -->
    <div class="BannerListBox BannerListBoxStyle2" v-if="componentStyle == 2">
        <div class="listNewsText" v-for="item in component_News.slice(0, 6)" :key="item.id">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!-- 样式3 -->
    <div class="BannerListBox" v-if="componentStyle == 3">
        <div class="listNewsText" v-for="item in component_News.slice(0, 6)" :key="item.id">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!-- 样式4 -->
    <div class="BannerListBox BannerListBoxStyle4" v-if="componentStyle == 4">
        <div class="listNewsText" v-for="item in component_News.slice(0, 6)" :key="item.id">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
//基本样式
.BannerListBox {
    div {
        position: relative;
        cursor: pointer;
        color: #333;

        a {
            color: #333;
        }

        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
            height: 52px;
            line-height: 24px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        &:nth-child(3) {
            margin-bottom: 25px;
        }

        &:nth-child(4),
        &:nth-child(5),
        &:nth-child(6) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #d7daec;
            margin-bottom: 26px;
        }

        &:nth-child(6) {
            margin-bottom: 0;
        }
    }
}

//样式2
.BannerListBoxStyle2,
.BannerListBoxStyle4 {
    div {

        &:nth-child(4),
        &:nth-child(5),
        &:nth-child(6) {
            border-bottom: 1px solid #d7daec;
        }
    }
}
</style>