zizhujianzhan_web/components/template/component/list/900x1400/1.vue

<template>
    <div>
        <div v-if="componentStyle == 1">
            <div class="list_left_li_1" v-for="item in listData.slice(0, 10)">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" class="list_left_li_a"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <div class="list_left_li_head">
                        <div class="list_left_li_time"> {{ item.updated_at }}</div>
                        <h4 class="list_left_li_h4">{{ item.title }}</h4>
                    </div>
                    <div class="list_left_li_dot3"> {{ item.introduce }}</div>
                </NuxtLink>
            </div>
        </div>
        <div v-if="componentStyle == 2">
            <div class="list_left_li_2" v-for="item in listData.slice(0, 10)">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" class="list_left_li_a"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <div class="list_left_li_head">
                        <div class="list_left_li_time"> {{ item.updated_at }}</div>
                        <h4 class="list_left_li_h4">{{ item.title }}</h4>
                    </div>
                    <div class="list_left_li_dot3"> {{ item.introduce }}</div>
                </NuxtLink>
            </div>
        </div>
        <div v-if="componentStyle == 3">
            <div class="list_left_li_3" v-for="item in listData.slice(0, 10)">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" class="list_left_li_a"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <div class="list_left_li_head">
                        <div class="list_left_li_time"> {{ item.updated_at }}</div>
                        <h4 class="list_left_li_h4">{{ item.title }}</h4>
                    </div>
                    <div class="list_left_li_dot3"> {{ item.introduce }}</div>
                </NuxtLink>
            </div>
        </div>
        <div v-if="componentStyle == 4">
            <div class="list_left_li_4" v-for="item in listData.slice(0, 10)">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" class="list_left_li_a"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <div class="list_left_li_head">
                        <div class="list_left_li_time"> {{ item.updated_at }}</div>
                        <h4 class="list_left_li_h4">{{ item.title }}</h4>
                    </div>
                    <div class="list_left_li_dot3"> {{ item.introduce }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
.list_left_li_1 {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    height: 140px;
    border: solid 1px rgba(0, 0, 0, 0);
    border-bottom: dashed 1px #999;

    .list_left_li_a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .list_left_li_head {
        height: 24px;
        margin-top: 20px;
    }

    .list_left_li_time {
        float: right;
        height: 24px;
        line-height: 24px;
        color: #999;
        font-size: 18px;
        margin-left: 20px;
    }

    .list_left_li_h4 {
        height: 24px;
        display: block;
        line-height: 24px;
        color: #333;
        font-size: 18px;
        position: relative;
        font-weight: bold;
        text-indent: 16px;
        margin: 0;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list_left_li_h4::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0px;
        width: 6px;
        height: 6px;
        background: #F2F2F2;
    }

    .list_left_li_dot3 {
        height: 63px;
        line-height: 21px;
        color: #999;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        margin-top: 15px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    &:nth-child(1) {
        height: 120px;
    }

    &:nth-child(1) .list_left_li_head {
        margin-top: 0px;
    }
}

.list_left_li_2 {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    height: 140px;
    border: solid 1px rgba(0, 0, 0, 0);
    border-bottom: solid 1px #999;

    .list_left_li_a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .list_left_li_head {
        height: 24px;
        margin-top: 20px;
    }

    .list_left_li_time {
        float: right;
        height: 24px;
        line-height: 24px;
        color: #999;
        font-size: 18px;
        margin-left: 20px;
    }

    .list_left_li_h4 {
        height: 24px;
        display: block;
        line-height: 24px;
        color: #333;
        font-size: 18px;
        position: relative;
        font-weight: bold;
        text-indent: 16px;
        margin: 0;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list_left_li_h4::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0px;
        width: 6px;
        height: 6px;
        background: #F2F2F2;
    }

    .list_left_li_dot3 {
        height: 63px;
        line-height: 21px;
        color: #999;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        margin-top: 15px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    &:nth-child(1) {
        height: 120px;
    }

    &:nth-child(1) .list_left_li_head {
        margin-top: 0px;
    }
}

.list_left_li_3 {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    height: 140px;
    border: solid 1px rgba(0, 0, 0, 0);
    border-bottom: dashed 1px #999;

    .list_left_li_a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .list_left_li_head {
        height: 24px;
        margin-top: 20px;
    }

    .list_left_li_time {
        float: right;
        height: 24px;
        line-height: 24px;
        color: #999;
        font-size: 18px;
        margin-left: 20px;
    }

    .list_left_li_h4 {
        height: 24px;
        display: block;
        line-height: 24px;
        color: #333;
        font-size: 18px;
        position: relative;
        font-weight: normal;
        text-indent: 16px;
        margin: 0;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list_left_li_h4::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0px;
        width: 6px;
        height: 6px;
        background: #F2F2F2;
    }

    .list_left_li_dot3 {
        height: 63px;
        line-height: 21px;
        color: #999;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        margin-top: 15px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    &:nth-child(1) {
        height: 120px;
    }

    &:nth-child(1) .list_left_li_head {
        margin-top: 0px;
    }
}

.list_left_li_4 {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    height: 140px;
    border: solid 1px rgba(0, 0, 0, 0);
    border-bottom: solid 1px #999;

    .list_left_li_a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .list_left_li_head {
        height: 24px;
        margin-top: 20px;
    }

    .list_left_li_time {
        float: right;
        height: 24px;
        line-height: 24px;
        color: #999;
        font-size: 18px;
        margin-left: 20px;
    }

    .list_left_li_h4 {
        height: 24px;
        display: block;
        line-height: 24px;
        color: #333;
        font-size: 18px;
        position: relative;
        font-weight: normal;
        text-indent: 16px;
        margin: 0;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list_left_li_h4::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0px;
        width: 6px;
        height: 6px;
        background: #F2F2F2;
    }

    .list_left_li_dot3 {
        height: 63px;
        line-height: 21px;
        color: #999;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        margin-top: 15px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    &:nth-child(1) {
        height: 120px;
    }

    &:nth-child(1) .list_left_li_head {
        margin-top: 0px;
    }
}
</style>