响应式登录组件。

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

<template>
  <div class="rounded-lg bg-white px-4 py-8">
    <h1 class="mb-5 text-center text-[26px] font-medium">
      登录
    </h1>
    <input id="userName" type="text" placeholder="请输入用户名"
      class="block w-full rounded-md border border-solid border-gray-300 px-3 py-2 outline-none focus:ring-1 focus:ring-[#1f293733] dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary">
    <p class="h-5 text-[12px] text-red-500">
      请输入用户名
    </p>

    <input id="password" type="password" placeholder="请输入密码"
      class="peer block w-full rounded-md border border-solid border-gray-300 px-3 py-2 outline-none focus:ring-1 focus:ring-[#1f293733] dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary">
    <p class="h-5 text-[12px] text-red-500">
      请输入密码
    </p>

    <button type="submit"
      class="block h-10 w-full rounded-md bg-primary text-white hover:bg-primary/80 active:scale-98">
      登录
    </button>

    <div class="mt-4 flex items-center gap-1 text-sm">
      <label class="flex cursor-pointer items-center gap-1">
        <input type="checkbox" class="size-4 rounded border-gray-300 text-primary focus:ring-primary">
        <span>我已阅读并同意</span>
      </label>
      <a href="" class="text-primary hover:text-primary/80">《用户协议》</a>
      和
      <a href="" class="text-primary hover:text-primary/80">《隐私政策》</a>
    </div>

    <div class="mt-4 flex justify-between text-sm">
      <a href="" class="text-primary hover:text-primary/80">注册</a>
      <a href="" class="text-primary hover:text-primary/80">忘记密码</a>
    </div>
  </div>
</template>

验证码登录

快速登录

请输入手机号

请输入验证码

我已阅读并同意《用户协议》和《隐私政策》

没有账号？去注册

查看代码

html

<template>
  <div class="rounded-lg bg-white px-4 py-8">
    <h2 class="mb-8 text-center text-2xl font-bold">
      快速登录
    </h2>
    <div class="flex items-center gap-1">
      <input class="h-10 flex-1 rounded-md bg-gray-100 px-2" type="text" placeholder="请输入手机号">
    </div>
    <p class="h-[18px] text-[12px] text-red-500">
      请输入手机号
    </p>

    <div class="flex items-center gap-1">
      <input class="h-10 flex-1 rounded-md bg-gray-100 px-2" type="text" placeholder="请输入验证码">
      <button class="h-10 w-[100px] text-nowrap rounded-md bg-gray-100 text-sm">
        获取验证码
      </button>
    </div>
    <p class="h-[18px] text-[12px] text-red-500">
      请输入验证码
    </p>

    <button type="submit"
      class="mt-6 block h-10 w-full rounded-md bg-primary text-white hover:bg-primary/80 active:scale-98">
      登录
    </button>

    <div class="mt-4 flex items-center gap-1 text-sm">
      <label class="flex cursor-pointer items-center gap-1">
        <input type="checkbox"
          class="size-4 rounded border-gray-300 text-primary focus:ring-primary">
        <span>我已阅读并同意</span>
      </label>
      <a href="" class="text-primary hover:text-primary/80">《用户协议》</a>
      和
      <a href="" class="text-primary hover:text-primary/80">《隐私政策》</a>
    </div>

    <div class="mt-4 text-center">
      <a class="cursor-pointer text-sm text-primary hover:text-primary/80">
        没有账号？去注册
      </a>
    </div>
  </div>
</template>

Login 登录 ​

行内 Tailwind/UnoCSS 用法 ​

登录

快速登录

Login 登录

行内 Tailwind/UnoCSS 用法