mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
feat: 新登录页
This commit is contained in:
wenbo.dong
parent
117fc2929c
commit
3307e2f6a9
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Route, BrowserRouter as Router } from 'react-router-dom';
|
||||
import { Home, Group, Project, Follows, AddProject } from './containers/index';
|
||||
import { Home, Group, Project, Follows, AddProject, Login } from './containers/index';
|
||||
import User from './containers/User/User.js';
|
||||
import Header from './components/Header/Header';
|
||||
import Footer from './components/Footer/Footer';
|
||||
@ -62,6 +62,7 @@ export default class App extends Component {
|
||||
<Route path="/user" component={requireAuthentication(User)} />
|
||||
<Route path="/follow" component={requireAuthentication(Follows)} />
|
||||
<Route path="/add-project" component={requireAuthentication(AddProject)} />
|
||||
<Route path="/login" component={Login} />
|
||||
{
|
||||
// <Route path="/news" component={requireAuthentication(News)} />
|
||||
// <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
// import regex_parse from './parseCommon.js';
|
||||
|
||||
@ -5,3 +6,34 @@ import moment from 'moment'
|
||||
exports.formatTime = (timestamp) => {
|
||||
return moment.unix(timestamp).format("YYYY-MM-DD HH:mm:ss")
|
||||
}
|
||||
|
||||
exports.logoSVG = (length) => (<svg className="svg" width={length} height={length} viewBox="0 0 64 64" version="1.1">
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stopColor="#FFFFFF" offset="0%"></stop>
|
||||
<stop stopColor="#F2F2F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle>
|
||||
<filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="首页" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
||||
<g id="大屏幕">
|
||||
<g id="Icon">
|
||||
<circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle>
|
||||
<path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fillRule="nonzero"></path>
|
||||
<path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fillRule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path>
|
||||
<path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fillRule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path>
|
||||
<g id="inner-round">
|
||||
<use fill="black" fillOpacity="1" filter="url(#filter-3)" xlinkHref="#path-2"></use>
|
||||
<use fill="#F7F7F7" fillRule="evenodd" xlinkHref="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>);
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import './Home.scss'
|
||||
import React, { Component } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Row, Col, Button, Icon, Card } from 'antd'
|
||||
import PropTypes from "prop-types"
|
||||
import Login from '../Login/LoginWrap'
|
||||
import './Home.scss';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Row, Col, Button, Icon, Card } from 'antd';
|
||||
import PropTypes from "prop-types";
|
||||
import { logoSVG } from '../../common.js';
|
||||
|
||||
// import Intro from '../../components/Intro/Intro'
|
||||
import { changeMenuItem } from '../../reducer/modules/menu'
|
||||
@ -12,41 +12,8 @@ import { OverPack } from 'rc-scroll-anim'
|
||||
import TweenOne from 'rc-tween-one'
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
|
||||
const logoSVG = (<svg className="svg" width="72px" height="72px" viewBox="0 0 64 64" version="1.1">
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stopColor="#FFFFFF" offset="0%"></stop>
|
||||
<stop stopColor="#F2F2F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle>
|
||||
<filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="首页" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
||||
<g id="大屏幕">
|
||||
<g id="Icon">
|
||||
<circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle>
|
||||
<path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fillRule="nonzero"></path>
|
||||
<path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fillRule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path>
|
||||
<path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fillRule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path>
|
||||
<g id="inner-round">
|
||||
<use fill="black" fillOpacity="1" filter="url(#filter-3)" xlinkHref="#path-2"></use>
|
||||
<use fill="#F7F7F7" fillRule="evenodd" xlinkHref="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>);
|
||||
const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
|
||||
// const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', duration: '1500'};
|
||||
const style = {
|
||||
'width':'100%'
|
||||
}
|
||||
|
||||
const HomeGuest = () => (
|
||||
<div className="g-body">
|
||||
<div className="m-bg">
|
||||
@ -55,13 +22,13 @@ const HomeGuest = () => (
|
||||
<div className="m-bg-mask m-bg-mask2"></div>
|
||||
<div className="m-bg-mask m-bg-mask3"></div>
|
||||
</div>
|
||||
<div className="main-one" style = {style}>
|
||||
<div className="main-one">
|
||||
<div className="container">
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<div className="home-heander">
|
||||
<p className="LOGO">YAPI</p>
|
||||
<div className="item">使用文档</div>
|
||||
<a href="#" className="item">YAPI</a>
|
||||
<a target="_blank" href="/doc/index.html" className="item">使用文档</a>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -69,12 +36,12 @@ const HomeGuest = () => (
|
||||
<Col span={9}>
|
||||
<div className="home-des">
|
||||
<div className="logo">
|
||||
{logoSVG}
|
||||
{logoSVG('72px')}
|
||||
<span className="name">YAPI</span>
|
||||
</div>
|
||||
<div className="detail">高效、易用、可部署的API管理平台<br/><span className="desc">旨在为开发、产品、测试人员提供更优雅的接口管理服务</span></div>
|
||||
<div className="btn-group">
|
||||
<Button type="primary" className="btn-home btn-login">登录 / 注册</Button>
|
||||
<Link to="/login"><Button type="primary" className="btn-home btn-login">登录 / 注册</Button></Link>
|
||||
<Button className="btn-home btn-qsso" id="qsso-login">QSSO 登录</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -241,7 +208,6 @@ class Home extends Component {
|
||||
: <HomeGuest introList={this.props.introList}/>}
|
||||
<div style={{height: '1000px'}}>
|
||||
</div>
|
||||
<Login/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -12,6 +12,20 @@ $color-text-light: #6d7c90;
|
||||
.g-body {
|
||||
position: relative;
|
||||
}
|
||||
.home-heander {
|
||||
font-size: 0;
|
||||
.item {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: .17rem;
|
||||
padding: .16rem .24rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
&:hover {
|
||||
color: #27cdfd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
@import '../../styles/common.scss';
|
||||
|
||||
// .login-body {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.login-form-button {
|
||||
// background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
|
||||
// border: none !important;
|
||||
@ -13,16 +17,43 @@
|
||||
.qsso-breakline{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #f7fafc;
|
||||
color: #6d7c90;
|
||||
margin: .2rem auto;
|
||||
&:before, &:after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: .02rem;
|
||||
flex: 1;
|
||||
border-top: .01rem solid #f7fafc;
|
||||
border-top: .01rem solid #6d7c90;
|
||||
}
|
||||
.qsso-breakword{
|
||||
padding: 0 .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-login {
|
||||
margin-top: 1.6rem;
|
||||
border-radius: .04rem;
|
||||
position: relative;
|
||||
.login-logo {
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
|
||||
transform: translate(-50%, -50%);
|
||||
padding: .16rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
.login-title {
|
||||
text-align: center;
|
||||
padding-top: .5rem;
|
||||
font-size: .4rem;
|
||||
font-weight: 200;
|
||||
color: #2e2e5a;
|
||||
}
|
||||
.svg {
|
||||
animation: spin 5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
33
client/containers/Login/LoginContainer.js
Normal file
33
client/containers/Login/LoginContainer.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React, { Component } from 'react';
|
||||
import Login from './LoginWrap';
|
||||
import { Row, Col, Card } from 'antd';
|
||||
import { logoSVG } from '../../common.js';
|
||||
|
||||
class LoginContainer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="g-body login-body">
|
||||
<div className="m-bg">
|
||||
<div className="m-bg-mask m-bg-mask0"></div>
|
||||
<div className="m-bg-mask m-bg-mask1"></div>
|
||||
<div className="m-bg-mask m-bg-mask2"></div>
|
||||
<div className="m-bg-mask m-bg-mask3"></div>
|
||||
</div>
|
||||
<div className="main-one">
|
||||
<div className="container">
|
||||
<Row type="flex" justify="center">
|
||||
<Col xs={20} sm={16} md={12} lg={8} className="container-login">
|
||||
<Card className="card-login">
|
||||
<h2 className="login-title">YAPI</h2>
|
||||
<div className="login-logo">{logoSVG('100px')}</div>
|
||||
<Login/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
export default LoginContainer;
|
||||
@ -1,6 +1,6 @@
|
||||
import Header from '../components/Header/Header.js'
|
||||
import Home from './Home/Home.js'
|
||||
import Login from './Login/LoginWrap.js'
|
||||
import Login from './Login/LoginContainer.js'
|
||||
import Group from './Group/Group.js'
|
||||
import Interface from './Interface/Interface.js'
|
||||
import Project from './Project/Project.js'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user