xinyang5yuan-web/pages/info/[id].vue

<template>
    <div class="bg-[#ffffff]">
        <div class="box_6 flex-col">
            <div class="group_1">
                <div class="flex section_4 flex-row justify-between" style="padding-top: 67px;">
                    <img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
                    <span class="text_13">您的位置：首页>系统公告</span>
                </div>
            </div>
        </div>
        <div class="page-container mt-[30px]">
            <div>
                <div class="title">{{ info.news_title }}</div>
                <div class="flex flex-row justify-start author">
                    <div>发布人：{{ info.news_auto }}</div>
                    <div class="ml-[70px]">发布时间：{{ info.showtime }}</div>
                </div>
                <div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
                <div class="my-[30px]">
                    <div v-html="info.news_content"></div>
                </div>
            </div>
            <div style="border-top: 1px solid rgba(238, 238, 238, 1);"></div>
            <!-- <div class="py-[30px]">
                <div class="">
                    <div class="">
                        <div>上一篇：XXXXXXXXXXXXXXXXXXXXX</div>
                        <div class="mt-[10px]">下一篇：暂无</div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { useStore } from '~/store'
import $api from '@/service/webRequest'
const router = useRouter()
const route = useRoute()
const id = ref(route.params.id)
onMounted(() => {
    // 在移动端视图下初始化
    document.documentElement.style.fontSize = '16px';
    const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (coMobile) {
        router.push('/phone_info/' + id.value)
    } else {
        router.push('/info/' + id.value)
    }
    getInfo();
})
const info = ref({})
const getInfo = () => {
    $api.post("/api/news/info", { id: id.value })
        .then((res: any) => {
            console.log(res)
            info.value = res.data.data
        })
        .catch((err) => {
            console.dir(err)
        })
}
</script>
<style scoped>
@import "@/assets/css/common.scss";
@import "@/assets/css/list.css";
</style>
<style>
.title {
    font-size: 26px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    text-align: center;
}
.author {
    font-size: 14px;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 20px;
}
.page-container{
    padding: 0 360px;
}
@media (max-width: 1440px) {
    .page-container{
        padding: 0 100px;
    }
}
/* video{
    margin: 20px auto;
} */
</style>