tabBar原本是 position: fixed的布局，会导致元素脱标，不占位，上面的内容就会被覆盖
.layout {height: 100%;display: flex;flex-direction: column;.main{flex: 1;overflow: hidden; // 隐藏二级路由中超出main高度的内容}.van-tabbar {position: relative;}
}
二级路由页面高度要设置 100%
.article-page {height: 100%;.van-pull-refresh {height: 100%;.van-list {height: 100%;overflow: scroll;}}
}
说明：
flex: 1 在 CSS 的 Flexbox 布局中是一个简写属性，用于设置 flex-grow,flex-shrink, 和 flex-basis 这三个属性的值。当你使用 flex: 1 时，你实际上是在设置：
flex-grow: 1：表示该项可以扩大以占用额外的空间。当父容器中有剩余空间时，这个元素会尝试占用这些空间。如果多个子元素都设置了
flex-grow，那么它们会按照各自的 flex-grow 值比例来分配这些空间。
flex-shrink: 1：表示该项可以缩小以避免父容器溢出。当父容器空间不足时，这个元素会缩小以适应。如果多个子元素都设置了
flex-shrink，那么它们会按照各自的 flex-shrink 值比例来缩小。
flex-basis: 0%（默认情况，因为在简写中如果没有明确指定，则采用默认值）：表示该项的原始大小是0%。
但是，由于设置了 flex-grow，所以实际的大小会根据父容器的大小和其他子元素的 flex-grow 值来决定。 在 .layout 样式中，.main
类应用了 flex: 1。这意味着 .main 元素在垂直方向（由于 flex-direction:
column;）上会尽可能地填充剩余空间。
