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

49
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>

74
src/views/login/socialsignin.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="social-signup-container"> <div class="social-signup-container">
<div class="sign-btn" @click="wechatHandleClick('wechat')"> <div class="sign-btn" @click="wechatHandleClick('wechat')">
<span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信 <span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
</div> </div>
<div class="sign-btn" @click="tencentHandleClick('tencent')"> <div class="sign-btn" @click="tencentHandleClick('tencent')">
<span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ <span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -35,34 +35,34 @@
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.social-signup-container { .social-signup-container {
margin: 20px 0; margin: 20px 0;
.sign-btn { .sign-btn {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.icon { .icon {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
margin-top: 6px; margin-top: 6px;
} }
.wx-svg-container, .wx-svg-container,
.qq-svg-container { .qq-svg-container {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 5px; margin-right: 5px;
} }
.wx-svg-container { .wx-svg-container {
background-color: #8dc349; background-color: #8dc349;
} }
.qq-svg-container { .qq-svg-container {
background-color: #6BA2D6; background-color: #6BA2D6;
margin-left: 50px; margin-left: 50px;
} }
} }
</style> </style>