perf[login.vue]: Improve input background and cursor color (#927)

* 完善input背景和光标色;

1.完善在Chrome浏览器时登陆界面的input标签 使用记住密码之后颜色和背景不一致;
2.目前的rgb值是 #2d3a4b  修改的rgb值是 #283443;
3.修复光标使用Chrome记录的账号之后变黑色;
4.移除 .title-container .title 重复的font-weight: 400;
5.不用IE我们大家都是好朋友!~

* Update index.vue
This commit is contained in:
_xiaotian 2018-08-01 11:03:29 +08:00 committed by 花裤衩
parent 48a966fe1c
commit fe190b6188
1 changed files with 39 additions and 26 deletions

View File

@ -142,11 +142,24 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b; /* 修复input 背景不协调 和光标变色 */
$light_gray:#eee; /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
/* reset element-ui css */ $bg:#283443;
.login-container { $light_gray:#eee;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input{
color: $cursor;
&::first-line {
color: $light_gray;
}
}
}
/* reset element-ui css */
.login-container {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
@ -159,9 +172,10 @@ $light_gray:#eee;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
color: $light_gray; color: $light_gray;
height: 47px; height: 47px;
caret-color: $cursor;
&:-webkit-autofill { &:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important; -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important; -webkit-text-fill-color: $cursor !important;
} }
} }
} }
@ -171,7 +185,7 @@ $light_gray:#eee;
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
} }
} }
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@ -216,7 +230,6 @@ $light_gray:#eee;
position: relative; position: relative;
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400;
color: $light_gray; color: $light_gray;
margin: 0px auto 40px auto; margin: 0px auto 40px auto;
text-align: center; text-align: center;