feiniao-farm-h5/src/views/old_mini/home/subPages/warningDetail.vue

<template>
    <div class="warning-detail">
        <custom-header name="查看详情"></custom-header>
        <div class="article-content">
            <div class="article-header">
                <div class="title">{{ warningDetail.title }}</div>
                <div class="author-info">
                    <el-avatar :size="16" :src="warningDetail.icon" />
                    <span class="author-name">{{ warningDetail.name }}</span>
                    <span class="qa-date">{{ warningDetail?.createTime && warningDetail?.createTime?.slice(0, 10) }}</span>
                </div>
            </div>

            <div class="article-image">
                <img :src="warningDetail?.media && warningDetail?.media[0]" alt="荔枝开花图片" />
            </div>

            <div class="article-text">
                <span v-html="warningDetail.content"></span>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref,onActivated } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const warningDetail = ref({});
onActivated(() => {
    getWarningDetail();
});

const getWarningDetail = () => {
    const params = {
        id: route.query.id,
    };
    VE_API.home.warningDetail(params).then((res) => {
        warningDetail.value = res.data || {};
    });
};
</script>

<style scoped lang="scss">
.warning-detail {
    position: relative;
    width: 100%;
    height: 100vh;
    .article-content {
        padding: 8px 16px;
        overflow-y: auto;
        height: calc(100% - 40px);
        box-sizing: border-box;

        .article-header {
            .title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 6px;
                text-align: left;
            }

            .author-info {
                display: flex;
                align-items: center;
                gap: 10px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f5f5f5;

                .author-name,.qa-date {
                    font-size: 14px;
                    color: #666;
                    font-weight: normal;
                }
            }
        }

        .article-image {
            width: 100%;
            margin: 12px 0 20px 0;

            img {
                width: 100%;
                height: 175px;
                border-radius: 5px;
                object-fit: cover;
            }
        }
        .article-text{
            ::v-deep{
                img {
                    width: 100%;
                    height: 175px;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }
        }
    }
}
</style>