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

<template>
    <!--皮肤1和皮肤2的 第二个样式是一样的-->
    <div class="BannerListBox BannerListBoxStyle1" v-if="componentStyle==1">
        <div v-for="item in component_News" :key="item.id">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!--皮肤1和皮肤2的 第二个样式是一样的-->
    <div class="BannerListBox BannerListBoxStyle2" v-if="componentStyle==2">
        <div v-for="item in component_News" :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 BannerListBoxStyle3" v-if="componentStyle == 3">
        <div v-for="item in component_News" :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 v-for="item in component_News" :key="item.id">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!-- 样式5 -->
    <div class="BannerListBox BannerListBoxStyle5" v-if="componentStyle == 5">
        <div v-for="item in component_News" :key="item.id">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <!-- 样式6 -->
    <div class="BannerListBox BannerListBoxStyle6" v-if="componentStyle == 6">
        <div class="listNewsTitle">
            <span>头条新闻</span>
        </div>
        <div v-for="item in component_News_1" :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,9);
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.BannerListBox {
    div {
        cursor: pointer;
        font-size:18px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height:26px;
        line-height: 26px;
        margin-bottom: 16px;
        a {
            font-size:18px;
            color: #333;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
//基本样式 end ---------------------------------------->
//样式1 start ---------------------------------------->
.BannerListBoxStyle1 {
    div {
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height:26px;
        line-height: 26px;
        margin-bottom: 16px;
        a {
            font-size:18px;
            color: #333;
        }
        &:nth-child(1),&:nth-child(6){
            a {
                color: #A91B33;
                font-weight: bold;
            }
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
//样式1 end ---------------------------------------->
//样式2 start ---------------------------------------->
.BannerListBoxStyle2 {
    div {
        a {
            color: #333;
        }
        &:nth-child(1),&:nth-child(6){
            a {
                color: #333333;
                font-weight: bold;
            } 
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
//样式2 end ---------------------------------------->
//样式3
.BannerListBoxStyle3 {
    div {
        a {
            color: #333;
        }

        &:nth-child(1){
            a {
                color: #A91B33;
                font-weight: bold;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}
//样式4
.BannerListBoxStyle4 {
    div {
        a {
            color: #333;
        }

        &:nth-child(1){
            a {
                color: #333333;
                font-weight: bold;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}
//样式5
.BannerListBoxStyle5 {
    div{
        a {
            color: #333;
        }
    }
}
//样式6
.BannerListBoxStyle6 {
    div{
        margin-bottom: 14px;
    }
    .listNewsTitle {
        font-size: 22px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e4e4e4;
        color: #A91B33;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding-bottom: 45px;
        span {
            color: #A91B33;
            height: 30px;
            line-height: 30px;
            border-left: 3px solid #A91B33;
            padding-left: 12px;
            font-weight: bold;
        }
    }
}
</style>