xinelu-applet-ui/pagesC/Onlinesigning/Onlinesigning.vue

<template>
	<view class="app">
		<view class="content">
			<view class="numberone">1
				<view class="information">
					填写个人信息
				</view>
			</view>
			<view class="item">
			</view>
			<view class="number">
				<view class="numbertwo">
					2
				</view>
				<view class="information">
					选择签约机构
				</view>
			</view>
			<view class="contentbottom">
				<view class="name">
					姓名
					<u-input v-model="value" :border="border" placeholder="请输入姓名" />

				</view>
				<view class="name">
					身份证号
					<u-input v-model="value" :border="border" placeholder="请输入身份证号" />
				</view>
				<view class="name">
					手机号码
					<u-input v-model="value" :border="border" placeholder="请输入手机号码" />
				</view>
				<view class="name">
					现任区县
					<view class="select">
						<text>请选择现任区县</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					乡镇
					<view class="select">
						<text>请选择乡镇</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					村/社区
					<view class="select">
						<text>请选择村/社区</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					详细地址
					<u-input v-model="value" :border="border" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="nextpage" @tap="gonextstep">
				下一步
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true
			}
		},
		methods: {
			gonextstep() {
				uni.navigateTo({
					url: '/pagesC/Signingagency/Signingagency'
				})
			},
		}
	}
</script>
<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		.content {
			width: 95%;
			height: 100%;
			overflow: scroll;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 15rpx auto;
			position: relative;

			.nextpage {
				width: 496rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				line-height: 61rpx;
				color: white;
				text-align: center;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				top: 23%;
			}

			.contentbottom {
				position: relative;
				top: 20%;
			}

			.name {
				padding: 10rpx 30rpx 0 7%;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;

				::v-deep .u-input {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border: none;
					border-radius: 5rpx;

				}

				::v-deep.uni-input-placeholder {
					color: #8E8E8E !important;
					font-size: 20rpx;
				}
				::v-deep.input-placeholder{
					color: #8E8E8E !important;
					font-size: 20rpx;
				}

				.select {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border-radius: 5rpx;
					display: flex;
					position: relative;

					text {
						padding-left: 20rpx;
						line-height: 63rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8E8E8E;
					}

					image {
						width: 9rpx;
						height: 17rpx;
						position: absolute;
						right: 40rpx;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
				}
			}

			.numberone {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 6%;
				left: 15%;
				background: #26A888;
				border-radius: 50%;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;

				.information {
					width: 160rpx;
					margin: 11px 4px 4px -10px;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #26A888;
					line-height: 38rpx;
				}
			}

			.number {
				.numbertwo:hover {
					background-color: #26A888;
					color: #fff;
				}

				.information:hover {
					color: #26A888;
				}
			}

			// ::v-deep .uni-input-input {
			// 	left: 20rpx;
			// }

			.number {
				width: 180rpx;
				height: 150rpx;
				position: absolute;
				top: 6%;
				left: 65%;

				.numbertwo {
					width: 90rpx;
					height: 90rpx;
					left: 50%;
					transform: translateX(50%);
					background: #F0F1F6;
					border-radius: 50%;
					line-height: 90rpx;
					text-align: center;
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					// border: 1rpx solid #A6C8C0;
					color: #A6C8C0;

				}

				.information {
					padding-top: 20rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #8E8E8E;
					line-height: 38rpx;
					text-align: center;
				}
			}


			.item {
				position: absolute;
				width: 202rpx;
				height: 1rpx;
				top: 10%;
				left: 34%;
				background: linear-gradient(-90deg, #E6E6E6, #26A888);
			}
		}
	}
</style>