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

<template>
	<view class="page4">
		<image src="@/static/page4-bg.png" class="bkg" alt="" />
		<view class="page4-wrap">
			<scroll-view style="height: 100vh" :scroll-y="true">
			<image src="/static/logo.png" class="logo"></image>
			
			<view class="page4-wrap_content">
				<image src="/static/page4-title.png" class="page4-wrap_title"></image>

				<view class="page4-wrap_text">
					<image src="/static/page4-content.png" class="page4-wrap_text_img"></image>
					<view class="content">
						<view class="number">可以总结为“五不”(或“五少”)</view>
						<view>不(少)看：目光接触异常，对人尤其是人眼部的注视减少;</view>
						<view>不(少)应：幼儿对父母的呼唤声充耳不闻;</view>
						<view>不(少)指：缺乏恰当的肢体动作，无法对感兴趣的东西提出请求;</view>
						<view>不(少)说：多数患儿存在语言功能延迟;</view>
						<view>不当：指不恰当的物品使用及相关的感知觉异常。</view>
					</view>
				</view>
				<image src="/static/page4-title2.png" class="page4-wrap_title2"></image>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

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

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

		.bkg {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.logo {
			width: 415rpx;
			height: 82rpx;
			margin: 65rpx 0 0 35rpx;
		}
		&-wrap {
			width: 100vw;
			height: 100vh;
			overflow: scroll;
			position: absolute;
			top: 0;
			left: 0;
			// padding-bottom:350rpx;
			&_content {
				margin-top: 55rpx;
				padding-bottom: 175px;
			}

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

			&_title2 {
				width: 668rpx;
				height: 105rpx;
				display: block;
				margin: 0 auto;
				margin-top: 40rpx;
			}

			&_text {
				width: 717rpx;
				height: 740rpx;
				display: block;
				margin: 0 auto;
				position: relative;

				&_img {
					width: 717rpx;
					height: 740rpx;
					display: block;
					margin: 0 auto;
				}

				.content {
					width: 570rpx;
					display: block;
					margin: 0 auto;
					position: absolute;
					top: 70rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #6f6f6f;
					font-size: 32rpx;
					line-height: 2;
					.number {
						
						color:#784009;
						font-size: 36rpx;
					}
				}
			}
		}
	}
	/* 当屏幕宽度小于 320px 时 */
	@media (max-width: 320px) {
	    .content {
	        font-size: 24rpx!important;
	    }
	}
	/* 当屏幕宽度大于 414px 时 */
	// @media (min-width: 414px) {
	//     .content {
	//         font-size: 32rpx;
	//     }
	// }
</style>