vue 动态添加页面背景色

　　1.html 

 <div class="brand_zone" :style="{backgroundColor:colorList[type-1]}"></div>
2.css 

.brand_zone{

  position: fixed;

     100%;

    height: 100%;

    top: 0px;

    left: 0;

    z-index: -1;

}
3.js
data(){

type:1,
colorList:['#F32446','#EF2602','#F72D93']

}

created(){
this.type = this.$route.query.type;
}

页面背景色占满了全屏，不会影响页面元素

第二种方案，（如果页面keep-alive 会导致页面颜色遗留）

mounted 

// document.body.style.backgroundColor = "#F32446";

destroyed

 document.querySelector("body").setAttribute("style", "background-color:''");

第三种：

:style="{ backgroundColor: colorList[type - 1], height: pageHeight }"

this.pageHeight = window.screen.height + "px";