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

<template>
    <div class="hotNewsBox">
        <div class="list_right_box_hot_1" v-if="componentStyle == 1">
            <h4 class="list_right_head">
                <span>热点精选</span>
            </h4>
            <div class="list_right_box_hot_ul">
                <div class="list_right_box_hot_li" v-for="(item, index) in component_style1_News1Array">
                    <div class="list_right_box_hot_li_num">{{ index + 1 }}</div>
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'" class="list_right_box_hot_li_a">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="list_right_box_hot_2" v-if="componentStyle == 2">
            <h4 class="list_right_head">
                <span>热点精选</span>
            </h4>
            <div class="list_right_box_hot_ul">
                <div class="list_right_box_hot_li" v-for="(item, index) in component_style1_News1Array">
                    <div class="list_right_box_hot_li_num">{{ index + 1 }}</div>
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'" class="list_right_box_hot_li_a">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="list_right_box_hot_3" v-if="componentStyle == 3">
            <h4 class="list_right_head">
                <span>热点精选</span>
            </h4>
            <div class="list_right_box_hot_ul">
                <div class="list_right_box_hot_li" v-for="(item, index) in component_style1_News1Array">
                    <div class="list_right_box_hot_li_num">{{ index + 1 }}</div>
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'" class="list_right_box_hot_li_a">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="list_right_box_hot_4" v-if="componentStyle == 4">
            <h4 class="list_right_head">
                <span>热点精选</span>
            </h4>
            <div class="list_right_box_hot_ul">
                <div class="list_right_box_hot_li" v-for="(item, index) in component_style1_News1Array">
                    <div class="list_right_box_hot_li_num">{{ index + 1 }}</div>
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'" class="list_right_box_hot_li_a">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="list_right_box_hot_5" v-if="componentStyle == 5">
            <h4 class="list_right_head">
                <span>热点精选</span>
            </h4>
            <div class="list_right_box_hot_ul">
                <div class="list_right_box_hot_li" v-for="(item, index) in component_style1_News1Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'" class="list_right_box_hot_li_a">
                        {{ item.title }}
                    </NuxtLink>
                </div>
            </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>
.list_right_box_hot_1 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_box_hot_li {
        height: 64px;
        border-bottom: solid 1px #E4E4E4;
        position: relative;
    }
    .list_right_box_hot_li_num {
        position: absolute;
        width: 22px;
        height: 100%;
        line-height: 64px;
        color: #D9D9D9;
        font-size: 20px;
        left: 0px;
        top: 0px;
        font-style: italic;
    }
    .list_right_box_hot_li_a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: 24px;
        color: #333;
        font-size: 18px;
        line-height: 64px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .list_right_box_hot_li:nth-of-type(-n+3) .list_right_box_hot_li_num {
        color: #A72213;
    }
}
.list_right_box_hot_2 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_box_hot_li {
        height: 64px;
        border-bottom: solid 1px #E4E4E4;
        position: relative;
    }
    .list_right_box_hot_li_num {
        position: absolute;
        width: 22px;
        height: 100%;
        line-height: 64px;
        color: #A72213;
        font-size: 20px;
        left: 0px;
        top: 0px;
        font-style: italic;
    }
    .list_right_box_hot_li_a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: 24px;
        color: #333;
        font-size: 18px;
        line-height: 64px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.list_right_box_hot_3 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_box_hot_li {
        height: 64px;
        border-bottom: dashed 1px #E4E4E4;
        position: relative;
    }
    .list_right_box_hot_li_num {
        position: absolute;
        width: 22px;
        height: 100%;
        line-height: 64px;
        color: #D9D9D9;
        font-size: 20px;
        left: 0px;
        top: 0px;
        font-style: italic;
    }
    .list_right_box_hot_li_a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: 24px;
        color: #333;
        font-size: 18px;
        line-height: 64px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .list_right_box_hot_li:nth-of-type(-n+3) .list_right_box_hot_li_num {
        color: #A72213;
    }
}
.list_right_box_hot_4 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_box_hot_li {
        height: 64px;
        border-bottom: dashed 1px #E4E4E4;
        position: relative;
    }
    .list_right_box_hot_li_num {
        position: absolute;
        width: 22px;
        height: 100%;
        line-height: 64px;
        color: #A72213;
        font-size: 20px;
        left: 0px;
        top: 0px;
        font-style: italic;
    }
    .list_right_box_hot_li_a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: 24px;
        color: #333;
        font-size: 18px;
        line-height: 64px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.list_right_box_hot_5 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_box_hot_li {
        height: 64px;
        border-bottom: dashed 1px #E4E4E4;
        position: relative;
    }
    .list_right_box_hot_li_a {
        display: block;
        width: 100%;
        height: 100%;
        color: #333;
        font-size: 18px;
        line-height: 64px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>