uni-app 输入框软键盘把背景图顶上来

1、demo.vue

<template>
    <view class="container" :style="'height:'+screenHeight+'px !important;'">
        <view class="welcome">
            <view>您好，</view>
            <view>欢迎登录。</view>
        </view>
        <form @submit="formSubmit" @reset="formReset">
            <view class="form_view">
                <view class="input-view">
                    <view class="label-view">
                        <view class="icon iconfont iconicon_patriarch"></view>
                    </view>
                    <input class="input" type="text" placeholder="请输入账号" placeholder-style="color:#999999;font-size:30upx" v-model="nameValue" />
                </view>
                <view class="input-view">
                    <view class="label-view">
                        <view class="icon iconfont iconicon_little_taget"></view>
                    </view>
                    <input class="input" type="text" placeholder="请输入密码" placeholder-style="color:#999999;font-size:30upx" v-model="passwordValue" />
                </view>
            </view>            
        </form>
        <view class="button-view">
            <button :loading="loading" class="login" formType="submit">登录</button>
        </view>
    </view>
</template>

<script>
    
    export default {
        components: {
            
        },
        data() {
            return {
                nameValue: '',
                passwordValue: '',
                screenHeight: '',
                loading: false
            }
        },
        methods: { 
        },
        onReady() {
            
        },
        onLoad() {
            this.screenHeight = uni.getSystemInfoSync().windowHeight;
        }
    }
</script>

<style>
    @import '../static/css/demo.css';
</style>

将demo.css放入static里的css文件中

在demo.css中的背景图换成你项目中需要的背景图即可

2、demo.css

page{
    width: 100%;
    height: 100%;
}
.container{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: url(demo.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.welcome{
    width: 214upx;
    height: 106upx;
    margin: 0 auto;
    margin-left: 50upx;
    padding-top: 150upx;
}
.input-view{
    width: 650upx;
    height: 57upx;
    display: flex;
    align-items: center;
    border-bottom: 1upx solid #dddddd;
    margin: 60upx auto;
}
.input-view input{
    margin-left: 20upx;
}
.input-view .icon{
    color: #bbbbbb;
}
.placeholderStyle{
    font-size: 30upx;
    color: #999999;
}
.form_view{
    width: 650upx;
    height: 176upx;
    margin: 105upx auto;
}
button{
    width: 560upx;
    height: 90upx;
    font-size: 48upx;
    color: #fffefe;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3196fb;
    box-shadow: 0 0 10upx rgba(49,150,251,0.3);
}
.dns{
    color: #FFFFFF;
    font-size: 24upx;
    width: 710upx;
    text-align: right;
    position: absolute;
    bottom: 30upx;
}