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

亚连
Release: 2018-06-06 10:25:27
Original
2729 people have browsed it

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:

Copy after login

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

Copy after login

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%
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn