第三方登录增加多个图标的悬浮状态
This commit is contained in:
parent
281d479724
commit
19b7cfe8b7
|
|
@ -32,9 +32,9 @@ export function initAxiosInterceptors(props) {
|
|||
// 判断网络是否连接
|
||||
initOnlineOfflineListener();
|
||||
|
||||
var proxy = "https://testforgeplus.trustie.net";
|
||||
// var proxy = "https://testforgeplus.trustie.net";
|
||||
// var proxy = "http://172.20.32.201:4000";
|
||||
// var proxy = "https://www.gitlink.org.cn";
|
||||
var proxy = "https://www.gitlink.org.cn";
|
||||
|
||||
//响应前的设置
|
||||
axios.interceptors.request.use(
|
||||
|
|
@ -48,9 +48,9 @@ export function initAxiosInterceptors(props) {
|
|||
if (window.location.port === "3007") {
|
||||
config.url = `${proxy}${url}`;
|
||||
if (config.url.indexOf('?') === -1) {
|
||||
config.url = `${config.url}?debug=admin`;
|
||||
config.url = `${config.url}`;
|
||||
} else {
|
||||
config.url = `${config.url}&debug=admin`;
|
||||
config.url = `${config.url}`;
|
||||
}
|
||||
} else {
|
||||
config.url = url;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -8,9 +8,6 @@
|
|||
/* 影响notification */
|
||||
/* z-index: 20000; */
|
||||
}
|
||||
#DialogID .dialogBox {
|
||||
width: 400px;
|
||||
}
|
||||
.MuiPaper-elevation24-45{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
|
|
@ -24,7 +21,7 @@
|
|||
top: -64px !important;
|
||||
}
|
||||
#log_reg_content{
|
||||
width:405px !important;
|
||||
width:445px !important;
|
||||
border-radius:6px;
|
||||
box-shadow:4px 8px 12px rgba(76,76,76,0.3);
|
||||
}
|
||||
|
|
@ -158,4 +155,4 @@
|
|||
|
||||
.MuiModal-root-15 {
|
||||
z-index: 10001 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,13 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { notification , Tooltip } from 'antd';
|
||||
|
||||
import { notification } from 'antd';
|
||||
import axios from 'axios';
|
||||
import educoderLogo from './educoder.png';
|
||||
import qqlogo from './qq@2x.png';
|
||||
import WeChatlogo from './WeChat@2x.png';
|
||||
import giteelogo from './gitee.png';
|
||||
import githublogo from './github.png';
|
||||
import cookie from 'react-cookies';
|
||||
import './LoginDialog.css';
|
||||
import { broadcastChannelPostMessage } from 'educoder'
|
||||
import Notcompletedysl from "../user/Notcompletedysl";
|
||||
import { Encrypt } from '../../common/Env';
|
||||
import OtherLogin from '../loginRegister/component/otherLogin';
|
||||
|
||||
const $ = window.$;
|
||||
var wait = 60;
|
||||
|
|
@ -416,20 +410,12 @@ class LoginDialog extends Component {
|
|||
MyEduCoderModals: false
|
||||
})
|
||||
};
|
||||
setMyEduCoderModals = () => {
|
||||
this.setState({
|
||||
MyEduCoderModals: true
|
||||
})
|
||||
};
|
||||
onKeydowns = (e) => {
|
||||
let { disabled } = this.state;
|
||||
if (disabled === false && e.keyCode === 13) {
|
||||
this.loginEDU()
|
||||
}
|
||||
};
|
||||
getloginurl = (url) => {
|
||||
window.location.href = url;
|
||||
};
|
||||
openNotifications = (btn) => {
|
||||
// type 1 成功提示绿色 2提醒颜色黄色 3错误提示红色
|
||||
notification.open({
|
||||
|
|
@ -441,28 +427,6 @@ class LoginDialog extends Component {
|
|||
},
|
||||
});
|
||||
}
|
||||
openqqlogin = () => {
|
||||
this.setState({
|
||||
qqlogin: true
|
||||
})
|
||||
window.location.href = `https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
|
||||
}
|
||||
|
||||
openphoneqqlogin = () => {
|
||||
window.open(
|
||||
`https://xui.ptlogin2.qq.com/cgi-bin/xlogin?appid=716027609&pt_3rd_aid=101508858&daid=383&pt_skey_valid=0&style=35&s_url=http%3A%2F%2Fconnect.qq.com&refer_cgi=authorize&which=&client_id=101508858&response_type=code&scope=get_user_info&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
|
||||
)
|
||||
}
|
||||
|
||||
getTContainer = () => {
|
||||
return document.body;
|
||||
}
|
||||
hideweixinlogin = () => {
|
||||
this.setState({
|
||||
weixinlogin: false,
|
||||
qqlogin: false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
|
@ -487,7 +451,7 @@ class LoginDialog extends Component {
|
|||
{
|
||||
`
|
||||
#DialogID .dialogBox {
|
||||
width: 405px !important;
|
||||
width: 445px !important;
|
||||
}
|
||||
.dialogBox {
|
||||
height: 290px !important;
|
||||
|
|
@ -575,25 +539,7 @@ class LoginDialog extends Component {
|
|||
<a href="/register" className="color-grey-9">注册</a>
|
||||
</span>
|
||||
</p>
|
||||
{
|
||||
settings && settings.third_party_new && settings.third_party_new.length > 0 ?
|
||||
<p className="clearfix mt20">
|
||||
<span className={"startlogin"}>———————— 快速登录 ————————</span>
|
||||
<div className={"mt10"}>
|
||||
{settings.third_party_new.map((item,key)=>{
|
||||
return(
|
||||
<a href={`${item.url}`} className="ml12 mr12">
|
||||
<Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
|
||||
<img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo : item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="42px" alt={`${item.name}登录`} />
|
||||
</Tooltip>
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</p>
|
||||
:""
|
||||
}
|
||||
<OtherLogin />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -226,7 +226,26 @@
|
|||
border-bottom: 2px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.dfpanel{
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.thirdPanel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
min-width: 120px;
|
||||
max-width:230px;
|
||||
a{
|
||||
margin:5px 12px;
|
||||
}
|
||||
}
|
||||
.moreIcon,.theTop{
|
||||
z-index: 11111;
|
||||
}
|
||||
/*当页面宽度大于1000px*/
|
||||
@media screen and (min-width:1000px) {
|
||||
.right_cont{width: 540px; }
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import React,{useState ,useEffect} from 'react';
|
||||
import { Divider, Tooltip } from 'antd';
|
||||
import { Divider, Tooltip , Popover } from 'antd';
|
||||
import educoderLogo from '../../login/educoder.png';
|
||||
import qqlogo from '../../login/qq@2x.png';
|
||||
import WeChatlogo from '../../login/WeChat@2x.png';
|
||||
import giteelogo from '../../login/gitee.png';
|
||||
import githublogo from '../../login/github.png';
|
||||
import CCFlogo from '../../login/CCF.png';
|
||||
import OpenI from '../../login/OpenI.svg';
|
||||
import "../LoginRegisterPage.scss"
|
||||
|
||||
function OtherLogin(){
|
||||
const [setting, setSetting] = useState(undefined);
|
||||
|
|
@ -14,22 +17,61 @@ function OtherLogin(){
|
|||
setSetting(JSON.parse(localStorage.getItem("chromesetting")));
|
||||
},[])
|
||||
|
||||
function renderLogo(name){
|
||||
if(!name) return;
|
||||
switch(name.toLowerCase()){
|
||||
case 'educoder':
|
||||
return educoderLogo;
|
||||
case 'qq':
|
||||
return qqlogo;
|
||||
case 'wechat':
|
||||
return WeChatlogo;
|
||||
case 'gitee':
|
||||
return giteelogo;
|
||||
case 'github':
|
||||
return githublogo;
|
||||
case 'ccf':
|
||||
return CCFlogo;
|
||||
case 'openi':
|
||||
return OpenI;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
return(
|
||||
setting && setting.third_party_new && setting.third_party_new.length > 0 ?
|
||||
<div className="quick_login">
|
||||
<Divider className="quick_login_Divider">
|
||||
<span className='font-13 startlogin'>快速登录</span>
|
||||
</Divider>
|
||||
{setting.third_party_new.map((item,key)=>{
|
||||
return(
|
||||
<a href={`${item.url}`} className="ml15 mr15">
|
||||
<Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
|
||||
<img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo : item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="46px" alt={`${item.name}登录`}/>
|
||||
</Tooltip>
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div className='dfpanel'>
|
||||
{setting.third_party_new.map((item,key)=>{
|
||||
return(
|
||||
key < 4 && <a href={`${item.url}`} className="ml15 mr15">
|
||||
<Tooltip overlayClassName='theTop' title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
|
||||
<img src={renderLogo(item.name)} width="40px" alt={`${item.name}登录`}/>
|
||||
</Tooltip>
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
setting.third_party_new.length > 4 &&
|
||||
<Popover placement="left" content={<div className='thirdPanel'>
|
||||
{
|
||||
setting.third_party_new.map((i,k)=>{
|
||||
return k>=4 &&<a href={`${i.url}` }>
|
||||
<Tooltip overlayClassName='theTop' title={`使用${i.name === "qq" ? "QQ":i.name === "wechat" ? "微信" : i.name}账号登录`}>
|
||||
<img src={renderLogo(i.name)} height={35}/>
|
||||
</Tooltip>
|
||||
</a>
|
||||
})
|
||||
}
|
||||
</div>} trigger="hover" overlayClassName='theTop'>
|
||||
<i className='iconfont icon-kongbai font-40 ml12 mr12' style={{color:"#8daec6"}}/>
|
||||
</Popover>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
:""
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue