Merge branch 'master' of git.proginn.com:zaixianjiaoyu/sourcecode

front/project/www/app.less

@@ -1,5 +1,6 @@
 @charset "utf-8";
 @cornflower: #6865fd;
+@cornflower_bg: #e4eaf4;
 @dark-sky-blue: #4292f0;
 @night-blue: #050930;
 @slate-grey: #5e677b;
@@ -9,6 +10,7 @@
 @ice-blue: #f7fcff;
 
 @theme_color: @dark-sky-blue;
+@theme_holder_color: #7bb3f3;
 @theme_color_hover: darken(@dark-sky-blue, 10);
 @holder_color: @bluey-grey;
 @base_color: @slate-grey;
@@ -24,6 +26,22 @@
   color: @theme_color;
 }
 
+.night {
+  color: @night-blue;
+}
+
+.f-s-16 {
+  font-size: 16px;
+}
+
+.f-s-12 {
+  font-size: 12px;
+}
+
+.f-w-b {
+  font-weight: bold;
+}
+
 .t-l {
   text-align: left;
 }
@@ -222,4 +240,18 @@ body,
   }
 }
 
-#root {}
+#root {}
+
+body {
+  .ant-tooltip {
+
+    .ant-tooltip-arrow {
+      border-top-color: #fff;
+    }
+
+    .ant-tooltip-inner {
+      background: #fff;
+      color: @base_color;
+    }
+  }
+}

front/project/www/assets/QA.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+    <circle cx="8" cy="8" r="5.5" fill="#fff" stroke="#5E677B"/>
+    <path fill="#5E677B" d="M7.28 9.65h1.01C8.12 8.16 9.9 7.62 9.9 6.16c0-1.17-.81-1.83-1.97-1.83-.83 0-1.5.4-1.99.96l.65.59c.33-.37.74-.61 1.21-.61.63 0 .98.42.98.97 0 1.09-1.74 1.73-1.5 3.41zm.52 2.48c.43 0 .77-.33.77-.8 0-.47-.34-.82-.77-.82-.44 0-.77.35-.77.82s.33.8.77.8z"/>
+</svg>

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

