teaching-uniapp/pages/messageDy/messageDy.vue

<template>
	<view class="messageDy">
		<statusBar :item="navBarData"></statusBar>

		<view class="content">
			<view class="text">
				<view class="header">
					<view class="disC three-font">
						欢迎订阅“XXXX讲座”
						<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;">[XXXX讲座名称]</text>
						！欢迎加入我们的团队，我们期待与您一同合作并共同追求卓越教育。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	.messageDy{
		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>