How to set the background color for a separate page in Vue-cli

Below I will share with you an implementation method of setting the background color for a separate page in Vue-cli. It has a good reference value and I hope it will be helpful to everyone.

Example:

1. If you set the background-color of the body directly in css, it will cause the background color of other pages to change accordingly. , so it is not advisable;

2. As in the above example, if you set the background color and height of .finish-wrap to 100%, you will find that only a part of the background color is changed, but the background color of the entire screen cannot be changed. ;

Reason: Open app.vue, you will see

The reason is that there is another layer of p here, so what you change is not The background color of the outermost p, but you cannot modify it here, so:

Solution:

We need to make .finish- Wrap is separated from the document flow and adds a fixed attribute to it. The final result is:

.finish-wrap background-color rgb(255,255,255) height: 100% position: fixed width: 100%

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the password display and hide switching function in vue

Interpret this.$ in detail in vue.js How to use emit

#How to use the modifier .self in vue.js?

The above is the detailed content of How to set the background color for a separate page in Vue-cli. For more information, please follow other related articles on the PHP Chinese website!