index.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. $bg:#283443;
  2. $light_gray:#333;
  3. $cursor: #333;
  4. @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  5. .login-container .el-input input {
  6. color: $cursor;
  7. }
  8. }
  9. /* reset element-ui css */
  10. .login-container {
  11. .el-input {
  12. display: inline-block;
  13. height: 47px;
  14. width: 85%;
  15. input {
  16. background-color: #e8f0fe;
  17. border: 0px;
  18. -webkit-appearance: none;
  19. border-radius: 0px;
  20. padding: 12px 5px 12px 15px;
  21. color: $light_gray;
  22. height: 47px;
  23. caret-color: $cursor;
  24. }
  25. }
  26. .el-form-item {
  27. border: 1px solid rgba(255, 255, 255, 0.1);
  28. background: #E8F0FE;
  29. border-radius: 5px;
  30. color: #454545;
  31. }
  32. .tips{
  33. color:#333;
  34. }
  35. }
  36. $bg:#2d3a4b;
  37. $dark_gray:#333;
  38. $light_gray:#eee;
  39. .login-container {
  40. background-image: url("../../assets/images/aiBgimg.png");
  41. background-size: contain;
  42. min-height: 100%;
  43. width: 100%;
  44. /* background-color: $bg; */
  45. overflow: hidden;
  46. display:flex;
  47. justify-content: flex-end;
  48. .gradient-background {
  49. position: absolute;
  50. background: linear-gradient(to bottom, #4f46e5, #3b82f6); /* from-indigo-600 to-blue-500 */
  51. opacity: 0.75;
  52. top: 0;
  53. right: 0;
  54. bottom: 0;
  55. left: 0;
  56. z-index: 0;
  57. }
  58. .form-content{
  59. background: linear-gradient(to bottom, #4f46e5, #3b82f6);
  60. z-index: 999;
  61. width: 40%;
  62. .login_form{
  63. display: flex;
  64. overflow: hidden;
  65. background: #FFF;
  66. height: 100vh;
  67. flex-direction: column;
  68. align-items: center;
  69. justify-content: center;
  70. /* .title-container{
  71. background-color: #899fe1;
  72. .images{
  73. height:100px;
  74. }
  75. } */
  76. .login-form {
  77. width: 60%;
  78. position: relative;
  79. background:#FFF;
  80. padding:40px;
  81. }
  82. }
  83. }
  84. .tips {
  85. font-size: 14px;
  86. color: #818cf8;
  87. margin-bottom: 24px;
  88. width:100%;
  89. display: flex;
  90. justify-content: flex-end;
  91. span {
  92. &:first-of-type {
  93. margin-right: 16px;
  94. }
  95. }
  96. }
  97. .svg-container {
  98. padding: 6px 5px 6px 15px;
  99. color: $dark_gray;
  100. vertical-align: middle;
  101. width: 30px;
  102. display: inline-block;
  103. }
  104. .title-container {
  105. position: relative;
  106. .title {
  107. font-size: 26px;
  108. color: $light_gray;
  109. margin: 0px auto 40px auto;
  110. text-align: center;
  111. font-weight: bold;
  112. }
  113. }
  114. .show-pwd {
  115. position: absolute;
  116. right: 10px;
  117. top: 7px;
  118. font-size: 16px;
  119. color: $dark_gray;
  120. cursor: pointer;
  121. user-select: none;
  122. }
  123. .thirdparty-button {
  124. position: absolute;
  125. right: 0;
  126. bottom: 6px;
  127. }
  128. @media only screen and (max-width: 470px) {
  129. .thirdparty-button {
  130. display: none;
  131. }
  132. }
  133. }