使用mpvue开发微信小程序如何改变page的颜色

先来解决方案在说，解决这个方案的思路

<template>
  <div class="container">
    <!--没有收获地址状态-->
    <div class="noShippingAddress">
      <i class="icon-address"></i>
      <span>添加收件人信息</span>
      <i class="icon-arrow"></i>
    </div>
  </div>
</template>
<!--因为加了scope webpack会进行打包，都会加上哈希一样的数值，导致原生小程序无法识别page这个关键词所以可以单独抽出来解决-->
<style>
  page{
    background: #F7F7F7;
  }
</style>
<style lang="scss" scoped>
.noShippingAddress{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 12px 19px 16px;
  box-sizing: border-box;
  background:rgba(252,163,12,0.2);
  .icon-address{
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("https://taotingbao.oss-cn-hangzhou.aliyuncs.com/icon-address.png") no-repeat;
    background-size: 28px 28px;
  }
  span{
    font-size:15px;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .icon-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("https://taotingbao.oss-cn-hangzhou.aliyuncs.com/icon-arrow.png") no-repeat;
    background-size: 14px 14px;
  }
}
</style>

复制代码

转载于:https://juejin.im/post/5c80d8fff265da2dd94cd64e