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

<template>
	<view class="page3">
		<image src="@/static/page3-bg.png" class="bkg" alt="" />
		<view class="page3-wrap">
			<scroll-view style="height: 100vh" :scroll-y="true">
			<view class="page3-wrap_content">
				<image src="/static/page3-title.png" class="page3-wrap_title"></image>
				<image src="/static/page3-title2.png" class="page3-wrap_title2"></image>
				<view class="page3-wrap_text">
					<image src="/static/page3-content.png" class="page3-wrap_text_img"></image>
					<view class="content">
						<view class="number">
							孤独症儿童被称为“星星的孩子”，这种病症多发生在婴幼儿时期，以社会交往障碍、交流障碍、局限的兴趣、刻板与重复的行为方式等为主要症状，患儿多数还会伴有不同程度的智力发育迟滞。</view>
					</view>
				</view>

			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.page3 {
		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;

			&_content {
				margin-top: 100rpx;
				padding-bottom: 175px;
			}

			&_title {
				width: 421rpx;
				height: 61rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 55rpx;
			}

			&_title2 {
				width: 679rpx;
				height: 359rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}

			&_text {
				width: 707rpx;
				height: 581rpx;
				display: block;
				margin: 0 auto;
				position: relative;

				&_img {
					width: 707rpx;
					height: 581rpx;
					display: block;
					margin: 0 auto;
				}

				.content {
					width: 540rpx;
					display: block;
					margin: 0 auto;
					position: absolute;
					top: 140rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #6f6f6f;
					font-size: 32rpx;

					.number {
						line-height: 2;
					}
				}
			}
		}
	}
	/* 当屏幕宽度小于 320px 时 */
	@media (max-width: 320px) {
	    .content {
	        font-size: 24rpx!important;
	    }
	}
	/* 当屏幕宽度大于 414px 时 */
	// @media (min-width: 414px) {
	//     .content {
	//         font-size: 32rpx;
	//     }
	// }
</style>