一、設置原理

1.由于不同手機的高度是變化的，所以要做到自適應，就要解決不同手機高度能夠動態(tài)獲取。
2.設置page（相當于設置body）的寬度與高度100%
3.設置背景圖容器的寬度100%，高度或者最小高度100%

<template>
  <view class="question-wrap" :style="{ height: screenHeight }">
    <!-- 頂部導航 -->
    <u-navbar
      :title="null"
      :border-bottom="false"
      :is-fixed="false"
      :background="null"
      back-icon-color="#ffffff"
    >
    </u-navbar>
    <!-- 頂部導航 -->

    <!-- 內容區(qū)域 -->
    <view class="content-wrap">
      <view class="countdown-wrap"> </view>
      <view class="question-content-wrap"></view>
    </view>
    <!-- 內容區(qū)域 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      //屏幕高度
      screenHeight: 0,
    };
  },
  onLoad() {
    this.screenHeight = uni.getSystemInfoSync().windowHeight;
  },
  methods: {},
};
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.question-wrap {
  background: url("http://www.xxx.com/xxxxxx.png")
    no-repeat;
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  .content-wrap {
  }
}
</style>

二、效果圖

效果圖