zizhujianzhan_web/components/template/component/list/270x580/6.vue

<template>
    <div class="hotNewsBox">
        <div class="listNewsTitle">
            <div>热点精选</div>
        </div>
        <!--样式1-->
        <div class="hotNewsContent_skin2" v-if="componentStyle == 1">
            <div v-for="(item, index) in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <span>{{ index + 1 }}</span>
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
        <!--样式2-->
        <div class="hotNewsContent_skin2 hotNewsStyle2" v-if="componentStyle == 2">
            <div v-for="(item, index) in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <span>{{ index + 1 }}</span>
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
        <!-- 样式3 -->
        <div class="hotNewsContent_skin2 hotNewsStyle3" v-if="componentStyle == 3">
            <div v-for="(item, index) in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <span>{{ index + 1 }}</span>
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
        <!-- 样式4 -->
        <div class="hotNewsContent_skin2 hotNewsStyle4" v-if="componentStyle == 4">
            <div v-for="(item, index) in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <span>{{ index + 1 }}</span>
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
        <!-- 样式5 -->
        <div class="hotNewsContent_skin2 hotNewsStyle5" v-if="componentStyle == 5">
            <div v-for="(item, index) in component_style1_News1Array" :key="index">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    {{ item.title }}
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    componentStyle: Number,//样式编号
});
const component_style1_News1Array = ref([]);
//component_style1_News1Array.value = props.templateData.text.slice(0,8);

async function getPageData() {
    const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'imgnum': 0,
            'textnum': 8,
            'level': 5,
            'placeid': 0,
            'id': 0
        },
    });
    if (mkdata.code == 200) {
        component_style1_News1Array.value = mkdata.data.text;
    }
}
getPageData();
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.hotNewsBox {
    .listNewsTitle {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        // border-bottom: 1px solid #999999;
        height: 38px;
        margin-bottom: 20px;

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

    .hotNewsContent_skin2 {
        font-size: 18px;
        color: #333333;

        div {
            a {
                display: block;
                color: #333333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            padding-bottom:20px;
            border-bottom:1px solid #E4E4E4;
            margin-bottom: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
                margin-right: 15px;
                font-size: 20px;
                font-weight: bold;
                font-style: italic;
                color: #D9D9D9;
            }

            &:nth-child(1) span,
            &:nth-child(2) span,
            &:nth-child(3) span {
                color: #154079;
            }
        }
    }
}

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

//样式2 start ---------------------------------------->
.hotNewsBox {
    .hotNewsStyle2 {
        font-size: 18px;
        color: #333333;

        div {
            padding-bottom: 20px;
            border-bottom: 1px solid #E4E4E4;
            margin-bottom: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
                margin-right: 15px;
                font-size: 20px;
                font-weight: bold;
                font-style: italic;
                color: #154079;
            }
        }
    }
}

//样式2 end ---------------------------------------->
//样式3 start ---------------------------------------->
.hotNewsBox {
    .hotNewsStyle3 {
        font-size: 18px;
        color: #333333;

        div {
            border-bottom: 1px dashed #E4E4E4;
        }
    }
}

//样式3 end ---------------------------------------->

//样式4 start ---------------------------------------->
.hotNewsBox {
    .hotNewsStyle4 {
        font-size: 18px;
        color: #333333;

        div {
            padding-bottom: 20px;
            border-bottom: 1px dashed #E4E4E4;
            margin-bottom: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
                margin-right: 15px;
                font-size: 20px;
                font-weight: bold;
                font-style: italic;
                color: #154079;
            }
        }
    }
}

//样式4 end ---------------------------------------->

//样式5 start ---------------------------------------->
.hotNewsBox {
    .hotNewsStyle5 {
        font-size: 18px;
        color: #333333;

        div {
            padding-bottom: 20px;
            border-bottom: 1px dashed #E4E4E4;
            margin-bottom: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
                margin-right: 15px;
                font-size: 20px;
                font-weight: bold;
                font-style: italic;
                color: #154079;
            }
        }
    }
}
</style>