add home

front/project/www/components/Button/index.less

@@ -55,6 +55,11 @@
   border: 1px solid @line_color;
 }
 
+.button.white {
+  background: #fff;
+  color: @theme_color;
+}
+
 .button.border {
   background: #fff;
   border: 2px solid @theme_color;
@@ -70,4 +75,8 @@
 
 .button.default:hover {
   border-color: @holder_color;
+}
+
+.button.white:hover {
+  color: @theme_color_hover;
 }

front/project/www/components/Footer/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './index.less';
+
+function Footer() {
+  return (
+    <div id="footer">
+      <Link to="/">用户协议</Link>
+      <span className="division">|</span>
+      <Link to="/">法律声明</Link>
+      <span className="division">|</span>
+      <Link to="/">隐私条款</Link>
+      <span className="division">|</span>
+      <span>Copyright@</span>
+      <span className="division">|</span>
+      <span>（沪ICP备10220379号)</span>
+    </div>
+  );
+}
+Footer.propTypes = {};
+export default Footer;

front/project/www/components/Footer/index.less

@@ -0,0 +1,22 @@
+@import '../../app.less';
+
+#footer {
+  background: #6865FD;
+  text-align: center;
+  color: #fff;
+  font-size: 16px;
+  height: 60px;
+  line-height: 60px;
+
+  a {
+    color: #fff;
+  }
+
+  a:hover {
+    color: #fff;
+  }
+
+  .division {
+    padding: 0 30px;
+  }
+}

front/project/www/components/Header/index.js

@@ -7,7 +7,7 @@ import './index.less';
 function Header(props) {
   const { tabs = [], active } = props;
   return (
-    <div id="header" className={`${active}`}>
+    <div id="header">
       <div className="body">
         <div className="left">
           <Assets name="logo" svg />

front/project/www/components/Header/index.less

@@ -79,32 +79,8 @@
   }
 }
 
-#page.main {
-  padding-top: 72px;
-}
-
 .main #header {
   .body {
-    margin: auto;
-    width: auto;
-    height: 72px;
-    line-height: 72px;
-  }
-
-  .left {
-    left: 20px;
-    width: 90px;
-  }
-
-  .right {
-    right: 20px;
-  }
-
-  .tabs {
-    .tab {
-      width: 120px;
-      margin: 0 24px;
-      font-size: 24px;
-    }
+    width: 1200px;
   }
 }

front/project/www/routes/page/demo/index.js

@@ -0,0 +1,9 @@
+export default {
+  path: '/demo',
+  key: 'demo',
+  title: '首页',
+  needLogin: true,
+  component() {
+    return import('./page');
+  },
+};

front/project/www/routes/page/demo/index.less

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+#index {}

