zizhujianzhan_web/components/template/component/list/1200x1250/6/1.vue

<template>
    <div class="listNewsTitle">
        本网招聘
    </div>
    <ul class="list" v-if="componentStyle == 1">
        <div v-if="newsList.length > 0">
            <li class="content" v-for="(item, index) in newsList" :key="index">
                <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
                    <span class="title">{{ getTitleLength(item.con_title, 50) }}</span>
                    <span class="time">{{ item.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
        <div v-else-if="newsList.con_title">
            <li class="content">
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    <span class="title">{{ newsList.con_title }}</span>
                    <span class="time">{{ newsList.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
    </ul>
    <ul class="list" v-if="componentStyle == 2">
        <div v-if="newsList.length > 0">
            <li class="content style2" v-for="(item, index) in newsList" :key="index">
                <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
                    <span class="title">{{ getTitleLength(item.con_title, 50) }}</span>
                    <span class="time">{{ item.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
        <div v-else-if="newsList.con_title">
            <li class="content style2">
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    <span class="title">{{ newsList.con_title }}</span>
                    <span class="time">{{ newsList.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
    </ul>
    <ul class="list" v-if="componentStyle == 3">
        <div v-if="newsList.length > 0">
            <li class="content style3" v-for="(item, index) in newsList" :key="index">
                <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
                    <span class="title">{{ getTitleLength(item.con_title, 50) }}</span>
                    <span class="time">{{ item.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
        <div v-else-if="newsList.con_title">
            <li class="content style3">
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    <span class="title">{{ newsList.con_title }}</span>
                    <span class="time">{{ newsList.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
    </ul>
    <ul class="list" v-if="componentStyle == 4">
        <div v-if="newsList.length > 0">
            <li class="content style4" v-for="(item, index) in newsList" :key="index">
                <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
                    <span class="title">{{ getTitleLength(item.con_title, 50) }}</span>
                    <span class="time">{{ item.updated_at }}</span>
                </NuxtLink>
            </li>
        </div>
        <div v-else-if="newsList.con_title">
            <li class="content style4">
                <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
                    <span class="title">{{ newsList.con_title }}</span>
                    <span class="time">{{ newsList.updated_at }}</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 #154079;
    color: #154079;
    box-sizing: border-box;
    margin-top: 28px;
    margin-bottom: 30px;
}

//基本样式 end ---------------------------------------->
//样式1 start ---------------------------------------->
.list {
    margin-bottom: 30px;
    padding-bottom: 10px;
    margin-top: 10px;

    div {
        .content {
            width: 100%;
            height: 99px;
            border-bottom: 1px dashed #cbcbcb;
            margin-bottom: 20px;
            cursor: pointer;

            .title {
                display: block;
                height: 24px;
                line-height: 24px;
                color: #333333;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 25px;
            }

            .desc {
                height: 63px;
                line-height: 20px;
                color: #666666;
                font-size: 18px;
                font-family: "Abhaya Libre", serif;
                margin-bottom: 20px;
                overflow: hidden;
            }

            .time {
                font-family: "Abhaya Libre", serif;
                font-size: 18px;
                color: #666666;
            }
        }

        // 样式2
        .style2 {
            border-bottom: 1px solid #cbcbcb;
        }

        // 样式3
        .style3 {
            .title {
                font-weight: 400;
            }
        }

        // 样式4
        .style4 {
            border-bottom: 1px solid #cbcbcb;

            .title {
                font-weight: 400;
            }
        }
    }
}

//样式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>