移动端键盘弹起底部固定布局被顶上去

问题：移动端登录页面布局，将div固定到底部，input点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去。

vue解决方案：

<van-row v-show="isOriginHei">
                        <p style="position: fixed;bottom:20px;left:0;right:0;">Powered by xxxx信息技术有限公司</p>
</van-row>

        export default{
		data(){
			return{
                            originHeight: 0, 	// 原始高度
                            screenHeight: 0, 	// 实际高度
                            isOriginHei: true, 	// 显示或隐藏底部信息
			}
		},
		methods:{
                    watchResize() {
                        //实时变化的窗口高度
                        this.screenHeight = document.documentElement.clientHeight;
                    },
		},
		mounted () {
                    //首次进入的原始高度
                    this.originalHeight = document.documentElement.clientHeight;
                    //监听屏幕变化并获取到屏幕原始高度
                    window.addEventListener('resize', this.watchResize);
			
		},
                beforeDestroy() {			//删除对resize的监听变化   
                    window.removeEventListener("resize", this.watchResize);			
                },		
		watch:{
                    screenHeight(newHeight) { //监听屏幕高度变化
                        this.isOriginHei = this.originalHeight <= newHeight;
                    }
		},		
	}

	var winHeight = $(window).height();  //获取当前页面高度
	$(window).resize(function () {
	    var thisHeight = $(this).height();
	    if ( winHeight - thisHeight > 140 ) {
	        //键盘弹出
	        $('.footer').css('position','static');
	    } else {
	        //键盘收起
	        $('.footer').css({'position':'fixed','bottom':'0'});
	    }
	})