LoginPages.razor 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @page "/"
  2. @layout Layouts.LoginLayout
  3. <div class="login-NavLogin">
  4. <div style="padding:30px">
  5. <Card Bordered="true" Title=@("用户登录") Style="width:400px" Hoverable="true">
  6. <Body>
  7. <Form Model="@model" OnFinish="OnLogin">
  8. <FormItem>
  9. <Space Direction="DirectionVHType.Vertical" Style="width:100%">
  10. <SpaceItem>
  11. <AntDesign.Input Placeholder="请输入用户名" Size="@InputSize.Large" @bind-Value="context.Name">
  12. <Prefix><Icon Type="user"></Icon></Prefix>
  13. </AntDesign.Input>
  14. <br />
  15. </SpaceItem>
  16. <SpaceItem>
  17. <AntDesign.Input Placeholder="请输入密码" Size="@InputSize.Large" @bind-Value="context.Password" type="password">
  18. <Prefix><Icon Type="lock"></Icon></Prefix>
  19. </AntDesign.Input>
  20. </SpaceItem>
  21. </Space>
  22. </FormItem>
  23. <Space Direction="DirectionVHType.Vertical" Style="width:100%">
  24. <SpaceItem>
  25. <Spin Spinning="isLoading">
  26. <Button Type="primary" HtmlType="submit" Class="submit" Size="large" Block>登&nbsp;录</Button>
  27. </Spin>
  28. </SpaceItem>
  29. <SpaceItem>
  30. <div class="other">
  31. <Button Type="@ButtonType.Link" @onclick="ResetPassword">我忘记密码,需要重置!</Button>
  32. </div>
  33. </SpaceItem>
  34. </Space>
  35. </Form>
  36. </Body>
  37. </Card>
  38. </div>
  39. </div>
  40. <Modal Title="密码重置"
  41. Visible="@ShowResetPassword"
  42. OnOk="@HandleOk"
  43. OnCancel="@HandleCancel"
  44. OkText="@("重置")"
  45. CancelText="@("取消")">
  46. <Form Model="EditingStaff" LabelColSpan="6"
  47. WrapperColSpan="16">
  48. <FormItem Label="账号">
  49. <Input @bind-Value="@context.Account" />
  50. </FormItem>
  51. <FormItem Label="邮箱">
  52. <Input @bind-Value="@context.Mail"/>
  53. </FormItem>
  54. </Form>
  55. </Modal>
  56. <style>
  57. .login-NavLogin {
  58. position: absolute;
  59. left: 50%;
  60. top: 40%;
  61. transform: translate(-50%, -50%);
  62. }
  63. body {
  64. background-image: url(images/bg1.jpg);
  65. background-attachment: fixed;
  66. background-repeat: no-repeat;
  67. background-size: cover;
  68. background-position: center;
  69. }
  70. </style>