teaching-uniapp/pages/hdxx/hdxx.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="content">
			<view class="text">
				<view class="header">
					<p>
						活动发布成功
						<span class="sj">13:28</span>
					</p>
				</view>
				<view class="main">
					<p>
						恭喜！您已成功完成
						<span>“XXXX讲座”</span>
						活动发布过程。您的活动现在已经在我们的平台上正式上线，可以被其他用户浏览和参加。请随时返回您的活动管理页面，以进行任何进一步的编辑、更新或促进活动的操作。
					</p>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<p>
						活动发布成功
						<span class="sj">13:28</span>
					</p>
				</view>
				<view class="main">
					<p>
						恭喜！您已成功完成
						<span>“XXXX讲座”</span>
						活动报名。您的参与信息已经成功提交，您现在是我们活动的一部分，我们非常期待与您共度美好时光。
						<p style="text-indent: 2em" >
							以下是一些额外信息，以确保您充分了解您的参与：
						</p>  
					</p>
					<view class="custom-list">
						<view class="list-item">活动名称：[活动名称]</view>
						<view class="list-item">日期：[活动日期]</view>
						<view class="list-item">时间：[活动时间]</view>
						<view class="list-item">地点：[活动地点]</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<p>
						活动已结束
						<span class="sj">13:28</span>
					</p>
				</view>
				<view class="main">
					<p>
						<span>“XXXX讲座”</span>
						活动已圆满结束，我们要对您的热情参与表示由衷的感谢。您的支持和参与使这次活动变得特别而难忘。
						再次感谢您的参与，我们期待将来再次与您共享更多精彩的活动。敬请期待未来的活动通知！
					</p>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<p>
						活动开始提醒
						<span class="sj">13:28</span>
					</p>
				</view>
				<view class="main">
					<p>
						<span>“XXXX讲座”</span>
						活动快开始啦！准备好迎接精彩时刻了吗？不要错过这个令人兴奋的机会，我们期待着与您一同度过难忘的时光。请确保您已经做好了所有必要的准备，包括查看活动时间、地点和其他重要信息。
					</p>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="text">
				<view class="header">
					<p>
						成功加入教研室
						<span class="sj">13:28</span>
					</p>
				</view>
				<view class="main">
					<p style="text-indent: 0em">
						尊敬的
						<span style="font-size: 12px">XXX</span>
					</p>

					<p>
						我们很高兴通知您，您已成功加入
						<span>[教研室名称]</span>
						！欢迎加入我们的团队，我们期待与您一同合作并共同追求卓越教育。
					</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarData: {
				title: '活动消息',
				btn: 1
			}
		};
	}
};
</script>

<style lang="scss">
.content {
	padding: 10px;
	margin: 10px;
	background-color: white;
	// margin-top: 5px;
	.text {
		.header {
			p {
				color: black;
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				.sj {
					color: #999999;
					font-size: 13px;
					font-weight: 500;
				}
			}
		}
		.main {
			color: #999999;
			p {
				font-weight: 400;
				font-size: 14px;
				text-indent: 2em;
				span {
					color: #0056a8;
					font-weight: 600;
				}
			}
			.custom-list {
				padding-left: 5px;
				padding-top: 3px;
			}
			.custom-list .list-item::before {
				content: '• ';
			}
		}
	}
}
</style>