uni-app项目实战笔记10--设置页面全局渐变线性渐变背景色

本篇来设置页面的全局背景色，使用线性渐变背景色。

1.在前面创建的common-style.scss文件中定义一个pageBd样式：

.pageBg{background: linear-gradient(to bottom,transparent,#fff 400rpx ),linear-gradient(to right,#beecd8 20%,#F4E2d8);min-height: 80vh;
}

linear-gradient用于定义渐变色，to bottom，to right颜色渐变方向，backgroud可设置多个渐变色，优先级从上到下递减。

然后在3个推荐、分类和我的应用这个样式：

# 首页

<view class="homeLayout pageBg">

# 分类

<view class="classLayout pageBg">

#我的

<view class="userLayout pageBg">

我的页面在row部分添加一个核心模块的背景色：视觉效果更自然美观

 background: #fff;

最终效果：

 

拓展： 

1、关于颜色选取可参考该网站：Color Palette Generator - ColorDrop

2、关于更多渐变色的设置可访问咸虾米老师的B站视频：咸虾米_的个人空间-咸虾米_个人主页-哔哩哔哩视频