<template>
	<view class="page">
		<image class="bj" src="/static/signIn/signInbj.png" mode="aspectFill"></image>
		<view class="box">
			<image class="title" src="/static/signIn/title.png" mode="aspectFit"></image>
			<view class="desc">欢迎登录！很高兴再次见到你</view>
			<view class="from">
				<view class="input" :class="{on:isname}">
					<image src="/static/signIn/2.png"></image>
					<input cursor-spacing='15' @focus="isname=true" @blur="isname=false"  placeholder="请填写账号"/>
				</view>
				<view class="input" :class="{on:ispassword}">
					<image src="/static/signIn/1.png"></image>
					<input cursor-spacing='15' v-model="password"  @focus="ispassword=true" @blur="ispassword=false" :type="!showpassword?'password':'text'"  placeholder="请填密码"/>
					<view @click="showpassword=!showpassword" v-if="password.length">
						<uni-icons type="eye-slash-filled" v-if="!showpassword" size="16rpx"></uni-icons>
						<uni-icons type="eye-filled" v-else size="16rpx"></uni-icons>
					</view>
				</view>
				<view class="checkbox">
					<checkbox value="cb" activeBackgroundColor='#4D7BFF' :checked="true" color="#ffffff" style="transform:scale(0.7)" />
					记住密码
				</view>
				<view class="submit">登录</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

	const isname=ref(false);
	const ispassword=ref(false);
	const showpassword=ref(false)
	const name=ref("");
	const password=ref("")
</script>

<style scoped lang="scss">
	.page{
		width: 100vw;
		height: 100vh;
		position: relative;
		.bj{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.box{
			position: fixed;
			
			top: 50%;
			right: 110rpx;
			transform: translate(0%,-50%);
			.title{
				height: 40rpx;
				width: 230rpx;
			}
			.desc{
				text-align: center;
				color: #667085;
				font-size: 15rpx;
				margin: 0rpx 0  20rpx 0;
			}
			.from{
				margin-top: 34rpx;
				.input{
					display: flex;
					align-items: center;
					border: 1px solid #D0D5DD;
					padding:7rpx 10rpx;
					border-radius: 5rpx;
					margin-bottom: 9rpx;
					background: #fff;
					&.on{
						border: 1px solid #4D7BFF;
					}
					input{
						font-size: 12rpx;
						margin-right: 7rpx;
					}
					image{
						width: 10rpx;
						height: 13rpx;
						margin-right: 10rpx;
					}
				}
				
			}
			.checkbox{
				display: flex;
				align-items: center;
				color: #667085;
				margin: 15rpx 0;
				font-size: 11rpx;
			}
			.submit{
				text-align: center;
				background: #4D7BFF;
				color: #fff;
				line-height: 33rpx;
				font-size: 13rpx;
				border-radius: 5rpx;
			}
		}
	}
</style>