zizhujianzhan_web/components/template/component/list/1200x1220/1.vue

<template>
    <div class="listNewsTitle" v-if="skinId==1">
        本网招聘
    </div>
    <ul class="list">
        <div class="listNewsTitle_skin2" v-if="skinId==2">
            <span>本网招聘</span>
        </div>
        <li v-for="(item, index) in newsList" :key="index">
            <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
                {{getTitleLength(item.con_title,50)}}
                <span>{{ getTime(item.updated_at,'month',1) }}</span>
            </NuxtLink>
        </li>
    </ul>
</template>

<script setup>
const props = defineProps({
    skinId: Number,//皮肤id
    newsList: Array,//模板数据
});
</script>

<style lang="less" scoped>
//样式1
.listNewsTitle {
    font-size: 22px;
    font-weight: bold;
    height: 44px;
    border-bottom: 2px solid #004564;
    color: #004564;
    box-sizing: border-box;
    margin-top: 28px;
    margin-bottom: 30px;
}
//样式2
.listNewsTitle_skin2 {
    font-size: 22px;
    font-weight: bold;
    height: 44px;
    border-bottom: 2px solid #A91B33;
    color: #A91B33;
    box-sizing: border-box;
    margin-top: 28px;
    margin-bottom: 30px;
    span {
        border-left: 3px solid #A91B33;
        padding-left: 12px;
        display: inline-block;
        height: 25px;
        line-height: 25px;
    }
}
//列表
.list {
    margin-bottom: 30px;
    padding-bottom: 10px;
    margin-top: 10px;
    li {
        width: 100%;
        height: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 60px;
        &:nth-child(1),&:nth-child(6),&:nth-child(11),&:nth-child(16) {
            font-size: 18px;
            font-weight: bold;
        }
        &:nth-child(5),&:nth-child(10),&:nth-child(15),&:nth-child(20) {
            border-bottom: 1px solid #D9D9D9;
            margin-bottom: 30px;
        }
        &:nth-child(20){
            margin-bottom: 0;
        }
        a {
            width: 100%;
            display: block;
            height: 26px;
            cursor: pointer;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 18px;
            color: #333333;
            line-height: 26px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            span {
                float: right;
                display: inline-block;
                width: 60px;
                height: 24px;
                line-height: 24px;
            }
        }
    }
}
</style>