qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

增加第三方登录 demo

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

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

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