index.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .login-container {
  2. height: 100%;
  3. min-height: 550px;
  4. background-color: #eeeeee;
  5. background-image: url("@/assets/images/login_bg.svg");
  6. background-size: 100% 100%;
  7. background-size: cover;
  8. .login-box {
  9. position: relative;
  10. box-sizing: border-box;
  11. display: flex;
  12. align-items: center;
  13. justify-content: space-around;
  14. width: 96.5%;
  15. height: 94%;
  16. padding: 0 50px;
  17. background-color: rgb(255 255 255 / 80%);
  18. border-radius: 10px;
  19. .dark {
  20. position: absolute;
  21. top: 13px;
  22. right: 18px;
  23. }
  24. .login-left {
  25. width: 800px;
  26. margin-right: 10px;
  27. .login-left-img {
  28. width: 100%;
  29. height: 100%;
  30. }
  31. }
  32. .login-form {
  33. width: 420px;
  34. padding: 50px 40px 45px;
  35. background-color: var(--el-bg-color);
  36. border-radius: 10px;
  37. box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
  38. .login-logo {
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. margin-bottom: 45px;
  43. .login-icon {
  44. width: 60px;
  45. height: 52px;
  46. }
  47. .logo-text {
  48. padding: 0 0 0 25px;
  49. margin: 0;
  50. font-size: 42px;
  51. font-weight: bold;
  52. color: #34495e;
  53. white-space: nowrap;
  54. }
  55. }
  56. .el-form-item {
  57. margin-bottom: 40px;
  58. }
  59. .login-btn {
  60. display: flex;
  61. justify-content: space-between;
  62. width: 100%;
  63. margin-top: 40px;
  64. white-space: nowrap;
  65. .el-button {
  66. width: 185px;
  67. }
  68. }
  69. .form-footer {
  70. margin-top: 16px;
  71. font-size: 14px;
  72. color: var(--el-text-color-secondary);
  73. text-align: right;
  74. .el-button {
  75. padding: 0 8px;
  76. font-size: 14px;
  77. }
  78. }
  79. }
  80. }
  81. }
  82. @media screen and (width <= 1250px) {
  83. .login-left {
  84. display: none;
  85. }
  86. }
  87. @media screen and (width <= 600px) {
  88. .login-form {
  89. width: 97% !important;
  90. }
  91. }