zizhujianzhan_web/components/template/component/list/1200x430/7.vue

<template>
    <!--样式1-->
    <div class="box_1" v-if="componentStyle == 1">
        <h4 class="ul_head">
            <NuxtLink v-if="titleLink1.cid" :href="getLinkPath(titleLink1)" :title="titleLink1.alias">
                <span :class="{ ul_head_only: activeTab == 0 }" @mouseenter="activeTab = 0">{{ titleLink1.alias }}</span>
            </NuxtLink>
            <NuxtLink v-if="titleLink2.cid" :href="getLinkPath(titleLink2)" :title="titleLink2.alias">
                <span :class="{ ul_head_only: activeTab == 1 }" @mouseenter="activeTab = 1">{{ titleLink2.alias }}</span>
            </NuxtLink>
        </h4>
        <div class="card_out clearfix">
            <div class="card_box clearfix" v-if="activeTab == 0">
                <div class="img_ul clearfix">
                    <div v-for="item in component_style1_News1Array_img_1" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="ul_box clearfix">
                    <div v-for="item in component_style1_News1Array_text_1" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="card_box clearfix" v-if="activeTab == 1">
                <div class="img_ul clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="ul_box clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--样式2-->
    <div class="box_2" v-if="componentStyle == 2">
        <h4 class="ul_head">
            <NuxtLink v-if="titleLink1.cid" :href="getLinkPath(titleLink1)" :title="titleLink1.alias">
                <span :class="{ ul_head_only: activeTab == 0 }" @mouseenter="activeTab = 0">{{ titleLink1.alias }}</span>
            </NuxtLink>
            <NuxtLink v-if="titleLink2.cid" :href="getLinkPath(titleLink2)" :title="titleLink2.alias">
                <span :class="{ ul_head_only: activeTab == 1 }" @mouseenter="activeTab = 1">{{ titleLink2.alias }}</span>
            </NuxtLink>
        </h4>
        <div class="card_out clearfix">
            <div class="card_box clearfix" v-if="activeTab == 0">
                <div class="ul_box clearfix">
                    <div v-for="item in component_style1_News1Array_text_1" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="img_ul clearfix">
                    <div v-for="item in component_style1_News1Array_img_1" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="card_box clearfix" v-if="activeTab == 1">
                <div class="ul_box clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="img_ul clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" 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">
        <h4 class="ul_head">
            <NuxtLink v-if="titleLink1.cid" :href="getLinkPath(titleLink1)" :title="titleLink1.alias">
                <span :class="{ ul_head_only: activeTab == 0 }" @mouseenter="activeTab = 0">{{ titleLink1.alias }}</span>
            </NuxtLink>
            <NuxtLink v-if="titleLink2.cid" :href="getLinkPath(titleLink2)" :title="titleLink2.alias">
                <span :class="{ ul_head_only: activeTab == 1 }" @mouseenter="activeTab = 1">{{ titleLink2.alias }}</span>
            </NuxtLink>
        </h4>
        <div class="card_out clearfix">
            <div class="card_box clearfix" v-if="activeTab == 0">
                <div class="img_ul clearfix">
                    <div v-for="item in component_style1_News1Array_img_1" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="ul_box clearfix">
                    <div v-for="item in component_style1_News1Array_text_1" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="card_box clearfix" v-if="activeTab == 1">
                <div class="img_ul clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="ul_box clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--样式4-->
    <div class="box_4" v-if="componentStyle == 4">
        <h4 class="ul_head">
            <NuxtLink v-if="titleLink1.cid" :href="getLinkPath(titleLink1)" :title="titleLink1.alias">
                <span :class="{ ul_head_only: activeTab == 0 }" @mouseenter="activeTab = 0">{{ titleLink1.alias }}</span>
            </NuxtLink>
            <NuxtLink v-if="titleLink2.cid" :href="getLinkPath(titleLink2)" :title="titleLink2.alias">
                <span :class="{ ul_head_only: activeTab == 1 }" @mouseenter="activeTab = 1">{{ titleLink2.alias }}</span>
            </NuxtLink>
        </h4>
        <div class="card_out clearfix">
            <div class="card_box clearfix" v-if="activeTab == 0">
                <div class="ul_box clearfix">
                    <div v-for="item in component_style1_News1Array_text_1" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="img_ul clearfix">
                    <div v-for="item in component_style1_News1Array_img_1" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
            <div class="card_box clearfix" v-if="activeTab == 1">
                <div class="ul_box clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <span>{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
                <div class="img_ul clearfix">
                    <div v-for="item in component_style2_News1Array_img_2" class="img_ul_li">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'" class="img_ul_li_a">
                            <img class="img_ul_li_img" :src="item.imgurl" title="" alt="">
                            <span class="img_ul_li_dot1">{{ item.title }}</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    titleLink1: Object,//板块1名称
    titleLink2: Object,//板块2名称
    templateData: Array,//新闻数据
    templateData1: Array,//新闻数据
    componentStyle: Number,//样式编号
});
//定义tab切换
const activeTab = ref(0);
// 新闻数据1
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, 4);
component_style1_News1Array_text_1.value = props.templateData.textnum.slice(0, 12);
// 新闻数据2
const component_style2_News1Array_img_2 = ref([]);
const component_style2_News1Array_text_2 = ref([]);
component_style2_News1Array_img_2.value = props.templateData1.imgnum.slice(0, 4);
component_style2_News1Array_text_2.value = props.templateData1.textnum.slice(0, 12);
</script>

