<template>
	<div class="page-container tn-gradient-bg__cool-5">
		<cheader></cheader>
		<div class="login-body">
			<div class="login-form tn-grey_shadow">
				<p>账号登录</p>
				<tn-input v-model="username" placeholder="请输入用户名">
					<template #prefix>
						<uni-icons type="contact" size="18" color="#ccc"></uni-icons>
					</template>
				</tn-input>
				<div class="divider"></div>
				<tn-input v-model="password" type="password" placeholder="请输入密码">
					<template #prefix>
						<uni-icons type="locked-filled" size="18" color="#ccc"></uni-icons>
					</template>
				</tn-input>
				<div class="divider"></div>
				<tn-button width="250px" height="36px" @click="loginAction">登    录</tn-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import cheader from '@/components/header.vue'
	import { ref } from 'vue'

	let username = ref('')
	let password = ref('')
	
	let loginAction = ()=>{
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
</script>

<style lang="scss">


	.login-body {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90vh;

		.login-form {
			height: 40vh;
			width: 30vw;
			padding: 15px 40px;
			background-color: #fff;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			p {
				font-size: 28px;
				font-weight: 600;
				margin-bottom: 20px;
				background: linear-gradient(to right, #1874CD 70%, #0099ff );
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
			
			.divider{
				height: 20px;
			}
		}
	}
</style>