vue 動態添加頁面背景色

　　1.html 

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

.brand_zone{

  position: fixed;

    width: 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";