diff --git a/.umirc.js b/.umirc.js
index 043e156..972d7a1 100644
--- a/.umirc.js
+++ b/.umirc.js
@@ -13,9 +13,9 @@ export default {
         dynamicImport: true,
         title: 'umi-ts',
         dll: true,
-        // routes: {
-        //   exclude: [],
-        // },
+        routes: {
+          exclude: [/models/, /service/],
+        },
         // hardSource: true,
       },
     ],
@@ -23,7 +23,7 @@ export default {
   history: 'hash',
   cssLoaderOptions: {},
   alias: {
-    component: path.resolve(__dirname, './src/component')
+    component: path.resolve(__dirname, './src/component'),
   },
   chainWebpack(config, { webpack }) {
     // config.plugin('analyzer').use(
diff --git a/src/assets/css/common/index.less b/src/assets/css/common/index.less
index 6689b57..ef71553 100644
--- a/src/assets/css/common/index.less
+++ b/src/assets/css/common/index.less
@@ -1,2 +1,8 @@
 @header-nav-color: #40aea8;
 @footer-border-color: #40aea8;
+@theme-color: #40aea8;
+
+p {
+  margin: 0;
+  line-height: 1;
+}
diff --git a/src/assets/images/home/bg@2x(1).png b/src/assets/images/home/bg@2x-1.png
similarity index 100%
rename from src/assets/images/home/bg@2x(1).png
rename to src/assets/images/home/bg@2x-1.png
diff --git a/src/assets/images/home/dlbg.png b/src/assets/images/home/dlbg.png
new file mode 100644
index 0000000..21d49bb
Binary files /dev/null and b/src/assets/images/home/dlbg.png differ
diff --git a/src/assets/images/home/ep.png b/src/assets/images/home/ep.png
new file mode 100644
index 0000000..5ce7054
Binary files /dev/null and b/src/assets/images/home/ep.png differ
diff --git a/src/assets/images/home/qr.png b/src/assets/images/home/qr.png
new file mode 100644
index 0000000..4214339
Binary files /dev/null and b/src/assets/images/home/qr.png differ
diff --git a/src/component/common/BasicHeader/index.less b/src/component/common/BasicHeader/index.less
index db8b035..9efe815 100644
--- a/src/component/common/BasicHeader/index.less
+++ b/src/component/common/BasicHeader/index.less
@@ -1,52 +1,70 @@
 @import '../../../assets/css/common/index';
-.cr-header {
+.header-box {
+  position: fixed;
   width: 100%;
-  display: flex;
-  height: 80px;
+  top: 0;
+  box-shadow: 0 0 16px 0 #ccc;
+  background-color: #ffffff;
+  z-index: 10;
   :global {
-    .cr-logo {
-      flex-shrink: 0;
-      img {
-        width: 214px;
-        height: 50px;
-        margin: 10px 20px 20px;
+    .cr-header {
+      width: 1220px;
+      margin: 0 auto;
+      display: flex;
+      height: 80px;
+      .cr-logo {
+        flex-shrink: 0;
+
+        img {
+          width: 214px;
+          height: 50px;
+          margin: 10px 20px 20px;
+        }
       }
-    }
-    .cr-nav {
-      flex: 1;
-      margin-bottom: 8px;
-      align-self: center;
-      overflow: hidden;
-    }
-    .cr-user {
-      flex-shrink: 0;
-      font-size: 20px;
-      line-height: 80px;
-      > span,
-      > i {
-        margin: 0 15px;
+
+      .cr-nav {
+        flex: 1;
+        margin-bottom: 8px;
+        align-self: center;
+        overflow: hidden;
       }
-      > i {
-        font-weight: bold;
+
+      .cr-user {
+        flex-shrink: 0;
+        font-size: 20px;
+        line-height: 80px;
+
+        > span,
+        > i {
+          margin: 0 15px;
+        }
+
+        > i {
+          font-weight: bold;
+        }
+      }
+
+      .ant-menu-item {
+        font-size: 20px;
+        color: #000;
+        line-height: 68px;
+        margin: 0 10px;
+        border-bottom: 4px solid transparent;
+      }
+
+      .ant-menu-item-selected,
+      .ant-menu-item:hover {
+        border-bottom: 4px solid @header-nav-color;
+        color: #000000;
+      }
+
+      .ant-menu-item-active .ant-menu-item-selected {
+        border-bottom: 4px solid @header-nav-color;
+      }
+
+      .ant-menu-horizontal {
+        border: none;
       }
-    }
-    .ant-menu-item {
-      font-size: 20px;
-      color: #000;
-      line-height: 68px;
-      margin: 0 10px;
-      border-bottom: 4px solid transparent;
-    }
-    .ant-menu-item-selected,
-    .ant-menu-item:hover {
-      border-bottom: 4px solid @header-nav-color;
-      color: #000000;
-    }
-    .ant-menu-item-active .ant-menu-item-selected {
-      border-bottom: 4px solid @header-nav-color;
-    }
-    .ant-menu-horizontal {
-      border: none;
     }
   }
 }
diff --git a/src/component/common/BasicHeader/index.tsx b/src/component/common/BasicHeader/index.tsx
index ca58389..75cbb5c 100644
--- a/src/component/common/BasicHeader/index.tsx
+++ b/src/component/common/BasicHeader/index.tsx
@@ -19,40 +19,42 @@ export default class BasicHeader extends Component {
   };
 
   render() {
-    // const Nav = props => (
-    //   <Menu onClick={props.handleClick} selectedKeys={[props.current]} mode="horizontal">
-    //     <Menu.Item key="home">首页</Menu.Item>
-    //     <Menu.Item key="project-center">项目中心</Menu.Item>
-    //     <Menu.Item key="talent-plaza">人才广场</Menu.Item>
-    //   </Menu>
-    // );
+    const Nav = props => (
+      <Menu onClick={props.handleClick} selectedKeys={[props.current]} mode="horizontal">
+        <Menu.Item key="home">首页</Menu.Item>
+        <Menu.Item key="project-center">项目中心</Menu.Item>
+        <Menu.Item key="talent-plaza">人才广场</Menu.Item>
+      </Menu>
+    );
     return (
-      <header className={styles['cr-header']}>
-        <div className={'cr-logo'}>
-          <img src={logo} alt="" />
-        </div>
-        <div className={'cr-nav'}>
-          {/* <Nav handleClick={this.handleClick} current={this.state.current} /> */}
-          <Nav />
-        </div>
-        <div className={'cr-user'}>
-          <Search style={{ width: 30, height: 30, verticalAlign: 'middle' }} />
-          <span
-            onClick={() => {
-              router.push('/user');
-            }}
-          >
-            登录
-          </span>
-          <span
-            onClick={() => {
-              router.push('/user/register');
-            }}
-          >
-            注册
-          </span>
-        </div>
-      </header>
+      <div className={styles['header-box']}>
+        <header className={'cr-header'}>
+          <div className={'cr-logo'}>
+            <img src={logo} alt="" />
+          </div>
+          <div className={'cr-nav'}>
+            <Nav handleClick={this.handleClick} current={this.state.current} />
+            {/* <Nav /> */}
+          </div>
+          <div className={'cr-user'}>
+            <Search style={{ width: 30, height: 30, verticalAlign: 'middle' }} />
+            <span
+              onClick={() => {
+                router.push('/user');
+              }}
+            >
+              登录
+            </span>
+            <span
+              onClick={() => {
+                router.push('/user/register');
+              }}
+            >
+              注册
+            </span>
+          </div>
+        </header>
+      </div>
     );
   }
 }
diff --git a/src/component/home/Banner/index.less b/src/component/home/Banner/index.less
new file mode 100644
index 0000000..71dae6c
--- /dev/null
+++ b/src/component/home/Banner/index.less
@@ -0,0 +1,80 @@
+@import '../../../assets/css/common/index';
+.home-banner {
+  height: 560px;
+  :global {
+    .home-banner-box {
+      position: relative;
+      height: 560px;
+      background-image: url('/src/assets/images/home/bg@2x-1.png');
+      .home-banner-box-img {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        text-align: left;
+        p {
+          font-size: 64px;
+          margin: 0;
+          line-height: 1;
+        }
+        p:nth-child(1) {
+          color: #4688f1;
+          margin-top: 100px;
+        }
+        p:nth-child(2) {
+          color: #000;
+          margin-top: 30px;
+        }
+        .banner-button-group {
+          margin-top: 60px;
+          button {
+            width: 150px;
+            height: 50px;
+            background-color: transparent;
+            font-size: 20px;
+            &:focus {
+              outline: none;
+              opacity: 0.6;
+            }
+          }
+          button:nth-child(1) {
+            border: 2px solid #000000;
+            color: #000000;
+          }
+          button:nth-child(2) {
+            border: 2px solid @theme-color;
+            color: @theme-color;
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+
+    .ant-carousel .slick-dots {
+      bottom: 30px;
+      li {
+        margin: 0 6px;
+        button {
+          width: 10px;
+          height: 10px;
+          border-radius: 100%;
+          background-color: rgba(0, 0, 0, 0.2);
+          opacity: 1;
+        }
+
+        .slick-slide {
+          text-align: center;
+          height: 560px;
+          line-height: 160px;
+          background: #364d79;
+          overflow: hidden;
+          h3 {
+            color: #fff;
+          }
+        }
+        &.slick-active button {
+          background-color: rgba(70, 136, 241, 0.8);
+        }
+      }
+    }
+  }
+}
diff --git a/src/component/home/Banner/index.tsx b/src/component/home/Banner/index.tsx
new file mode 100644
index 0000000..e73d4fc
--- /dev/null
+++ b/src/component/home/Banner/index.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Carousel } from 'antd';
+import styles from './index.less';
+import bgimg from 'assets/images/home/bg@2x-1.png';
+
+export default function Banner(props) {
+  const onChange = (a = 0, b = 0, c = 0): void => {
+    console.log(a, b, c);
+  };
+  return (
+    <div className={styles['home-banner']}>
+      <Carousel afterChange={onChange}>
+        <div>
+          <div className={'home-banner-box'}>
+            <div
+              className={'home-banner-box-img'}
+              style={{
+                backgroundImage: `url(${bgimg})`,
+                backgroundSize: 'cover',
+                backgroundPosition: '56%',
+              }}
+            >
+              <p>近23万优秀开发者</p>
+              <p>您的专属云端开发团队</p>
+              <div className={'banner-button-group'}>
+                <button>新建项目</button>
+                <button>快速组队</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className={'home-banner-box'}>
+            <div
+              className={'home-banner-box-img'}
+              style={{
+                backgroundImage: `url(${bgimg})`,
+                backgroundSize: 'cover',
+                backgroundPosition: '56%',
+              }}
+            >
+              <p>近23万优秀开发者</p>
+              <p>您的专属云端开发团队</p>
+              <div className={'banner-button-group'}>
+                <button>新建项目</button>
+                <button>快速组队</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className={'home-banner-box'}>
+            <div
+              className={'home-banner-box-img'}
+              style={{
+                backgroundImage: `url(${bgimg})`,
+                backgroundSize: 'cover',
+                backgroundPosition: '56%',
+              }}
+            >
+              <p>近23万优秀开发者</p>
+              <p>您的专属云端开发团队</p>
+              <div className={'banner-button-group'}>
+                <button>新建项目</button>
+                <button>快速组队</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className={'home-banner-box'}>
+            <div
+              className={'home-banner-box-img'}
+              style={{
+                backgroundImage: `url(${bgimg})`,
+                backgroundSize: 'cover',
+                backgroundPosition: '56%',
+              }}
+            >
+              <p>近23万优秀开发者</p>
+              <p>您的专属云端开发团队</p>
+              <div className={'banner-button-group'}>
+                <button>新建项目</button>
+                <button>快速组队</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Carousel>
+    </div>
+  );
+}
diff --git a/src/component/home/Download/index.less b/src/component/home/Download/index.less
new file mode 100644
index 0000000..b085568
--- /dev/null
+++ b/src/component/home/Download/index.less
@@ -0,0 +1,45 @@
+@import '../../../assets/css/common/index';
+
+.coderiver-download {
+  width: 100%;
+  text-align: left;
+  :global {
+    .coderiver-download-main {
+      width: 100%;
+      height: 520px;
+      background-size: 150%;
+      background-repeat: no-repeat;
+      background-position: 46% -110px;
+      button {
+        position: relative;
+        width: 300px;
+        height: 70px;
+        font-size: 26px;
+        font-family: 'Microsoft YaHei UI', serif;
+        background-color: transparent;
+        outline: none;
+        border: 2px solid #000;
+        transition: all 0.5s;
+        &:focus {
+          opacity: 0.5;
+        }
+        &:nth-child(2) {
+          margin-left: 30px;
+        }
+        img {
+          position: absolute;
+          left: 0;
+          height: 0;
+          top: 70px;
+          width: 300px;
+          transition: all 0.5s;
+        }
+        &:hover {
+          img {
+            height: 300px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/component/home/Download/index.tsx b/src/component/home/Download/index.tsx
new file mode 100644
index 0000000..af5b202
--- /dev/null
+++ b/src/component/home/Download/index.tsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import HomeTitle from '../HomeTitle';
+import styles from './index.less';
+import dl from 'assets/images/home/dlbg.png';
+import qr from 'assets/images/home/qr.png';
+import { Icon } from 'antd';
+
+export default function CodeRiverDownload(props) {
+  return (
+    <div className={styles['coderiver-download']}>
+      <HomeTitle title={'下载移动端'} color={'#fabf30'} />
+      <div className="coderiver-download-main" style={{ backgroundImage: `url(${dl})` }}>
+        <button>
+          IOS版&nbsp;&nbsp;&nbsp;&nbsp;
+          <Icon type="qrcode" />
+          <img src={qr} alt="" />
+        </button>
+        <button>
+          Android版&nbsp;&nbsp;&nbsp;&nbsp;
+          <Icon type="qrcode" />
+          <img src={qr} alt="" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/component/home/ExcellentProject/index.less b/src/component/home/ExcellentProject/index.less
new file mode 100644
index 0000000..8dc03b9
--- /dev/null
+++ b/src/component/home/ExcellentProject/index.less
@@ -0,0 +1,54 @@
+@import '../../../assets/css/common/index';
+.excellent-project {
+  margin-bottom: 20px;
+  :global {
+    .excellent-project-main {
+      display: grid;
+      grid-template-rows: auto;
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas: none;
+      grid-auto-flow: initial;
+      grid-auto-rows: initial;
+      grid-auto-columns: initial;
+      text-align: left;
+      transition: all 0.5s;
+      .excellent-project-main-box {
+        padding: 30px;
+        transition: all 0.5s;
+        position: relative;
+        top: 0;
+        left: 0;
+        .img {
+          width: 550px;
+          height: 368px;
+          overflow: hidden;
+          img {
+            width: 100%;
+          }
+          margin-bottom: 30px;
+        }
+        .title {
+          font-size: 28px;
+        }
+        .detail {
+          font-size: 18px;
+          color: #999;
+          margin-top: 16px;
+          margin-bottom: 26px;
+        }
+        .action {
+          font-family: Arial, serif;
+          .like {
+            margin-left: 20px;
+          }
+        }
+        &:hover {
+          box-shadow: 4px 4px 16px 0 #ccc;
+          position: relative;
+          top: -20px;
+          left: -20px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/component/home/ExcellentProject/index.tsx b/src/component/home/ExcellentProject/index.tsx
new file mode 100644
index 0000000..e0c9900
--- /dev/null
+++ b/src/component/home/ExcellentProject/index.tsx
@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import HomeTitle from '../HomeTitle';
+import styles from './index.less';
+import ep from 'assets/images/home/ep.png';
+import { Icon } from 'antd';
+
+export default function ExcellentProject(props) {
+  return (
+    <div className={styles['excellent-project']}>
+      <HomeTitle title={'优秀项目推荐'} path={'/'} color={'yellowgreen'} />
+      <div className="excellent-project-main">
+        <div className="excellent-project-main-box">
+          <div className="img">
+            <img src={ep} alt="" />
+          </div>
+          <p className="title">项目名称</p>
+          <p className="detail">项目描述</p>
+          <p className="action">
+            <span className="eye">
+              <Icon type="eye" />
+              30000
+            </span>
+            <span className="like">
+              <Icon type="like" />
+              30000
+            </span>
+          </p>
+        </div>
+        <div className="excellent-project-main-box">
+          <div className="img">
+            <img src={ep} alt="" />
+          </div>
+          <p className="title">项目名称</p>
+          <p className="detail">项目描述</p>
+          <p className="action">
+            <span className="eye">
+              <Icon type="eye" />
+              30000
+            </span>
+            <span className="like">
+              <Icon type="like" />
+              30000
+            </span>
+          </p>
+        </div>
+        <div className="excellent-project-main-box">
+          <div className="img">
+            <img src={ep} alt="" />
+          </div>
+          <p className="title">项目名称</p>
+          <p className="detail">项目描述</p>
+          <p className="action">
+            <span className="eye">
+              <Icon type="eye" />
+              30000
+            </span>
+            <span className="like">
+              <Icon type="like" />
+              30000
+            </span>
+          </p>
+        </div>
+        <div className="excellent-project-main-box">
+          <div className="img">
+            <img src={ep} alt="" />
+          </div>
+          <p className="title">项目名称</p>
+          <p className="detail">项目描述</p>
+          <p className="action">
+            <span className="eye">
+              <Icon type="eye" />
+              30000
+            </span>
+            <span className="like">
+              <Icon type="like" />
+              30000
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/global.less b/src/global.less
index 917696f..a006ee5 100644
--- a/src/global.less
+++ b/src/global.less
@@ -9,3 +9,12 @@ body,
 body {
   margin: 0;
 }
+
+button {
+  cursor: pointer;
+}
+:global {
+  p {
+    margin: 0;
+  }
+}
diff --git a/src/layouts/BasicLayout/index.less b/src/layouts/BasicLayout/index.less
index 0d014c4..f73f1a9 100644
--- a/src/layouts/BasicLayout/index.less
+++ b/src/layouts/BasicLayout/index.less
@@ -20,7 +20,7 @@
   :global {
     .cr-main {
       width: 1220px;
-      margin: 0 auto;
+      margin: 80px auto 0;
       background: #ffffff;
       height: 100%;
       min-width: 1220px;
diff --git a/src/layouts/BasicLayout/index.tsx b/src/layouts/BasicLayout/index.tsx
index c1d4093..9afa5e0 100644
--- a/src/layouts/BasicLayout/index.tsx
+++ b/src/layouts/BasicLayout/index.tsx
@@ -6,8 +6,8 @@ import BasicFooter from 'component/common/BasicFooter/';
 export default function Index(props: ComProps) {
   return (
     <section className={styles['cr-base']}>
+      <BasicHeader />
       <div className={'cr-main'}>
-        <BasicHeader />
         {props.children}
         <BasicFooter />
       </div>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..44ef376
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Redirect from 'umi/redirect';
+
+export default class To404 extends React.Component {
+  render() {
+    return <Redirect to={'/exception/404'} />;
+  }
+}
diff --git a/src/pages/coderiver/index.tsx b/src/pages/coderiver/index.tsx
index beb49b4..758cff9 100644
--- a/src/pages/coderiver/index.tsx
+++ b/src/pages/coderiver/index.tsx
@@ -1,18 +1,35 @@
 import React, { Component, ReactNode } from 'react';
 import HomeTitle from 'component/home/HomeTitle';
-import bgimg from 'assets/images/home/bg@2x(1).png';
+import Banner from 'src/component/home/Banner';
+import ExcellentProject from 'src/component/home/ExcellentProject';
+import CodeRiverDownload from 'src/component/home/Download';
 
 export default class Home extends Component {
   render(): ReactNode {
     return (
       <div>
-        <img style={{ width: '100%' }} src={bgimg} alt="" />
-        <HomeTitle title={'优秀项目推荐'} path={'/'} color={'yellowgreen'} />
+        <Banner />
+        <ExcellentProject />
         <HomeTitle title={'快速加入团队'} path={'/'} />
         <HomeTitle title={'优秀程序员'} path={'/'} />
         <HomeTitle title={'优秀设计师'} path={'/'} />
-        <HomeTitle title={'下载移动端'} path={'/'} />
+        <CodeRiverDownload />
       </div>
     );
   }
 }
+
+// export default function Home() {
+//   const [abc, setAbc] = React.useState('00000');
+//   return (
+//     <div>
+//       <div>{abc}</div>
+//       <img style={{ width: '100%' }} src={bgimg} alt="" />
+//       <HomeTitle title={'优秀项目推荐'} path={'/'} color={'yellowgreen'} />
+//       <HomeTitle title={'快速加入团队'} path={'/'} />
+//       <HomeTitle title={'优秀程序员'} path={'/'} />
+//       <HomeTitle title={'优秀设计师'} path={'/'} />
+//       <HomeTitle title={'下载移动端'} path={'/'} />
+//     </div>
+//   );
+// }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b49d063..bf8d811 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,7 @@
 /**
  * 注释路由
- * title: Index Page
- * Routes:
+ * title:Index Page
+ * Routes:- ./src/pages/display/index.tsx
  *   - ./src/pages/display/index.tsx
  */
 
@@ -9,32 +9,10 @@ import React from 'react';
 // import ButtonWithDefaultProps from './test/Button';
 import Computed from './test/Computed';
 import Link from 'umi/link';
-import router from 'umi/router';
+import Redirect from 'umi/redirect';
 import Button from '@material-ui/core/Button';
 
 export default function() {
   // 留作权限验证判断跳转
-  router.push('/coderiver');
-  return (
-    <div className={'normal'}>
-      <div className={'welcome'} />
-      <ul className={'list'}>
-        <li>
-          To get started, edit <code>src/pages/index.js</code> and save to reload.
-        </li>
-        <li>
-          <Button variant="contained" color="primary">
-            material button
-          </Button>
-        </li>
-        <li>
-          <Computed />
-          <Link to="/display">go to display</Link>
-        </li>
-      </ul>
-    </div>
-  );
+  return <Redirect to={'/coderiver'} />;
 }
-// {/* <a href="https://umijs.org/guide/getting-started.html">Getting Started</a> */}
-// {/*<ButtonWithDefaultProps />*/}
-//