<template>
	<view>
		<view class="tbg">
			<view class="ti">
				请完善客户信息
			</view>
			<image class="bg" src="https://t17.9026.com/web/statics/image/index/addcustomerbg.png" mode=""></image>
			<view class="customerInfo">
				<view class="top">基本信息</view>
				<view class="head">
					<image class="bg" src="https://t17.9026.com/web/statics/image/index/headbg.png" mode=""></image>
					<image class="camera" src="https://t17.9026.com/web/statics/image/index/camera.png" mode=""></image>
				</view>
				<view class="main-left cross-center linp border_bottom">
					<view class="field">姓名</view>
					<input type="text" value="" placeholder="请输入姓名" />
				</view>
				<view class="main-left cross-center linp border_bottom">
					<view class="field">手机号</view>
					<input type="text" value="" placeholder="请输入手机号" />
				</view>
			</view>
		</view>
		<view class="oinfo">
			<view class="main-left cross-center linp border_bottom">
				<view class="field" style="font-weight: bold;">楼盘信息</view>
			</view>
			<view class="main-left cross-center linp border_bottom">
				<view class="field">楼盘名称</view>
				<input type="text" value="" placeholder="请选择楼盘名称" />
			</view>
			<view class="main-left cross-center linp border_bottom">
				<view class="field">区域信息</view>
				<input type="text" value="" placeholder="请选择区域信息" />
			</view>
			<view class="main-left cross-center linp border_bottom">
				<view class="field">楼盘性质</view>
				<input type="text" value="" placeholder="请选择楼盘性质" />
			</view>
			<view class="main-left cross-center linp border_bottom">
				<view class="field">楼盘户号</view>
				<input type="text" value="" placeholder="请输入楼盘户号" />
			</view>
			<button type="default" class="complete">完成</button>
		</view>
		<button type="default" class="addlp">添加楼盘</button>
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.addlp{
		width: 606rpx;
		height: 90rpx;
		border: 1rpx solid #A18353;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #A18353;
		margin-top: 39rpx;
	}
	.complete{
		width: 606rpx;
		height: 90rpx;
		background: #A18353;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 36rpx;
	}
	.oinfo{
		width: 678rpx;
		height: auto;
		background: #FEFEFE;
		border-radius: 10rpx;
		margin: 20rpx auto 39rpx;
	}
	.linp{
		height: 104rpx;
		padding: 0 35rpx;
		.field{
			width: 120rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
			margin-right: 30rpx;
		}
		.val{
			
		}
	}
	.border_bottom{
		
border-bottom: 1px solid #EAEAEA;
	}
	.tbg{
		width: 100%;
		height: 660rpx;
		position: relative;
		padding-top: 176rpx;
		.ti{
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: absolute;
			top: 75rpx;
			left: 36rpx;
		}
		.bg{
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.customerInfo{
			width: 678rpx;
			height: auto;
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin: 0 auto 20rpx;
			.top{
				height: 98rpx;
				background: #FCF7EA;
				font-size: 28rpx;
				font-weight: bold;
				color: #D0C9C1;
				padding: 36rpx 30rpx;
			}
			.head{
				width: 127rpx;
				height: 127rpx;
				position: relative;
				margin: 32rpx auto;
				background-color: #fefefe;
				z-index: 2;
				.bg{
					width: 127rpx;
					height: 127rpx;
				}
				.camera{
					width: 41rpx;
					height: 32rpx;
					position: absolute;
					bottom: 5rpx;
					right: -6rpx;
				}
			}
		}
	}
</style>
