背景设置为渐变色

<style>page {background: linear-gradient(to bottom right, #191A2C, #514B67);//从左上到右下颜色逐渐变浅}
</style>

如果此时页面内容没有到底部的话会成这个样子

有很明显的断层，体验不好

优化方法

1.先给页面设置固定宽度

<style>page {height: 1250rpx;//试了一下刚好铺满页面background: linear-gradient(to bottom right, #191A2C, #514B67);}
</style>

2.再在页面中加入一个scrollview并使其纵向可滑

<scroll-view class="school_group2" scroll-y="true" :show-scrollbar="true">
...
<scroll-view>

3.最后给scrollview一个合适的宽度

.school_group2 {height: 830rpx;
}

这样上下滑动的时候就只会滑动scrollview而不是滑动页面了