<style lang="less" scoped>
//基本样式
.clearfix {
    overflow: hidden;
}
.box_1 {
    height: px;
    overflow: hidden;
    .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;
    }
    .card_out {
        margin-top: 20px;
        .img_ul {
            height: 180px;
        }
        .img_ul_li {
            float: left;
            width: 285px;
            height: 180px;
            margin-right: 20px;
            position: relative;
            
        }
        .img_ul_li:nth-last-of-type(1) {
            margin-right: 0px;
            float: right;
        }
        .img_ul_li:nth-last-of-type(2) {
            margin-right: 0px;
        }
        .img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_dot1 {
            height: 29px;
            line-height: 29px;
            color: #fff;
            box-sizing: border-box;
            font-size: 14px;
            position: absolute;
            font-weight: bold;
            display: block;
            padding: 0px 15px;
            width: 100%;
            left: 0px;
            bottom: 0px;
            text-align: center;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_box {
            margin-top: 20px;
            a {
                color: #333333;
            }
        }
        .ul_li {
            line-height: 24px;
            height: 24px;
            position: relative;
            color: #333;
            font-size: 18px;
            text-indent: 9px;
            margin-bottom: 20px;
            width: 380px;
            margin: 0px 28px 20px 0px;
            float: left;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_li:nth-of-type(3n) {
            margin-right: 0px;
        }
        .ul_li::before {
            content: '';
            position: absolute;
            left: 0px;
            top: 10px;
            width: 4px;
            height: 4px;
            background: #F2F2F2;
            border-radius: 2px;
        }
    }
}

.box_2 {
    height: px;
    overflow: hidden;
    .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;
    }
    .card_out {
        margin-top: 20px;
        .img_ul {
            height: 180px;
        }
        .img_ul_li {
            float: left;
            width: 285px;
            height: 180px;
            margin-right: 20px;
            position: relative;
        }
        .img_ul_li:nth-last-of-type(1) {
            margin-right: 0px;
            float: right;
        }
        .img_ul_li:nth-last-of-type(2) {
            margin-right: 0px;
        }
        .img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_dot1 {
            height: 29px;
            line-height: 29px;
            color: #fff;
            box-sizing: border-box;
            font-size: 14px;
            position: absolute;
            font-weight: bold;
            display: block;
            padding: 0px 15px;
            width: 100%;
            left: 0px;
            bottom: 0px;
            text-align: center;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_box {
            margin-top: 0px;
            a {
                color: #333333;
            }
        }
        .ul_li {
            line-height: 24px;
            height: 24px;
            position: relative;
            color: #333;
            font-size: 18px;
            text-indent: 9px;
            margin-bottom: 20px;
            width: 380px;
            margin: 0px 28px 20px 0px;
            float: left;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_li:nth-of-type(3n) {
            margin-right: 0px;
        }
        .ul_li::before {
            content: '';
            position: absolute;
            left: 0px;
            top: 10px;
            width: 4px;
            height: 4px;
            background: #F2F2F2;
            border-radius: 2px;
        }
    }
}
.box_3 {
    height: px;
    overflow: hidden;
    .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;
    }
    .card_out {
        margin-top: 20px;
        .img_ul {
            height: 180px;
        }
        .img_ul_li {
            float: left;
            width: 285px;
            height: 180px;
            margin-right: 20px;
            position: relative;
        }
        .img_ul_li:nth-last-of-type(1) {
            margin-right: 0px;
            float: right;
        }
        .img_ul_li:nth-last-of-type(2) {
            margin-right: 0px;
        }
        .img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_dot1 {
            height: 29px;
            line-height: 29px;
            color: #fff;
            box-sizing: border-box;
            font-size: 14px;
            position: absolute;
            font-weight: bold;
            display: block;
            padding: 0px 15px;
            width: 100%;
            left: 0px;
            bottom: 0px;
            text-align: center;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_box {
            margin-top: 20px;
            a {
                color: #333333;
            }
        }
        .ul_li {
            line-height: 24px;
            height: 24px;
            position: relative;
            color: #333;
            font-size: 18px;
            text-indent: 9px;
            margin-bottom: 20px;
            width: 380px;
            margin: 0px 28px 20px 0px;
            float: left;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_li:nth-of-type(-n+3) {
            font-weight: bold;
        }
        .ul_li:nth-of-type(3n) {
            margin-right: 0px;
        }
        .ul_li::before {
            content: '';
            position: absolute;
            left: 0px;
            top: 10px;
            width: 4px;
            height: 4px;
            background: #F2F2F2;
            border-radius: 2px;
        }
    }
}
.box_4 {
    height: px;
    overflow: hidden;
    .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;
    }
    .card_out {
        margin-top: 20px;
        .img_ul {
            height: 180px;
        }
        .img_ul_li {
            float: left;
            width: 285px;
            height: 180px;
            margin-right: 20px;
            position: relative;
        }
        .img_ul_li:nth-last-of-type(1) {
            margin-right: 0px;
            float: right;
        }
        .img_ul_li:nth-last-of-type(2) {
            margin-right: 0px;
        }
        .img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .img_ul_li_dot1 {
            height: 29px;
            line-height: 29px;
            color: #fff;
            box-sizing: border-box;
            font-size: 14px;
            position: absolute;
            font-weight: bold;
            display: block;
            padding: 0px 15px;
            width: 100%;
            left: 0px;
            bottom: 0px;
            text-align: center;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_box {
            margin-top: 0px;
            a {
                color: #333333;
            }
        }
        .ul_li {
            line-height: 24px;
            height: 24px;
            position: relative;
            color: #333;
            font-size: 18px;
            text-indent: 9px;
            margin-bottom: 20px;
            width: 380px;
            margin: 0px 28px 20px 0px;
            float: left;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ul_li:nth-of-type(-n+3) {
            font-weight: bold;
        }
        .ul_li:nth-of-type(3n) {
            margin-right: 0px;
        }
        .ul_li::before {
            content: '';
            position: absolute;
            left: 0px;
            top: 10px;
            width: 4px;
            height: 4px;
            background: #F2F2F2;
            border-radius: 2px;
        }
    }
}
</style>