JP-ChargeTeam51/pages/login/completeInfo.vue

<template>
	<view>
		<u-navbar title="完善信息"><view class="skip">
			跳过
		</view></u-navbar>
		<view class="data">
			<view class="data-img">
				<view class="data-icon">
					<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="32"></u-icon>
				</view>
				<u-avatar :src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="216"/></u-avatar>
			</view>
			
			<view class="data-input">
				<u-form :model="form" ref="uForm" >
					<u-form-item label-position="top" label="昵称"><u-input v-model="form.nickName" placeholder="请填写昵称"/></u-form-item>
				</u-form>
			</view>
			<p class="car-num">车牌号码</p>
			<view class="key-input">
				<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
			</view>
			<view class="default">
				<u-checkbox-group>
					<u-checkbox class="tips" v-model="form.defaultFlag" shape="circle" >设为默认车辆</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-button class="login-btn" type="success" shape="circle" >完成</u-button>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				maxlength:8,
				keyShow: true,
				form: {
					nickName: '',
					headImg: '',
				},
			}
		},
		
		
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.skip{
		margin-left: 81.3%;
	}
	.data-icon{
		height: 28px;
		width: 28px;
		background-color: #00B962;
		border-radius: 14px;
		border: 2px solid #fff;
		text-align: center;
		line-height: 24px;
		position: absolute;
		z-index: 999;
		right: 0;
		bottom:0px
	}
	.data-img{
		margin: 30px auto;
		height: 108px;
		width: 108px;
		position: relative;
	}
	.data-input{
		margin: 0 40px;
	}
	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
	.car-num{
		padding: 40px 0 0 40px;
		line-height: 18px;
	}
	.key-input {
		padding-top: 19px;
	}
	
	.default {
		margin: 16px 28px;
	}
	/deep/.u-char-item {
		width: 30px !important;
		height: 40px !important;
		font-size: 18px !important;
	}
</style>