xiangcunwang_web/components/detail/HotNews2.vue

<template>
    <div class="hotNews">
        <div class="hotNews_title">
            热点精选
            <em></em>
        </div>
        <div class="top_top">
            <div class="hotNews_photo_text">
                <div class="photo_left" v-for="(item, index) in hotNewsListImg">
                    <NuxtLink :to="item.linkurl" v-show="item.islink == 1" :title="item.title">
                        <img :src="item.imgurl" alt="">
                        <div class="hotNews_text">{{ item.title }}</div>
                    </NuxtLink>
                    <NuxtLink :to="`/${item.pinyin}/${item.id}.html`">
                        <img :src="item.imgurl" alt="">
                        <div class="hotNews_text">{{ item.title }}</div>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <ul class="hotNews_message">
            <li class="hotNews_messageList" v-for="(item, index) in hotNewsList" :key="index">
                <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 hotNewsListImg = ref([])
const hotNewsList = ref([])
async function getPageData() {
    const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'imgnum':2,
            'textnum': 7,
            'level': 5,
            'id': 0,
            'placeid': 0,
        },
    });
    if (mkdata.code == 200) {
        hotNewsList.value = mkdata.data.text;
        hotNewsListImg.value = mkdata.data.img;
    } 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>
.hotNews {
    width: 350px;

    //标题
    .hotNews_title {
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        margin: 20px 0;
        font-size: 20px;
        color: #333333;
        position: relative;

        em {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: #a01c0e;
            position: absolute;
            top: 6px;
            right: 8px;
        }

    }

    //图片文字
    .top_top {
        width: 350px;
        height: 165px;
        position: relative;

        .hotNews_photo_text {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            img {
                width: 165px;
                height: 96px;
            }

            .hotNews_text {
                width: 165px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                margin-top: 15px;
            }

            .hotNews_text:hover {
                color: #a01c0e;
            }
        }
    }

    //新闻列表
    .hotNews_message {
        width: 350px;
        margin-top: 25px;

        .hotNews_messageList {
            width: 350px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            margin-bottom: 30px;

            a {
                color: #333333;
            }
        }

        .hotNews_messageList:hover {
            color: #a01c0e;

            a {
                color: #a01c0e;
            }
        }
    }
}
</style>