Vue-cli 中为单独页面设置背景色的方法

例子：

<template>

  <div class="finish-wrap">

    <div class="finish-header">

      <div class="finish-img">

      </div>

    </div>

    <div class="finish-tip">

      支付成功

    </div>

    <div class="finish-footer">

        <router-link to="/">学车所需资料</router-link>

        <span>

          <router-link to="/">学车考照流程</router-link>

        </span>

    </div>

  </div>

</template>

1.如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取；

2.如上面例子如果设置.finish-wrap的背景色以及高度为100%时，会发现只是一部分的背景色发现改变，却不能使整个屏幕背景色变化；

     原因：打开app.vue，你会看到

     <template>

       <div>

         <router-view></router-view>

       </div>

     </template>

     原因就是这里还有一层div，所以你改变的不是最外层的div背景色，但是你有不能修改这里，所以：

解决方法：

     我们要让.finish-wrap脱离文档流，为他添加个fixed属性，最后结果：

     .finish-wrap

         background-color rgb(255,255,255)

         height: 100%

         position: fixed

         width: 100%