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

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

<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>

效果图：