opti: 修改首页样式，修改个别代码风格

client/components/AuthenticatedComponent.js

@@ -3,9 +3,18 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { changeMenuItem } from '../actions/menu'
 
-
+@connect(
+  (state) => {
+    return{
+      isAuthenticated: state.login.isLogin
+    }
+  },
+  {
+    changeMenuItem
+  }
+)
 export function requireAuthentication(Component) {
-  class AuthenticatedComponent extends React.Component {
+  return class AuthenticatedComponent extends React.Component {
     constructor(props){
       super(props);
     }
@@ -37,19 +46,8 @@ export function requireAuthentication(Component) {
           }
         </div>
       )
-
     }
   }
-  return connect(
-    (state) => {
-      return{
-        isAuthenticated: state.login.isLogin
-      }
-    },
-    {
-      changeMenuItem
-    }
-  )(AuthenticatedComponent);
 }
 
 

client/components/Header/Header.js

@@ -66,8 +66,26 @@ ToolUser.propTypes={
 };
 
 
+
+@connect(
+  (state) => {
+    return{
+      user: state.login.userName,
+      uid: state.login.uid,
+      msg: null,
+      login:state.login.isLogin,
+      curKey: state.menu.curKey
+    }
+  },
+  {
+    loginTypeAction,
+    logoutActions,
+    checkLoginState,
+    changeMenuItem
+  }
+)
 @withRouter
-class HeaderCom extends Component {
+export default class HeaderCom extends Component {
   constructor(props) {
     super(props);
   }
@@ -129,13 +147,13 @@ class HeaderCom extends Component {
   render () {
     const { login, user, msg, uid, curKey } = this.props;
     const headerStyle = {
-      'background': 'url(./image/bg-img.jpg) no-repeat center',
-      'backgroundSize':'cover'
+      'background': 'url(./image/header-bg-img.jpg) no-repeat',
+      'backgroundSize':'100% 100%'
     }
     return (
       <acticle className={`header-box`} style={headerStyle}>
         <Header style={{
-          background: "linear-gradient(to bottom,rgba(64,64,64,1),rgba(64,64,64,0.9))"
+          background: "linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0.5))"
         }}>
           <div className="content">
             <div className="logo">
@@ -173,22 +191,4 @@ class HeaderCom extends Component {
       </acticle>
     )
   }
-}
-
-export default connect(
-  (state) => {
-    return{
-      user: state.login.userName,
-      uid: state.login.uid,
-      msg: null,
-      login:state.login.isLogin,
-      curKey: state.menu.curKey
-    }
-  },
-  {
-    loginTypeAction,
-    logoutActions,
-    checkLoginState,
-    changeMenuItem
-  }
-)(HeaderCom)
+}

client/containers/Home/Home.js

@@ -17,19 +17,19 @@ const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', dura
 const style = {
   'height':'100%',
   'width':'100%',
-  'background': 'url(./image/bg-img.jpg) no-repeat center',
-  'backgroundSize':'cover'
+  'background': 'url(./image/bg-img.jpg) no-repeat',
+  'backgroundSize':'100% 100%'
 }
 const HomeGuest = (props) => (
   <div>
     <div className="main-one" style = {style}>
-      <div style={{ background: "linear-gradient(to bottom,rgba(64,64,64,0.9),rgba(64,64,64,0.5))"}}>
+      <div style={{ background: "linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2))"}}>
         <div className="container">
           <Row>
             <Col span={24}>
               <div className="home-des">
                 <p className="title">YAPI</p>
-                <div className="detail">一个高效，易用，可部署的Api管理系统</div>
+                <div className="detail">高效、易用、可部署的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务</div>
               </div>
             </Col>
           </Row>
@@ -62,7 +62,7 @@ const HomeGuest = (props) => (
           <TweenOne
             key="feat-motion-one"
             animation={oneAnim}
-            component="h3"
+            component="p"
           >
             <span>特性</span>
           </TweenOne>

client/containers/Home/Home.scss

@@ -12,7 +12,7 @@ $color-black-lighter: #404040;
   -webkit-box-orient: vertical;
   .main-one{
     .home-des{
-      color: $color-white;
+      color: $color-blue-grey-lighter;
       padding: .5rem 0 0;
       .title{
         font-size: .6rem;
@@ -29,7 +29,8 @@ $color-black-lighter: #404040;
       img{
         width: 100%;
         height: 100%;
-        box-shadow : 0 0 3px 0 $color-black-lighter;
+        //box-shadow : 0 0 3px 0 $color-black-lighter;
+        box-shadow : 0 30px 60px rgba(0,0,0,0.2);
         border-radius: .03rem;
       }
     }
@@ -39,6 +40,7 @@ $color-black-lighter: #404040;
     }
     .main-one-right{
       padding-left: .5rem;
+      padding-top: .3rem;
     }
   }
   .user-home{
@@ -82,13 +84,13 @@ $color-black-lighter: #404040;
   .feat-part{
     padding: .9rem .5rem;
     background-color: $color-white;
-    h3{
+    p{
       display: flex;
       height: .3rem;
       align-items: center;
       padding: 0 .1rem;
       margin-bottom: .2rem;
-      color: #333;
+      //color: #333;
       &:before, &:after{
         content: "";
         display: inline-block;
@@ -129,7 +131,6 @@ $color-black-lighter: #404040;
     .feat-title {
       font-size: .16rem;
       line-height: .3rem;
-      color: #333;
     }
     &:first-child {
       .feat-img {

client/containers/Login/Login.scss

@@ -18,14 +18,14 @@
 .qsso-breakline{
   display: flex;
   align-items: center;
-  color: #999;
+  color: #f7fafc;
   margin: .2rem auto;
   &:before, &:after{
     content: "";
     display: inline-block;
     height: .02rem;
     flex: 1;
-    border-top: .01rem solid #bbb;
+    border-top: .01rem solid #f7fafc;
   }
   .qsso-breakword{
     padding: 0 .1rem;

client/containers/Login/LoginWrap.js

@@ -7,8 +7,12 @@ import RegForm from './Reg';
 import './Login.scss';
 const TabPane = Tabs.TabPane;
 
-
-class LoginWrap extends Component {
+@connect(
+  state =>({
+    loginWrapActiveKey: state.login.loginWrapActiveKey
+  })
+)
+export default class LoginWrap extends Component {
   constructor(props){
     super(props);
   }
@@ -32,9 +36,3 @@ class LoginWrap extends Component {
     );
   }
 }
-
-export default connect(
-  state =>({
-    loginWrapActiveKey: state.login.loginWrapActiveKey
-  })
-)(LoginWrap)