VUE设置当前页面的背景色

为了实现设置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>