You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
2.4 KiB

1 year ago
<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>