style(auth): 优化登录页面样式布局

- 使用 Tailwind CSS 类替换原有基础样式
- 添加背景色和居中对齐容器
- 表单元素增加间距和输入框样式
- 按钮应用宽按钮样式类
- 移除无用的 placeholder 属性
- 调整标签与输入框结构使其更清晰
This commit is contained in:
Chaos
2025-11-22 22:52:48 +08:00
parent 65cf80fb51
commit 8c041c1740

View File

@@ -28,16 +28,16 @@ const handleChange = (e: Event) => {
}
</script>
<div class="h-screen w-screen">
<form id="loginForm">
<div>
<label class="" for="username" > username </label>
<input type="text" name="username" on:change={handleChange} placeholder="username">
</div>
<div>
<label class="" for="password" > password </label>
<input type="password" name="password" on:change={handleChange} placeholder="password">
</div>
<button class="" type="submit" on:click="{handleSubmit}" > 登录</button>
<div class="h-screen w-screen bg-base-300 flex justify-center items-center">
<form id="loginForm" class="flex flex-col gap-4">
<label class="" for="username" >用户名</label>
<input class="input" type="text" name="username" on:change={handleChange} >
<label class="" for="password" >密码</label>
<input class="input " type="password" name="password" on:change={handleChange} >
<button class="btn btn-wide" type="submit" on:click="{handleSubmit}" > 登录</button>
</form>
</div>