xiangcunwang_web/components/detail/HotNews2.vue

<template>
    <div class="hotNews">
        <div class="hotNews_title">
            热点精选
            <em></em>
        </div>
        <div class="hotNews_photo_text">
            <div class="photo_left" v-for="(item, index) in 2">
                <NuxtLink :to="`/newsDetail/${1}`" target="_blank">
                    <img src="../../public/index/01.png" alt="">
                    <div class="hotNews_text">安徽漫山遍野的梅花竞相绽放，迎来了一年一度的梅花节。</div>
                </NuxtLink>
            </div>
        </div>
        <ul class="hotNews_message">
            <li class="hotNews_messageList" v-for="(item, index) in 7">
                <NuxtLink :to="`/newsDetail/${1}`" target="_blank">
                    最高检：将研究出台低龄未成年人严重暴力犯罪核准追诉意见
                </NuxtLink>
            </li>
        </ul>

    </div>
</template>

<script setup>

//获得axios
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

import { onMounted } from 'vue'

const hotNewsList = ref([])

//获取详情
const getHotNews = async () => {
    const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${5}&level=${4}&placeid=${15}`);
    hotNewsList.value = response.data;
}

onMounted(() => {
    getHotNews()
})
</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;
        }

    }

    //图片文字
    .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: 40px;

        .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>