front/project/www/routes/page/demo/page.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+import Continue from '../../../components/Continue';
+import Tabs from '../../../components/Tabs';
+import Module from '../../../components/Module';
+import Division from '../../../components/Division';
+import Panel from '../../../components/Panel';
+import Card from '../../../components/Card';
+import List from '../../../components/List';
+import ListTable from '../../../components/ListTable';
+import ProgressText from '../../../components/ProgressText';
+import IconButton from '../../../components/IconButton';
+import Step from '../../../components/Step';
+
+export default class extends Page {
+  renderView() {
+    return (
+      <div>
+        <Continue date={'2019-04-29 16:30'} data={{}} />
+        <div className="content">
+          <Module className="m-t-2">
+            <Tabs
+              type="card"
+              active="main"
+              tabs={[
+                { key: 'main', name: '首页', path: '/' },
+                { key: 'ready', name: 'GetReady', path: '/' },
+                { key: 'exercise', name: '练习', path: '/' },
+                { key: 'cat', name: 'CAT模考', path: '/' },
+                { key: 'item', name: '题库', path: '/' },
+                { key: 'machine', name: '换库&机经', path: '/' },
+              ]}
+            />
+            <Tabs
+              active="main"
+              tabs={[
+                { key: 'main', name: '首页', path: '/' },
+                { key: 'ready', name: 'GetReady', path: '/' },
+                { key: 'exercise', name: '练习', path: '/' },
+                { key: 'cat', name: 'CAT模考', path: '/' },
+                { key: 'item', name: '题库', path: '/' },
+              ]}
+            />
+          </Module>
+          <Module>
+            <Tabs
+              active="main"
+              border
+              width="180px"
+              space="0"
+              tabs={[
+                { key: 'main', name: '首页', path: '/' },
+                { key: 'ready', name: 'GetReady', path: '/' },
+                { key: 'exercise', name: '练习', path: '/' },
+                { key: 'cat', name: 'CAT模考', path: '/' },
+                { key: 'item', name: '题库', path: '/' },
+              ]}
+            />
+            <Tabs
+              active="main"
+              type="text"
+              tabs={[
+                { key: 'main', name: '首页', path: '/' },
+                { key: 'ready', name: 'GetReady', path: '/' },
+                { key: 'exercise', name: '练习', path: '/' },
+                { key: 'cat', name: 'CAT模考', path: '/' },
+                { key: 'item', name: '题库', path: '/' },
+              ]}
+            />
+          </Module>
+          <Module>
+            <Step
+              list={[
+                '「1」前言',
+                '「2」重新认识',
+                '「3」基本元素',
+                '「4」简单变长',
+                '「5」练习',
+                '「6」翻译',
+                '「7」附录',
+              ]}
+              step="4"
+            />
+          </Module>
+          <Division col="2">
+            <Panel
+              title="OG"
+              col="3"
+              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 0, title: '测试' }]}
+            />
+            <Panel
+              title="OG"
+              col="4"
+              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 10, title: '测试' }]}
+            />
+          </Division>
+          <Division col="3">
+            <Card title="句改 SC" data={{ status: 'buy', desc: ['名师讲解', '精进学习', '提升成绩'] }} />
+            <Card title="句改 SC" data={{ status: 'open' }} />
+            <Card
+              title="句改 SC"
+              data={{
+                status: 'ing',
+                list: [
+                  { progress: 30, date: '2019-04-22', status: 'start' },
+                  { progress: 40, date: '2019-04-22', status: 'ing' },
+                ],
+              }}
+            />
+            <Card title="句改 SC" data={{ status: 'ing', list: [] }} />
+            <Card title="句改 SC" data={{ status: 'end' }} />
+          </Division>
+          <List
+            title="Chapter4"
+            subTitle="简单句如何变长难句"
+            list={[{ progress: 30, title: '什么样的句子叫长难句，长难句的基本特征。', part: 'Part 1' }]}
+          />
+          <ListTable
+            title="Chapter5"
+            subTitle="练习"
+            filters={[
+              { type: 'radio', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
+              { type: 'select', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
+            ]}
+            data={[{}]}
+            columns={[
+              {
+                title: '练习册',
+                width: 250,
+                align: 'left',
+                render: () => {
+                  return (
+                    <div className="table-row">
+                      <div className="night f-s-16">OG18 综合：第1-20题</div>
+                      <div>
+                        <ProgressText progress="30" size="small" />
+                      </div>
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '正确率',
+                width: 150,
+                align: 'left',
+                render: () => {
+                  return (
+                    <div className="table-row">
+                      <div className="night f-s-16 f-w-b">--</div>
+                      <div className="f-s-12">全站55%</div>
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '全站用时',
+                width: 150,
+                align: 'left',
+                render: () => {
+                  return (
+                    <div className="table-row">
+                      <div className="night f-s-16 f-w-b">55%</div>
+                      <div className="f-s-12">全站56s</div>
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '最近做题',
+                width: 150,
+                align: 'left',
+                render: () => {
+                  return (
+                    <div className="table-row">
+                      <div>2019-04-28</div>
+                      <div>07:30</div>
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '操作',
+                width: 180,
+                align: 'left',
+                render: () => {
+                  return (
+                    <div className="table-row p-t-1">
+                      <IconButton className="m-r-2" type="continue" tip="Continue" />
+                      <IconButton type="restart" tip="Restart" />
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '报告',
+                width: 30,
+                align: 'right',
+                render: () => {
+                  return (
+                    <div className="table-row p-t-1">
+                      <IconButton type="report" tip="Report" />
+                    </div>
+                  );
+                },
+              },
+            ]}
+          />
+        </div>
+      </div>
+    );
+  }
+}

front/project/www/routes/page/home/index.less

@@ -1,3 +1,401 @@
 @charset "utf-8";
 
-#index {}
+#index {
+  .block {
+    .body {
+      width: 1200px;
+      margin: 0 auto;
+
+      .m-title {
+        font-size: 32px;
+        font-weight: 600;
+        color: #303139;
+      }
+    }
+  }
+
+  .block-1 {
+    height: 470px;
+    background: #fff;
+
+    .body {
+      padding-top: 110px;
+      padding-left: 50px;
+    }
+
+    .title {
+      font-size: 32px;
+      font-weight: 600;
+      color: #050930;
+      margin-bottom: 40px;
+    }
+
+    .desc {
+      font-size: 16px;
+      color: #5E677B;
+      margin-bottom: 24px;
+    }
+  }
+
+  .block-2 {
+    background: #6865FD;
+
+    .body {
+      padding: 40px 130px;
+    }
+
+    .title {
+      color: #fff;
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 15px;
+    }
+
+    .desc {
+      font-size: 24px;
+      color: #fff;
+    }
+
+    .btn {
+      float: right;
+      margin-top: -60px;
+    }
+  }
+
+  .block-3 {
+    background: #fefefe;
+    padding-top: 100px;
+    padding-bottom: 70px;
+
+    .step {
+      .m-title {
+        color: #303139;
+        font-size: 32px;
+        font-weight: 600;
+
+        .sub {
+          color: #A8ACC7;
+          font-size: 28px;
+          font-weight: 600;
+          margin-left: 15px;
+        }
+      }
+
+      .list {
+        display: flex;
+
+        .item {
+          flex: 1;
+          background: rgba(255, 255, 255, 1);
+          box-shadow: 0px 32px 44px 0px rgba(156, 183, 223, 0.14), 0px 15px 28px 0px rgba(0, 0, 0, 0.01);
+          border-radius: 2px;
+        }
+
+        .m-r-1-5 {
+          margin-right: 15px;
+        }
+
+        .m-l-1-5 {
+          margin-left: 15px;
+        }
+      }
+    }
+
+    .step-1 {
+      margin-bottom: 100px;
+
+      .m-title {
+        margin-bottom: 30px;
+      }
+
+      .item {
+        height: 210px;
+        width: 580px;
+        padding: 30px;
+
+        .title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #303139;
+
+          .sub {
+            font-size: 24px;
+            margin-left: 30px;
+            color: #C8D1DA;
+          }
+        }
+      }
+    }
+
+    .step-2 {
+      margin-bottom: 100px;
+
+      .m-title {
+        margin-bottom: 30px;
+      }
+
+      .item {
+        height: 200px;
+        width: 380px;
+        padding: 30px 36px;
+
+        .title {
+          font-size: 22px;
+          font-weight: 600;
+          color: #303139;
+          margin-bottom: 30px;
+
+          .sub {
+            font-size: 14px;
+            margin-left: 10px;
+          }
+        }
+
+        .desc {
+          color: #8897A8;
+        }
+      }
+    }
+
+    .step-3 {
+      margin-bottom: 100px;
+
+      .item {
+        height: 200px;
+        width: 380px;
+        padding: 40px 30px;
+
+        .title {
+          font-size: 36px;
+          font-weight: 600;
+          margin-bottom: 24px;
+        }
+
+        .desc {
+          font-size: 18px;
+          color: #5E677B;
+        }
+      }
+    }
+
+    .step-4 {
+      margin-bottom: 130px;
+
+      .m-title {
+        margin-bottom: 30px;
+      }
+
+      .box {
+        .detail {
+          display: inline-block;
+          width: 920px;
+        }
+
+        .list {
+          display: inline-block;
+          width: 280px;
+          background: #fff;
+
+          .tab {
+            height: 120px;
+            width: 100%;
+            opacity: 0.5;
+            line-height: 120px;
+            text-align: center;
+            font-weight: 600;
+            font-size: 18px;
+            position: relative;
+            cursor: pointer;
+
+            .place {
+              opacity: 0;
+              position: absolute;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              width: 40px;
+            }
+
+            .place-1 {
+              background: #ffe0e0;
+
+              .right-arrow::after {
+                border-color: #F36565;
+              }
+            }
+
+            .place-2 {
+              background: #fdede0;
+
+              .right-arrow::after {
+                border-color: #FFB676;
+              }
+            }
+
+            .place-3 {
+              background: #d2e6fd;
+
+              .right-arrow::after {
+                border-color: #4292F0;
+              }
+            }
+
+            .place-4 {
+              background: #d9d8ff;
+
+              .right-arrow::after {
+                border-color: #6865FD;
+              }
+            }
+
+            .right-arrow {
+              display: inline-block;
+              position: relative;
+              width: 18px;
+              height: 18px;
+              margin-right: 10px;
+            }
+
+
+            .right-arrow::after {
+              display: inline-block;
+              content: " ";
+              height: 9px;
+              width: 9px;
+              border-width: 3px 3px 0 0;
+              border-style: solid;
+              transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+              position: absolute;
+              top: 50%;
+              right: 3px;
+              margin-top: -2px;
+            }
+          }
+
+          .tab.active,
+          .tab:hover {
+            opacity: 1;
+            box-shadow: 0px 12px 20px 0px rgba(156, 183, 223, 0.14), 0px 10px 20px 0px rgba(0, 0, 0, 0.01);
+
+            .place {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    .step-5 {
+
+      .m-title {
+        margin-bottom: 30px;
+      }
+
+      .item {
+        width: 380px;
+        padding: 30px;
+
+        .title {
+          font-size: 22px;
+          font-weight: 600;
+          margin-bottom: 15px;
+
+          .sub {
+            margin-left: 10px;
+          }
+        }
+
+        .desc {
+          margin-left: 15px;
+          color: #8897A8;
+          width: 250px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+
+  .block-4 {
+    height: 640px;
+    padding-left: 150px;
+    padding-top: 280px;
+    background: linear-gradient(241deg, rgba(132, 93, 72, 0) 0%, rgba(88, 50, 29, 1) 100%);
+
+    .title-1 {
+      font-size: 32px;
+      color: #fff;
+      margin-bottom: 20px;
+    }
+
+    .title-2 {
+      color: #fff;
+      font-size: 48px;
+      margin-bottom: 15px;
+    }
+  }
+
+  .block-5 {
+    height: 530px;
+    overflow-y: auto;
+  }
+
+  .block-6 {
+    height: 400px;
+    padding-top: 60px;
+    background: #E9EFF8;
+
+    .body {
+      .m-title {
+        margin-bottom: 24px;
+      }
+    }
+
+    .step-list {
+      display: flex;
+    }
+
+    .step {
+      flex: 1;
+      padding: 0 40px;
+
+      .title {
+        font-size: 24px;
+        font-weight: 600;
+        color: #303139;
+      }
+
+      .desc {
+        font-size: 16px;
+        color: #8897A8;
+      }
+    }
+  }
+
+  .block-7 {
+    height: 420px;
+    padding-top: 80px;
+    background: #6865FD;
+
+    .step-list {}
+
+    .step {
+      width: 33.33%;
+      display: inline-block;
+      box-sizing: border-box;
+      vertical-align: top;
+
+      .title {
+        font-size: 16px;
+        color: #fff;
+        margin-bottom: 30px;
+        font-weight: 600;
+      }
+
+      .desc {
+        font-size: 16px;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

front/project/www/routes/page/home/page.js

@@ -1,212 +1,210 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
-import Continue from '../../../components/Continue';
-import Tabs from '../../../components/Tabs';
-import Module from '../../../components/Module';
-import Division from '../../../components/Division';
-import Panel from '../../../components/Panel';
-import Card from '../../../components/Card';
-import List from '../../../components/List';
-import ListTable from '../../../components/ListTable';
-import ProgressText from '../../../components/ProgressText';
-import IconButton from '../../../components/IconButton';
-import Step from '../../../components/Step';
+import Button from '../../../components/Button';
+import Footer from '../../../components/Footer';
 
 export default class extends Page {
   renderView() {
     return (
       <div>
-        <Continue date={'2019-04-29 16:30'} data={{}} />
-        <div className="content">
-          <Module className="m-t-2">
-            <Tabs
-              type="card"
-              active="main"
-              tabs={[
-                { key: 'main', name: '首页', path: '/' },
-                { key: 'ready', name: 'GetReady', path: '/' },
-                { key: 'exercise', name: '练习', path: '/' },
-                { key: 'cat', name: 'CAT模考', path: '/' },
-                { key: 'item', name: '题库', path: '/' },
-                { key: 'machine', name: '换库&机经', path: '/' },
-              ]}
-            />
-            <Tabs
-              active="main"
-              tabs={[
-                { key: 'main', name: '首页', path: '/' },
-                { key: 'ready', name: 'GetReady', path: '/' },
-                { key: 'exercise', name: '练习', path: '/' },
-                { key: 'cat', name: 'CAT模考', path: '/' },
-                { key: 'item', name: '题库', path: '/' },
-              ]}
-            />
-          </Module>
-          <Module>
-            <Tabs
-              active="main"
-              border
-              width="180px"
-              space="0"
-              tabs={[
-                { key: 'main', name: '首页', path: '/' },
-                { key: 'ready', name: 'GetReady', path: '/' },
-                { key: 'exercise', name: '练习', path: '/' },
-                { key: 'cat', name: 'CAT模考', path: '/' },
-                { key: 'item', name: '题库', path: '/' },
-              ]}
-            />
-            <Tabs
-              active="main"
-              type="text"
-              tabs={[
-                { key: 'main', name: '首页', path: '/' },
-                { key: 'ready', name: 'GetReady', path: '/' },
-                { key: 'exercise', name: '练习', path: '/' },
-                { key: 'cat', name: 'CAT模考', path: '/' },
-                { key: 'item', name: '题库', path: '/' },
-              ]}
-            />
-          </Module>
-          <Module>
-            <Step
-              list={[
-                '「1」前言',
-                '「2」重新认识',
-                '「3」基本元素',
-                '「4」简单变长',
-                '「5」练习',
-                '「6」翻译',
-                '「7」附录',
-              ]}
-              step="4"
-            />
-          </Module>
-          <Division col="2">
-            <Panel
-              title="OG"
-              col="3"
-              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 0, title: '测试' }]}
-            />
-            <Panel
-              title="OG"
-              col="4"
-              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 10, title: '测试' }]}
-            />
-          </Division>
-          <Division col="3">
-            <Card title="句改 SC" data={{ status: 'buy', desc: ['名师讲解', '精进学习', '提升成绩'] }} />
-            <Card title="句改 SC" data={{ status: 'open' }} />
-            <Card
-              title="句改 SC"
-              data={{
-                status: 'ing',
-                list: [
-                  { progress: 30, date: '2019-04-22', status: 'start' },
-                  { progress: 40, date: '2019-04-22', status: 'ing' },
-                ],
-              }}
-            />
-            <Card title="句改 SC" data={{ status: 'ing', list: [] }} />
-            <Card title="句改 SC" data={{ status: 'end' }} />
-          </Division>
-          <List
-            title="Chapter4"
-            subTitle="简单句如何变长难句"
-            list={[{ progress: 30, title: '什么样的句子叫长难句，长难句的基本特征。', part: 'Part 1' }]}
-          />
-          <ListTable
-            title="Chapter5"
-            subTitle="练习"
-            filters={[
-              { type: 'radio', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
-              { type: 'select', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
-            ]}
-            data={[{}]}
-            columns={[
-              {
-                title: '练习册',
-                width: 250,
-                align: 'left',
-                render: () => {
-                  return (
-                    <div className="table-row">
-                      <div className="night f-s-16">OG18 综合：第1-20题</div>
-                      <div>
-                        <ProgressText progress="30" size="small" />
-                      </div>
-                    </div>
-                  );
-                },
-              },
-              {
-                title: '正确率',
-                width: 150,
-                align: 'left',
-                render: () => {
-                  return (
-                    <div className="table-row">
-                      <div className="night f-s-16 f-w-b">--</div>
-                      <div className="f-s-12">全站55%</div>
-                    </div>
-                  );
-                },
-              },
-              {
-                title: '全站用时',
-                width: 150,
-                align: 'left',
-                render: () => {
-                  return (
-                    <div className="table-row">
-                      <div className="night f-s-16 f-w-b">55%</div>
-                      <div className="f-s-12">全站56s</div>
+        <div className="block block-1">
+          <div className="body">
+            <div className="title">PREPARE THE GMAT LIKE A PRO.</div>
+            <div className="desc">我们相信每位考生独一无二，但科学的备考方法本质相通；</div>
+            <div className="desc">我们知道考取高分并非易事，但千行的专业指导让难度下降25%;</div>
+            <div className="desc">我们清楚GMAT只是留学生涯的起点，但千行努力让您收获更多。</div>
+          </div>
+        </div>
+        <div className="block block-2">
+          <div className="body">
+            <div className="title">完善备考信息，赢VIP权限</div>
+            <div className="desc">知己知彼，百战不殆！</div>
+            <Button theme="white" className="btn">
+              立即填写
+            </Button>
+          </div>
+        </div>
+        <div className="block block-3">
+          <div className="body">
+            <div className="step step-1">
+              <div className="m-title">备考攻略</div>
+              <div className="list">
+                <div className="item m-r-2">
+                  <div className="title">
+                    自学指南<span className="sub">Self-guided</span>
+                  </div>
+                </div>
+                <div className="item m-l-2">
+                  <div className="title">
+                    参与课程<span className="sub">With DUKB24</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="step step-2">
+              <div className="m-title">WHY 千行</div>
+              <div className="list">
+                <div className="item m-r-1-5">
+                  <div className="title">
+                    内容全⾯<span className="sub">360° Support</span>
+                  </div>
+                  <div className="desc">
+                    网站涵盖考试介绍、方法引导、技巧点拨、练习、课程、机经、模考、心经分享等，从入门到出分，一应俱全，满足各阶段考生的备考需求。{' '}
+                  </div>
+                </div>
+                <div className="item m-r-1-5 m-l-1-5">
+                  <div className="title">
+                    指导专业<span className="sub">We are Pro.</span>
+                  </div>
+                  <div className="desc">专注GMAT备考8年 出分周期高于行业平均水平26% 学员均分高于行业18%</div>
+                </div>
+                <div className="item m-l-1-5">
+                  <div className="title">
+                    ⼈⼈会⽤<span className="sub">User-frriendly</span>
+                  </div>
+                  <div className="desc">
+                    除提供有用的数据信息外，网站多处设置信息导，提供必要的解释和原理说明，从源头规避误区，协助考生做出更加明智的决策，提高备考效率。
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="step step-3">
+              <div className="list">
+                <div className="item m-r-1-5">
+                  <div className="title" style={{ color: '#4292F0' }}>
+                    123342
+                  </div>
+                  <div className="desc">注册用户</div>
+                </div>
+                <div className="item m-r-1-5 m-l-1-5">
+                  <div className="title" style={{ color: '#FFB676' }}>
+                    2234
+                  </div>
+                  <div className="desc">700+分学员</div>
+                </div>
+                <div className="item m-l-1-5">
+                  <div className="title" style={{ color: '#F36565' }}>
+                    680
+                  </div>
+                  <div className="desc">学员均分</div>
+                </div>
+              </div>
+            </div>
+            <div className="step step-4">
+              <div className="m-title">
+                千⾏课程<span className="sub">Waste Less, Learn More</span>
+              </div>
+              <div className="box">
+                <div className="detail" />
+                <div className="list">
+                  <div className="tab">
+                    语法SC
+                    <div className="place place-1">
+                      <span className="right-arrow" />
                     </div>
-                  );
-                },
-              },
-              {
-                title: '最近做题',
-                width: 150,
-                align: 'left',
-                render: () => {
-                  return (
-                    <div className="table-row">
-                      <div>2019-04-28</div>
-                      <div>07:30</div>
+                  </div>
+                  <div className="tab">
+                    阅读RC
+                    <div className="place place-2">
+                      <span className="right-arrow" />
                     </div>
-                  );
-                },
-              },
-              {
-                title: '操作',
-                width: 180,
-                align: 'left',
-                render: () => {
-                  return (
-                    <div className="table-row p-t-1">
-                      <IconButton className="m-r-2" type="continue" tip="Continue" />
-                      <IconButton type="restart" tip="Restart" />
+                  </div>
+                  <div className="tab">
+                    逻辑CR
+                    <div className="place place-3">
+                      <span className="right-arrow" />
                     </div>
-                  );
-                },
-              },
-              {
-                title: '报告',
-                width: 30,
-                align: 'right',
-                render: () => {
-                  return (
-                    <div className="table-row p-t-1">
-                      <IconButton type="report" tip="Report" />
+                  </div>
+                  <div className="tab">
+                    数学Quant
+                    <div className="place place-4">
+                      <span className="right-arrow" />
                     </div>
-                  );
-                },
-              },
-            ]}
-          />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="step step-5">
+              <div className="m-title">独家服务</div>
+              <div className="list">
+                <div className="item m-r-1-5" style={{ height: 210 }}>
+                  <div className="title" style={{ color: '#4292F0' }}>
+                    千⾏CAT模考<span className="sub">></span>
+                  </div>
+                  <div className="desc">采⽤CAT出题机制、排名制算分⽅法</div>
+                  <div className="desc">独家题源，排除重题⼲扰</div>
+                  <div className="desc">模考报告提供具体考点分析，明确提升 ⽅向</div>
+                </div>
+                <div className="item m-r-1-5 m-l-1-5" style={{ height: 250 }}>
+                  <div className="title" style={{ color: '#FFB676' }}>
+                    机经服务<span className="sub">></span>
+                  </div>
+                  <div className="desc">⾼效整理：梳理逻辑结构，⽆“反吞 噬”⻛险</div>
+                  <div className="desc">轻松获取：⾃动更新⾄邮箱代替⼿动 领取</div>
+                  <div className="desc">随时查阅：⼿机查看、在线浏览、在 线做题</div>
+                </div>
+                <div className="item m-l-1-5" style={{ height: 185 }}>
+                  <div className="title" style={{ color: '#F36565' }}>
+                    VIP服务<span className="sub">></span>
+                  </div>
+                  <div className="desc">⾃由组卷，练你想练</div>
+                  <div className="desc">独家解析，专业报告</div>
+                  <div className="desc">提问特权，1VS1答疑</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="block block-4">
+          <div className="title-1">⼀个⼈⾛的更快，⼀群⼈⾛的更远</div>
+          <div className="title-2">加⼊“千⼈千⾏”，⾛的⼜快⼜远！</div>
+          <div className="title-2">——</div>
+        </div>
+        <div className="block block-5">5</div>
+        <div className="block block-6">
+          <div className="body">
+            <div className="m-title">发展历程</div>
+            <div className="step-list">
+              <div className="step">
+                <div className="title">2012</div>
+                <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
+              </div>
+              <div className="step">
+                <div className="title">2015</div>
+                <div className="desc">
+                  正式成立“广州多少教育咨询有限公司”，致力于帮助GMAT考生花更少的时间，取得更高的成绩，"Waste Less, Learn
+                  More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
+                </div>
+              </div>
+              <div className="step">
+                <div className="title">2019</div>
+                <div className="desc">
+                  发行“千行GMAT长难句”； 每4位GMAT考生中有3位使用“千行资料”； “千行”网站上线，我们希望为您做得更多。
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="block block-7">
+          <div className="body">
+            <div className="step-list">
+              <div className="step">
+                <div className="title">工作机会</div>
+              </div>
+              <div className="step" style={{ paddingLeft: 80 }}>
+                <div className="title">联系我们</div>
+                <div className="desc">(400) - 800 8888</div>
+                <div className="desc">service@cat.com</div>
+                <div className="desc">catgmat</div>
+              </div>
+              <div className="step" style={{ paddingLeft: 140 }}>
+                <div className="title">关注我们</div>
+              </div>
+            </div>
+          </div>
         </div>
+        <Footer />
       </div>
     );
   }