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

<template>
    <!-- 样式1 -->
    <div class="BannerListBox BannerListBoxStyle1" v-if="componentStyle == 1">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式2 -->
    <div class="BannerListBox BannerListBoxStyle2" v-if="componentStyle == 2">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式3 -->
    <div class="BannerListBox BannerListBoxStyle3" v-if="componentStyle == 3">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式4 -->
    <div class="BannerListBox BannerListBoxStyle4" v-if="componentStyle == 4">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式5 -->
    <div class="BannerListBox BannerListBoxStyle5" v-if="componentStyle == 5">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </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.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式7 -->
    <div class="BannerListBox BannerListBoxStyle7" v-if="componentStyle == 7">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式8 -->
    <div class="BannerListBox BannerListBoxStyle8" v-if="componentStyle == 8">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式9 -->
    <div class="BannerListBox BannerListBoxStyle9" v-if="componentStyle == 9">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式10 -->
    <div class="BannerListBox BannerListBoxStyle10" v-if="componentStyle == 10">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式11 -->
    <div class="BannerListBox BannerListBoxStyle11" v-if="componentStyle == 11">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </div>
    </div>
    <!-- 样式12 -->
    <div class="BannerListBox BannerListBoxStyle12" v-if="componentStyle == 12">
        <div class="listNewsTitle">
            <span>新闻头条</span>
        </div>
        <div v-for="item in component_News.slice(0, 7)" :key="item.id" class="listNewsText">
            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'">
                <span class="text">{{ item.title }}</span>
                <span class="time">{{ getTime(item.updated_at,'month',1) }}</span>
            </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>
//基本样式
.BannerListBox {
    div {
        cursor: pointer;
        font-size: 18px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 26px;
        line-height: 26px;
        margin-bottom: 27px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .listNewsTitle {
        font-size: 22px;
        font-weight: bold;
        height: 45px;
        line-height: 43px;
        border-bottom: 1px solid #999999;
        color: #3848a0;
        margin-bottom: 17px;
        box-sizing: border-box;

        span {
            display: inline-block;
            width: 108px;
            color: #3848a0;
            height: 30px;
            line-height: 30px;
            // border-bottom: 6px solid #3848a0;
            font-weight: bold;
            /* 关键：设置背景图为线性渐变 */
            background-image: linear-gradient(to right, #3848a0, #ffffff);
            /* 控制背景图只显示在下边框位置 */
            background-size: 100% 6px;
            /* 宽度100%，高度3px（边框厚度） */
            background-repeat: no-repeat;
            background-position: bottom;
            /* 定位到底部 */

            /* 可选：为了避免内容紧贴边框，添加内边距 */
            padding-bottom: 6px;
        }
    }

    .listNewsText {
        position: relative;

        a {
            color: #333;

            .text {
                display: inline-block;
                width: 356px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .time {
                position: absolute;
                top: 0;
                right: 0;
                display: inline-block;
                width: 51px;
                color: #999999;
            }
        }
    }
}

//样式1
.BannerListBoxStyle1 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式2
.BannerListBoxStyle2 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式5
.BannerListBoxStyle5 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式6
.BannerListBoxStyle6 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式7
.BannerListBoxStyle7 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }

    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式8
.BannerListBoxStyle8 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }

    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式9
.BannerListBoxStyle9 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
}

//样式10
.BannerListBoxStyle10 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
}

//样式11
.BannerListBoxStyle11 {
     .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式12
.BannerListBoxStyle12 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}
</style>