new-login.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. .hc-new-login {
  2. position: relative;
  3. background-color: #13161F;
  4. overflow: hidden;
  5. .hc-new-login-bg {
  6. position: absolute;
  7. object-fit: cover;
  8. width: 100%;
  9. height: 100%;
  10. }
  11. .hc-new-login-main .hc-new-login-content .hc-new-login-form-card {
  12. position: relative;
  13. border-radius: 13px;
  14. height: 500px;
  15. }
  16. .hc-new-login-copyright {
  17. position: absolute;
  18. bottom: 0;
  19. width: 100%;
  20. text-align: center;
  21. padding: 20px 0;
  22. color: white;
  23. font-size: 12px;
  24. .text {
  25. white-space: pre-wrap;
  26. }
  27. .text + .text {
  28. margin-top: 6px;
  29. }
  30. }
  31. }
  32. .hc-new-login .hc-new-login-main .hc-new-login-content .hc-new-login-form-card {
  33. .form-left {
  34. .form-img {
  35. position: absolute;
  36. width: 370px;
  37. bottom: 16px;
  38. left: 60px;
  39. }
  40. &:before {
  41. content: '';
  42. position: absolute;
  43. width: 2px;
  44. height: 90%;
  45. right: 0;
  46. top: 5%;
  47. background: rgba(138, 138, 138, 0.39);
  48. }
  49. }
  50. .form-right {
  51. padding: 26px 0;
  52. .form-main {
  53. position: relative;
  54. width: 359px;
  55. margin: auto;
  56. height: 100%;
  57. .title {
  58. color: #041015;
  59. margin-bottom: 40px;
  60. }
  61. .el-form .el-form-item {
  62. .el-input {
  63. --el-input-bg-color: #E7E7E6;
  64. --el-input-placeholder-color: #787676;
  65. .el-input-group__prepend {
  66. padding: 0 10px;
  67. background-color: var(--el-input-bg-color);
  68. box-shadow: 0 0 0 1px #d3d3d3 inset;
  69. i {
  70. font-size: 20px;
  71. color: #626060;
  72. }
  73. &:before {
  74. content: '';
  75. background: #BBBBBB;
  76. position: absolute;
  77. right: 0;
  78. height: 26px;
  79. width: 1px;
  80. }
  81. }
  82. .el-input__wrapper {
  83. box-shadow: 0 0 0 1px #d3d3d3 inset;
  84. }
  85. .el-input__inner {
  86. color: #0a0a0a;
  87. }
  88. }
  89. &.checkbox-1, &.checkbox-2 {
  90. margin-bottom: 0;
  91. .el-form-item__content {
  92. line-height: 30px;
  93. .el-checkbox.el-checkbox--large {
  94. height: 30px;
  95. }
  96. }
  97. }
  98. .el-checkbox {
  99. color: #626060;
  100. }
  101. .el-checkbox__input.is-checked + .el-checkbox__label {
  102. color: #626060;
  103. }
  104. &.login-btn {
  105. margin-top: 50px;
  106. margin-bottom: 0;
  107. }
  108. }
  109. }
  110. }
  111. }