jurong_circle_front_app/pages/login/login.vue

<template>
	<view class="login-container">
		<view class="login-title">
			<view class="title">
				用户登录
			</view>
			<view class="sub-title">
				欢迎回到炬融圈
			</view>
		</view>
		<image src="../../static/login/login-img.png" mode="" class="login-img"></image>
		<view class="login-form">
			<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
				label-width="0">
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/user.png" prop="username">
					<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号"
						placeholder-style="color: #737373;" />
				</u-form-item>
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Lock.png" prop="password">
					<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码"
						placeholder-style="color: #737373;" />
				</u-form-item>
				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Globe.png" prop="code">
					<u-input v-model="userLogin.userForm.code" placeholder="请输入验证码"
						placeholder-style="color: #737373;" />
				</u-form-item>
				<view class="reflash" @click="reflash">
					<image class="reflash-icon" src="/static/login/Repeat.png" mode=""></image>
					刷新
				</view>
				<view class="rember">
					<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
				</view>
				<view class="forget-pwd">忘记密码？</view>
				<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
				<view class="register">
					<view class="register-text">没有账号？</view>
					<view class="register-link">点击注册？
						<image class="register-link-icon" src="/static/Chevron right.png" mode=""></image>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app';

	const userLoginRef = ref()
	const userLogin = reactive({
		userForm: {
			username: '',
			password: '',
			code: '',
			is_rember: false
		},
		ruls: {
			username: [
				{
					required: true,
					message: '请输入用户名或手机号',
					trigger: ['change']
				}
			],
			password: [
				{
					required: true,
					message: '请输入密码',
					trigger: ['change']
				}
			],
			code: [
				{
					required: true,
					message: '请输入验证码',
					trigger: ['change']
				}
			]
		}
	})

	onReady(() => {
		userLoginRef.value.setRules(userLogin.ruls);
	});

	const reflash = () => {
		userLoginRef.value.resetFields()
	}

	const submit = () => {
		userLoginRef.value.validate((valid : any) => {
			if (valid) {
				console.log('验证通过');
			}
		});
	}

	const inputIcon = {
		width: '32rpx',
		verticalAlign: 'middle'
	}
</script>

<style scoped lang="scss">
	.login-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);

		.login-title {
			padding: 80rpx 0 0 0;

			.title {
				font-family: SF Pro;
				font-weight: 650;
				font-style: Expanded Semibold;
				font-size: 60rpx;
				leading-trim: NONE;
				line-height: 80rpx;
				letter-spacing: 0%;
				text-align: center;
				color: #7087FF;
			}

			.sub-title {
				font-family: SF Pro;
				font-weight: 700;
				font-style: Bold;
				font-size: 32rpx;
				leading-trim: NONE;
				line-height: 48rpx;
				letter-spacing: 0%;
				text-align: center;
				color: #FFFFFF;
			}

		}

		.login-img {
			width: 100%;
		}

		.login-form {
			padding: 10rpx 32rpx;

			.reflash {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;


				// 文字
				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				color: #3781EF;

				.reflash-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.forget-pwd {
				text-align: center;

				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				text-align: center;
				color: #3781EF;
				margin: 20rpx 0;
			}

			.submit-btn {
				width: 240rpx;
				height: 96rpx;

				// 文字
				font-family: SF Pro;
				font-weight: 650;
				font-style: Expanded Semibold;
				font-size: 40rpx;
				leading-trim: NONE;
				line-height: 28px;
				letter-spacing: 0%;
				text-align: center;
			}

			.register {
				margin: 40rpx 0 80rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				// 文字
				font-family: Work Sans;
				font-weight: 400;
				font-size: 13px;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				text-align: center;


				.register-text {
					color: #737373;
				}

				.register-link {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #3781EF;

					.register-link-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

	}
</style>