<template>
  <div class="card card-dash h-80 w-100 shadow-xl">
    <div class="card-body">
      <h1 class="card-title place-self-center my-3 text-2xl">User Login</h1>
      <div class="flex flex-col w-full h-full">
        <label class="input w-full my-3">
          <img class="h-[1em] opacity-50" src="@/assets/user.svg" alt="User img" />
          <input type="text" class="grow" placeholder="用户名" />
        </label>
        <label class="input w-full my-3">
          <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
          <input type="text" class="grow" placeholder="密码" />
        </label>
      </div>
      <div>
        <RouterLink class="flex justify-end mx-3" to="/">忘记密码?</RouterLink>
      </div>
      <div class="card-actions flex items-end my-3">
        <button class="btn flex-1">注册</button>
        <button class="btn btn-primary flex-3">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
@import "@/assets/main.css";
</style>
