zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加第三方登录 demo

This commit is contained in:
Pan 2017-08-22 14:48:11 +08:00 committed by 花裤衩
parent 0094f44910
commit 62d2f62bff
2 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/login/index.vue
View File

@ -23,10 +23,13 @@
<div class='tips'>账号:admin 密码随便填</div> <div class='tips'>账号:admin 密码随便填</div>
<div class='tips'>账号:editor 密码随便填</div> <div class='tips'>账号:editor 密码随便填</div>
<el-button class='thirdPart-button' type="primary" @click='showDialog=true'>打开第三方登录</el-button>
</el-form> </el-form>
<el-dialog title="第三方验证" :visible.sync="showDialog"> <el-dialog title="第三方验证" :visible.sync="showDialog">
邮箱登录成功,请选择第三方验证 本地不能模拟，请结合自己业务进行模拟！！！<br/><br/><br/>
邮箱登录成功,请选择第三方验证<br/>
<social-sign /> <social-sign />
</el-dialog> </el-dialog>
@ -124,16 +127,14 @@
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
.tips { $bg:#2d3a4b;
font-size: 14px; $dark_gray:#889aa4;
color: #fff; $light_gray:#eee;
margin-bottom: 10px;
}
.login-container { .login-container {
@include relative; @include relative;
height: 100vh; height: 100vh;
background-color: #2d3a4b; background-color: $bg;
input:-webkit-autofill { input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important; -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important; -webkit-text-fill-color: #fff !important;
@ -144,7 +145,7 @@
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0px; border-radius: 0px;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
color: #eeeeee; color: $light_gray;
height: 47px; height: 47px;
} }
.el-input { .el-input {
@ -152,20 +153,25 @@
height: 47px; height: 47px;
width: 85%; width: 85%;
} }
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
}
.svg-container { .svg-container {
padding: 6px 5px 6px 15px; padding: 6px 5px 6px 15px;
color: #889aa4; color: $dark_gray;
vertical-align: middle; vertical-align: middle;
width: 30px; width: 30px;
display: inline-block; display: inline-block;
&_login{ &_login {
font-size:20px; font-size: 20px;
} }
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: #eeeeee; color: $light_gray;
margin: 0px auto 40px auto; margin: 0px auto 40px auto;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
@ -184,13 +190,18 @@
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
} }
.show-pwd{ .show-pwd {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 7px; top: 7px;
font-size: 16px; font-size: 16px;
color: #889aa4; color: $dark_gray;
cursor: pointer; cursor: pointer;
} }
.thirdPart-button{
position: absolute;
right: 35px;
bottom: 28px;
}
} }
</style> </style>