@@ -2,11 +2,11 @@ import React from 'react';
 import './index.less';
 
 function Button(props) {
-  const { children, theme = 'theme', size = 'basic', disabled, radius, width } = props;
+  const { children, className = '', theme = 'theme', size = 'basic', disabled, radius, width } = props;
   return (
     <div
       style={{ width: width || '' }}
-      className={`button ${theme} ${size} ${disabled ? 'disabled' : ''}  ${radius ? 'radius' : ''}`}
+      className={`button ${className} ${theme} ${size} ${disabled ? 'disabled' : ''}  ${radius ? 'radius' : ''}`}
     >
       {children}
     </div>

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

@@ -21,7 +21,12 @@
   font-size: 12px;
 }
 
-.button.lager {}
+.button.lager {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+  padding: 5px 16px;
+}
 
 .button.disabled {
   cursor: no-drop;
@@ -35,6 +40,10 @@
   border-radius: 14px;
 }
 
+.button.lager.radius {
+  border-radius: 36px;
+}
+
 .button.theme {
   background: @theme_color;
   color: #fff;
@@ -56,10 +65,10 @@
 }
 
 .button.border:hover {
-  border-color: @theme_color_hover;
+  border-color: @theme_color;
 }
 
 .button.default:hover {
-  color: @base_color;
-  border-color: @base_color;
+  color: @theme_color;
+  border-color: @theme_color;
 }

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

@@ -1,15 +1,116 @@
 import React from 'react';
 import './index.less';
+import { Link } from 'react-router-dom';
+import { Checkbox } from 'antd';
 import Module from '../Module';
+import Progress from '../Progress';
+import IconButton from '../IconButton';
+import Button from '../Button';
+
+function getBuyBody(data) {
+  const desc = data.desc || [];
+  return (
+    <div className="body">
+      <div className="desc">
+        {desc.map(item => {
+          return <div className="item">{item}</div>;
+        })}
+      </div>
+      <div className="btn">
+        <Button size="lager" radius>
+          立即购买
+        </Button>
+      </div>
+    </div>
+  );
+}
+function getOpenBody() {
+  return (
+    <div className="body">
+      <div className="title">请开通预习作业</div>
+      <div className="text">
+        <Checkbox />
+        <span>
+          我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link>
+        </span>
+      </div>
+      <div className="btn">
+        <Button size="lager" radius>
+          立即开通
+        </Button>
+      </div>
+    </div>
+  );
+}
+function getIngBody(data) {
+  const list = data.list || [];
+  return (
+    <div className="body">
+      <div className="title">近期待完成</div>
+      {list.length === 0 ? (
+        <div className="text">
+          <div>好棒！</div>
+          <div>近期的作业都完成啦</div>
+        </div>
+      ) : (
+        <div className="list">
+          {list.map(item => {
+            return (
+              <div className="item">
+                <div className="top">
+                  <div className="date">{item.date}</div>
+                  <div className="action">
+                    {item.status === 'start' && <IconButton type="start" tip="Start" />}
+                    {item.status === 'ing' && <IconButton type="continue" tip="Continue" />}
+                    {item.status === 'ing' && <IconButton type="restart" tip="Restart" />}
+                  </div>
+                </div>
+                <Progress progress={item.progress} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+function getEndBody() {
+  return (
+    <div className="body">
+      <div className="title">课程已经结束啦</div>
+    </div>
+  );
+}
+
+function getBody(data) {
+  switch (data.status) {
+    case 'buy':
+      return getBuyBody(data);
+    case 'open':
+      return getOpenBody(data);
+    case 'ing':
+      return getIngBody(data);
+    case 'end':
+      return getEndBody(data);
+    default:
+      return '';
+  }
+}
 
 function Card(props) {
-  const { style, children, title } = props;
+  const { style, data = {}, title } = props;
+
   return (
-    <Module style={style} className="card">
-      <div className="header">{title}</div>
-      {children}
+    <Module style={style} className={`card ${data.status}`}>
+      <div className="header">
+        {title}
+        {data.status === 'buy' && <span className="sub-title">未购买</span>}
+        {data.status === 'open' && <span className="sub-title">已购买</span>}
+      </div>
+      {getBody(data)}
     </Module>
   );
 }
+
 Card.propTypes = {};
 export default Card;

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

@@ -1,6 +1,9 @@
 @import '../../app.less';
 
 .module.card {
+  min-height: 314px;
+  position: relative;
+
   .header {
     color: @night-blue;
     background: @theme_bg_color;
@@ -8,5 +11,122 @@
     height: 44px;
     line-height: 44px;
     padding-left: 36px;
+    padding-right: 32px;
+
+    .sub-title {
+      float: right;
+      font-size: 18px;
+    }
+  }
+
+  .body {
+    padding: 24px 32px 32px;
+
+    .title {
+      margin-bottom: 28px;
+      font-size: 16px;
+      color: @night-blue;
+    }
+
+    .btn {
+      margin: 0 -32px;
+      width: 100%;
+      position: absolute;
+      bottom: 44px;
+      text-align: center;
+    }
+  }
+}
+
+.module.card.buy {
+  .header {
+    .sub-title {
+      color: @cornflower;
+    }
+  }
+
+  .body {
+    .desc {
+      .item {
+        position: relative;
+        margin-bottom: 18px;
+        padding-left: 15px;
+        font-size: 18px;
+      }
+
+      .item:before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        position: absolute;
+        background: @theme_color;
+        border-radius: 3px;
+        top: 10px;
+        left: 0;
+      }
+    }
+  }
+}
+
+.module.card.open {
+  .header {
+    .sub-title {
+      color: @holder_color;
+    }
+  }
+
+  .body {
+    .text {
+      margin-top: 40px;
+      line-height: 25px;
+      padding-left: 30px;
+      padding-right: 5px;
+      position: relative;
+
+      .ant-checkbox-wrapper {
+        position: absolute;
+        left: 0;
+        top: 5px;
+      }
+    }
+  }
+}
+
+.module.card.ing {
+  .body {
+    .text {
+      >div {
+        margin-bottom: 10px;
+      }
+    }
+
+    .list {
+      .item {
+        margin-top: 30px;
+
+        .top {
+          margin-bottom: 28px;
+
+          .date {
+            color: @night-blue;
+            display: inline-block;
+          }
+
+          .action {
+            float: right;
+
+            .icon-button {
+              margin-left: 22px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.module.card.end {
+  .header {
+    background: #c8d1da;
   }
 }

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

@@ -15,7 +15,9 @@
   }
 
   .left {
-    float: left;
+    position: absolute;
+    top: 0;
+    left: 0;
     text-align: left;
     padding-top: 19px;
   }

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+import Assets from '@src/components/Assets';
+import { Tooltip } from 'antd';
+
+function IconButton(props) {
+  const { type, tip } = props;
+  return (
+    <Tooltip placement="top" title={tip}>
+      <div className="icon-button">
+        <Assets name={`ico_24_${type}`} svg />
+      </div>
+    </Tooltip>
+  );
+}
+IconButton.propTypes = {};
+export default IconButton;

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

@@ -0,0 +1,22 @@
+@import '../../app.less';
+
+.icon-button {
+  width: 24px;
+  height: 24px;
+  background: @theme_bg_color;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  transition: all 0.25s;
+  border-radius: 2px;
+  line-height: 24px;
+  cursor: pointer;
+
+  .assets {
+    width: 14px;
+  }
+}
+
+.icon-button:hover {
+  background: darken(@theme_bg_color, 10);
+}

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

@@ -1,35 +1,33 @@
 import React from 'react';
 import './index.less';
 import Module from '../Module';
-import Table from '../Table';
-import Radio from '../Radio';
-
-function getFilter(filter) {
-  switch (filter.type) {
-    case 'radio':
-      return <Radio {...filter} />;
-    default:
-      return '';
-  }
-}
+import IconButton from '../IconButton';
+import ProgressText from '../ProgressText';
 
 function List(props) {
-  const { style, title, subTitle, filters = [], colums = [], data = [] } = props;
+  const { style, title, subTitle, list = [] } = props;
   return (
     <Module style={style} className="list">
       <div className="header">
         <span className="title">{title}</span>
         <span className="sub-title">{subTitle}</span>
       </div>
-      <div className="filter">
-        <span className="text">筛选</span>
-        <div className="filter-list">
-          {filters.map(filter => {
-            return <div className="filter-item">{getFilter(filter)}</div>;
-          })}
-        </div>
+      <div className="body">
+        {list.map(item => {
+          return (
+            <div className="item">
+              <div className="col part">{item.part}</div>
+              <div className="col title">{item.title}</div>
+              <div className="col pg">
+                <ProgressText progress={item.progress} size="small" />
+              </div>
+              <div className="col action">
+                <IconButton type="view" tip="View" />
+              </div>
+            </div>
+          );
+        })}
       </div>
-      <Table colums={colums} data={data} />
     </Module>
   );
 }

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

@@ -18,22 +18,44 @@
     }
   }
 
-  .filter {
-    height: 68px;
-    line-height: 68px;
-    padding-left: 44px;
-    border-bottom: 1px solid @line_color;
+  .body {
+    .item {
+      padding: 0 44px;
+      border-bottom: 1px solid @line_color;
+      height: 64px;
+      line-height: 64px;
+      display: flex;
 
-    .text {
-      margin-right: 14px;
-    }
+      .part {
+        flex: 1;
+        font-size: 16px;
+        color: @bluey-grey;
+        font-weight: 600;
+      }
+
+      .title {
+        flex: 5;
+        font-size: 16px;
+        color: @night-blue;
+      }
+
+      .pg {
+        flex: 3;
 
-    .filter-list {
-      display: inline-block;
+        .progress-text {
+          width: 180px;
+          margin-top: 20px;
+        }
+      }
 
-      .filter-item {
-        margin-right: 32px;
+      .action {
+        flex: 1;
+        text-align: right;
       }
     }
+
+    .item:last-child {
+      border-bottom: none;
+    }
   }
 }

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.less';
+import Module from '../Module';
+import Table from '../Table';
+import Radio from '../Radio';
+
+function getFilter(filter) {
+  switch (filter.type) {
+    case 'radio':
+      return <Radio {...filter} />;
+    default:
+      return '';
+  }
+}
+
+function ListTable(props) {
+  const { style, title, subTitle, filters = [], columns = [], data = [] } = props;
+  return (
+    <Module style={style} className="list-table">
+      <div className="header">
+        <span className="title">{title}</span>
+        <span className="sub-title">{subTitle}</span>
+      </div>
+      <div className="filter">
+        <span className="text">筛选</span>
+        <div className="filter-list">
+          {filters.map(filter => {
+            return <div className="filter-item">{getFilter(filter)}</div>;
+          })}
+        </div>
+      </div>
+      <Table columns={columns} data={data} />
+    </Module>
+  );
+}
+ListTable.propTypes = {};
+export default ListTable;

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

@@ -0,0 +1,54 @@
+@import '../../app.less';
+
+.module.list-table {
+  .header {
+    font-size: 18px;
+    height: 56px;
+    line-height: 56px;
+    padding-left: 44px;
+    border-bottom: 1px solid @line_color;
+
+    .title {
+      color: @cornflower;
+      margin-right: 9px;
+    }
+
+    .sub-title {
+      color: @night-blue;
+    }
+  }
+
+  .filter {
+    height: 68px;
+    line-height: 68px;
+    padding-left: 44px;
+    border-bottom: 1px solid @line_color;
+
+    .text {
+      margin-right: 14px;
+    }
+
+    .filter-list {
+      display: inline-block;
+
+      .filter-item {
+        margin-right: 32px;
+      }
+    }
+  }
+
+  .table {
+    .th {
+      padding: 0 44px;
+    }
+
+    .tr {
+      padding: 0 44px;
+
+      .td {
+        height: 78px;
+        padding-top: 15px;
+      }
+    }
+  }
+}

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

@@ -1,13 +1,51 @@
 import React from 'react';
 import './index.less';
+import Assets from '@src/components/Assets';
 import Module from '../Module';
+import ProgressButton from '../ProgressButton';
 
 function Panel(props) {
-  const { style, children, title } = props;
+  const { style, list = [], col = 3, title } = props;
   return (
     <Module style={style} className="panel">
-      <div className="header">{title}</div>
-      {children}
+      <div className="header">
+        {title}
+        <Assets name="QA" svg />
+      </div>
+      <div className="body">
+        <div className="chart-info">
+          <div className="chart" />
+          <div className="info">
+            <div className="item">
+              <div className="title">已做</div>
+              <div className="data">
+                <span className="text">123</span>题
+              </div>
+            </div>
+            <div className="item">
+              <div className="title">剩余</div>
+              <div className="data">
+                <span className="text">123</span>题
+              </div>
+            </div>
+            <div className="item">
+              <div className="title">总计</div>
+              <div className="data">
+                <span className="text">123</span>题
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={`list list-${col}`}>
+          {list.map(item => {
+            return (
+              <ProgressButton className="item" progress={item.progress}>
+                {item.title}
+              </ProgressButton>
+            );
+          })}
+        </div>
+      </div>
     </Module>
   );
 }

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

@@ -7,5 +7,88 @@
     height: 44px;
     line-height: 44px;
     border-bottom: 1px solid @line_color;
+
+    .assets {
+      transform: translateY(-1px);
+      margin-left: 5px;
+      cursor: pointer;
+    }
+
+    .assets:hover {
+      color: @theme_color;
+    }
+  }
+
+  .body {
+    min-height: 356px;
+    padding: 32px 44px;
+
+    .chart-info {
+      height: 110px;
+      margin-bottom: 24px;
+
+      .chart {
+        height: 110px;
+        width: 110px;
+        margin-right: 22px;
+        display: inline-block;
+      }
+
+      .info {
+        display: inline-block;
+        vertical-align: top;
+        padding-top: 24px;
+
+        .item {
+          display: inline-block;
+          margin-right: 24px;
+
+          .title {
+            color: @bluey-grey;
+            font-size: 12px;
+          }
+
+          .data {
+            color: @bluey-grey;
+            font-size: 12px;
+
+            .text {
+              font-size: 18px;
+              color: @night-blue;
+              margin-right: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    .list {
+
+      .item {
+        display: inline-block;
+      }
+    }
+
+    .list.list-3 {
+      margin: 0 -9px -12px;
+
+      .item {
+        width: 120px;
+        margin-bottom: 12px;
+        margin-left: 9px;
+        margin-right: 9px;
+      }
+    }
+
+    .list.list-4 {
+      margin: 0 -10px -12px;
+
+      .item {
+        width: 84px;
+        margin-bottom: 12px;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
   }
 }

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+
+function Progress(props) {
+  const { progress, size = 'basic' } = props;
+  return (
+    <div className={`progress ${size}`}>
+      <div className="progress-item" style={{ width: `${progress}%` }} />
+    </div>
+  );
+}
+Progress.propTypes = {};
+export default Progress;

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

@@ -0,0 +1,24 @@
+@import '../../app.less';
+
+.progress {
+  background: @cornflower_bg;
+  width: 100%;
+  height: 14px;
+  border-radius: 7px;
+  overflow: hidden;
+
+  .progress-item {
+    height: 100%;
+    background: @cornflower;
+  }
+}
+
+.progress.basic {
+  height: 14px;
+  border-radius: 7px;
+}
+
+.progress.small {
+  height: 8px;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+
+function ProgressButton(props) {
+  const { children, className = '', progress, width } = props;
+  return (
+    <div
+      style={{ width: width || '' }}
+      className={`progress-button ${className} ${progress > 0 ? 'theme' : 'default'}`}
+    >
+      <div className="progress" style={{ width: `${progress}%` }} />
+      {children}
+    </div>
+  );
+}
+ProgressButton.propTypes = {};
+export default ProgressButton;

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

@@ -0,0 +1,48 @@
+@import '../../app.less';
+
+.progress-button {
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  transition: all 0.25s;
+  border-radius: 6px;
+  padding: 11px 24px;
+  line-height: 20px;
+  font-size: 14px;
+  position: relative;
+  overflow: hidden;
+
+  .progress {
+    height: 100%;
+    background: @theme_color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.progress-button.theme {
+  background: @theme_holder_color;
+  color: #fff;
+}
+
+.progress-button.default {
+  background: #fff;
+  color: @holder_color;
+  border: 1px solid @theme_bg_color;
+}
+
+.progress-button.theme:hover {
+  background: darken(@theme_holder_color, 5);
+
+  .progress {
+    background: darken(@theme_color, 5);
+  }
+}
+
+.progress-button.default:hover {
+  border-color: @theme_color;
+  color: @theme_color;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+import Progress from '../Progress';
+
+function ProgressText(props) {
+  const { progress, size } = props;
+  return (
+    <div className="progress-text">
+      <div className="p">
+        <Progress progress={progress} size={size} />
+      </div>
+      <div className="t">{progress}%</div>
+    </div>
+  );
+}
+ProgressText.propTypes = {};
+export default ProgressText;

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

@@ -0,0 +1,17 @@
+@import '../../app.less';
+
+.progress-text {
+  display: flex;
+  width: 160px;
+  line-height: 24px;
+
+  .p {
+    flex: 1;
+    margin-top: 8px;
+  }
+
+  .t {
+    width: 40px;
+    text-align: right;
+  }
+}

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

@@ -7,17 +7,30 @@ function Table(props) {
     <div className="table">
       <div className="th">
         {columns.map(column => {
-          return <div className="td">{column.title}</div>;
+          return (
+            <div style={{ width: column.width, textAlign: column.align }} className={`td ${column.className}`}>
+              {column.title}
+            </div>
+          );
         })}
       </div>
+      {data.length === 0 && <div className="empty">暂无数据</div>}
       {data.map(row => {
         return (
           <div className="tr">
             {columns.map(column => {
               if (column.render) {
-                return <div className="td">{column.render(row[column.key], row)}</div>;
+                return (
+                  <div style={{ width: column.width, textAlign: column.align }} className={`td ${column.className}`}>
+                    {column.render(row[column.key], row)}
+                  </div>
+                );
               }
-              return <div className="td">{row[column.key]}</div>;
+              return (
+                <div style={{ width: column.width, textAlign: column.align }} className={`td ${column.className}`}>
+                  {row[column.key]}
+                </div>
+              );
             })}
           </div>
         );

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

@@ -2,14 +2,32 @@
 
 .table {
 
-  .td {}
+  .td {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
   .th {
+    height: 44px;
+    line-height: 44px;
+    border-bottom: 1px solid @line_color;
+
     .td {}
   }
 
   .tr {
+    border-bottom: 1px solid @line_color;
 
     .td {}
   }
+
+  .tr:last-child {
+    border-bottom: none;
+  }
+
+  .empty {
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
 }

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

@@ -8,6 +8,9 @@ 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';
 
 export default class extends Page {
   renderView() {
@@ -66,30 +69,125 @@ export default class extends Page {
             />
           </Module>
           <Division two>
-            <Panel title="OG">
-              <div>123</div>
-            </Panel>
-            <Panel title="OG">
-              <div>123</div>
-            </Panel>
+            <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 three>
-            <Card title="句改 SC">
-              <div>123</div>
-            </Card>
-            <Card title="句改 SC">
-              <div>123</div>
-            </Card>
-            <Card title="句改 SC">
-              <div>123</div>
-            </Card>
+            <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 }] },
             ]}
+            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 type="start" tip="Start" />
+                    </div>
+                  );
+                },
+              },
+              {
+                title: '报告',
+                width: 30,
+                align: 'right',
+                render: () => {
+                  return (
+                    <div className="table-row p-t-1">
+                      <IconButton type="report" tip="Report" />
+                    </div>
+                  );
+                },
+              },
+            ]}
           />
         </div>
       </div>