style(auth): 优化登录页面样式布局
- 使用 Tailwind CSS 类替换原有基础样式 - 添加背景色和居中对齐容器 - 表单元素增加间距和输入框样式 - 按钮应用宽按钮样式类 - 移除无用的 placeholder 属性 - 调整标签与输入框结构使其更清晰
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user