You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.3 KiB
2.3 KiB
登录注册页面重写设计
日期
2026-05-25
目标
重写 /auth/login 和 /auth/register 页面为独立的极简居中卡片表单，不依赖其他页面信息。
设计风格
方案一：极简居中卡片
结构
页面结构
- 全屏
{colors.canvas}= #faf9f5 背景 - 居中单卡片，
{rounded.lg}（12px），白底 + 微妙阴影 - 卡片最大宽度 420px，内边距 40px
背景装饰
- 32px 圆点网格纹理（
{colors.hairline}色，opacity 0.5） - 右上角 + 左下角各一模糊光晕（coral + amber，opacity ~10-12%）
表单内容（login）
- 标题："欢迎回来"
- 副标题："继续您的探索之旅"
- 用户名/邮箱输入框（浮动 label）
- 密码输入框 + 忘记密码链接
- 验证码输入框 + 验证码图片
- 记住我复选框
- 提交按钮
- 分割线 + 社交登录按钮
- 底部链接："还没有账户？立即注册"
表单内容（register）
- 标题："创建账户"
- 副标题："加入我们开始策展"
- 用户名输入框
- 密码输入框
- 确认密码输入框
- 验证码输入框 + 验证码图片
- 提交按钮
- 分割线 + 社交登录按钮
- 底部链接："已有账户？立即登录"
交互细节
- 提交按钮 hover 光泽扫过动效
- 输入框 focus 边框变 coral + 外发光（4px coral 10% alpha）
- 验证码点击刷新
组件样式
卡片
background: {colors.canvas}
border-radius: 12px
box-shadow: 0 2px 12px rgba(20,20,19,0.06)
padding: 40px
max-width: 420px
输入框
background: {colors.canvas}
border: 1.5px solid {colors.hairline}
border-radius: 8px
padding: 20px 16px 8px
font-size: 16px
transition: border-color 0.2s ease, box-shadow 0.2s ease
focus: border-color = {colors.primary}, box-shadow = 0 0 0 4px rgba(204, 120, 92, 0.1)
提交按钮
background: {colors.primary}
color: {colors.on-primary}
border-radius: 8px
padding: 18px 24px
hover: {colors.primary-active}
active: scale(0.98)
背景光晕
光晕1（右上）: background: {colors.primary}, top: -150px, right: 10%, opacity: 0.12, blur: 80px, 尺寸: 500px
光晕2（左下）: background: {colors.accent-amber}, bottom: -100px, left: 20%, opacity: 0.08, blur: 80px, 尺寸: 400px
网格纹理: radial-gradient, 32px 间隔, opacity 0.5
实现文件
app/pages/auth/login.vueapp/pages/auth/register.vue