From 223df4ac47311d949e232cea32b1f2e14cac9601 Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Sun, 20 Aug 2017 18:56:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E7=99=BB=E5=BD=95=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/Application.js | 3 +- client/common.js | 32 ++++++++++++ client/containers/Home/Home.js | 60 +++++------------------ client/containers/Home/Home.scss | 14 ++++++ client/containers/Login/Login.scss | 35 ++++++++++++- client/containers/Login/LoginContainer.js | 33 +++++++++++++ client/containers/index.js | 2 +- 7 files changed, 128 insertions(+), 51 deletions(-) create mode 100644 client/containers/Login/LoginContainer.js diff --git a/client/Application.js b/client/Application.js index 177c9992..05373234 100644 --- a/client/Application.js +++ b/client/Application.js @@ -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 { + { // // diff --git a/client/common.js b/client/common.js index 0f0579ee..44e5509e 100644 --- a/client/common.js +++ b/client/common.js @@ -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) => ( + Icon + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/client/containers/Home/Home.js b/client/containers/Home/Home.js index 6d99c065..d86aa038 100644 --- a/client/containers/Home/Home.js +++ b/client/containers/Home/Home.js @@ -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 = ( - Icon - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - -); 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 = () => (
@@ -55,13 +22,13 @@ const HomeGuest = () => (
-
+
-

YAPI

-
使用文档
+ YAPI + 使用文档
@@ -69,12 +36,12 @@ const HomeGuest = () => (
- {logoSVG} + {logoSVG('72px')} YAPI
高效、易用、可部署的API管理平台
旨在为开发、产品、测试人员提供更优雅的接口管理服务
- +
@@ -241,7 +208,6 @@ class Home extends Component { : }
-
) } diff --git a/client/containers/Home/Home.scss b/client/containers/Home/Home.scss index 0f55e25e..4d62b20c 100644 --- a/client/containers/Home/Home.scss +++ b/client/containers/Home/Home.scss @@ -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; diff --git a/client/containers/Login/Login.scss b/client/containers/Login/Login.scss index 6fd3cf62..96eb95e7 100644 --- a/client/containers/Login/Login.scss +++ b/client/containers/Login/Login.scss @@ -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; + } +} diff --git a/client/containers/Login/LoginContainer.js b/client/containers/Login/LoginContainer.js new file mode 100644 index 00000000..7a182291 --- /dev/null +++ b/client/containers/Login/LoginContainer.js @@ -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 ( +
+
+
+
+
+
+
+
+
+ + + +

YAPI

+
{logoSVG('100px')}
+ + + + +
+
+
) + } +} + +export default LoginContainer; diff --git a/client/containers/index.js b/client/containers/index.js index ab3a6fa0..e40f8415 100644 --- a/client/containers/index.js +++ b/client/containers/index.js @@ -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'