zizhujianzhan_web/components/template/component/list/900x1050/2.vue

<template>
    <div class="listNewsBox">
        <div v-for="item in listData">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'"
            >
                {{getTitleLength(item.title,45)}}
                <span>{{getTime(item.updated_at, 'month', 1)}}</span>
            </NuxtLink>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.listNewsBox {
    div{
        height: 24px;
        line-height: 24px;
        color:#333333;
        font-size:18px;
        margin-bottom: 20px;
        a {
            color:#333333;
        }
        &:nth-child(5n) {
            height: 54px;
            //padding-bottom:30px;
            border-bottom: 1px solid #D9D9D9;
        }
        &:nth-child(5n+1) {
            //font-weight: bold;
            margin-top: 30px;
        }
        &:first-child {
            margin-top: 0;
        }
        span {
            float: right;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
//基本样式 end ---------------------------------------->
</style>