| | |
| | | <template> |
| | | <div class="login-right-new" :class="loginPageClass"> |
| | | <div class="login-title">{{ loginTitle }}</div> |
| | | <div class="user-login">用户登录</div> |
| | | <el-form |
| | | class="login-form" |
| | |
| | | :destroy-on-close="false" |
| | | class="tip-dialogs" |
| | | > |
| | | <div class="dialog-headers">提示</div> |
| | | <div class="dialog-close" @click="tipDialogVisible = false"> |
| | | <img src="@/assets/images/clusterScheduling/close.png" alt="" /> |
| | | </div> |
| | |
| | | }, |
| | | } |
| | | </script> |
| | | <style> |
| | | input:-webkit-autofill, |
| | | input:-webkit-autofill:hover, |
| | | input:-webkit-autofill:focus { |
| | | -webkit-text-fill-color: white !important; |
| | | box-shadow: 0 0 0 1000px transparent inset !important; |
| | | transition: background-color 5000s ease-in-out 0s; |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | <style scoped> |
| | | .login-right-new { |
| | | .login-form { |
| | | :deep(.el-form-item__label) { |
| | | width: 100px; |
| | | height: 26px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 16px; |
| | | color: rgba(255, 255, 255, 0.7); |
| | | line-height: 26px; |
| | | } |
| | | :deep(.el-input) { |
| | | width: 100%; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.7); |
| | | .el-input__wrapper { |
| | | // background: rgba(17, 64, 136, 0.1); |
| | | box-shadow: 0 0 0 1px rgba(17, 64, 136, 0); |
| | | background: transparent; |
| | | height: 42px; |
| | | } |
| | | padding: 16px; |
| | | } |
| | | |
| | | .el-input__inner { |
| | | color: #fff; |
| | | &::placeholder { |
| | | color: rgba(255, 255, 255, 0.6); |
| | | } |
| | | } |
| | | } |
| | | :deep(.el-button) { |
| | | width: 418px; |
| | | height: 60px; |
| | | background: linear-gradient(96deg, #4293c5 0%, #063c9f 100%); |
| | | border-radius: 4px 4px 4px 4px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | color: #ffffff; |
| | | .user-login { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | // &:hover { |
| | | // background: linear-gradient(270deg, #0070ff 0%, rgba(0, 112, 255, 0.5) 100%); |
| | | // } |
| | | } |
| | | } |
| | | .login-form { |
| | | width: 100%; |
| | | } |
| | | |
| | | .username { |
| | | margin-bottom: 30px; |
| | | } |
| | | .password { |
| | | img { |
| | | position: absolute; |
| | | right: 0; |
| | | width: 30px; |
| | | height: 30px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | :deep(.el-dialog) { |
| | | width: 406px; |
| | | height: 206px; |
| | | background: url('@/assets/images/login/tip.png') no-repeat; |
| | | background-size: 100% 100%; |
| | | transform: translate(-30%, 80%); |
| | | } |
| | | :deep(.el-dialog__header) { |
| | | display: none; |
| | | } |
| | | .dialog-headers { |
| | | position: absolute; |
| | | left: 30px; |
| | | top: 18px; |
| | | width: 37px; |
| | | height: 26px; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 20px; |
| | | color: #ffffff; |
| | | line-height: 26px; |
| | | text-align: center; |
| | | } |
| | | .dialog-close { |
| | | position: absolute; |
| | | right: 24px; |
| | | top: 20px; |
| | | cursor: pointer; |
| | | img { |
| | | width: 20px; |
| | | height: 16x; |
| | | } |
| | | } |
| | | .dialog-contents { |
| | | position: absolute; |
| | | top: 80px; |
| | | .tip-contents { |
| | | width: 406px; |
| | | height: 26px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #ffffff; |
| | | line-height: 26px; |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | } |
| | | .dialog-btns { |
| | | margin-left: 150px; |
| | | width: 94px; |
| | | height: 38px; |
| | | background: #1b3e6c; |
| | | border-radius: 8px 8px 8px 8px; |
| | | border: 1px solid #ffffff; |
| | | color: #fff; |
| | | line-height: 38px; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .username, |
| | | .password, |
| | | .get-forget-password, |
| | | .login-submit { |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .get-forget-password { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | .forget-password-text { |
| | | font-size: 14px; |
| | | color: #1677ff; |
| | | } |
| | | |
| | | :deep(.el-button) { |
| | | width: 100%; |
| | | } |
| | | |
| | | .password img { |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-left: 8px; |
| | | vertical-align: middle; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .dialog-close { |
| | | text-align: right; |
| | | cursor: pointer; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .dialog-contents { |
| | | text-align: center; |
| | | } |
| | | |
| | | .dialog-btns { |
| | | display: inline-block; |
| | | padding: 6px 12px; |
| | | border: 1px solid #dcdfe6; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | } |
| | | </style> |