Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-06 10:25:27
original
2807 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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%
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal