在vue中,遇到不同页面需要不同的背景的情况
1.app.vue中声明样式
.page {
background-color: #fff;
padding: 11.7333vw 0 13.3333vw;
padding-top: calc(11.7333vw + 24px);
}
.page1 {
background: #f7fafc;
// background-color: #fff;
padding: 11.7333vw 0 13.3333vw;
padding-top: calc(11.7333vw + 24px);
min-height: 100vh;
box-sizing: border-box;
}
2.在需要改变颜色页面添加以下代码
beforeCreate: function() {
if (document.getElementsByClassName("page")[0])
document.getElementsByClassName("page")[0].className = "page1";
},
beforeDestroy: function() {
document.getElementsByClassName("page1")[0].className = "page";
},
mounted() {
if (document.getElementsByClassName("page")[0]) {
console.log(document.getElementsByClassName("page")[0]);
document.getElementsByClassName("page")[0].className = "page1";
}
},