fazhidy_org_cn/components/detail/HotNews.vue

<template>
    <div class="hotList">
        <div class="title">
            <h4>
                热门文章
            </h4>
        </div>
        <ul class="messageList">
            <li v-for="(item, index) in hotNewsList">
                <NuxtLink :to="item.linkurl" v-show="item.islink == 1" :title="item.title">{{ item.title }}</NuxtLink>
                <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" v-if="item.islink == 0" :title="item.title">
                    {{ item.title }}
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script setup>
const hotNewsList = ref([])
async function getPageData() {
    const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'imgnum': 0,
            'textnum': 10,
            'level': 4,
            'id': 0,
            'placeid': 0,
        },
    });
    if (mkdata.code == 200) {
        hotNewsList.value = mkdata.data.text;
    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：获取最新资讯")
        console.log("后端错误反馈：", mkdata.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
getPageData();
</script>

<style lang="less" scoped>
@media screen and (min-width: 1401px) {
    .hotList {
        font-family: "微软雅黑";
        width: 100%;
        height: auto;
        overflow: hidden;
        border: 1PX solid #C6E9FF;
        border-top-left-radius: 5PX;
        border-top-right-radius: 5PX;
        padding-bottom: 10PX;
        margin-bottom: 10PX;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 37PX;
            line-height: 37PX;
            overflow: hidden;
            padding: 0 10PX;
            background: url(../../public/index/hotNewsBg.jpg) no-repeat center top;
            background-size: 100% 100%;

            h4 {
                font-size: 18PX;
                color: #fff;
                font-weight: bold;
            }
        }

        .messageList {
            height: auto;
            padding: 0 20PX;
            box-sizing: border-box;

            >li {
                height: 35PX;
                line-height: 35PX;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                >a {
                    font-size: 12PX;
                    color: #000;
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .hotList {
        font-family: "微软雅黑";
        width: 100%;
        height: auto;
        overflow: hidden;
        border: 1PX solid #C6E9FF;
        border-top-left-radius: 5PX;
        border-top-right-radius: 5PX;
        padding-bottom: 10PX;
        margin-bottom: 10PX;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 37PX;
            line-height: 37PX;
            overflow: hidden;
            padding: 0 10PX;
            background: url(../../public/index/hotNewsBg.jpg) no-repeat center top;
            background-size: 100% 100%;

            h4 {
                font-size: 18PX;
                color: #fff;
                font-weight: bold;
            }
        }

        .messageList {
            height: auto;
            padding: 0 20PX;

            >li {
                height: 35PX;
                line-height: 35PX;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                >a {
                    font-size: 12PX;
                    color: #000;
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .hotList {
        font-family: "微软雅黑";
        width: 100%;
        height: auto;
        overflow: hidden;
        border: 2px solid #C6E9FF;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 74px;
            line-height: 74px;
            overflow: hidden;
            padding: 0 20px;
            background: url(../../public/index/hotNewsBg.jpg) no-repeat center top;
            background-size: 100% 100%;

            h4 {
                font-size: 36px;
                color: #fff;
                font-weight: bold;
            }
        }

        .messageList {
            height: auto;
            padding: 0 40px;
            box-sizing: border-box;

            >li {
                height: 70px;
                line-height: 70px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                >a {
                    font-size: 26px;
                    color: #000;
                }


            }

        }
    }
}
</style>