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

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+import CheckboxItem from '../CheckboxItem';
+
+function AnswerCheckbox(props) {
+  const { selected, answer, show, list = [] } = props;
+  return (
+    <div className="answer-checkbox">
+      {list.map((item, index) => {
+        return (
+          <div className={`item ${index === answer ? 'true' : 'false'} ${show ? 'show' : ''}`}>
+            <CheckboxItem checked={index === selected} />
+            <div className="text">{item.text}</div>
+            <div className="icon" />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+AnswerCheckbox.propTypes = {};
+export default AnswerCheckbox;

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

@@ -0,0 +1,45 @@
+@import '../../app.less';
+
+.answer-checkbox {
+
+  .item {
+    display: inline-block;
+    position: relative;
+    margin-right: 60px;
+    line-height: 20px;
+    height: 32px;
+    padding: 6px;
+
+    .text {
+      display: inline-block;
+      color: #050930;
+      vertical-align: top;
+      margin-left: 5px;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 2px;
+      margin-left: 10px;
+    }
+  }
+
+  .item.show.true {
+    background-color: rgba(23, 165, 27, 0.06);
+
+    .icon {
+      background-image: url('/assets/right_icon.png');
+    }
+  }
+
+  .item.show.false {
+    background-color: rgba(253, 247, 247, 1);
+
+    .icon {
+      background-image: url('/assets/wrong_icon.png');
+    }
+  }
+}

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

@@ -44,7 +44,7 @@
       background-image: url('/assets/option_right.png');
     }
   }
-  item  false show
+
   .item.show.false {
     .text {
       color: #686872;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+
+function CheckboxItem(props) {
+  const { checked, onClick } = props;
+  return (
+    <div className={`checkbox-item ${checked ? 'checked' : ''}`} onClick={() => !checked && onClick && onClick()} />
+  );
+}
+CheckboxItem.propTypes = {};
+export default CheckboxItem;

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

@@ -0,0 +1,18 @@
+@import '../../app.less';
+
+.checkbox-item {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  border: 1px solid #CCD2DB;
+  background: #E4EAF4;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.checkbox-item.checked {
+  background-image: url('/assets/chooseed_icon.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+}

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

@@ -3,6 +3,25 @@ import './index.less';
 
 export default class HardInput extends Component {
   render() {
-    return <div className="hard-input" />;
+    const { selected, answer, show, list = [], otherList = [] } = this.props;
+    return (
+      <div className={`hard-input ${selected ? 'selected' : ''}`}>
+        {list.map((item, index) => {
+          return (
+            <div className={`item ${index === answer ? 'true' : 'false'} ${show ? 'show' : ''}`}>
+              <div className="text">{item.text}</div>
+              <div className="icon" />
+            </div>
+          );
+        })}
+        {otherList.map(item => {
+          return (
+            <div className="other-item">
+              <div className="text">{item.text}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 }

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

@@ -4,5 +4,75 @@
   background: #fff;
   height: 46px;
   border-radius: 2px;
+  padding: 7px 20px;
+  line-height: 32px;
   border: 1px solid rgba(200, 209, 218, 1);
+  cursor: text;
+
+  .item {
+    display: inline-block;
+    position: relative;
+    line-height: 20px;
+    height: 32px;
+    padding: 6px;
+    margin-right: 10px;
+    background-color: rgba(228, 234, 244, 1);
+
+    .text {
+      display: inline-block;
+      color: #050930;
+      vertical-align: top;
+      margin-left: 5px;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 2px;
+      margin-left: 10px;
+      background-image: url('/assets/del_icon.png');
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+
+  .item.show.true {
+    background-color: rgba(23, 165, 27, 0.06);
+
+    .icon {
+      background-image: url('/assets/right_icon.png');
+    }
+  }
+
+  .item.show.false {
+    background-color: rgba(253, 247, 247, 1);
+
+    .icon {
+      background-image: url('/assets/wrong_icon.png');
+    }
+  }
+
+  .other-item {
+    display: inline-block;
+    position: relative;
+    line-height: 20px;
+    height: 32px;
+    padding: 6px;
+    margin-right: 10px;
+    background-color: rgba(23, 165, 27, 0.06);
+
+    .text {
+      display: inline-block;
+      color: #17A51B;
+      vertical-align: top;
+      margin-left: 5px;
+    }
+  }
+}
+
+.hard-input.selected {
+  background: rgba(244, 249, 254, 1);
+  border-left: 4px solid rgba(66, 146, 240, 1);
 }

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

@@ -103,4 +103,37 @@
 .icon.star.active,
 .icon.star:hover {
   background-image: url('/assets/header_star_select.png');
+}
+
+.icon.up_turn {
+  width: 20px;
+  height: 76px;
+  background: url('/assets/upturning_icon.png') no-repeat center;
+}
+
+.icon.up_turn.active,
+.icon.up_turn:hover {
+  background-image: url('/assets/upturning_icon_hover.png');
+}
+
+.icon.down_turn {
+  width: 20px;
+  height: 76px;
+  background: url('/assets/downturning_icon.png') no-repeat center;
+}
+
+.icon.down_turn.active,
+.icon.down_turn:hover {
+  background-image: url('/assets/downturning_icon_hover.png');
+}
+
+.icon.menu {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/meun_icon.png') no-repeat center;
+}
+
+.icon.menu.active,
+.icon.menu:hover {
+  background-image: url('/assets/meun_icon_hover.png');
 }

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

@@ -2,9 +2,9 @@ import React from 'react';
 import './index.less';
 
 function Progress(props) {
-  const { progress, size = 'basic' } = props;
+  const { progress, size = 'basic', theme = '', radius = true } = props;
   return (
-    <div className={`progress ${size}`}>
+    <div className={`progress ${size} ${theme} ${radius ? 'radius' : ''}`}>
       <div className="progress-item" style={{ width: `${progress}%` }} />
     </div>
   );

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

@@ -4,21 +4,36 @@
   background: @cornflower_bg;
   width: 100%;
   height: 14px;
-  border-radius: 7px;
   overflow: hidden;
 
   .progress-item {
     height: 100%;
     background: @cornflower;
+    transition: all 0.3s;
   }
 }
 
 .progress.basic {
   height: 14px;
-  border-radius: 7px;
 }
 
 .progress.small {
   height: 8px;
+}
+
+.progress.basic.radius {
+  border-radius: 7px;
+}
+
+.progress.small.radius {
   border-radius: 4px;
+}
+
+
+.progress.theme {
+  background: #8897A8;
+
+  .progress-item {
+    background: #217DFF;
+  }
 }

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

@@ -12,12 +12,12 @@
 
     .layout-header {
       height: 84px;
-      line-height: 84px;
       margin: 0 30px;
       border-bottom: 1px solid rgba(233, 239, 248, 1);
       text-align: center;
 
       .left {
+        line-height: 84px;
         position: absolute;
 
         .title {
@@ -82,6 +82,14 @@
         text-align: right;
       }
     }
+
+    .progress.basic {
+      background: #8897A8;
+
+      .progress-item {
+        background: #217DFF;
+      }
+    }
   }
 
   .layout-body {
@@ -116,11 +124,29 @@
       border-radius: 2px;
       border: 1px solid rgba(200, 209, 218, 1);
       padding: 10px 20px;
+      margin-bottom: 40px;
 
       .select-title {
         color: #050930;
         margin-bottom: 10px;
       }
     }
+
+    .analysis {
+      margin-bottom: 40px;
+
+      .tabs {
+        width: 320px;
+
+        .tab.active {
+          background: #F4F9FE;
+        }
+      }
+
+      .result {
+        padding: 20px;
+        background: #F4F9FE;
+      }
+    }
   }
 }

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

@@ -2,9 +2,12 @@ import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
 import Assets from '@src/components/Assets';
+import Icon from '../../../components/Icon';
 import Button from '../../../components/Button';
+import Tabs from '../../../components/Tabs';
 import Progress from '../../../components/Progress';
 import HardInput from '../../../components/HardInput';
+import AnswerCheckbox from '../../../components/AnswerCheckbox';
 
 export default class extends Page {
   constructor(props) {
@@ -21,18 +24,17 @@ export default class extends Page {
           </div>
           <div className="right">
             <div className="text">Time cost 00:02</div>
-            <div className="text">收藏</div>
+            <Icon name="star" />
           </div>
         </div>
         {this.renderBody()}
         <div className="layout-footer">
           <div className="left">
-            <Assets name="fullscreen_icon" />
-            全屏
+            <Icon name="sceen-full" />
           </div>
           <div className="center">
             <div className="p">
-              <Progress progress={20} />
+              <Progress theme="theme" progress={20} />
             </div>
             <div className="t">5/20</div>
           </div>
@@ -56,7 +58,13 @@ export default class extends Page {
         </div>
         <div className="label">主语</div>
         <div className="input">
-          <HardInput />
+          <HardInput
+            selected
+            answer={0}
+            show
+            list={[{ text: 123 }, { text: 321 }]}
+            otherList={[{ text: 123 }, { text: 321 }]}
+          />
         </div>
         <div className="label">谓语</div>
         <div className="input">
@@ -68,6 +76,15 @@ export default class extends Page {
         </div>
         <div className="select">
           <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
+          <AnswerCheckbox show list={[{ text: 123 }, { text: 321 }]} selected={1} answer={0} />
+        </div>
+        <div className="analysis">
+          <Tabs
+            type="division"
+            active="1"
+            tabs={[{ key: '1', name: '解析详情', path: '/' }, { key: '2', name: '中文语意', path: '/' }]}
+          />
+          <div className="result" />
         </div>
       </div>
     );

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

@@ -15,6 +15,7 @@
       overflow-y: auto;
       background: #fff;
       padding: 20px 30px;
+      position: relative;
 
       .crumb {
         color: #5E677B;
@@ -32,5 +33,141 @@
         color: #000000;
       }
     }
+
+    .layout-menu {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      padding: 60px;
+      background: #fff;
+      overflow: hidden;
+      overflow-y: auto;
+
+      .title {
+        font-size: 24px;
+        color: #333333;
+        border-bottom: 1px solid #E5E7F0;
+        padding-bottom: 30px;
+        margin: 0;
+      }
+
+
+      .close {
+        position: absolute;
+        top: 60px;
+        right: 30px;
+        font-size: 14px;
+        font-family: Helvetica Neue;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        cursor: pointer;
+        color: #B1B1B1;
+      }
+
+      .chapter {}
+
+      .chapter-item {
+        height: 50px;
+        line-height: 50px;
+        padding-left: 20px;
+        font-size: 20px;
+        color: #333333;
+        border-bottom: 1px solid #E5E7F0;
+      }
+
+      .part-item {
+        height: 50px;
+        line-height: 50px;
+        padding-left: 70px;
+        font-size: 16px;
+        color: #5E677B;
+        border-bottom: 1px solid #E5E7F0;
+        cursor: pointer;
+      }
+
+      .part-item:hover,
+      .part-item.active {
+        color: #4292F0;
+      }
+
+      .page {
+        float: right;
+        padding-right: 20px;
+      }
+    }
+
+    .layout-right {
+      position: fixed;
+      left: 50%;
+      top: 45px;
+      transform: translateX(500px);
+      margin-left: 6px;
+    }
+
+    .layout-bottom {
+      position: fixed;
+      bottom: 20px;
+      left: 22px;
+      font-size: 10px;
+      color: #8897A8;
+
+      .per {
+        margin-right: 10px;
+      }
+
+      .num {
+        margin-right: 10px;
+      }
+
+      .btn {
+        position: relative;
+
+        .assets {
+          cursor: pointer;
+        }
+
+        .jump {
+          position: absolute;
+          top: -40px;
+          width: 120px;
+          height: 30px;
+          padding: 6px 10px;
+          background: rgba(255, 255, 255, 0.5);
+
+          .text {
+            font-size: 12px;
+            color: #8897A8;
+            margin-right: 10px;
+            display: inline-block;
+          }
+
+          .input {
+            vertical-align: top;
+            width: 36px;
+            height: 18px;
+            line-height: 18px;
+            background: rgba(255, 255, 255, 1);
+            display: inline-block;
+            border: none;
+            text-align: center;
+          }
+
+          .assets {
+            vertical-align: top;
+          }
+        }
+      }
+    }
+
+    .layout-progress {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
   }
 }

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

@@ -1,18 +1,29 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
+import Icon from '../../../components/Icon';
+import Progress from '../../../components/Progress';
+import Assets from '../../../../../src/components/Assets';
 
 export default class extends Page {
   constructor(props) {
     super(props);
-    this.state = { hideAnalysis: true };
+    this.state = { showJump: true, showMenu: true };
   }
 
   renderView() {
-    return <div className="layout">{this.renderBody()}</div>;
+    return (
+      <div className="layout">
+        {this.renderBody()}
+        {this.renderRight()}
+        {this.renderBottom()}
+        {this.renderProgress()}
+      </div>
+    );
   }
 
   renderBody() {
+    const { showMenu } = this.state;
     return (
       <div className="layout-body">
         <div className="crumb">千行长难句解析 >> Chapter4：简单句变长难句</div>
@@ -30,6 +41,66 @@ export default class extends Page {
           评：以转折开头，提出人力资本理论存在的问题，把握文章整体结构二第一段用该理论解释了开头陈述的现象，本段
           则指出该理论的问题作者对该理论的态度比较全面和笋辛证。
         </div>
+        {showMenu && this.renderMenu()}
+      </div>
+    );
+  }
+
+  renderMenu() {
+    return (
+      <div className="layout-menu">
+        <div className="title">目录</div>
+        <div className="close">x</div>
+        <div className="chapter">
+          <div className="chapter-item">
+            Chapter1：简单句变长难句<div className="page">1</div>
+          </div>
+          <div className="part-item">
+            Part1：什么样的句子叫做长难句，长难句基本特征<div className="page">1</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderRight() {
+    return (
+      <div className="layout-right">
+        <div className="m-b-1">
+          <Icon name="menu" />
+        </div>
+        <div className="m-b-1">
+          <Icon name="down_turn" />
+        </div>
+        <div className="m-b-1">
+          <Icon name="up_turn" />
+        </div>
+      </div>
+    );
+  }
+
+  renderBottom() {
+    const { showJump } = this.state;
+    return (
+      <div className="layout-bottom">
+        <span className="per">50%</span>
+        <span className="num">9/18</span>
+        <span className="btn">
+          <Assets name="unfold_icon_up" />
+          <div hidden={!showJump} className="jump">
+            <span className="text">当前页</span>
+            <input className="input" />
+            <Assets name="yes_icon" />
+          </div>
+        </span>
+      </div>
+    );
+  }
+
+  renderProgress() {
+    return (
+      <div className="layout-progress">
+        <Progress size="small" theme="theme" radius={false} />
       </div>
     );
   }