123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- $bg:#283443;
- $light_gray:#333;
- $cursor: #333;
- @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
- .login-container .el-input input {
- color: $cursor;
- }
- }
- /* reset element-ui css */
- .login-container {
- .el-input {
- display: inline-block;
- height: 47px;
- width: 85%;
- input {
- background-color: #e8f0fe;
- border: 0px;
- -webkit-appearance: none;
- border-radius: 0px;
- padding: 12px 5px 12px 15px;
- color: $light_gray;
- height: 47px;
- caret-color: $cursor;
- }
- }
- .el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
- background: #E8F0FE;
- border-radius: 5px;
- color: #454545;
- }
- .tips{
- color:#333;
- }
- }
- $bg:#2d3a4b;
- $dark_gray:#333;
- $light_gray:#eee;
- .login-container {
-
- background-image: url("../../assets/images/aiBgimg.png");
- background-size: contain;
- min-height: 100%;
- width: 100%;
- /* background-color: $bg; */
- overflow: hidden;
- display:flex;
- justify-content: flex-end;
- .gradient-background {
- position: absolute;
- background: linear-gradient(to bottom, #4f46e5, #3b82f6); /* from-indigo-600 to-blue-500 */
- opacity: 0.75;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 0;
- }
- .form-content{
- background: linear-gradient(to bottom, #4f46e5, #3b82f6);
- z-index: 999;
- width: 40%;
- .login_form{
- display: flex;
- overflow: hidden;
- background: #FFF;
- height: 100vh;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- /* .title-container{
- background-color: #899fe1;
- .images{
- height:100px;
- }
- } */
- .login-form {
- width: 60%;
- position: relative;
- background:#FFF;
- padding:40px;
-
- }
- }
- }
- .tips {
- font-size: 14px;
- color: #818cf8;
- margin-bottom: 24px;
- width:100%;
- display: flex;
- justify-content: flex-end;
- span {
- &:first-of-type {
- margin-right: 16px;
- }
- }
- }
- .svg-container {
- padding: 6px 5px 6px 15px;
- color: $dark_gray;
- vertical-align: middle;
- width: 30px;
- display: inline-block;
- }
- .title-container {
- position: relative;
- .title {
- font-size: 26px;
- color: $light_gray;
- margin: 0px auto 40px auto;
- text-align: center;
- font-weight: bold;
- }
- }
- .show-pwd {
- position: absolute;
- right: 10px;
- top: 7px;
- font-size: 16px;
- color: $dark_gray;
- cursor: pointer;
- user-select: none;
- }
- .thirdparty-button {
- position: absolute;
- right: 0;
- bottom: 6px;
- }
- @media only screen and (max-width: 470px) {
- .thirdparty-button {
- display: none;
- }
- }
- }
|