Comment définir la couleur d'arrière-plan d'une page séparée dans Vue-cli

Maintenant, je vais partager avec vous une méthode d'implémentation pour définir la couleur d'arrière-plan d'une page distincte dans Vue-cli. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Exemple :

<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. Si vous définissez la couleur d'arrière-plan du corps directement en CSS, cela provoquera l'arrière-plan. couleur des autres pages à changer. La réponse change, ce n'est donc pas conseillé

2 Comme dans l'exemple ci-dessus, si vous définissez la couleur d'arrière-plan et la hauteur de .finish-wrap à 100 % ; constatez que seule une partie de la couleur d'arrière-plan change, mais que tout l'arrière-plan de l'écran ne peut pas être modifié.

Raison : ouvrez app.vue, vous verrez .

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

La raison est qu'il y a une autre couche de p ici, donc ce que vous avez modifié n'est pas la couleur d'arrière-plan du p le plus à l'extérieur, mais vous ne pouvez pas la modifier ici, donc :

Solution :

Nous voulons que .finish-wrap soit séparé du flux de documents et y ajoute un attribut fixe. Le résultat final est :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la fonction de commutation afficher-masquer le mot de passe dans vue

Interpréter ceci.$ en détail dans vue .js Comment utiliser submit

Comment utiliser le modificateur .self dans vue.js ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!