diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 4d15c055133793eb8413dd7250303c3ab261fd7a..1ff3d3116cbbd6b2e393e653a93508362ec3a615 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -142,36 +142,50 @@ export default { </script> <style rel="stylesheet/scss" lang="scss"> -$bg:#2d3a4b; -$light_gray:#eee; + /* ä¿®å¤input 背景ä¸åè°ƒ å’Œå…‰æ ‡å˜è‰² */ + /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ + + $bg:#283443; + $light_gray:#eee; + $cursor: #fff; -/* reset element-ui css */ -.login-container { - .el-input { - display: inline-block; - height: 47px; - width: 85%; - input { - background: transparent; - border: 0px; - -webkit-appearance: none; - border-radius: 0px; - padding: 12px 5px 12px 15px; - color: $light_gray; - height: 47px; - &:-webkit-autofill { - -webkit-box-shadow: 0 0 0px 1000px $bg inset !important; - -webkit-text-fill-color: #fff !important; + @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { + .login-container .el-input input{ + color: $cursor; + &::first-line { + color: $light_gray; } } } - .el-form-item { - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(0, 0, 0, 0.1); - border-radius: 5px; - color: #454545; + + /* reset element-ui css */ + .login-container { + .el-input { + display: inline-block; + height: 47px; + width: 85%; + input { + background: transparent; + border: 0px; + -webkit-appearance: none; + border-radius: 0px; + padding: 12px 5px 12px 15px; + color: $light_gray; + height: 47px; + caret-color: $cursor; + &:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px $bg inset !important; + -webkit-text-fill-color: $cursor !important; + } + } + } + .el-form-item { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + border-radius: 5px; + color: #454545; + } } -} </style> <style rel="stylesheet/scss" lang="scss" scoped> @@ -216,7 +230,6 @@ $light_gray:#eee; position: relative; .title { font-size: 26px; - font-weight: 400; color: $light_gray; margin: 0px auto 40px auto; text-align: center;