So legen Sie die Hintergrundfarbe für eine separate Seite in Vue-cli fest

Jetzt werde ich Ihnen eine Implementierungsmethode zum Festlegen der Hintergrundfarbe für eine separate Seite in Vue-cli vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Beispiel:

<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. Wenn Sie die Hintergrundfarbe des Körpers direkt in CSS festlegen, wird die Hintergrundfarbe von andere Seiten entsprechend zu ändern, daher ist es nicht ratsam, wie im obigen Beispiel die Hintergrundfarbe und -höhe von .finish-wrap auf 100 % zu setzen Ein Teil der Hintergrundfarbe wird geändert, aber die Hintergrundfarbe des gesamten Bildschirms kann nicht geändert werden ;

Grund: Öffnen Sie app.vue, Sie sehen

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

Der Grund dafür ist, dass es hier eine weitere p-Ebene gibt. Was Sie also ändern, ist nicht die äußerste p-Hintergrundfarbe, aber Sie können sie hier nicht ändern, also:

Lösung: Wir möchten .finish- Wrap vom Dokumentenfluss trennen und ihm ein festes Attribut hinzufügen. Das Endergebnis ist:

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

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Funktion zum Ein- und Ausblenden von Passwörtern in Vue

Interpretieren Sie dies.$ im Detail in Vue .js Wie verwende ich emit

Wie verwende ich den Modifikator .self in vue.js?

Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundfarbe für eine separate Seite in Vue-cli fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!