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

<template>
    <div class="hotNewsBox">
        <div class="listNewsTitle_skin4" >
            <span><b>热点精选</b></span>
        </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_skin4 {
        font-size:22px;
        font-weight:bold;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #fe8f00;
        margin-bottom: 20px;
        box-sizing: border-box;
        span {
            display: inline-block;
            width: 112px;
            height: 40px;
            line-height: 40px;
            background: #fe8f00;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            color:#fff;
            text-align: center;
            a{
                color: #fff;
            }
        }
    }
    .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: #fe8f00;
            }
        }
    }
}
//基本样式 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: #fe8f00;
            }
        }
    }
}
//样式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: #fe8f00;
            }
        }
    }
}
//样式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: #fe8f00;
            }
        }
    }
}
</style>