airz-uniapp/packages/content/article/article.uvue

<template>
	<view class="page page-white" :style="pageStyle()">
		<AppHeader title="新闻详情" />
		<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>
	</view>
</template>

<script setup lang="uts">
	import { usePageLayout } from '@/services/layout.uts'
	import { newsArticles, findNewsArticle, NewsArticle } from '@/packages/content/services/content.uts'
	import AppHeader from '@/components/AppHeader.uvue'
	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: '/packages/content/news/news' }) }
</script>

<style>
	.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; }
</style>