Skip to content

L
LoginSystem
Commit 91de2397 by wangshufen
Options

feature:修改登录页UI

parent 13542d34
Showing with 295 additions and 242 deletions
jsconfig.json
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
} }
} },
} "exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
\ No newline at end of file
src/components/HeaderBar/index.js
import React from 'react' import React from 'react';
import { Icon, Badge, Dropdown, Menu, Modal,message } from 'antd' import { Icon, Badge, Dropdown, Menu, Modal, message } from 'antd';
import screenfull from 'screenfull' import screenfull from 'screenfull';
import { inject, observer } from 'mobx-react' import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom' import { Link, withRouter } from 'react-router-dom';
import { isAuthenticated } from '../../utils/Session' import { isAuthenticated } from '../../utils/Session';
import request from "../../utils/request"; import request from '../../utils/request';
//withRouter一定要写在前面，不然路由变化不会反映到props中去 //withRouter一定要写在前面，不然路由变化不会反映到props中去
@withRouter @inject('appStore') @observer @withRouter
@inject('appStore')
@observer
class HeaderBar extends React.Component { class HeaderBar extends React.Component {
state = { state = {
icon: 'arrows-alt', icon: 'arrows-alt',
count: 100, count: 100,
visible: false, visible: false,
avatar: require('./img/defaultUser.jpg') avatar: require('./img/defaultUser.jpg'),
} };
componentDidMount () { componentDidMount() {
screenfull.onchange(() => { screenfull.onchange(() => {
this.setState({ this.setState({
icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt' icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt',
}) });
}) });
} }
componentWillUnmount () { componentWillUnmount() {
screenfull.off('change') screenfull.off('change');
} }
toggle = () => { toggle = () => {
this.props.onToggle() this.props.onToggle();
} };
screenfullToggle = () => { screenfullToggle = () => {
if (screenfull.enabled) { if (screenfull.enabled) {
screenfull.toggle() screenfull.toggle();
}
} }
};
logout = () => { logout = () => {
request request
.post("/yszh-login/pub/logout", {}) .post('/yszh-login/pub/logout')
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.appStore.toggleLogin(false) localStorage.removeItem('token');
this.props.history.push(this.props.location.pathname) this.props.appStore.toggleLogin(false);
this.props.history.push(this.props.location.pathname);
message.success('退出成功'); message.success('退出成功');
} else { } else {
message.error(res.data.message); message.error(res.data.message);
...@@ -52,45 +55,51 @@ class HeaderBar extends React.Component { ...@@ -52,45 +55,51 @@ class HeaderBar extends React.Component {
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
}); });
} };
render () { render() {
const {icon, count, visible, avatar} = this.state const { icon, count, visible, avatar } = this.state;
const {appStore, collapsed, location} = this.props const { appStore, collapsed, location } = this.props;
const notLogin = ( const notLogin = (
<div> <div>
<Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>&nbsp; <Link to={{ pathname: '/login', state: { from: location } }} style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
<img src={require('../../assets/img/defaultUser.jpg')} alt=""/> 登录
</Link>
&nbsp;
<img src={require('../../assets/img/defaultUser.jpg')} alt='' />
</div> </div>
) );
const menu = ( const menu = (
<Menu className='menu'> <Menu className='menu'>
<Menu.ItemGroup title='用户中心' className='menu-group'> <Menu.ItemGroup title='用户中心' className='menu-group'>
{/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item> {/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
<Menu.Item>个人信息</Menu.Item> */} <Menu.Item>个人信息</Menu.Item> */}
<Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item> <Menu.Item>
<span onClick={this.logout}>退出登录</span>
</Menu.Item>
</Menu.ItemGroup> </Menu.ItemGroup>
{/* <Menu.ItemGroup title='设置中心' className='menu-group'> {/* <Menu.ItemGroup title='设置中心' className='menu-group'>
<Menu.Item>个人设置</Menu.Item> <Menu.Item>个人设置</Menu.Item>
<Menu.Item>系统设置</Menu.Item> <Menu.Item>系统设置</Menu.Item>
</Menu.ItemGroup> */} </Menu.ItemGroup> */}
</Menu> </Menu>
) );
const login = ( const login = (
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<img src={avatar} alt=""/> <img src={avatar} alt='' />
</Dropdown> </Dropdown>
) );
return ( return (
<div id='headerbar'> <div id='headerbar'>
{/* <Icon {/* <Icon
type={collapsed ? 'menu-unfold' : 'menu-fold'} type={collapsed ? 'menu-unfold' : 'menu-fold'}
className='trigger' className='trigger'
onClick={this.toggle}/> */} onClick={this.toggle}/> */}
<div style={{lineHeight: '64px', float: 'right'}}> <div style={{ lineHeight: '64px', float: 'right' }}>
<ul className='header-ul'> <ul className='header-ul'>
<li><span onClick={this.logout}>退出登录</span></li> <li>
<span onClick={this.logout}>退出登录</span>
</li>
{/* <li><Icon type={icon} onClick={this.screenfullToggle}/></li> */} {/* <li><Icon type={icon} onClick={this.screenfullToggle}/></li> */}
{/* <li onClick={() => this.setState({count: 0})}> {/* <li onClick={() => this.setState({count: 0})}>
<Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}> <Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
...@@ -102,16 +111,12 @@ class HeaderBar extends React.Component { ...@@ -102,16 +111,12 @@ class HeaderBar extends React.Component {
</li> */} </li> */}
</ul> </ul>
</div> </div>
<Modal <Modal footer={null} closable={false} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
footer={null} closable={false} <img src={avatar} alt='' width='100%' />
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<img src={avatar} alt="" width='100%'/>
</Modal> </Modal>
</div> </div>
) );
} }
} }
export default HeaderBar export default HeaderBar;
\ No newline at end of file
src/routes/Home/Docking/index.css
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
} }
.Docking-div .Docking-center{ .Docking-div .Docking-center{
width: 1000px; width: 1000px;
background-color: #f0f0f0; /* background-color: #f0f0f0; */
padding-bottom: 100px; padding-bottom: 100px;
} }
.Docking-div .title-text{ .Docking-div .title-text{
......
src/routes/Home/index.css
.Docking-div{ .Docking-div {
/* display: flex; */ /* display: flex; */
padding-top: 100px; padding-top: 100px;
background-color: #fff; background-color: #fff;
...@@ -6,177 +6,167 @@ ...@@ -6,177 +6,167 @@
/* height: 100vh; */ /* height: 100vh; */
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.Docking-div .home-center{ .Docking-div .home-center {
display: flex; display: flex;
} }
.Docking-div .home-center .left-div{ .Docking-div .home-center .center-div {
width: 20%; width: 50%;
display: flex; display: flex;
/* align-items: center;
justify-content: center; */
flex-direction: column; flex-direction: column;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box; box-sizing: border-box;
padding: 0 80px;
} }
.Docking-div .left-div Button{ .Docking-div .center-div button {
margin-bottom: 10px; margin-bottom: 10px;
height: 50px; height: 50px;
border: 0px; border: 0px;
border: 1px solid #f0f0f0; border: 1px solid #000;
/* border-radius:0px; */ /* border-radius:0px; */
width: 100%; width: 60%;
/* font-family: "Comic Sans MS" */ /* font-family: "Comic Sans MS" */
} }
.Docking-div .right-div{ /* .Docking-div .right-div {
padding: 20px; padding: 20px;
/* display: flex; */
align-items: center;
justify-content: center;
padding-left: 100px; padding-left: 100px;
padding-right: 100px; padding-right: 100px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} */
} .Docking-div .right-div .right-div-one {
.Docking-div .right-div .right-div-one{
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
/* justify-content: space-between; */ /* justify-content: space-between; */
} }
.Docking-div .right-div .right-div-one .title-div{ .Docking-div .right-div .right-div-one .title-div {
width: 20%; width: 20%;
} }
.sequencesearch-div .top-div { .sequencesearch-div .top-div {
margin-bottom: 100px; margin-bottom: 100px;
} }
.sequencesearch-div .sequence-center{ .sequencesearch-div .sequence-center {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sequencesearch-div .TextArea-div{ .sequencesearch-div .TextArea-div {
width: 50%; width: 50%;
} }
.bottom-butn button{ .bottom-butn button {
height: 50px; height: 50px;
width: 200px; width: 200px;
} }
.bottom-butn{ .bottom-butn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 50px; height: 50px;
} }
.Jsme-div{ .Jsme-div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center justify-content: center;
} }
.Docking-div .top-div{ .Docking-div .top-div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 150px; height: 150px;
} }
.Docking-div .Docking-center{ .Docking-div .Docking-center {
width: 1000px; width: 90%;
background-color: #f0f0f0; /* background-color: #f0f0f0; */
padding-bottom: 100px; padding-bottom: 100px;
} }
.Docking-div .title-text{ .Docking-div .title-text {
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
} }
.Docking-div .pharmacophore-div{ .Docking-div .pharmacophore-div {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.Docking-div .pharmacophore-div .pharmacophore-top{ .Docking-div .pharmacophore-div .pharmacophore-top {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
} }
.Docking-div .displaydiv{ .Docking-div .displaydiv {
display: none; display: none;
} }
.Docking-div .taskmanager-div{ .Docking-div .taskmanager-div {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
} }
.generalsearch-div{ .generalsearch-div {
}
.ant-advanced-search-form {
} }
.ant-advanced-search-form {
}
.ant-advanced-search-form .ant-form-item { .ant-advanced-search-form .ant-form-item {
display: flex; display: flex;
} }
.ant-advanced-search-form .ant-form-item-control-wrapper { .ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1; flex: 1;
} }
.Docking-center .logo-topdiv{ .Docking-center .logo-topdiv {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 150px; height: 150px;
background-color: #fff; background-color: #fff;
} }
.Docking-center .logo-topdiv img{ .Docking-center .logo-topdiv img {
height: 150px; height: 150px;
} }
.Docking-center .pharmacophore-title{ .Docking-center .pharmacophore-title {
width: 50%; width: 50%;
} }
.Docking-center .pharmacophore-title2{ .Docking-center .pharmacophore-title2 {
width: 25%; width: 25%;
} }
.Computational-div{ .Computational-div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.Computational-div div{ .Computational-div div {
width: 587px; width: 587px;
padding-left: 100px; padding-left: 100px;
font-family: "Comic Sans MS" font-family: 'Comic Sans MS';
} }
.DockingCenter{ .DockingCenter {
height: 30px; height: 30px;
} }
.Speed-div{ .Speed-div {
height: 30px; height: 30px;
} }
.Docking-center .home-center{ .Docking-center .home-center {
min-height: 500px; min-height: 500px;
background-color: #fff; background-color: #fff;
justify-content: center;
} }
.home-center .item-type {
margin: 8px 0;
/* width: 40%; */
}
.home-center .type-name {
font-size: 18px;
font-weight: bold;
}
.home-center .link-btn {
text-align: right;
margin-top: 10px;
}
.ant-card-bordered {
border: none !important;
}
.ant-card-hoverable:hover {
box-shadow: none !important;
}
src/routes/Home/index.js
...@@ -13,13 +13,54 @@ class Home extends React.Component { ...@@ -13,13 +13,54 @@ class Home extends React.Component {
state = { state = {
// list: qs.parse(this.props.location.search.slice(1)) // list: qs.parse(this.props.location.search.slice(1))
list: [], list: [],
permissionList: [],
}; };
componentDidMount() { componentDidMount() {
if (qs.parse(this.props.location.search.slice(1))) { if (qs.parse(this.props.location.search.slice(1))) {
// debugger
let list = qs.parse(this.props.location.search.slice(1)); let list = qs.parse(this.props.location.search.slice(1));
var arr = Array.from(Object.values(list), (x) => x); // const perList=[
// {name:'小分子数据',
// sublist:[
// {}
// ]
// }
// ]
console.log('list', list);
let arr = Array.from(Object.values(list), (x) => x);
const newList = [
{
type: 1,
typeNameCn: '小分子数据',
typeName: 'Small Molecule Database',
sublist: [],
},
{
type: 2,
typeNameCn: '小分子计算',
typeName: 'Calculation Platform',
sublist: [],
},
{
type: 3,
typeNameCn: '大分子数据',
typeName: 'AntiBody Database',
sublist: [],
},
];
arr.forEach((item) => {
if (item.type == 1) {
newList[0].sublist.push(item);
} else if (item.type == 2) {
newList[1].sublist.push(item);
} else if (item.type == 3) {
newList[2].sublist.push(item);
}
});
console.log('newList', newList);
this.setState({ this.setState({
list: arr, list: newList,
}); });
} }
} }
...@@ -168,7 +209,7 @@ class Home extends React.Component { ...@@ -168,7 +209,7 @@ class Home extends React.Component {
}); });
}; };
getOne = (e) => { getOne = (e) => {
console.log('token=========',e + `?token=${localStorage.getItem('token')}`); console.log('token=========', e + `?token=${localStorage.getItem('token')}`);
window.open(e + `?token=${localStorage.getItem('token')}`); window.open(e + `?token=${localStorage.getItem('token')}`);
}; };
...@@ -190,16 +231,11 @@ class Home extends React.Component { ...@@ -190,16 +231,11 @@ class Home extends React.Component {
return ( return (
<div className='Docking-div'> <div className='Docking-div'>
<div className='Docking-center'> <div className='Docking-center'>
{/* <div className="logo-topdiv"> <div className='logo-topdiv'>
<img <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/logo.png')} />
alt="example" </div>
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/logo.png")}
/>
</div> */}
<div className='top-div'> <div className='top-div'>
<Card <Card
hoverable
style={{ style={{
width: '100%', width: '100%',
// backgroundColor: "#00FF00", // backgroundColor: "#00FF00",
...@@ -211,31 +247,43 @@ class Home extends React.Component { ...@@ -211,31 +247,43 @@ class Home extends React.Component {
}} }}
> >
<div className='Computational-div'> <div className='Computational-div'>
<div>welcome to our platform</div> <div>Welcome To Yashen Platform</div>
</div> </div>
</Card> </Card>
</div> </div>
<div className='home-center'> <div className='home-center'>
<div className='left-div'> <div className='left-div'>
<div className='mol-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/mol.png')} />
</div>
<div className='antibody-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/antibody.png')} />
</div>
</div>
<div className='center-div'>
{list.map((item, index) => { {list.map((item, index) => {
return ( return (
<Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}> <div className='item-type' onClick={() => this.getListOne(index, item.name)} key={index}>
{item.name} <div className='type-name'>{item.typeName}</div>
<div className='link-btn'>
{item.sublist.map((ele, index) => {
return (
<Button size='large' onClick={() => this.getOne(ele.url)} key={index}>
{ele.name}
</Button> </Button>
); );
})} })}
</div> </div>
</div>
<div className='right-div'>
{list.map((item, index) => {
return (
<a className={item.state ? '' : 'displaydiv'} size='large' onClick={() => this.getOne(item.url)} key={index}>
欢迎进入{item.name}平台
</a>
); );
})} })}
</div> </div>
<div className='right-div'>
<div className='gene-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/gene.png')} />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/routes/Login/AccountLogin.js
...@@ -83,8 +83,12 @@ export default class ProteinView extends Component { ...@@ -83,8 +83,12 @@ export default class ProteinView extends Component {
window.localStorage.setItem('token', res.data.result.token); window.localStorage.setItem('token', res.data.result.token);
let indexVOList = res.data.result.indexVOList; let indexVOList = res.data.result.indexVOList;
console.log('indexVOList', indexVOList); console.log('indexVOList', indexVOList);
// indexVOList.push({ name: 'Kinase', url: 'http://172.16.20.12:3001/#/Kinase', state: false }); // indexVOList.push({ name: 'Kinase', url: 'http://localhost:3002/#/Kinase'});
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking', state: false }); // indexVOList.push({ name: 'GPCR', url: 'http://localhost:3001/#/home' });
// indexVOList.push({ name: 'Antigen2', url: 'http://localhost:3002/#/home' });
// indexVOList.push({ name: 'PLDM', url: 'http://localhost:3003/#/login' });
// indexVOList.push({ name: 'KG', url: 'http://localhost:3004/#/login' });
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking'});
indexVOList[0].state = true; indexVOList[0].state = true;
console.log(indexVOList); console.log(indexVOList);
this.props.appStore.toggleLogin(true, { username: 'hahah' }); this.props.appStore.toggleLogin(true, { username: 'hahah' });
......
src/routes/Login/index.js
import React from 'react' import React from 'react';
import BGParticle from '../../utils/BGParticle' import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd' import { notification } from 'antd';
import './style.css' import './style.css';
import { withRouter } from 'react-router-dom' import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index' import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2' import Loading2 from '../../components/Loading2';
import {preloadingImages} from '../../utils/utils' import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index' import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css' import 'animate.css';
import LoginForm from './LoginForm' import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm' import RegisterForm from './RegisterForm';
import Registered from './Registered' import Registered from './Registered';
const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg' const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg';
const imgs = [ const imgs = [
'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg', 'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg', 'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg', 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
'http://47.99.130.140/imgs/photo.jpg', 'http://47.99.130.140/imgs/photo.jpg',
] ];
@withRouter
@inject('appStore')
@observer
@withRouter @inject('appStore') @observer
class Login extends React.Component { class Login extends React.Component {
state = { state = {
showBox: 'login', //展示当前表单 showBox: 'login', //展示当前表单
url: '', //背景图片 url: '', //背景图片
loading:false, loading: false,
loading2:false, loading2: false,
} };
componentDidMount () { componentDidMount() {
const isLogin = this.props.appStore const isLogin = this.props.appStore;
if(isLogin){ if (isLogin) {
this.props.history.go(1) //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面 this.props.history.go(1); //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
// this.props.appStore.toggleLogin(false) //也可以设置退出登录 // this.props.appStore.toggleLogin(false) //也可以设置退出登录
} }
// this.initPage() // this.initPage()
// preloadingImages(imgs) //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？ // preloadingImages(imgs) //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
} }
componentWillUnmount () { componentWillUnmount() {
this.particle && this.particle.destory() this.particle && this.particle.destory();
notification.destroy() notification.destroy();
} }
//载入页面时的一些处理 //载入页面时的一些处理
initPage = () => { initPage = () => {
this.setState({ this.setState({
loading:true loading: true,
}) });
this.props.appStore.initUsers() this.props.appStore.initUsers();
this.loadImageAsync(url).then(url=>{ this.loadImageAsync(url)
.then((url) => {
this.setState({ this.setState({
loading:false, loading: false,
url url,
});
}) })
}).then(()=>{ .then(() => {
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom //为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox') this.particle = new BGParticle('backgroundBox');
this.particle.init() this.particle.init();
// notification.open({ // notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>, // message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0, // duration:0,
// className:'login-notification' // className:'login-notification'
// }) // })
}) });
} };
//切换showbox //切换showbox
switchShowBox = (box) => { switchShowBox = (box) => {
this.setState({ this.setState({
showBox: box showBox: box,
}) });
} };
//登录的背景图太大，等载入完后再显示，实际上是图片预加载， //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
loadImageAsync (url) { loadImageAsync(url) {
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
const image = new Image(); const image = new Image();
image.onload = function() { image.onload = function() {
resolve(url); resolve(url);
}; };
image.onerror = function() { image.onerror = function() {
console.log('图片载入错误') console.log('图片载入错误');
}; };
image.src = url; image.src = url;
}); });
} }
render () { render() {
const {showBox,loading} = this.state const { showBox, loading } = this.state;
return ( return (
<div className='index-div'> <div className='index-div'>
<LogoTitlte></LogoTitlte> <LogoTitlte />
<div id='login-page'> <div id='login-page'>
<div className='home-page-div'> <div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div> <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、Kinase 数据，并整合了蛋白结构-配体作用数据，以及开发知识图谱和计算工具来加速药物发现。</div>
<div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</div> <div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</div>
<div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligence drug discovery decisions. </div> <div>
<div>Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various computational tools to discover high quality antibody drugs.</div> {' '}
Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
chemists to make intelligence drug discovery decisions.{' '}
</div>
<div>
Our platform focuses on mining available GPCR knowledge and Kinase knowledge including corresponding drugs and ligands structure, protein structures and mutation data, involving
protein-ligand interaction data, creating knowledge graph and developing computational tools to accelerate drug discovery.
</div> </div>
{
loading ?
<div> <div>
<h3 style={styles.loadingTitle} className='animated bounceInLeft'>载入中...</h3> Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various
<Loading2/> computational tools to discover high quality antibody drugs.
</div>: </div>
</div>
{loading ? (
<div> <div>
<div id='backgroundBox' style={styles.backgroundBox}/> <h3 style={styles.loadingTitle} className='animated bounceInLeft'>
载入中...
</h3>
<Loading2 />
</div>
) : (
<div>
<div id='backgroundBox' style={styles.backgroundBox} />
<div className='container'> <div className='container'>
<LoginForm <LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} <RegisterForm activeKey={'3'} className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
switchShowBox={this.switchShowBox}/> <Registered className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<RegisterForm
activeKey={'3'}
className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<Registered
className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
</div> </div>
</div> </div>
} )}
</div> </div>
</div> </div>
) );
} }
} }
...@@ -140,30 +147,30 @@ const styles = { ...@@ -140,30 +147,30 @@ const styles = {
height: '100vh', height: '100vh',
// backgroundImage: `url(${url})`, // backgroundImage: `url(${url})`,
backgroundSize: 'cover', backgroundSize: 'cover',
transition:'all .5s', transition: 'all .5s',
// backgroundColor: '#4FA1D9' // backgroundColor: '#4FA1D9'
}, },
focus: { focus: {
// transform: 'scale(0.7)', // transform: 'scale(0.7)',
width: '20px', width: '20px',
opacity: 1 opacity: 1,
}, },
loadingBox:{ loadingBox: {
position:'fixed', position: 'fixed',
top:'50%', top: '50%',
left:'50%', left: '50%',
transform:'translate(-50%,-50%)' transform: 'translate(-50%,-50%)',
}, },
loadingTitle:{ loadingTitle: {
position:'fixed', position: 'fixed',
top:'50%', top: '50%',
left:'50%', left: '50%',
marginLeft: -45, marginLeft: -45,
marginTop: -18, marginTop: -18,
color:'#000', color: '#000',
fontWeight:500, fontWeight: 500,
fontSize:24 fontSize: 24,
}, },
} };
export default Login export default Login;
src/routes/Login/style.css
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
padding: 50px; padding: 50px;
box-sizing: border-box; box-sizing: border-box;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 15px;
/* background-color: pink!important; */ /* background-color: pink!important; */
} }
......
src/utils/request.js
...@@ -29,6 +29,7 @@ const request = axios.create({ ...@@ -29,6 +29,7 @@ const request = axios.create({
headers: { headers: {
// 'Content-Type': 'application/json', // 'Content-Type': 'application/json',
accessToken: token, accessToken: token,
token,
}, },
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment