front/project/www/app.less

@@ -18,6 +18,7 @@
 @line_color: #c7d0d9;
 @base_size: 14px;
 @base_bg_color: #f4f4f4;
+@base_select_color: #f4f7fd;
 @content_width: 1000px;
 
 .theme,
@@ -91,7 +92,7 @@
 }
 
 .m-r-2 {
-  margin-right: 10px;
+  margin-right: 20px;
 }
 
 .m-t-5 {

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

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

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

@@ -2,8 +2,8 @@ import React from 'react';
 import './index.less';
 
 function Division(props) {
-  const { children, two, three } = props;
-  return <div className={`division ${two ? 'two' : ''} ${three ? 'three' : ''}`}>{children}</div>;
+  const { children, col = 3 } = props;
+  return <div className={`division col-${col}`}>{children}</div>;
 }
 Division.propTypes = {};
 export default Division;

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

@@ -6,7 +6,7 @@
   }
 }
 
-.division.two {
+.division.col-2 {
   margin: 0 -16px;
 
   >div {
@@ -16,7 +16,7 @@
   }
 }
 
-.division.three {
+.division.col-3 {
   margin: 0 -28px;
 
   >div {

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

@@ -4,10 +4,10 @@ import Assets from '@src/components/Assets';
 import { Tooltip } from 'antd';
 
 function IconButton(props) {
-  const { type, tip } = props;
+  const { className, type, tip } = props;
   return (
     <Tooltip placement="top" title={tip}>
-      <div className="icon-button">
+      <div className={`icon-button ${className}`}>
         <Assets name={`ico_24_${type}`} svg />
       </div>
     </Tooltip>

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

@@ -3,11 +3,14 @@ import './index.less';
 import Module from '../Module';
 import Table from '../Table';
 import Radio from '../Radio';
+import Select from '../Select';
 
 function getFilter(filter) {
   switch (filter.type) {
     case 'radio':
       return <Radio {...filter} />;
+    case 'select':
+      return <Select {...filter} />;
     default:
       return '';
   }

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

@@ -33,6 +33,7 @@
 
       .filter-item {
         margin-right: 32px;
+        display: inline-block;
       }
     }
   }

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

@@ -36,7 +36,7 @@ function Panel(props) {
             </div>
           </div>
         </div>
-        <div className={`list list-${col}`}>
+        <div className={`list col-${col}`}>
           {list.map(item => {
             return (
               <ProgressButton className="item" progress={item.progress}>

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

@@ -69,7 +69,7 @@
       }
     }
 
-    .list.list-3 {
+    .list.col-3 {
       margin: 0 -9px -12px;
 
       .item {
@@ -80,7 +80,7 @@
       }
     }
 
-    .list.list-4 {
+    .list.col-4 {
       margin: 0 -10px -12px;
 
       .item {

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

@@ -3,12 +3,12 @@ import './index.less';
 import Button from '../Button';
 
 function Radio(props) {
-  const { list, checked } = props;
+  const { list, value } = props;
   return (
     <div className="radio">
       {list.map(item => {
         return (
-          <Button theme={item.key === checked ? 'theme' : 'default'} size="small" radius>
+          <Button theme={item.key === value ? 'theme' : 'default'} size="small" radius>
             {item.title}
           </Button>
         );

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

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import './index.less';
+import Button from '../Button';
+
+export default class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { selecting: false };
+  }
+
+  componentWillMount() {}
+
+  componentWillUnmount() {}
+
+  open() {
+    this.setState({ selecting: true });
+  }
+
+  close() {
+    this.setState({ selecting: false });
+  }
+
+  render() {
+    const { selecting } = this.state;
+    const { value, list = [] } = this.props;
+    let index = 0;
+    for (let i = 0; i < list.length; i += 1) {
+      if (list[i].key === value) {
+        index = i;
+        break;
+      }
+    }
+    const title = list.length > 0 ? list[index].title : '';
+    return (
+      <div className="select">
+        <div hidden={!selecting} className="mask" onClick={() => this.close()} />
+        <div className="select-warp">
+          <Button size="small" radius onClick={() => this.open()}>
+            {title}
+          </Button>
+          <div className={`select-body ${selecting ? 'select' : ''}`}>
+            {list.map(item => {
+              return <div className="select-option">{item.title}</div>;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,62 @@
+@import '../../app.less';
+
+.select {
+  position: relative;
+
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  .select-warp {
+    line-height: 30px;
+    display: inline-block;
+    position: relative;
+  }
+
+  .select-body {
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    border: 1px solid @line_color;
+    border-radius: 4px;
+    box-sizing: border-box;
+    opacity: 0;
+    z-index: 2;
+    transform: translateY(100%);
+
+    .select-option {
+      height: 0;
+      line-height: 25px;
+      padding-left: 10px;
+      border-bottom: 1px solid transparent;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+
+    .select-option:hover {
+      background: @theme_bg_color;
+    }
+
+    .select-option:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .select-body.select {
+    opacity: 1;
+
+    .select-option {
+      height: auto;
+      border-color: @line_color;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.less';
+
+function Step(props) {
+  const { list = [], step = 1 } = props;
+  return (
+    <div className="step">
+      {list.map((item, index) => {
+        return (
+          <div className={`item ${index === step - 1 ? 'active' : ''} ${step - 1 > index ? 'over' : ''}`}>
+            <span className="text">{item}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+Step.propTypes = {};
+export default Step;

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

@@ -0,0 +1,61 @@
+@import '../../app.less';
+
+.step {
+  text-align: center;
+  display: flex;
+  background: #fff;
+  height: 44px;
+  line-height: 44px;
+
+  .item {
+    flex: 1;
+    position: relative;
+
+    .text {
+      margin-left: 5px;
+    }
+  }
+
+  .item:before {
+    content: '';
+    position: absolute;
+    height: 0;
+    width: 0;
+    right: -24px;
+    border-width: 22px 11px;
+    z-index: 1;
+    border-style: solid;
+    border-color: transparent;
+    border-left-color: @line_color;
+  }
+
+  .item:after {
+    content: '';
+    position: absolute;
+    height: 0;
+    width: 0;
+    right: -22px;
+    border-width: 22px 11px;
+    z-index: 1;
+    border-style: solid;
+    border-color: transparent;
+    border-left-color: #fff;
+  }
+
+  .item.over {
+    background: @base_select_color;
+  }
+
+  .item.over:after {
+    border-left-color: @base_select_color;
+  }
+
+  .item.active {
+    color: #fff;
+    background: @theme_color;
+  }
+
+  .item.active:after {
+    border-left-color: @theme_color;
+  }
+}

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

@@ -11,6 +11,7 @@ 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() {
@@ -68,7 +69,21 @@ export default class extends Page {
               ]}
             />
           </Module>
-          <Division two>
+          <Module>
+            <Step
+              list={[
+                '「1」前言',
+                '「2」重新认识',
+                '「3」基本元素',
+                '「4」简单变长',
+                '「5」练习',
+                '「6」翻译',
+                '「7」附录',
+              ]}
+              step="4"
+            />
+          </Module>
+          <Division col="2">
             <Panel
               title="OG"
               col="3"
@@ -80,7 +95,7 @@ export default class extends Page {
               list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 10, title: '测试' }]}
             />
           </Division>
-          <Division three>
+          <Division col="3">
             <Card title="句改 SC" data={{ status: 'buy', desc: ['名师讲解', '精进学习', '提升成绩'] }} />
             <Card title="句改 SC" data={{ status: 'open' }} />
             <Card
@@ -106,6 +121,7 @@ export default class extends Page {
             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={[
@@ -170,7 +186,8 @@ export default class extends Page {
                 render: () => {
                   return (
                     <div className="table-row p-t-1">
-                      <IconButton type="start" tip="Start" />
+                      <IconButton className="m-r-2" type="continue" tip="Continue" />
+                      <IconButton type="restart" tip="Restart" />
                     </div>
                   );
                 },