jp-xqjy/pages/login/index.vue

<template>
	<view>
		<view class="jpLogin">
			<view class="jpLogin-title">
				<h2>会员登录</h2>
				<p>欢迎来到荆州工会鹊桥</p>
			</view>
			<view class="jpLogin-main">
				<u-form :model="form" ref="uForm">
					<view class="jpLogin-input">
						<u-icon custom-prefix="custom-icon" name="profile-fill" class="jpLogin-icon"></u-icon>
						<u-form-item><u-input v-model="form.name" placeholder="请填写18位身份证号" /></u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
						<u-form-item><u-input v-model="form.name" placeholder="请填写手机号码" /></u-form-item>
					</view>
					<view class="jpLogin-input">
						<u-icon custom-prefix="custom-icon" name="lock-password-fill" class="jpLogin-icon"></u-icon>
						<u-form-item><u-input v-model="form.name" placeholder="请输入验证码" /></u-form-item>
					</view>
				</u-form>
				<view class="jpLogin-link">
					<view class="jpLogin-link-l">
						<p>没有账号，</p>
						<span>去注册</span>
					</view>
					<span>获取验证码</span>
				</view>
			</view>
			<view style="margin-top: 60px;">
				<u-button type="error" shape="circle" :custom-style="customStyle">登录</u-button>
			</view>
			<view class="jpLogin-radio">
				<u-radio-group v-model="value">
					<u-radio activeColor="#ff5e5e"><view class="u-flex"><p>已阅读并同意</p><span>《会员服务协议》</span></view></u-radio>
				</u-radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				value:'0',
				customStyle: {
					background: '#FF5E5E'
				}
			}
			methods: {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.jpLogin {
		background: url(/static/img/loginBg.png) top center no-repeat;
		background-size: 100%;
		min-height: 100vh;
		padding: 50px;
	}

	.jpLogin-title {
		h2 {
			font-size: 24px;
			font-weight: normal;
		}

		p {
			color: #777;
			font-size: 14px;
			margin-top: 3px;
		}
	}

	.jpLogin-main {
		margin-top: 40px;
	}

	.jpLogin-input {
		height: 48px;
		background-color: #fff;
		border: 1px solid #EEDCDC;
		border-radius: 50px;
		display: flex;
		width: 100%;
		padding: 0 20px;
		margin-bottom: 20px;
		.u-form-item{
			flex: 1;
		}
		.jpLogin-icon{
			font-size: 20px;
			color:#FFC1C1;
			margin-right: 20px;
			position: relative;
			&:after{
				content: '';
				width: 1px;
				height: 16px;
				background-color:#E6D6D6;
				position: absolute;
				right: -10px;
				top: 15px;
			}
		}
	}

	.jpLogin-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;

		.jpLogin-link-l {
			display: flex;
			align-items: center;

			p {
				color: #4f4646;
			}
		}

		span {
			color: #1677FF;
		}
	}
	.jpLogin-radio{
		margin-top: 16px;
		text-align: center;
		p{
			font-size: 14px;
			color: #a0a4b8;
		}
		span{
			color:#ff5e5e;
			font-size: 14px;
		}
	}
</style>