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

<template>
    <div class="NewsHyjjSectorBox">
        <!-- 标题样式1-4 -->
        <div class="NewsHyjjSectorTitle" v-if="componentStyle <= 4">
            <NuxtLink v-if="titleLink.cid" :href="getLinkPath(titleLink)" :title="titleLink.alias">
                <div>{{ titleLink.alias }}</div>
            </NuxtLink>
        </div>
        <!--样式1-->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 1">
            <!-- 左 -->
            <div class="newsAllPictureSectorLeft">
                <div class="leftImg">
                    <NuxtLink v-for="item in component_style1_News1" :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" alt="">
                        <div class="Left_mask"></div>
                        <div class="Left_title">{{ item.title }}</div>
                    </NuxtLink>
                </div>
                <div class="rightImg">
                    <NuxtLink v-for="item in component_style1_News2" :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" alt="">
                        <div class="Left_mask1"></div>
                        <div class="Left_title1">{{ item.title }}</div>
                    </NuxtLink>
                </div>
            </div>
            <!-- 中 -->
            <div class="newsAllPictureSectorMid">
                <NuxtLink v-for="item in component_style1_News3" :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img :src="item.imgurl" alt="">
                    <div class="mask"></div>
                    <div class="title">{{ item.title }}</div>
                </NuxtLink>
            </div>
            <!-- 右 -->
            <div class="newsAllPictureSectorRight">
                <div class="leftImg">
                    <NuxtLink v-for="item in component_style1_News4" :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" alt="">
                        <div class="right_mask"></div>
                        <div class="right_title">{{ item.title }}</div>
                    </NuxtLink>
                </div>
                <div class="rightImg">
                    <NuxtLink v-for="item in component_style1_News5" :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" alt="">
                        <div class="right_mask1"></div>
                        <div class="right_title1">{{ item.title }}</div>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    titleLink: Object,//板块名称
    templateData: Array,//新闻数据
    componentStyle: Number,//样式编号
});
//样式1与样式2共用 start ---------------------------------------->
const component_style1_News = ref({});
// 样式1
const component_style1_News1 = ref({});
const component_style1_News2 = ref({});
const component_style1_News3 = ref({});
const component_style1_News4 = ref({});
const component_style1_News5 = ref({});
// 样式2
const component_style1_News6 = ref({});
const component_style1_News7 = ref({});
const component_style1_News8 = ref({});
const component_style1_News9 = ref({});
const component_style1_News10 = ref({});
// 样式3
const component_style1_News11 = ref({});
const component_style1_News12 = ref({});
const component_style1_News13 = ref({});
const component_style1_News14 = ref({});
const component_style1_News15 = ref({});
component_style1_News.value = props.templateData.imgnum;
// 样式1
component_style1_News1.value = props.templateData.imgnum.slice(0, 2);
component_style1_News2.value = props.templateData.imgnum.slice(2, 3);
component_style1_News3.value = props.templateData.imgnum.slice(3, 4);
component_style1_News4.value = props.templateData.imgnum.slice(4, 6);
component_style1_News5.value = props.templateData.imgnum.slice(6, 7);
// 样式1
component_style1_News6.value = props.templateData.imgnum.slice(0, 2);
component_style1_News7.value = props.templateData.imgnum.slice(2, 3);
component_style1_News8.value = props.templateData.imgnum.slice(3, 4);
component_style1_News9.value = props.templateData.imgnum.slice(4, 6);
component_style1_News10.value = props.templateData.imgnum.slice(6, 7);
// 样式1
component_style1_News11.value = props.templateData.imgnum.slice(0, 2);
component_style1_News12.value = props.templateData.imgnum.slice(2, 3);
component_style1_News13.value = props.templateData.imgnum.slice(3, 4);
component_style1_News14.value = props.templateData.imgnum.slice(4, 6);
component_style1_News15.value = props.templateData.imgnum.slice(6, 7);


//样式1与样式2共用 end ---------------------------------------->
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.NewsHyjjSectorBox {
    width: 1200px;
    height: 430px;
    position: relative;

    // 标题
    .NewsHyjjSectorTitle {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        border-bottom: 1px solid #999999;
        height: 38px;
        margin-bottom: 20px;

        a {
            color: #3848A0;
        }

        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;
            color: #3848A0;
            background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762224944805589.png") bottom left no-repeat;
        }
    }

    // 内容
    .NewsHyjjSectorContent {
        width: 100%;
        height: 320px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        .newsAllPictureSectorLeft {
            position: relative;
            width: 390px;
            height: 320px;
            margin-right: 13px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;

            .leftImg {
                width: 190px;
                height: 320px;
                margin-right: 10px;

                a {
                    width: 190px;
                    height: 150px;
                    display: block;
                    position: relative;
                    margin-bottom: 20px;

                    div {
                        font-size: 16px;
                        font-weight: 400;
                        height: 32px;
                        line-height: 32px;
                        color: transparent;
                    }

                    img {
                        width: 190px;
                        height: 150px;
                        border-radius: 4px;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                a:hover {
                    .Left_mask {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 190px;
                        height: 150px;
                        background-color: rgba(0, 0, 0, 0.6);
                        border-radius: 4px;
                    }

                    .Left_title {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: transparent;
                        color: #fff;
                        padding-left: 10px;
                        width: 180px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .rightImg {
                position: relative;
                width: 190px;
                height: 320px;
                border-radius: 4px;

                a {
                    width: 100%;
                    height: 320px;

                    img {
                        width: 190px;
                        height: 320px;
                        border-radius: 4px;
                    }

                    div {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: transparent;
                        height: 50px;
                        line-height: 50px;
                        font-size: 18px;
                        font-weight: 400;
                    }
                }
            }

            .rightImg:hover {
                position: relative;

                .Left_mask1 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 190px;
                    height: 320px;
                    background-color: rgba(0, 0, 0, 0.6);
                    border-radius: 4px;
                }

                .Left_title1 {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    color: transparent;
                    color: #fff;
                    padding-left: 10px;
                    width: 180px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .newsAllPictureSectorMid {
            position: relative;
            width: 390px;
            height: 320px;
            margin-right: 13px;

            a {
                img {
                    width: 390px;
                    height: 320px;
                    border-radius: 4px;
                }

                div {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 585px;
                    height: 60px;
                    line-height: 60px;
                    color: transparent;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }

        .newsAllPictureSectorMid:hover {
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 390px;
                height: 320px;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 4px;
            }

            .title {
                position: absolute;
                bottom: 0;
                left: 0;
                color: #fff;
                padding-left: 10px;
                width: 380px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .newsAllPictureSectorRight {
            position: relative;
            width: 390px;
            height: 320px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;

            .leftImg {
                width: 190px;
                height: 320px;
                margin-right: 10px;

                a {
                    width: 190px;
                    height: 150px;
                    display: block;
                    position: relative;
                    margin-bottom: 20px;

                    div {
                        font-size: 16px;
                        font-weight: 400;
                        height: 32px;
                        line-height: 32px;
                        color: transparent;
                    }

                    img {
                        width: 190px;
                        height: 150px;
                        border-radius: 4px;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                a:hover {
                    .right_mask {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 190px;
                        height: 150px;
                        background-color: rgba(0, 0, 0, 0.6);
                        border-radius: 4px;
                    }

                    .right_title {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: transparent;
                        color: #fff;
                        padding-left: 10px;
                        width: 180px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .rightImg {
                position: relative;
                width: 190px;
                height: 320px;
                border-radius: 4px;

                a {
                    width: 100%;
                    height: 320px;

                    img {
                        width: 190px;
                        height: 320px;
                        border-radius: 4px;
                    }

                    div {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: transparent;
                        height: 50px;
                        line-height: 50px;
                        font-size: 18px;
                        font-weight: 400;
                    }
                }
            }

            .rightImg:hover {
                position: relative;

                .right_mask1 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 190px;
                    height: 320px;
                    background-color: rgba(0, 0, 0, 0.6);
                    border-radius: 4px;
                }

                .right_title1 {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    color: transparent;
                    color: #fff;
                    padding-left: 10px;
                    width: 175px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    // 标题虚线
    // .dashed {
    //     border-bottom: 1px dashed #999999;
    // }
}

//基本样式 end ----------------------------------------></style>