From 50aa0d1bec312f6dd3a364a827d49809081a79b1 Mon Sep 17 00:00:00 2001 From: "yhui.yang" Date: Tue, 25 Jul 2017 15:35:23 +0800 Subject: [PATCH] =?UTF-8?q?opti:=20=E9=A6=96=E9=A1=B5=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BF=AE=E6=94=B9header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/Application.js | 3 +- client/components/Header/Header.js | 13 +----- client/components/Intro/Intro.js | 53 +++++++++++++++------ client/components/Intro/Intro.scss | 16 +++++++ client/containers/Home/Home.js | 59 +++++++++++++++++++++-- client/containers/Home/Home.scss | 75 ++++++++++++++++++++++++++++-- client/reducer/menu/menu.js | 2 +- package.json | 2 + 8 files changed, 186 insertions(+), 37 deletions(-) diff --git a/client/Application.js b/client/Application.js index 72855d8a..246d189c 100644 --- a/client/Application.js +++ b/client/Application.js @@ -5,6 +5,7 @@ import { Route, HashRouter } from 'react-router-dom' import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index' import User from './containers/User/User.js' import Header from './components/Header/Header' +import Loading from './components/Loading/Loading' import { checkLoginState } from './actions/login' import { requireAuthentication } from './components/AuthenticatedComponent'; @@ -38,7 +39,7 @@ export default class App extends Component { route = (status) => { let r; if (status === LOADING_STATUS) { - return loading... + return } else { r = ( diff --git a/client/components/Header/Header.js b/client/components/Header/Header.js index 91816dde..738f9148 100644 --- a/client/components/Header/Header.js +++ b/client/components/Header/Header.js @@ -129,7 +129,7 @@ class HeaderCom extends Component {
- YAPI + YAPI
- - 首页 - - 分组 - - - 接口 - - - 文档 + 项目广场
diff --git a/client/components/Intro/Intro.js b/client/components/Intro/Intro.js index f18a285e..731f2675 100644 --- a/client/components/Intro/Intro.js +++ b/client/components/Intro/Intro.js @@ -1,7 +1,10 @@ import React from 'react' import PropTypes from 'prop-types' -import { Row, Col, Icon } from 'antd' +import { Col, Icon } from 'antd' import "./Intro.scss" +import { OverPack } from 'rc-scroll-anim' +import TweenOne from 'rc-tween-one' +import QueueAnim from 'rc-queue-anim'; const IntroPart = (props) =>( @@ -33,22 +36,42 @@ class Intro extends React.Component{ title:PropTypes.string, des:PropTypes.string })) - }) + }), + className : PropTypes.string } render(){ - const { intro } = this.props; + const { intro } = this.props; + const id = "motion"; + const animType = { + queue: 'right', + one: { x: '-=30', opacity: 0, type: 'from' } + }; return(
- - -
-
- -
+ + +
+
- - -
+ + + +
{intro.title}
@@ -56,13 +79,13 @@ class Intro extends React.Component{ {intro.des}
-
+
{intro.detail.map(function(item,i){ return() })}
- - + +
) } diff --git a/client/components/Intro/Intro.scss b/client/components/Intro/Intro.scss index f435f3a5..a4c3d334 100644 --- a/client/components/Intro/Intro.scss +++ b/client/components/Intro/Intro.scss @@ -4,6 +4,22 @@ $color-blue : #108ee9; $color-white: #fff; .intro-container{ + .imgWrapper{ + height: 100%; + width: 50%; + overflow: hidden; + position: absolute; + left: 0; + } + .textWrapper{ + display: block; + width: 50%; + height: 150px; + vertical-align: top; + position: absolute; + margin: auto; + right: 0; + } .des-container{ padding-left: .15rem; .des-title{ diff --git a/client/containers/Home/Home.js b/client/containers/Home/Home.js index d2fc8244..e35355ee 100644 --- a/client/containers/Home/Home.js +++ b/client/containers/Home/Home.js @@ -2,13 +2,17 @@ import './Home.scss' import React, { Component } from 'react' import { connect } from 'react-redux' import { Link } from 'react-router-dom' -import { Row, Col, Button } from 'antd' +import { Row, Col, Button, Icon } from 'antd' import PropTypes from "prop-types" import Login from '../Login/LoginWrap' import Intro from '../../components/Intro/Intro' -import Footer from "../../components/Footer/Footer"; import { changeMenuItem } from '../../actions/menu' +import { OverPack } from 'rc-scroll-anim' +import TweenOne from 'rc-tween-one' + +const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' }; +const queueAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad','delay':200 }; const HomeGuest = (props) => (
@@ -17,7 +21,7 @@ const HomeGuest = (props) => (

YAPI

-
一个高效，易用，功能强大的api管理系统
+
一个高效，易用，可部署的Api管理系统
@@ -33,9 +37,55 @@ const HomeGuest = (props) => (
+
+
+ + + 特性 + + + + +
+ +
+

+ 接口管理 +

+ + +
+ +
+

+ 支持Mock +

+ + +
+ +
+

+ 团队协作 +

+ + + + +
+
{ props.introList.map(function(intro,i){ return ( -
+
@@ -88,7 +138,6 @@ class Home extends Component {
) : } -
) } diff --git a/client/containers/Home/Home.scss b/client/containers/Home/Home.scss index 8a0611e0..630b12d0 100644 --- a/client/containers/Home/Home.scss +++ b/client/containers/Home/Home.scss @@ -2,18 +2,20 @@ $color-white : #fff; $color-blue-lighter : #f1f5ff; +$color-blue-grey-lighter : #f7fafc; $color-grey-lighter : #F7F7F7; $color-blue-light: #5dade2; $color-black-lighter: #404040; .home-main { - height:calc(100% - .64rem); + min-height:calc(100% - 2.23rem); display: -webkit-box; -webkit-box-orient: vertical; - background: $color-grey-lighter; + background: $color-blue-grey-lighter; .main-one{ padding: .5rem .5rem 0 .5rem; + //height: 7.16rem; //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%); .home-des{ padding: 0 .3rem .3rem 0; @@ -45,9 +47,9 @@ $color-black-lighter: #404040; .user-home{ display: flex; align-items: center; - height:calc(100% - 2rem); + height: 100%; max-width: 11rem; - margin: 0 auto; + margin: 1rem auto 0; .user-des{ max-width: 11rem; margin: 0 auto .5rem; @@ -72,6 +74,7 @@ $color-black-lighter: #404040; } .main-part{ padding: .9rem .5rem; + height: 5.8rem; &:nth-child(odd){ background-color: $color-blue-lighter; } @@ -79,9 +82,73 @@ $color-black-lighter: #404040; background-color: $color-white; } } + .feat-part{ + padding: .9rem .5rem; + background-color: $color-white; + h3{ + display: flex; + height: .3rem; + align-items: center; + padding: 0 .1rem; + margin-bottom: .2rem; + color: #333; + &:before, &:after{ + content: ""; + display: inline-block; + height: .02rem; + flex: 1; + border-top: .01rem solid #e6e6e6; + } + span{ + font-size: .24rem; + padding: 0 .1rem; + font-weight: normal; + } + } + } .container{ max-width: 11rem; margin: 0 auto; + height:100%; + position: relative; + } + .feat-wrapper{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + .feat-img{ + height: 1.2rem; + width: 1.2rem; + border-radius: 100%; + margin-bottom: .2rem; + color: $color-white; + i{ + line-height: 1.2rem; + font-size: .6rem; + } + } + .feat-title{ + font-size: .16rem; + line-height: .3rem; + color: #333; + } + &:first-child{ + .feat-img{ + background-color: rgb(248, 88, 96); + } + } + &:nth-child(2){ + .feat-img{ + background-color: #f9bb13; + } + } + &:nth-child(3){ + .feat-img{ + background-color: #20ab8e; + } + } } } diff --git a/client/reducer/menu/menu.js b/client/reducer/menu/menu.js index 1231e1f2..298bb322 100644 --- a/client/reducer/menu/menu.js +++ b/client/reducer/menu/menu.js @@ -3,7 +3,7 @@ import { } from '../../constants/action-types.js' const initialState = { - curKey: window.location.hash.split("#")[1] || '/' + curKey: window.location.hash.split("#")[1] || '' } export default (state = initialState, action) => { diff --git a/package.json b/package.json index 8d6ef883..e94331eb 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "node-sass-china": "^4.5.0", "nodemailer": "^4.0.1", "prop-types": "^15.5.10", + "rc-queue-anim": "^1.2.0", + "rc-scroll-anim": "^1.0.7", "redux": "^3.7.1", "redux-promise": "^0.5.3", "redux-thunk": "^2.2.0",