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 labelPosition="left" :model="model1" ref="form1">
					<u-form-item prop="userInfo.name" ref="item1">
						<view class="jpLogin-input">
							<u--input v-model="model1.userInfo.name" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.name" ref="item2">
						<view class="jpLogin-input">
							<u--input v-model="model1.userInfo.name" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.name" ref="item3">
						<view class="jpLogin-input">
							<u--input v-model="model1.userInfo.name" border="none"></u--input>
						</view>
					</u-form-item>
				</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" size="50px" text="登录" shape="circle"></u-button>
			</view>
			<view class="jpLogin-radio">
				<u-radio-group v-model="value" :customStyle="customStyle" placement="row">
					<u-radio activeColor="#ff5e5e" label="已阅读并同意《会员服务协议》"></u-radio>
				</u-radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					}
				},
				value:'0',
				customStyle:{
					color: 'red'
				}
			}
			methods: {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.jpLogin {
		background: url(/static/img/loginBg.png) top center no-repeat;
		background-size: 100%;
		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 30px;
	}

	.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;
	}
</style>