Vue移动端前端页面加底部footer

场景：

 

有几个页面要加底部logo，由于每个页面的高度都不一样，加上底部后，底部在每个页面展示的位置都显示在不同的地方，有的偏上有的偏下。页面调试的换机型的时候也会有偏上偏下的情况。

如下图：

解决：

这时候可以通过设置z-index+position进行固定。

footer.vue 这里的底部主要是logo图片，移动端一定要测试切换不同机型的兼容展示情况。

其它需要显示这个logo作为底部的页面引入这个footer.vue组件即可。

footer.vue的主要内容，div包着一个logo图片

<div class="logo">
    <van-image :src="logo" width="200">
</div>

下面是logo的样式设置，按照下面的样式设置后，页面调试切换了各种机型都是保持在底部，并且居中。

.logo{
    bottom: 1rem;
    z-index:1;
    position: fixed;
    width:100%;
    text-align:center;
}