kpsz-answer-h5/components/mypage/page2.vue

<template>
	<view class="page2">
		<image src="@/static/page2-bg.png" class="bkg" alt="" />
		<view class="page2-wrap">
			<image src="/static/logo.png" class="logo"></image>
			<view class="page2-wrap_content">
				<image src="/static/page2-title.png" class="page2-wrap_title"></image>
				<view class="page2-wrap_text">
					<image src="/static/page2-content.png" class="page2-wrap_text_img"></image>
					<view class="content">
						<view class="number">您是第 <text class="highlight">{{total}}</text> 个关心关爱孤独症儿童的“星”朋友!</view>
						<view class="slogan">守护“星”宝，成为“星”友，有爱不孤独！</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: '-',
			}
		},
		mounted() {
			
			this.loadData()
		},
		methods: {
			async loadData() {
				let userInfo = uni.getStorageSync('gdz_lifeData')?uni.getStorageSync('gdz_lifeData').vuex_user:false
				console.log("userInfo",userInfo)
				if (userInfo) {
					this.total = userInfo ? userInfo.top_department_id : '-'
				} else {
					// 如果数据不存在，可以选择再次尝试获取或者显示加载中提示
					setTimeout(() => {
						this.loadData(); // 递归尝试获取数据
					}, 1000);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page2 {
		width: 100vw;
		height: 100vh;
		position: relative;

		.bkg {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}

		&-wrap {
			width: 100vw;
			height: 100vh;
			overflow: scroll;
			position: absolute;
			top: 0;
			left: 0;
			padding-bottom: 350rpx;

			.logo {
				width: 415rpx;
				height: 82rpx;
				margin: 65rpx 0 0 35rpx;
			}

			&_content {
				margin-top: 60rpx;
			}

			&_title {
				width: 540rpx;
				height: 81rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 65rpx;
			}

			&_text {
				width: 732rpx;
				height: 567rpx;
				display: block;
				margin: 0 auto;
				position: relative;

				&_img {
					width: 732rpx;
					height: 567rpx;
					display: block;
					margin: 0 auto;
				}

				.content {
					width: 570rpx;
					display: block;
					margin: 0 auto;
					position: absolute;
					top: 240rpx;
					left: 100rpx;
					color: #6f6f6f;
					font-size: 32rpx;

					.number {
						line-height: 2;
						text-indent: 2em;

						.highlight {
							color: #e54545;
							font-weight: bold;
							margin: 0 10rpx;
						}
					}

					.slogan {
						display: block;
						margin-top: 20rpx;
						text-indent: 2em;
					}
				}
			}
		}
	}
	/* 当屏幕宽度小于 320px 时 */
	@media (max-width: 320px) {
	    .content {
	        font-size: 24rpx!important;
	    }
	}
	/* 当屏幕宽度大于 414px 时 */
	// @media (min-width: 414px) {
	//     .content {
	//         font-size: 32rpx;
	//     }
	// }
</style>