Vue-cli에서 별도 페이지의 배경색을 설정하는 방법

이제 Vue-cli에서 별도의 페이지에 대한 배경색을 설정하는 구현 방법을 공유하겠습니다. 참고할 가치가 높으며 모든 분들께 도움이 되기를 바랍니다.

예:

<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. CSS에서 본문의 배경색을 직접 설정하면 그에 따라 다른 페이지의 배경색도 변경되므로 권장하지 않습니다. 위의 예와 같이 .finish를 설정하면 - 배경색과 줄 바꿈 높이가 100%일 때 배경색의 일부만 변경되고 전체 화면의 배경색은 변경할 수 없습니다.

이유: app.vue를 열면

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

가 표시됩니다. 이유는 여기에 p의 또 다른 레이어가 있기 때문에 변경하는 것은 가장 바깥쪽 p의 배경색이 아니지만 여기서는 수정할 수 없습니다. , 그래서:

해결책:

우리는 .finish-wrap 문서 흐름을 분리하고 고정 속성을 추가해야 합니다. 최종 결과는 다음과 같습니다.

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

위는 제가 모두를 위해 편집한 내용입니다. 희망합니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

vue에서 비밀번호 표시/숨기기 전환 기능을 구현하는 방법

vue.js에서 this.$emit 사용에 대해 자세히 설명

vue.js에서 .self 수정자 사용하는 방법?

위 내용은 Vue-cli에서 별도 페이지의 배경색을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!