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

<template>
    <div class="listNewsTitle">
        本网招聘
    </div>
    <ul class="list" v-if="componentStyle==1">
        <div v-if="newsList.length>0">
            <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>
        </div>
        <div v-else-if="newsList.con_title">
            <li>
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    {{newsList.con_title}}
                    <span>{{ getTime(newsList.updated_at,'month',1) }}</span>
                </NuxtLink>
            </li>
        </div>
    </ul>
    <ul class="list listStyle2" v-if="componentStyle==2">
        <div v-if="newsList.length>0">
            <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>
        </div>
        <div v-else-if="newsList.con_title">
            <li>
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    {{newsList.con_title}}
                    <span>{{ getTime(newsList.updated_at,'month',1) }}</span>
                </NuxtLink>
            </li>
        </div>
    </ul>
</template>

<script setup>
const props = defineProps({
    newsList: Array,//模板数据
    componentStyle: Number//样式编号
});
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.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;
}
//基本样式 end ---------------------------------------->
//样式1 start ---------------------------------------->
.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;
            }
        }
    }
}
//样式1 end ---------------------------------------->
//样式2 start ---------------------------------------->
.listStyle2 {
    li {
        &:nth-child(1),&:nth-child(6),&:nth-child(11),&:nth-child(16) {
            font-size: 18px;
            font-weight: normal;
        } 
    }
}
//样式2 end ---------------------------------------->
</style>