teaching-uniapp/pages/messageSystem/messageSystem.vue

<template>
	<view class="messageSys">
		<statusBar :item="navBarData"></statusBar>
<!-- 		<view class="content">
			<view class="text">
				<view class="header">
					<view class="disC three-font">
						活动发布成功
						<text class="sj fwb-font">13:28</text>
					</view>
				</view>
				<view class="main">
					<view class="fwb-font">
						恭喜！您已成功完成
						<text class="btn-font" style="color: #0056a8;">“XXXX讲座”</text>
						活动发布过程。您的活动现在已经在我们的平台上正式上线，可以被其他用户浏览和参加。请随时返回您的活动管理页面，以进行任何进一步的编辑、更新或促进活动的操作。
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="content">
			<view class="text">
				<view class="header">
					<view class="disC three-font">
						成功加入教研室
						<text class="sj fwb-font">13:28</text>
					</view>
				</view>
				<view class="main">
					<view style="text-indent: 0em">
						尊敬的
						<text>XXX</text>
					</view>

					<view>
						我们很高兴通知您，您已成功加入
						<text class="btn-font" style="color: #0056a8;">[教研室名称]</text>
						！欢迎加入我们的团队，我们期待与您一同合作并共同追求卓越教育。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	.messageSys{
		padding-bottom: 80rpx;
	}
.content {
	padding: 10px;
	margin: 10px;
	background-color: white;
	border-radius: 8px;
	// margin-top: 5px;
	.disC{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.text {
		.header {
			view {
				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;
			view {
				font-weight: 400;
				// font-size: 14px;
				text-indent: 2em;
				view {
					color: #0056a8;
					font-weight: 600;
				}
			}
			.custom-list {
				padding-left: 5px;
				padding-top: 3px;
			}
			.custom-list .list-item::before {
				content: '• ';
			}
		}
	}
}
</style>