zizhujianzhan_web/components/template/component/list/790x500/1_1.vue

<template>
    <div class="box_1">
        <h4 class="ul_head">
            <span class="ul_head_only">
                <NuxtLink v-if="titleLink.cid" :href="getLinkPath(titleLink)" :title="titleLink.alias">
                    {{ titleLink.alias }}
                </NuxtLink>
            </span>
        </h4>
    </div>
    <div>
        <!--样式1-->
        <div class="box_1" v-if="componentStyle == 1">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="img_ul">
                        <div class="img_ul_li" v-for="item in component_style1_News1Array_img_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <img class="" :src="item.src" title="" alt="">
                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <div class="ul_li_time"> {{ item.updated_at }} </div>
                                <div class="ul_li_dot1"> {{ item.title }} </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--样式2-->
        <div class="box_2" v-if="componentStyle == 2">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <div class="ul_li_time"> {{ item.updated_at }} </div>
                                <div class="ul_li_dot1"> {{ item.title }} </div>
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="img_ul">
                        <div class="img_ul_li" v-for="item in component_style1_News1Array_img_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <img class="" :src="item.src" title="" alt="">
                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--样式3-->
        <div class="box_3" v-if="componentStyle == 3">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="img_ul">
                        <div class="img_ul_li" v-for="item in component_style1_News1Array_img_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <img class="" :src="item.src" title="" alt="">
                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <div class="ul_li_time"> {{ item.updated_at }} </div>
                                <div class="ul_li_dot1"> {{ item.title }} </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--样式4-->
        <div class="box_4" v-if="componentStyle == 4">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <div class="ul_li_time"> {{ item.updated_at }} </div>
                                <div class="ul_li_dot1"> {{ item.title }} </div>
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="img_ul">
                        <div class="img_ul_li" v-for="item in component_style1_News1Array_img_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <img class="" :src="item.src" title="" alt="">
                                <span class="img_ul_li_dot1"> {{ item.title }} </span>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--样式5-->
        <div class="box_5" v-if="componentStyle == 5">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                <div class="ul_li_time"> {{ item.updated_at }} </div>
                                <div class="ul_li_dot1"> {{ item.title }} </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--样式6-->
        <div class="box_6" v-if="componentStyle == 6">
            <div class="box_1_in">
                <div class="box_1_card">
                    <div class="ul_box">
                        <div class="ul_box">
                        <div class="ul_li" v-for="item in component_style1_News1Array_text_1">
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                                    <div class="ul_li_time"> {{ item.updated_at }} </div>
                                    <div class="ul_li_dot1"> {{ item.title }} </div>
                                </NuxtLink>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    titleLink: Object,//板块1名称
    templateData: Array,//新闻数据
    componentStyle: Number,//样式编号
});
//定义tab切换
const component_style1_News1Array_img_1 = ref([]);
const component_style1_News1Array_text_1 = ref([]);
component_style1_News1Array_img_1.value = props.templateData.imgnum.slice(0, 3);
component_style1_News1Array_text_1.value = props.templateData.textnum.slice(0, 10);
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.tabsNewsBox {
    display: none;
}
.box_1 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
        a {
            display: block;
            text-align: center;
            width: 100%;
            color: #333;
        }
    }
    .ul_head span {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        display: block;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
        a {
            color: #A72213;
        }
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .img_ul {
        width: 185px;
        float: left;
    }
    .img_ul_li {
        width: 100%;
        height: 130px;
        position: relative;
        margin-bottom: 20px;
    }
    .img_ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .img_ul_li img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .img_ul_li_dot1 {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        box-sizing: border-box;
        padding: 0px 21px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_box {
        width: 585px;
        float: right;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li:nth-of-type(5n-4) * {
        font-weight: bold;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
.box_2 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .ul_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .img_ul {
        width: 185px;
        float: right;
    }
    .img_ul_li {
        width: 100%;
        height: 130px;
        position: relative;
        margin-bottom: 20px;
    }
    .img_ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .img_ul_li img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .img_ul_li_dot1 {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        box-sizing: border-box;
        padding: 0px 21px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_box {
        width: 585px;
        float: left;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li:nth-of-type(5n-4) * {
        font-weight: bold;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
.box_3 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .ul_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .img_ul {
        width: 185px;
        float: left;
    }
    .img_ul_li {
        width: 100%;
        height: 130px;
        position: relative;
        margin-bottom: 20px;
    }
    .img_ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .img_ul_li img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .img_ul_li_dot1 {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        box-sizing: border-box;
        padding: 0px 21px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_box {
        width: 585px;
        float: right;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
.box_4 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .ul_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .img_ul {
        width: 185px;
        float: right;
    }
    .img_ul_li {
        width: 100%;
        height: 130px;
        position: relative;
        margin-bottom: 20px;
    }
    .img_ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .img_ul_li img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .img_ul_li_dot1 {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        box-sizing: border-box;
        padding: 0px 21px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_box {
        width: 585px;
        float: left;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
.box_5 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .ul_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .ul_box {
        width: 100%;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li:nth-of-type(5n-4) * {
        font-weight: bold;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
.box_6 {
    .ul_head {
        height: 47px;
        border-bottom: solid 1px #93969A;
        border-top: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .ul_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #333;
        font-size: 20px;
        margin-right: 30px;
    }
    .ul_head .ul_head_only {
        color: #A72213;
        border-bottom: solid 2px #A72213;
    }
    .box_1_card {
        overflow: hidden;
        margin-top: 19px;
    }
    .ul_box {
        width: 100%;
    }
    .ul_li {
        height: 21px;
        margin-bottom: 24px;
    }
    .ul_li_time {
        float: right;
        min-width: 47px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #999;
        margin-left: 44px;
    }
    .ul_li_dot1 {
        height: 21px;
        line-height: 21px;
        font-size: 16px;
        color: #333;
        position: relative;
        text-indent: 16px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ul_li:nth-last-of-type(1) {
        margin-bottom: 0px;
    }
    .ul_li_dot1::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #F2F2F2;
    }
}
//基本样式
.tabsNewsBox {
    .tabsNewsTitle {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        border-bottom: 1px solid #999999;
        height: 38px;
        div {
            height: 35px;
            width: 138px;
            line-height: 32px;
            font-size: 22px;
            font-weight: bold;
            color: #333333;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.activeTab {
                color: #3848A0;
                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762224944805589.png") bottom left no-repeat;
            }
        }
    }
    .tabsNewsContent {
        .textTop {
            display: flex;
            height: 100px;
            padding-left: 0;
            div {
                background: #fff;
                padding-left: 0;
                margin-top: 0;
            }
            .time {
                display: block;
                width: 100px;
                height: 100px;
                background: #eaf3ff;
                padding: 0 12px;
                div {
                    background-color: #eaf3ff;
                    display: block;
                }
                .day {
                    width: 100%;
                    height: 57px;
                    line-height: 57px;
                    font-size: 38px;
                    color: #3848A0;
                    text-align: center;
                    border-bottom: 1px solid #3848A0;
                }
                .month {
                    width: 100%;
                    height: 43px;
                    line-height: 43px;
                    font-size: 16px;
                    color: #3848A0;
                    text-align: center;
                }
            }
            .text {
                width: 615px;
                height: 100px;
                display: block;
                margin-right: 50px;
                .title {
                    width: 100%;
                    height: 24px;
                    line-height: 24px;
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom: 20px;
                }
                .content {
                    width: 100%;
                    max-height: 63px;
                    line-height: 20px;
                    font-size: 16px;
                    color: #999999;
                }
            }
        }
        div {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            height: 21px;
            line-height: 21px;
            color: #333333;
            cursor: pointer;
            span {
                color: #999999;
            }
        }
    }
    .style1,.style2 {
        div {
            padding-left: 16px;
            background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;
        }
    }
    .style3,.style4 {
        div {
            padding-left: 16px;
            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
        }
    }
    .dashed {
        border: dashed 1px #999999;
    }
    .style5,.style6 {
        div {
            padding-left: 16px;
            background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;
        }
    }
    .style7,.style8 {
        div {
            padding-left: 16px;
            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
        }
    }
}
</style>