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

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

		<view class="award-section">
			<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: {
			'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
		},
		data() {
			return {}
		},
		methods: {
			// 可以添加点击链接跳转等方法
		}
	}
</script>

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

		.header {
			margin-bottom: 40rpx;

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

			.date {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
		}

		.award-section {
			.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>