<template> <view class="page"> <view class="fixed"> <u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36' height='45' back-icon-color='#fff'></u-navbar> </view> <view class="backimg"> </view> <!-- <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE" mode=""></image> --> <view class="cont"> <view class="cont_tit"> 请输入您的有效身份信息 </view> <view class="ipt_box"> <view class="ipt"> <view class="txt"> 姓名 </view> <input type="text" v-model="idnum" placeholder="请填写姓名" /> </view> <view class="ipt" style="margin-top: 40rpx;"> <view class="txt"> 身份证号 </view> <input type="text" v-model="idnum" placeholder="请填写身份证号" /> </view> </view> </view> <view class="sub_box"> <view class="btn"> 完成 </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style lang="scss"> page { background-color: #F7F7F7; } .page{ .sub_box{ position: fixed; display: flex; align-items: center; justify-content: center; bottom: 0; width: 750rpx; height: 174rpx; background: #FFFFFF; box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3); border-radius: 0rpx 0rpx 0rpx 0rpx; .btn{ display: flex; align-items: center; justify-content: center; width: 682rpx; height: 84rpx; background: #4297F3; border-radius: 42rpx 42rpx 42rpx 42rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; } } .cont{ margin: 0 auto; margin-top: -200rpx; width: 676rpx; // height: 574rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; z-index: 10; .cont_tit{ width: 676rpx; height: 118rpx; background: #EFEFEF; display: flex; align-items: center; padding: 34rpx; font-weight: 600; font-size: 36rpx; color: #3D3D3D; border-radius: 20rpx 20rpx 0rpx 0rpx; } .ipt_box{ padding: 46rpx 26rpx; .ipt{ padding: 24rpx 40rpx; width: 624rpx; height: 92rpx; background: #EFEFEF; border-radius: 46rpx 46rpx 46rpx 46rpx; display: flex; align-items: center; .txt{ width: 30%; font-weight: 400; font-size: 32rpx; color: #3D3D3D; } } } } .fixed { z-index: 999; position: fixed; top: 0; } .backimg { // position: fixed; width: 750rpx; height: 696rpx; z-index: -10; background-image: url('https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE'); background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */ background-position: center; } } </style>