2026-09-11 20:23:10 +08:00
|
|
|
<template>
|
2026-09-18 12:59:43 +08:00
|
|
|
<view class="page page-white" :style="pageStyle()">
|
2026-09-11 20:23:10 +08:00
|
|
|
<AppHeader title="新闻详情" />
|
2026-09-18 12:59:43 +08:00
|
|
|
<scroll-view scroll-y :style="contentStyle(96, false)">
|
|
|
|
|
<view v-if="available" class="detail-content">
|
|
|
|
|
<text class="detail-category">{{ article.category }}</text><text class="detail-title">{{ article.title }}</text>
|
|
|
|
|
<text class="detail-source">{{ article.source }}</text><text class="detail-meta">{{ article.date }} · {{ article.readingTime }}阅读</text>
|
|
|
|
|
<image class="detail-image" :src="article.image" mode="aspectFill"></image>
|
|
|
|
|
<text class="detail-summary">{{ article.summary }}</text>
|
|
|
|
|
<view v-for="section in article.sections" :key="section.title" class="detail-section"><text class="detail-heading">{{ section.title }}</text><text class="detail-paragraph">{{ section.body }}</text></view>
|
|
|
|
|
<text class="detail-note">内容仅供信息参考，具体申请条件以相关机构官方说明为准。</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="empty-content"><text class="empty-title">暂未找到这篇新闻</text><text class="empty-copy">返回新闻列表，查看其他资讯。</text><button class="primary-button empty-button" @click="goNews">返回新闻</button></view>
|
|
|
|
|
</scroll-view>
|
2026-09-11 20:23:10 +08:00
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="uts">
|
2026-09-15 16:16:55 +08:00
|
|
|
import { usePageLayout } from '@/services/layout.uts'
|
2026-09-18 12:59:43 +08:00
|
|
|
import { newsArticles, findNewsArticle, NewsArticle } from '@/services/content.uts'
|
2026-09-11 20:23:10 +08:00
|
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
2026-09-18 12:59:43 +08:00
|
|
|
const { contentStyle, pageStyle } = usePageLayout()
|
|
|
|
|
const article = ref<NewsArticle>(newsArticles[0])
|
|
|
|
|
const available = ref(true)
|
|
|
|
|
onLoad((options) => {
|
|
|
|
|
if (options == null) return
|
|
|
|
|
const id = options['id'] == null ? '' : options['id'] as string
|
|
|
|
|
const legacyTitle = options['title'] == null ? '' : options['title'] as string
|
|
|
|
|
if (id == '' && legacyTitle == '') return
|
|
|
|
|
const selected = findNewsArticle(id, legacyTitle)
|
|
|
|
|
available.value = selected != null
|
|
|
|
|
if (selected != null) article.value = selected
|
|
|
|
|
})
|
|
|
|
|
const goNews = (): void => { uni.redirectTo({ url: '/pages/news/news' }) }
|
2026-09-11 20:23:10 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2026-09-18 12:59:43 +08:00
|
|
|
.detail-content { padding: 30rpx 30rpx 64rpx; }
|
|
|
|
|
.detail-category { color: #0868f7; font-size: 24rpx; font-weight: 600; margin-bottom: 14rpx; }
|
|
|
|
|
.detail-title { color: #172640; font-size: 38rpx; line-height: 56rpx; font-weight: 700; }
|
|
|
|
|
.detail-source { color: #66758a; font-size: 24rpx; margin-top: 22rpx; }
|
|
|
|
|
.detail-meta { color: #66758a; font-size: 22rpx; margin-top: 10rpx; }
|
|
|
|
|
.detail-image { width: 100%; height: 300rpx; border-radius: 18rpx; margin-top: 28rpx; }
|
|
|
|
|
.detail-summary { color: #405675; font-size: 27rpx; line-height: 46rpx; padding: 22rpx; margin-top: 24rpx; background-color: #f2f6fc; border-radius: 12rpx; }
|
|
|
|
|
.detail-section { margin-top: 30rpx; }
|
|
|
|
|
.detail-heading { color: #172640; font-size: 30rpx; line-height: 44rpx; font-weight: 700; }
|
|
|
|
|
.detail-paragraph { color: #4d5e75; font-size: 28rpx; line-height: 50rpx; margin-top: 12rpx; }
|
|
|
|
|
.detail-note { color: #66758a; font-size: 22rpx; line-height: 36rpx; border-top: 1rpx solid #e8eef6; padding-top: 22rpx; margin-top: 36rpx; }
|
|
|
|
|
.empty-content { padding: 100rpx 40rpx; align-items: center; }
|
|
|
|
|
.empty-title { color: #172640; font-size: 32rpx; font-weight: 700; }
|
|
|
|
|
.empty-copy { color: #66758a; font-size: 26rpx; margin-top: 20rpx; }
|
|
|
|
|
.empty-button { width: 100%; margin-top: 38rpx; }
|
2026-09-11 20:23:10 +08:00
|
|
|
</style>
|
