<template>
    <!-- 登录页面 -->
    <view class="login">
        <uni-forms :modelValue="loginForm" label-position="top" class="login-form">
            <h1>用户登录</h1>
            <uni-forms-item label="用户名">
                <uni-easyinput
                    v-model="loginForm.userName"
                    placeholder="请输入账户"
                ></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item required label="密码">
                <uni-easyinput
                    v-model="loginForm.passWord"
                    placeholder="请输入密码"
                ></uni-easyinput>
            </uni-forms-item>

            <view class="login-btn" @tap="onHandleLogin">登录</view>
        </uni-forms>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const loginForm = reactive({
    userName: '',
    passWord: '',
})
const onHandleLogin = () => {
    console.log('登录---')
    uni.switchTab({
        url: '/pages/index/index',
    })
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;

    .login-form {
        width: 90%;
        padding: 15rpx;
        border: 1px solid #333;
        background-color: #fff;
        border-radius: 16rpx;

        h1 {
            text-align: center;
            padding: 30rpx 0;
            font-size: 32rpx;
            font-weight: bold;
        }

        .login-btn {
            padding: 18rpx 0;
            text-align: center;
            background-color: #1989fa;
            color: #fff;
            border-radius: 10rpx;
        }
    }
}
</style>
