<template>


	<view class="box">
		<view class="content">
			<view class="tit">
				欢迎进入吟龙土壤墒情监测溯系统!
			</view>
			<view class="input-card">
				<view class="login-type">
					账号登录
					<view class="line" />
				</view>
				<view class="" style="margin: 30rpx 0;">
					<up-input placeholder="请输入账号"
						customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" shape='circle'
						border="surround" v-model="formData.account"></up-input>
				</view>
				<view class="">
					<up-input type="password" shape='circle'
						customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" placeholder="请输入密码"
						border="surround" v-model="formData.password"></up-input>
				</view>
				<view class="sub-btn">
					<up-button @click="submitFn" type="primary" customStyle="border:none;height:90rpx" color="#34D190"
						text="登录"></up-button>
				</view>

			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const submitFn = () => {

		uni.switchTab({
			url: "/pages/index/index"
		})
	}
	const formData = reactive({
		account: "",
		password: ""
	})
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background-color: $theme-main-color;
		position: relative;
	}

	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 700rpx;

		.tit {
			color: white;
			font-size: 45rpx;
			margin-bottom: 30rpx;
		}

		.input-card {
			width: 620rpx;
			background-color: #fff;
			height: auto;
			padding: 40rpx;
			border-radius: 30rpx;

			.login-type {
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: flex-start;

				.line {
					border-top: 3px solid #34D190;
					margin-left: 30rpx;
					margin-top: 10rpx;
					width: 60rpx;
				}
			}

			.sub-btn {
				margin-top: 30rpx;
			}

		}
	}
</style>