fazyqjczx_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">
                    <em></em>
                    {{ item.title }}
                </NuxtLink>
                <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" v-if="item.islink == 0" :title="item.title">
                    <em></em>
                    {{ 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': 8,
            '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 {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-top-left-radius: 5PX;
        border-top-right-radius: 5PX;
        padding-bottom: 10PX;
        margin-bottom: 10PX;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 40PX;
            overflow: hidden;
            border-bottom: solid 2PX #b41c2a;

            h4 {
                display: block;
                width: 107PX;
                height: 40PX;
                line-height: 40PX;
                background: #b41c2a;
                text-align: center;
                color: #fff;
                font-size: 20PX;
                font-weight: bold;
                border-top-left-radius: 10PX;
                border-top-right-radius: 10PX;
            }
        }

        .messageList {
            height: auto;
            margin-top: 10PX;

            li {
                width: 100%;
                height: 43PX;
                line-height: 38PX;
                list-style-position: inside;
                border-bottom: 1PX solid #ccc;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

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

                a {
                    font-size: 16PX;
                    color: #333;

                    em {
                        display: inline-block;
                        width: 16PX;
                        height: 16PX;
                        background: url(../../public/index/index_42.png) no-repeat;
                        vertical-align: -3PX;
                    }
                }

                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3) {
                    a {
                        em {
                            background: url(../../public/index/index_31.png) no-repeat;
                            vertical-align: -3PX;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .hotList {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-top-left-radius: 5PX;
        border-top-right-radius: 5PX;
        padding-bottom: 10PX;
        margin-bottom: 10PX;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 40PX;
            overflow: hidden;
            border-bottom: solid 2PX #b41c2a;

            h4 {
                display: block;
                width: 107PX;
                height: 40PX;
                line-height: 40PX;
                background: #b41c2a;
                text-align: center;
                color: #fff;
                font-size: 20PX;
                font-weight: bold;
                border-top-left-radius: 10PX;
                border-top-right-radius: 10PX;
            }
        }

        .messageList {
            height: auto;
            margin-top: 10PX;

            li {
                width: 100%;
                height: 43PX;
                line-height: 38PX;
                list-style-position: inside;
                border-bottom: 1PX solid #ccc;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

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

                a {
                    font-size: 16PX;
                    color: #333;

                    em {
                        display: inline-block;
                        width: 16PX;
                        height: 16PX;
                        background: url(../../public/index/index_42.png) no-repeat;
                        vertical-align: -3PX;
                    }
                }

                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3) {
                    a {
                        em {
                            background: url(../../public/index/index_31.png) no-repeat;
                            vertical-align: -3PX;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .hotList {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;

        .title {
            width: 100%;
            height: 80px;
            overflow: hidden;
            border-bottom: solid 2PX #b41c2a;

            h4 {
                display: block;
                width: 214px;
                height: 80px;
                line-height: 80px;
                background: #b41c2a;
                text-align: center;
                color: #fff;
                font-size: 40px;
                font-weight: bold;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
            }
        }

        .messageList {
            height: auto;
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                width: 49%;
                height: 86px;
                line-height: 76px;
                list-style-position: inside;
                border-bottom: 2px solid #ccc;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

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

                a {
                    font-size: 32px;
                    color: #333;

                    em {
                        display: inline-block;
                        width: 24px;
                        height: 28px;
                        background: url(../../public/index/index_42.png) no-repeat;
                        background-size: 100% 100%;
                        vertical-align: -6px;
                        margin-right: 10px;
                    }
                }

                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3) {
                    a {
                        em {
                            display: inline-block;
                            width: 24px;
                            height: 28px;
                            background: url(../../public/index/index_31.png) no-repeat;
                            background-size: 100% 100%;
                            vertical-align: -6px;
                        }
                    }
                }
            }
        }
    }
}
</style>