Home
Get Started
Toggle Menu
请你帮我设计一个登录页面:用户操作步骤: 1. 用户打开应用,进入登录页面 2. 用户在页面上看到一个输入框,用于输入手机号码 3. 输入框下方有两个按钮:"获取验证码"和"密码登录",默认显示"获取验证码" 4. 如果用户选择"获取验证码",点击按钮后,向用户手机发送6位数字验证码,同时按钮变为倒计时状态"60秒后重发" 5. 用户输入收到的验证码,点击登录按钮 6. 如果验证码正确,则登录成功进入应用主界面;如果验证码错误,则弹出错误提示,要求用户重新输入 7. 如果用户选择"密码登录",点击按钮后,输入框下方显示密码输入框 8. 用户输入正确的手机号和密码,点击登录按钮 9. 如果手机号和密码匹配,则登录成功进入应用主界面;如果不匹配,则弹出错误提示,要求用户重新输入 10. 在登录表单下方,提供"忘记密码"、"注册新账号"等快捷入口 11. 同时提供微信、QQ等第三方登录方式,点击相应图标即可跳转到第三方授权页面 12. 第三方授权成功后,直接登录进入应用主界面;授权失败则返回登录页面,提示用户重新操作 13. 如果用户输入的手机号码未注册,则在点击登录按钮后,弹出提示框:"该手机号码未注册,是否立即注册?" 14. 提示框有两个按钮:"立即注册"和"取消"。用户点击"立即注册",提示框消失,页面底部弹出输入验证码的蒙版 15. 用户点击蒙版上的"发送验证码",向手机号发送6位数字验证码,按钮变为倒计时状态"60秒后重发" 16. 用户收到短信验证码后,在蒙版上输入该6位验证码,点击"立即注册"按钮 17. 如果验证码正确,则自动创建一个新账号,并提示用户"注册成功,请设置您的账号密码"。若验证码错误,则提示用户"验证码有误,请重新输入" 18. 注册成功后,自动跳转到设置密码页面,引导用户完成密码设置,然后自动登录到APP主页 界面元素: 返回按钮 • 应用Logo • 手机号码输入框 • 获取验证码按钮 • 密码登录按钮 • 密码输入框 • 登录按钮 • 忘记密码入口 • 注册新账号入口 • 第三方登录图标微信 • 错误提示 • 客服图标 • 登录方式切换图标 • 登录加载框 • 备案信息 • 未注册手机号提示弹框 • 验证码输入蒙版 • 发送验证码按钮(验证码蒙版上) • 立即注册按钮(验证码蒙版上) • 注册成功提示 | A shadcn/ui and v0 generation - v0
注册 和忘记密码应该用蓝色字体
Add
component
to project
Learn more
npx v0 add
a1B2c3d4
component.jsx
(read-only)
Log In to Copy Code
To enable copying code, saving to favorites, forking, and other features, please sign up or log in.
Authenticate
Copy Code
Copy CLI command
注册 和忘记密码应该用蓝色字体
History
Toggle
v0
v1
v2
v3
v4
v5
v6
v7
v8
v9
v10
v11
v12
Link to ccdudu1's v0.app Profile
Link to ccdudu1's v0.app Profile
Desktop
Tablet
Mobile
Full Screen
History
Code