<template>
  <div class="login">
    <div class="login-content">
      <p>登录</p>
      <p> "欢迎回来！请输入您的登陆信息。</p>
      <n-input
        v-model:value="userData.userName"
        type="text"
        placeholder="请输入账号"
      />
      <n-input
        v-model:value="userData.passWord"
        type="password"
        show-password-on="click"
        placeholder="请输入账号"
      />
      <n-checkbox
        v-model:checked="userData.remenber"
        label="记住密码"
      />
      <n-button
        type="warning"
        block
        strong
        size="large"
        @click="router.push('/room')"
      >
        登陆
      </n-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const userData = reactive({
  userName: '',
  passWord: '',
  remenber: false
})
const router = useRouter()

</script>
<style lang="scss" scoped>
.login {
  min-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &-content {
    padding: 0 15px;
    &>p {
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin: 0;

      &:first-child {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 34px;
        line-height: 42px;
      }

      &:nth-child(2) {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        margin: 14px 0 25px 0;
      }
    }
    :deep(.n-input){
      --n-border-radius:5px;
    }
    &>div:nth-child(4){
      margin: 25px 0 10px 0;
    }
    :deep(.n-button){
      --n-font-size: 20px;
      --n-border-radius: 10px;
      margin-top: 20px;
    }
  }
}
</style>