ReptileFront/pages/[warning_id].vue

<template>
  <div :class="[prefixCls, 'flex full relative']">
    <div :class="`${prefixCls}-content  pt-24`">

      <el-breadcrumb style="position: absolute; top: 80px;left: 120px" :separator-icon="ArrowRight">
        <el-breadcrumb-item class="text-2xl" :to="{ path: '/warning' }">预警信息</el-breadcrumb-item>
        <el-breadcrumb-item class="text-2xl">预警详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="text-center mb-8">
        <h3 class="mb-5 text-4xl font-bold">{{ content.title }}</h3>
        <div class="w-3/6 flex justify-between mx-auto text-xl font-bold" style="color: #666666">
          <span>发布时间：{{ dayjs(content.createtime * 1000).format('YYYY-MM-DD') }}</span>
          <span v-if="content.source">文章来源：{{ content.source }}</span>
        </div>
      </div>
      <HtmlPreview :content="content.content" />
      <article-change-page :prevdata="prevdata" baseurl="/inform" :nextdata="nextdata"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";

definePageMeta({
  name: '预警详情',
  hidden: true,
  headerHost: false,
  parentPath: '/warning',
  // @ts-ignore
  path: '/warning/:id'
})
useHead({
  title:'预警详情'
})
import { ArrowRight } from '@element-plus/icons-vue'
useAppStore().setBannerTitle("预警详情")

const {prefixCls} = useDesign('mai-wrap');
const route = useRoute()
const content = ref({})
const prevdata = ref()
const nextdata = ref()
async function getData() {
  const data = await useApi().warningApi.getWarningDetail(route.params.id as  string)
  console.log('data.data.info')
  content.value = data.data.info;
  nextdata.value = data.data.next;
  prevdata.value = data.data.previous;
}
getData()
</script>

<style scoped></style>