opti: modify style of header and home

client/components/Header/Header.js

@@ -3,13 +3,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { Icon } from 'antd'
+import { Icon, Layout, Menu} from 'antd'
 import loginTypeAction from '../../actions/login';
 
+const { Header } = Layout;
 const ToolUser = (props)=> (
   <ul>
+    <li><Icon type="question-circle-o" />帮助</li>
     <li><Icon type="user" />{ props.user }</li>
-    <li>消息{ props.msg.length }</li>
     <li>退出</li>
   </ul>
 );
@@ -29,7 +30,7 @@ ToolGuest.propTypes={
   onReg:PropTypes.func
 }
 
-class Header extends Component {
+class HeaderCom extends Component {
   constructor(props) {
     super(props);
   }
@@ -45,31 +46,41 @@ class Header extends Component {
     const { login, user, msg } = this.props;
     return (
       <acticle className="header-box">
-        <div className="content">
-          <h1>
-            <Link to={`/`}>YAPI</Link>
-          </h1>
-          <ul className="nav-toolbar">
-            <li>
-              <Link to={`/ProjectGroups`}>分组</Link>
-            </li>
-            <li>
-              <a>我的项目</a>
-            </li>
-            <li>
-              <a>文档</a>
-            </li>
-          </ul>
-          <ul className="user-toolbar">
-            {login?<ToolUser user={user} msg={msg}/>:''}
-          </ul>
-        </div>
+        <Layout className="'layout">
+          <Header>
+            <div className="content">
+              <div className="logo">
+                YAPI
+              </div>
+              <Menu
+                mode="horizontal"
+                className="nav-toolbar"
+                theme="dark"
+                style={{ lineHeight : '.64rem'}}
+                defaultSelectedKeys={['1']}
+              >
+                <Menu.Item key="1">
+                  <Link to={`/`}>首页</Link>
+                </Menu.Item>
+                <Menu.Item key="2">
+                  <Link to={`/ProjectGroups`}>分组</Link>
+                </Menu.Item>
+                <Menu.Item key="3">
+                  文档
+                </Menu.Item>
+              </Menu>
+              <div className="user-toolbar">
+                {login?<ToolUser user={user} msg={msg}/>:''}
+              </div>
+            </div>
+          </Header>
+        </Layout>
       </acticle>
     )
   }
 }
 
-Header.propTypes={
+HeaderCom.propTypes={
   user: PropTypes.string,
   msg: PropTypes.string,
   login:PropTypes.bool,
@@ -85,5 +96,5 @@ export default connect(
     }
   },
   {loginTypeAction}
-)(Header)
+)(HeaderCom)
 

client/components/Header/Header.scss

@@ -1,29 +1,35 @@
 @import '../../styles/common.scss';
 $color-white : #fff;
-$color-blue : #30a1f2;
+$color-blue : #108ee9;
+$color-blue-deeper: #34495E;
 $color-grey-deep : #929aac;
