使用vue的时候需要设置当前页面的背景色,但是你会发现当页面内容不够铺满整屏时 背景色不会铺满整屏

(红色为背景色） 

这是因为高度不够 所以我们需要设置样式 

在App.vue里面设置

html{
  width: 100%;
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
}
#app{
  width: 100%;
  height: 100%;
}

​

 然后在当前需要设置背景的页面设置

<template>
  <div style="width: 100%; height: 100%; background-color: red;"></div>
</template>

​

这样就算没有内容时 背景色也能铺满整屏

还有一种情况就是当内容超出屏幕时 滚动后面的内容会没有背景色

 这时候就只需要设置当前页的样式

<template>
  <div style="width: 100%;min-height: 100%;background-color: red;"></div>
</template>

这样背景颜色就能正常显示了~~ 

为了实现设置vue移动端背景色填充满屏幕，并且滑动屏幕同样设有颜色l
给body元素增加::before伪元素来实现这个效果，再给伪元素增加样式即可
例如：

body::before{
	content: ' ';
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: red;
	background-size: 100% auto;
}

照片代码为

<template>
   <!--<div class="OrderList" v-for="(order,index) in orderList" :key="index">


   </div>-->
  <div class="body">
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>
    <div class="OrderList">
      <div class="M_name">商店名：</div>
      <div class="O_state">是否支付：</div>
      <div class="U_picture">商品照片：</div>
      <div class="G_describe">商品介绍：</div>
      <div class="price">价格</div>
      <button class="deleteGoods" type="button">删除订单</button>
    </div>

  </div>


</template>

<script>
    export default {
        name: "UserOrder"
    }
</script>

<style scoped>
.body::before{
  content:'';
  position: fixed;
  z-index: -1;
  background-size: 100% auto;
  background-color:gainsboro;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0px;
  margin: 0px;

}
/*.body{
  position: absolute;
  background-color:gainsboro;
  border: 1px solid red;
  width: 100%;
  height: 100%;

  padding: 0px;
  margin: 0px;

}*/
.OrderList{
  border: 1px solid red;
  position: relative;
  width: 92%;
  height: 99px;
  top: 100px;
  right: 10px;
  left: 10px;

  background-color:ghostwhite;
  /*border: 2px solid white;*/
  margin-top: 20px;
  border-radius: 30px;
}
.M_name {
  position: relative;
  width: 100px;
  height: 3px;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: bold;
  /* background-color: wheat; */
}
.O_state {
  position: relative;
  width: 100px;
  height: 3px;
  top: 0px;
  left: 190px;
  font-size: 10px;
  color: goldenrod;
  /* background-color: wheat; */
}
.U_picture {
  border: 1px solid #2c3e50;
  position: relative;
  width: 64px;
  height: 55px;
  top: 15px;
  left: 20px;
  font-size: 10px;
  /* background-color: wheat; */
}
.G_describe {
   position: relative;
   width: 99px;
   height: 55px;
   top: -42px;
   left: 100px;
   font-size: 10px;
   /* background-color: wheat; */
 }
.price {
  position: relative;
  width: 30px;
  height: 55px;
  top: -95px;
  left: 220px;
  font-size: 10px;
  /* background-color: wheat; */
}
.deleteGoods {
  position: relative;
  width: 64px;
  height: 30px;
  top: -107px;
  left: 85px;
  font-size: 10px;
  border-radius: 30px;
  border:1px solid #CCC;
  /* background-color: wheat; */
}
</style>

如上图，如果是第一张图片，需要在左上角加上灰色背景，白色“封面”字样，背景色需要有透明度。

首先，需要知道rgba() 函数。

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

• 红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
• 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
• 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
• 透明度（A）取值 0~1 之间， 代表透明度。数值越小，透明度越高。

下面上vue代码：

首先设置父级元素位置position: relative;然后设置子元素位置position: absolute;通过设置left、right、top、bottom来调整位置，然后设置背景色background:rgba(34,34,34,0.5);