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:

<template>
 <p class="finish-wrap">
  <p class="finish-header">
   <p class="finish-img">
   </p>
  </p>
  <p class="finish-tip">
   支付成功
  </p>
  <p class="finish-footer">
    <router-link to="/">学车所需资料</router-link>
    <span>
     <router-link to="/">学车考照流程</router-link>
    </span>
  </p>
 </p>
</template>

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

<template>
    <p>
     <router-view></router-view>
    </p>
   </template>

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!