zizhujianzhan_web/components/template/component/list/1200x430/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>
        <!-- 标题样式5-8 -->
        <div class="NewsHyjjSectorTitle dashed" v-if="componentStyle >= 5">
            <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="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!-- 样式2 -->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 2">
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式3-->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 3">
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem bg_blue">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!-- 样式4 -->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 4">
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem bg_blue">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式5-->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 5">
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!-- 样式6 -->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 6">
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!--样式7-->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 7">
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ item.title }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem bg_blue">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <!-- 样式8 -->
        <div class="NewsHyjjSectorContent" v-if="componentStyle == 8">
            <div class="NewsHyjjSectorContentRight">
                <div v-for="item in component_style1_News1Array" class="NewsHyjjSectorNewsItem bg_blue">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
            <div class="NewsHyjjSectorContentLeft">
                <div v-for="item in component_style1_News1" class="NewsHyjjSectorImgItem">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <img :src="item.imgurl" />
                        <div class="NewsHyjjSectorImgItemTitle">
                            {{ 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_News1 = ref({});
component_style1_News1.value = props.templateData.imgnum;
const component_style1_News1Array = ref({});
component_style1_News1Array.value = props.templateData.textnum;
//样式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 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .NewsHyjjSectorContentLeft {
            width: 585px;
            height: 370px;
            position: relative;

            .NewsHyjjSectorImgItem {
                width: 100%;
                height: 100%;

                a {
                    img {
                        width: 585px;
                        height: 370px;
                    }

                    .NewsHyjjSectorImgItemTitle {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 60px;
                        line-height: 60px;
                        font-size: 18px;
                        font-weight: bold;
                        color: #fff;
                        padding-left: 20px;
                        background: rgba(0, 0, 0, 0.3);
                        box-sizing: border-box;
                    }
                }
            }

        }

        .NewsHyjjSectorContentRight {
            width: 585px;
            height: 370px;

            .NewsHyjjSectorNewsItem {
                width: 580px;
                color: #333333;
                font-size: 18px;
                margin-bottom: 12px;
                padding-left: 16px;
                cursor: pointer;
                box-sizing: border-box;
                background: url("https://img.bjzxtw.org.cn/pre/image/jpeg/20251104/1762226432153586.jpg") no-repeat left center;

                &:nth-child(1),
                &:nth-child(4),
                &:nth-child(7) {
                    font-weight: bold;
                }

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

                a {
                    display: inline-block;
                    width: 570px;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .bg_blue{
                width: 580px;
                color: #333333;
                font-size: 18px;
                margin-bottom: 12px;
                padding-left: 16px;
                cursor: pointer;
                box-sizing: border-box;
                background: url("https://img.bjzxtw.org.cn/pre/image/png/20251104/1762226842166040.png") no-repeat left center;
            }

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

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