dz-app/pages/news/detail/detail.vue

<template>
    <view class="page-content pb-60">
        <uv-loading-page :loading="loading"/>
        <mx-nav-bar title="资讯详情"/>
        <view class="p-40 text-main">
            <view class="text-2xl mb-40">{{ detail.title }}</view>
            <view class="fx-row fx-bet-cen">
                <view>
                    <uv-text size="14" prefix-icon="clock-fill" :icon-style="{color: 'var(--primary-color)'}"
                             :text="detail.sendDate"/>
                </view>
                <uv-tags v-if="detail.type" size="mini" type="primary" plain plain-fill :text="detail.type"/>
            </view>
            <view class="html mt-20" v-html="detail.content"/>
        </view>
    </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useTransfer} from "@/hooks/useTransfer";
import {info} from "@/api/webApi/career-news";

const detail = ref({})
const loading = ref(false)
const {prevData} = useTransfer()

onMounted(async () => {
    loading.value = true
    try {
        const {data} = await info({id: prevData.value.id})
        detail.value = data
    } finally {
        loading.value = false
    }
})
</script>

<style scoped lang="scss">
.html {
    font-size: 13px;

    ::v-deep img,
    ::v-deep table {
        width: 100%;
        max-width: 100%;
    }

    ::v-deep p {
        line-height: 26px;
    }

    ::v-deep h1, ::v-deep h2, ::v-deep h3, ::v-deep h4, ::v-deep h5, ::v-deep h6 {
        line-height: 40px;
    }
}
</style>