不同的机型,他的比例啥的都会不一样,同样的rpx也会有不同的效果。所以这里选择了取消高度。
javascript
<view class="box-border" :style="{
'padding-top': `${navHeight}px`,
}">
<!-- 已登录 -->
<view v-if="userStore.userInfo">
<alreadyLoggedInPanel />
<walletPanel />
</view>
<!-- 未登录 -->
<view v-else>
<notLogInPanel />
<walletPanel />
</view>
</view>
<view class="my-20rpx">
<welfarePanel />
<servicePanel />
</view>
还有提供一种背景显示区域的css
css
.background_img {
/* background-image: url("https://test-1309061343.cos.ap-nanjing.myqcloud.com/temp/2025/01/06/ed2d3320c3e14f8abb061faaec5081ca.png") ;
background-repeat:no-repeat;
background-size: cover; */
background: url('https://test-1309061343.cos.ap-nanjing.myqcloud.com/temp/2025/01/06/ed2d3320c3e14f8abb061faaec5081ca.png')
no-repeat top center / 100% 534rpx,#F4F7FB;
}