+$color-black-light : #404040;
 /* .header-box.css */
 .header-box {
   display: block;
-  line-height: .64rem;
-  background: #000c15;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  //line-height: .64rem;
   font-size: 0.14rem;
   color: $color-white;
+  z-index: 9999;
 
   // 内容宽度
   .content {
-    max-width: 11rem;
+    max-width: 10.3rem;
     margin: 0 auto;
     zoom: 1;
     overflow: hidden;
   }
 
-  h1 {
-    font-size: .25rem;
+  .logo {
+    font-size: .3rem;
     float: left;
     margin: 0 .2rem 0 0;
     color: $color-white;
-    cursor: pointer;
+    //cursor: pointer;
     a{
       color: $color-white;
       &:hover {
@@ -36,37 +42,30 @@ $color-grey-deep : #929aac;
   }
 
   .nav-toolbar {
+    font-size: .15rem;
+    box-sizing: border-box;
     float: left;
-    li {
-      float: left;
-      margin: 0 .2rem;
-      a{
-        color: $color-white;
-        &:hover {
-          color: $color-blue;
-        }
-      }
-    }
   }
 
   .user-toolbar{
     float: right;
-    line-height: .12rem;
+    line-height: .14rem;
     li{
       float: left;
-      height: .12rem;
       margin: .26rem 0;
-      padding: 0 .1rem;
-      font-size: .12rem;
+      padding: 0 0 0 .12rem;
+      font-size: .14rem;
       cursor: pointer;
-      a{
-        color: $color-white;
-        &:hover{
-          color: $color-blue;
-        }
-      }
+      color: $color-white;
       &:not(:last-child){
         border-right: .01rem solid $color-white;
+        padding: 0 .12rem;
+      }
+      &:hover{
+        color: $color-blue;
+      }
+      i{
+        margin-right: .09rem;
       }
     }
   }

client/components/Intro/Intro.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Row, Col, Icon } from 'antd'
+import "./Intro.scss"
+
+const IntroPart = (props) =>(
+  <Col span={12} className="switch-content">
+    <div className="icon-switch">
+      <Icon type="smile-o" />
+    </div>
+    <div>
+      <p><b>{props.title}</b></p>
+      <p>{props.des}</p>
+    </div>
+  </Col>
+)
+
+IntroPart.propTypes = {
+  title : PropTypes.string,
+  des : PropTypes.string
+}
+
+class Intro extends React.Component{
+  constructor(props){
+    super(props);
+  }
+  static propTypes={
+    intro : PropTypes.shape({
+      title:PropTypes.string,
+      des:PropTypes.string,
+      img:PropTypes.string,
+      detail:PropTypes.arrayOf(PropTypes.shape({
+        title:PropTypes.string,
+        des:PropTypes.string
+      }))
+    })
+  }
+  render(){
+    const { intro } = this.props;
+    return(
+      <div className="intro-container">
+        <Row>
+          <Col span={12}>
+            <div>
+              <div className="img-container">
+                <img src={intro.img}/>
+              </div>
+            </div>
+          </Col>
+          <Col span={12} className="des-container">
+            <div>
+              <div className="des-title">
+                {intro.title}
+              </div>
+              <div className="des-detail">
+                {intro.des}
+              </div>
+            </div>
+            <div className="des-switch">
+              {intro.detail.map(function(item,i){
+                return(<IntroPart key={i} title={item.title} des={item.des}/>)
+              })}
+            </div>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default Intro;
+

client/components/Intro/Intro.scss

@@ -0,0 +1,49 @@
+$imgUrl : "../../../static/image/";
+$color-grey : #E5E5E5;
+$color-blue : #108ee9;
+$color-white: #fff;
+
+.intro-container{
+  .des-container{
+    padding-left: .15rem;
+    .des-title{
+      font-size: .24rem;
+      margin-bottom: .1rem;
+    }
+    .des-detail{
+      font-size: .15rem;
+      margin-bottom: .2rem;
+    }
+    .des-switch{
+      .switch-content{
+        font-size: .14rem;
+        margin-bottom: .15rem;
+        div{
+          float: left;
+        }
+        .icon-switch{
+          height: .3rem;
+          width: .3rem;
+          border-radius: .02rem;
+          background-color: $color-blue;
+          margin-right: .1rem;
+          color: $color-white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .img-container{
+    padding-right: .15rem;
+    //background-image: url("#{$imgUrl}demo-img.png");
+    img{
+      height: 100%;
+      width: 100%;
+      border: .01rem solid $color-grey;
+      box-shadow : 0 0 3px 1px $color-grey;
+      border-radius: .04rem;
+    }
+  }
+}

client/containers/Home/Home.js

@@ -1,26 +1,77 @@
 import './Home.scss'
 import React, { Component } from 'react'
+import { Row, Col } from 'antd'
+import PropTypes from "prop-types"
 import Login from '../Login/login-wrap'
+import Intro from '../../components/Intro/Intro'
 
 
 class Home extends Component {
   constructor(props) {
     super(props)
   }
-
+  static propTypes = {
+    introList:PropTypes.array
+  }
   render () {
     return (
       <div className="home-main">
         <div className="main-one">
-          <div className="home-des">
-            <p className="title">YAPI</p>
-            <div className="detail">一个高效，易用，功能强大的api管理系统</div>
+          <div className="container">
+            <Row>
+              <Col span={24}>
+                <div className="home-des">
+                  <p className="title">YAPI</p>
+                  <div className="detail">一个高效，易用，功能强大的api管理系统</div>
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={8} className="main-one-left">
+                <Login/>
+              </Col>
+              <Col span={16} className="main-one-right">
+                <div className="img-container">
+                  <img src="./static/image/demo-img.png"/>
+                </div>
+              </Col>
+            </Row>
           </div>
-          <Login/>
         </div>
+        { this.props.introList.map(function(intro,i){
+          return (
+            <div className="main-part" key={i}>
+              <div className="container">
+                <Intro intro={intro}/>
+              </div>
+            </div>
+          )
+        })}
       </div>
     )
   }
 }
 
+Home.defaultProps={
+  introList:[{
+    title:"接口管理",
+    des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
+    detail:[
+      {title:"接口管理",des:"强大的接口文档"},
+      {title:"接口管理",des:"强大的接口文档"},
+      {title:"接口管理",des:"强大的接口文档"}
+    ],
+    img:"./static/image/demo-img.png"
+  },{
+    title:"接口管理",
+    des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
+    detail:[
+      {title:"接口管理",des:"强大的接口文档"},
+      {title:"接口管理",des:"强大的接口文档"}
+    ],
+    img:"./static/image/demo-img.png"
+  }
+  ]
+};
+
 export default Home

client/containers/Home/Home.scss

@@ -1,27 +1,61 @@
 @import '../../styles/common.scss';
-/* .home-main.css */
+
+$color-white : #fff;
+$color-blue-lighter : #f1f5ff;
+$color-grey-lighter : #F7F7F7;
+$color-blue-light: #5dade2;
+$color-black-lighter: #404040;
+
+
 .home-main {
   display: -webkit-box;
-  max-width: 11rem;
-  margin: 0 auto;
+  margin-top: .64rem;
   -webkit-box-orient: vertical;
+  background: $color-grey-lighter;
   .main-one{
     height:calc(100% - .64rem);
-    padding: .5rem 0;
+    padding: .5rem .5rem 0 .5rem;
+    //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
     .home-des{
-      padding: .3rem 0;
+      padding: 0 .3rem .3rem 0;
       .title{
         font-size: .6rem;
       }
       .detail{
-        font-size: .23rem;
+        font-size: .2rem;
       }
     }
     .login-form{
-
+    }
+    .img-container{
+      margin-bottom: -.2rem;
+      img{
+        width: 100%;
+        height: 100%;
+        box-shadow : 0 0 3px 0 $color-black-lighter;
+        border-radius: .03rem;
+      }
+    }
+    .main-one-left{
+      padding-right: .15rem;
+    }
+    .main-one-right{
+      padding-left: .15rem;
     }
   }
-
+  .main-part{
+    padding: .9rem .5rem;
+    &:nth-child(odd){
+      background-color: $color-blue-lighter;
+    }
+    &:nth-child(even){
+      background-color: $color-white;
+    }
+  }
+  .container{
+    max-width: 10.3rem;
+    margin: 0 auto;
+  }
 }
 
 

client/containers/Login/login.scss

@@ -1,6 +1,4 @@
 @import '../../styles/common.scss';
 
 /* .login-main.css */
-.login-form {
-  width: 4rem;
-}
+