uniapp超实用页面三层架构（背景层+模糊层+内容层）

Posted 2022-10-25 Rose✿留白ق೨

更新：固定高度 + 滚动条，解决内容超出问题（内容不超出可以去掉）

<template>
  <view>
    <view class="bottom"></view> 
    <view class="middle"></view>
    <view class="content"> info.vue </view>
  </view>
</template>

<script>
export default 
  data() 
    return ;
  ,
  methods: ,
;
</script>

<style lang="scss" scoped>
.bottom,
.middle 
  position: absolute;
  height: calc(100vh - 88rpx);
  width: 100%;


.bottom 
  background-image: url("/static/images/index.png");
  background-size: 100% 100%;


.middle 
  background-color: rgba(255, 255, 255, 0.6);


.content 
  position: absolute;
  //height: calc(100vh - 88rpx);overflow: scroll;固定高度 + 滚动条，解决内容超出问题（内容不超出可以去掉）
  height: calc(100vh - 88rpx);
  overflow: scroll;

</style>

效果图：