novel-front-app/pages_order/announcement/announcementDetail.vue

<template>
	<!-- 公告详情页面 -->
	<view class="announcement-container">
		<navbar title="公告详情" leftClick @leftClick="$utils.navigateBack" />

		<view class="award-section">
			
			<uv-parse :content="detail.details"></uv-parse>
			
			<!-- <view class="award-item">
				<text class="award-title">长篇网文</text>
				<view class="award-content">
					<view class="sub-award">
						<text class="sub-title">• 优质加更奖：</text>
						<text class="detail">拟获奖作品156本，共发放奖金41.5万元，查看拟获奖名单请点击：</text>
						<text class="link">优质加更奖拟获奖名单</text>
					</view>
					<view class="sub-award">
						<text class="sub-title">• 新书扶更奖：</text>
						<text class="detail">拟获奖作品5574本，共发放奖金20万元，查看拟获奖名单请点击：</text>
						<text class="link">新书扶更奖拟获奖名单</text>
					</view>
					<view class="sub-award">
						<text class="sub-title">• 拉新激励奖：</text>
						<text class="detail">拟获奖作品50部，总计奖金65万，查看拟获奖名单请点击：</text>
						<text class="link">2月拉新激励奖</text>
					</view>
					<view class="sub-award">
						<text class="sub-title">• 星火计划奖励：</text>
						<text class="detail">拟获奖作品4178部，总计奖金55万，查看拟获奖名单请点击：</text>
						<text class="link">2月星火计划奖励名单</text>
					</view>
				</view>
			</view>

			<view class="award-item">
				<text class="award-title">完结专场</text>
				<view class="award-content">
					<view class="sub-award">
						<text class="sub-title">• 脱洞盛宴征文活动：</text>
						<text class="detail">月度脱洞专题：拟获奖作品1260部，总计奖金45万，查看拟获奖名单请点击：</text>
						<text class="link">2月完结专题奖励名单</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				id : 0,
				detail : {},
			}
		},
		onLoad({id}) {
			this.id = id
			this.getNoticeDetail()
		},
		methods: {
			async getNoticeDetail(){
				this.detail = await this.$fetch('getNoticeById', {
					id : this.id
				});
			},
		}
	}
</script>

<style lang="scss">
	.announcement-container {
		background: #fff;

		.award-section {
			padding: 20rpx;
			.award-item {
				margin-bottom: 40rpx;

				.award-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}

				.award-content {
					.sub-award {
						margin-bottom: 20rpx;

						.sub-title {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
						}

						.detail {
							font-size: 28rpx;
							color: #666;
						}

						.link {
							color: #007AFF;
							text-decoration: underline;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>