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

@@ -58,15 +58,29 @@
   color: #fff;
 }
 
-.answer-button.default:hover {
+.answer-button.default:hover,
+.answer-button.default.active {
   background: #4299FF;
   color: #fff;
 }
 
-.answer-button.cancel:hover {
+.answer-button.cancel:hover,
+.answer-button.cancel.active {
   background: #ECEDEE;
 }
 
-.answer-button.confirm:hover {
+.answer-button.confirm:hover,
+.answer-button.confirm.active {
   background: #69AEFF;
+}
+
+
+.answer-button.default.disabled {
+  color: #A7A7B7;
+}
+
+.answer-button.default.disabled:hover,
+.answer-button.default.active.disabled {
+  background: #ECEDEE;
+  color: #A7A7B7;
 }

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

@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+import './index.less';
+
+export default class HardInput extends Component {
+  render() {
+    return <div className="hard-input" />;
+  }
+}

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

@@ -0,0 +1,8 @@
+@import '../../app.less';
+
+.hard-input {
+  background: #fff;
+  height: 46px;
+  border-radius: 2px;
+  border: 1px solid rgba(200, 209, 218, 1);
+}

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

@@ -2,8 +2,8 @@ import React from 'react';
 import './index.less';
 
 function Icon(props) {
-  const { active, name } = props;
-  return <div className={`icon ${name} ${active ? 'active' : ''}`} />;
+  const { active, name, onClick } = props;
+  return <div className={`icon ${name} ${active ? 'active' : ''}`} onClick={() => onClick && onClick()} />;
 }
 Icon.propTypes = {};
 export default Icon;

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

@@ -50,6 +50,28 @@
   background-image: url('/assets/footer_previous_highlight.png');
 }
 
+.icon.up {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/analysis_drop_up_normal.png') no-repeat center;
+}
+
+.icon.up.active,
+.icon.up:hover {
+  background-image: url('/assets/analysis_drop_up_highlight.png');
+}
+
+.icon.down {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/analysis_drop_down_normal.png') no-repeat center;
+}
+
+.icon.down.active,
+.icon.down:hover {
+  background-image: url('/assets/analysis_drop_down_highlight.png');
+}
+
 .icon.more {
   width: 16px;
   height: 16px;

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

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import './index.less';
+import Icon from '../Icon';
+
+export default class OtherAnswer extends Component {
+  constructor(props) {
+    super(props);
+    this.Text = null;
+    this.state = { show: false, more: false };
+    this.checkHeight();
+  }
+
+  checkHeight() {
+    if (this.Text != null) {
+      if (this.Text.offsetHeight > 80) {
+        this.setState({ more: true });
+      }
+    } else {
+      setTimeout(() => {
+        this.checkHeight();
+      }, 1);
+    }
+  }
+
+  render() {
+    const { show, more } = this.state;
+    return (
+      <div className={`other-answer ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
+        <div className="title">Q: Agreement;Rhetorical construction</div>
+        <div
+          ref={ref => {
+            this.Text = ref;
+          }}
+          className="desc"
+        >
+          A: They are generally not good at taking care of themselves.and services to prevent worsening health and
+          increased health costs.They are worsening health and increased health costs..and services to
+        </div>
+        {more && show && <Icon name="up" onClick={() => this.setState({ show: false })} />}
+        {more && !show && <Icon name="down" onClick={() => this.setState({ show: true })} />}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+@import '../../app.less';
+
+.other-answer {
+  border-bottom: 1px solid rgba(239, 243, 247, 1);
+  position: relative;
+
+  .title {
+    color: #303036;
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+
+  .desc {
+    color: #686872;
+    font-size: 16px;
+    margin-bottom: 20px;
+    overflow: hidden;
+  }
+
+  .icon {
+    position: absolute;
+    bottom: -18px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+  }
+}
+
+.other-answer.more.hide {
+  .desc {
+    height: 80px;
+    background: linear-gradient(360deg, rgba(161, 161, 171, 0) 0%, rgba(104, 104, 114, 1) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.other-answer.more:hover {
+  .icon {
+    display: block;
+  }
+}

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

@@ -122,4 +122,54 @@
       display: none;
     }
   }
+}
+
+.tabs.division {
+
+  display: flex;
+  text-align: center;
+  height: 44px;
+  line-height: 44px;
+  margin: 0 -5px;
+
+  a {
+    display: inline-block;
+    flex: 1;
+    width: 100%;
+    padding: 0 5px;
+  }
+
+  .tab {
+    width: 100%;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+    color: @base_color;
+    cursor: pointer;
+    background: #E5E8EE;
+    border-radius: 4px 4px 0px 0px;
+    overflow: hidden;
+  }
+
+  .tab::after {
+    content: '';
+    width: 0;
+    height: 4px;
+    background: @theme_color;
+    transform: translateX(-50%);
+    position: absolute;
+    top: 0;
+    left: 50%;
+  }
+
+  .tab:hover,
+  .tab.active {
+    color: @theme_color;
+    background: #fff;
+  }
+
+  .tab:hover::after,
+  .tab.active::after {
+    width: 100%;
+  }
 }

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

@@ -0,0 +1,10 @@
+export default {
+  path: '/hard/:id',
+  key: 'hard',
+  title: '长难句',
+  needLogin: true,
+  hideHeader: true,
+  component() {
+    return import('./page');
+  },
+};

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

@@ -0,0 +1,126 @@
+@charset "utf-8";
+
+#hard {
+  height: 100%;
+
+  .layout {
+    background: #fff;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .layout-header {
+      height: 84px;
+      line-height: 84px;
+      margin: 0 30px;
+      border-bottom: 1px solid rgba(233, 239, 248, 1);
+      text-align: center;
+
+      .left {
+        position: absolute;
+
+        .title {
+          color: #000000;
+          display: inline-block;
+          font-size: 20px;
+          font-weight: 600;
+        }
+      }
+
+      .right {
+        float: right;
+        text-align: right;
+        padding: 20px 0;
+        color: #5E677B;
+
+        .text {
+          line-height: 22px;
+        }
+      }
+    }
+  }
+
+  .layout-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    line-height: 60px;
+    box-shadow: 0px -4px 14px 0px rgba(189, 199, 215, 0.16);
+    position: relative;
+
+    .left {
+      position: absolute;
+      left: 30px;
+      top: 0;
+    }
+
+    .right {
+      position: absolute;
+      right: 30px;
+      top: 0;
+
+      .button.lager {
+        font-weight: 500;
+      }
+    }
+
+    .center {
+      padding-left: 108px;
+      padding-right: 165px;
+      display: flex;
+
+      .p {
+        flex: 1;
+        margin-top: 22px;
+      }
+
+      .t {
+        width: 40px;
+        text-align: right;
+      }
+    }
+  }
+
+  .layout-body {
+    background: #fff;
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+    padding: 20px 30px;
+
+    .title {
+      color: #050930;
+      margin-bottom: 10px;
+    }
+
+    .desc {
+      color: #050930;
+      margin-bottom: 30px;
+    }
+
+    .label {
+      color: #000000;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+
+    .input {
+      margin-bottom: 20px;
+    }
+
+    .select {
+      border-radius: 2px;
+      border: 1px solid rgba(200, 209, 218, 1);
+      padding: 10px 20px;
+
+      .select-title {
+        color: #050930;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+import Assets from '@src/components/Assets';
+import Button from '../../../components/Button';
+import Progress from '../../../components/Progress';
+import HardInput from '../../../components/HardInput';
+
+export default class extends Page {
+  constructor(props) {
+    super(props);
+    this.state = { hideAnalysis: true };
+  }
+
+  renderView() {
+    return (
+      <div className="layout">
+        <div className="layout-header">
+          <div className="left">
+            <div className="title">长难句练习 · Part2</div>
+          </div>
+          <div className="right">
+            <div className="text">Time cost 00:02</div>
+            <div className="text">收藏</div>
+          </div>
+        </div>
+        {this.renderBody()}
+        <div className="layout-footer">
+          <div className="left">
+            <Assets name="fullscreen_icon" />
+            全屏
+          </div>
+          <div className="center">
+            <div className="p">
+              <Progress progress={20} />
+            </div>
+            <div className="t">5/20</div>
+          </div>
+          <div className="right">
+            <Button size="lager" radius>
+              Next <Assets name="next_icon" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderBody() {
+    return (
+      <div className="layout-body">
+        <div className="title">请分别找出句子中的主语，谓语和，并做出逻辑关系判断。</div>
+        <div className="desc">
+          of so—called cybersquatters, people who register the Internet domain names of high—profile companies in hopes
+          of reselling the rights to those names for a profit,
+        </div>
+        <div className="label">主语</div>
+        <div className="input">
+          <HardInput />
+        </div>
+        <div className="label">谓语</div>
+        <div className="input">
+          <HardInput />
+        </div>
+        <div className="label">宾语</div>
+        <div className="input">
+          <HardInput />
+        </div>
+        <div className="select">
+          <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -3,6 +3,8 @@ import practise from './practise';
 import report from './report';
 import start from './start';
 import result from './result';
+import hard from './hard';
+import read from './read';
 import login from './login';
 
-export default [home, practise, report, start, result, login];
+export default [home, practise, report, start, result, hard, read, login];

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

@@ -0,0 +1,10 @@
+export default {
+  path: '/read/:id',
+  key: 'read',
+  title: '长难句阅读',
+  needLogin: true,
+  hideHeader: true,
+  component() {
+    return import('./page');
+  },
+};

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

@@ -0,0 +1,36 @@
+@charset "utf-8";
+
+#read {
+  height: 100%;
+  background: rgba(221, 227, 237, 1);
+
+  .layout {
+    height: 100%;
+
+    .layout-body {
+      width: 1000px;
+      margin: 0 auto;
+      height: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      background: #fff;
+      padding: 20px 30px;
+
+      .crumb {
+        color: #5E677B;
+        margin-bottom: 5px;
+      }
+
+      .title {
+        color: #000000;
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 40px;
+      }
+
+      .text {
+        color: #000000;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+
+export default class extends Page {
+  constructor(props) {
+    super(props);
+    this.state = { hideAnalysis: true };
+  }
+
+  renderView() {
+    return <div className="layout">{this.renderBody()}</div>;
+  }
+
+  renderBody() {
+    return (
+      <div className="layout-body">
+        <div className="crumb">千行长难句解析 >> Chapter4：简单句变长难句</div>
+        <div className="title">Part1：什么样的句子叫做长难句，长难句基本特征</div>
+        <div className="text">
+          1文章初读：《各段首句） 第一段首句： In the seventeenth-century Florentine textile industry, women were
+          employed primarily in low- paying, low-skill jobs. To explain this segregation of labor by gender, economists
+          have relied on the useful theory of human capital
+          翻译：在17世纪的佛罗伦萨纺织业中，女性主要受雇于低报酬、低技能的工作。经济学家依靠人力资本的有用理论
+          来解释这种有性别造成的劳动歧视
+          评：陈述了一种现象；在17世纪的佛罗伦萨纺织业中，女性主要受雇于低报酬、低技能的工作。可以推测本文是现
+          象解释型文章，果然紧接看介绍了一种理论theory of human capital。推断文章就是围绕这个现象和这个理论展开． There
+          were, however, differences in pay scales that cannot be explained by the human capital theory
+          翻译：然而．支付规模上存在的差异不能用这种人力资本理论解释。
+          评：以转折开头，提出人力资本理论存在的问题，把握文章整体结构二第一段用该理论解释了开头陈述的现象，本段
+          则指出该理论的问题作者对该理论的态度比较全面和笋辛证。
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -110,6 +110,7 @@
     overflow: hidden;
     overflow-y: auto;
     margin: 60px 0;
+    position: relative;
 
     .layout-content {
       display: flex;
@@ -130,10 +131,6 @@
         flex: 1;
       }
 
-      .block.hide {
-        display: none;
-      }
-
       .block-content,
       .block-answer {
         padding: 30px 60px;
@@ -146,28 +143,27 @@
         display: flex;
         flex-direction: column;
 
-        .tabs.card {
-          background: none;
-          margin: 0 -5px;
-
-          >a {
-            width: 100%;
-            padding: 0 5px;
-          }
+        .detail {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
 
-          .tab {
-            background: #E5E8EE;
-            border-radius: 4px 4px 0px 0px;
+          .detail-block {
+            flex: 1;
+            background: #fff;
+            padding: 30px 50px;
             overflow: hidden;
+            overflow-y: auto;
+            font-size: 16px;
+            color: #686872;
           }
 
-          .tab.active,
-          .tab:hover {
-            background: #fff;
+          .answer-block {
+            margin-bottom: 5px;
           }
         }
 
-        .detail {
+        .other {
           flex: 1;
           background: #fff;
           padding: 30px 50px;
@@ -175,8 +171,39 @@
           overflow-y: auto;
           font-size: 16px;
           color: #686872;
+
+          .other-answer {
+            margin-bottom: 30px;
+          }
         }
       }
+
+      .two-analysis {
+        position: absolute;
+        height: 100%;
+        width: 50%;
+        transition: all 0.3s;
+        transform: translateX(200%);
+      }
+
+      .two-analysis.hide {
+        transform: translateX(100%);
+      }
+
+      .fixed-analysis {
+        position: absolute;
+        width: 35px;
+        padding: 5px;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 1px solid #E7E7E7;
+        background: #fff;
+        z-index: 9;
+        color: #787883;
+        cursor: pointer;
+        text-align: center;
+      }
     }
   }
 
@@ -222,19 +249,19 @@
         .label {
           margin-bottom: 5px;
         }
+      }
 
-        .textarea {
-          width: 570px;
-          height: 80px;
-          background: rgba(247, 247, 247, 1);
-          margin-bottom: 15px;
-          border: none;
-          padding: 5px 10px;
-        }
+      .textarea {
+        width: 570px;
+        height: 80px;
+        background: rgba(247, 247, 247, 1);
+        margin-bottom: 15px;
+        border: none;
+        padding: 5px 10px;
+      }
 
-        .textarea::placeholder {
-          color: #A7A7B7;
-        }
+      .textarea::placeholder {
+        color: #A7A7B7;
       }
 
       .bottom {
@@ -244,4 +271,93 @@
       }
     }
   }
+
+  .modal.ask-ok,
+  .modal.error-ok {
+    .body {
+      .content {
+        width: 100%;
+        padding-top: 20px;
+        padding-bottom: 40px;
+        color: #686872;
+        overflow: hidden;
+
+        .left {
+          float: left;
+          width: 360px;
+          font-size: 18px;
+
+          a {
+            padding-top: 30px;
+            display: inline-block;
+            font-size: 14px;
+          }
+        }
+
+        .right {
+          float: right;
+          text-align: right;
+          font-size: 12px;
+        }
+      }
+
+      .confirm {
+        text-align: center;
+        padding-bottom: 10px;
+
+        .answer-button.lager {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  .modal.note {
+    .body {
+      width: 720px;
+
+      .content {
+        padding-top: 20px;
+
+        .tabs {
+          display: inline-block;
+          width: 170px;
+          vertical-align: top;
+          margin-left: -30px;
+          margin-right: 30px;
+
+          .tab {
+            padding: 5px 0px 5px 40px;
+            line-height: 20px;
+            color: #686872;
+            margin-bottom: 30px;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-top-right-radius: 25px;
+            border-bottom-right-radius: 25px;
+
+            .date {
+              font-size: 12px;
+            }
+          }
+
+          .tab.active,
+          .tab:hover {
+            color: #fff;
+            background: #4299FF;
+          }
+        }
+
+        .input {
+          display: inline-block;
+
+          .textarea {
+            width: 490px;
+            height: 350px;
+            margin-bottom: 20px;
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import './index.less';
 import Page from '@src/containers/Page';
 import Tabs from '../../../components/Tabs';
@@ -6,6 +7,7 @@ import Icon from '../../../components/Icon';
 import Switch from '../../../components/Switch';
 import AnswerList from '../../../components/AnswerList';
 import AnswerButton from '../../../components/AnswerButton';
+import OtherAnswer from '../../../components/OtherAnswer';
 
 export default class extends Page {
   constructor(props) {
@@ -54,7 +56,6 @@ export default class extends Page {
             <Icon name="next" />
           </div>
         </div>
-        {this.renderModal()}
       </div>
     );
   }
@@ -62,6 +63,8 @@ export default class extends Page {
   renderBody() {
     const { question = { content: {} } } = this.state;
     const { typeset = 'one' } = question.content;
+    const { hideAnalysis } = this.state;
+    const show = typeset === 'one' ? true : !hideAnalysis;
     return (
       <div className="layout-content">
         <div className={`${typeset}`}>
@@ -69,6 +72,11 @@ export default class extends Page {
           {this.renderAnswer()}
         </div>
         {this.renderAnalysis()}
+        {typeset === 'two' && (
+          <div className="fixed-analysis" onClick={() => this.setState({ hideAnalysis: !hideAnalysis })}>
+            {show ? '查看解析>' : '收起解析>'}
+          </div>
+        )}
       </div>
     );
   }
@@ -79,9 +87,9 @@ export default class extends Page {
     const { hideAnalysis } = this.state;
     const show = typeset === 'one' ? true : !hideAnalysis;
     return (
-      <div className={`block block-analysis ${!show ? 'hide' : ''}`}>
+      <div className={`block block-analysis ${typeset}-analysis ${!show ? 'hide' : ''}`}>
         <Tabs
-          type="card"
+          type="division"
           active="1"
           tabs={[
             { key: '1', name: '官方解析', path: '/' },
@@ -90,7 +98,16 @@ export default class extends Page {
             { key: '4', name: '相关回答', path: '/' },
           ]}
         />
-        <div className="detail">
+        {this.renderText()}
+      </div>
+    );
+  }
+
+  renderText() {
+    return (
+      <div className="detail">
+        <div className="detail-block answer-block" />
+        <div className="detail-block text-block">
           “Offering support services to spouses caring for their other halves may reduce martial stress and prevent
           divorce at older ages,” she said. “But it’s also important to recognize that the pressure to divorce may be
           health-related and that sick ex-wives may need additional care and services to prevent worsening health and
@@ -100,18 +117,23 @@ export default class extends Page {
     );
   }
 
-  renderAnswer() {
-    const { question = { content: {} } } = this.state;
-    const { typeset = 'one' } = question.content;
-    const { hideAnalysis } = this.state;
-    const show = typeset === 'one' ? true : hideAnalysis;
+  renderOtherAnswer() {
+    const { otherAnswer = [1, 2, 3, 4, 5] } = this.state;
     return (
-      <div className={`block block-answer ${!show ? 'hide' : ''}`}>
-        {typeset === 'two' ? <Switch>显示答案</Switch> : ''}
+      <div className="other">
+        {otherAnswer.map(() => {
+          return <OtherAnswer />;
+        })}
       </div>
     );
   }
 
+  renderAnswer() {
+    const { question = { content: {} } } = this.state;
+    const { typeset = 'one' } = question.content;
+    return <div className="block block-answer">{typeset === 'two' ? <Switch>显示答案</Switch> : ''}</div>;
+  }
+
   renderContent() {
     const { question = { content: {} } } = this.state;
     const { typeset = 'one' } = question.content;
@@ -133,12 +155,114 @@ export default class extends Page {
     );
   }
 
-  renderModal() {
+  renderAsk() {
+    return (
+      <div className="modal ask">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">提问</div>
+          <div className="desc">
+            <div className="select">我想对进行提问</div>
+            <div className="label">有疑问的具体内容是：</div>
+            <textarea className="textarea" placeholder="请复制粘贴有疑问的内容。" />
+            <div className="label">针对以上内容的问题是：</div>
+            <textarea className="textarea" placeholder="提问频率高的问题会被优先回答哦。" />
+          </div>
+          <div className="bottom">
+            <AnswerButton theme="cancel" size="lager">
+              取消
+            </AnswerButton>
+            <AnswerButton size="lager">提交</AnswerButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderAskOk() {
+    return (
+      <div className="modal ask-ok">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">提问</div>
+          <div className="content">
+            <div className="left">
+              <div className="text">已提交成功！</div>
+              <div className="text">感谢您的耐心反馈，我们会尽快核实并以站内信的方式告知结果。</div>
+              <div className="text">您也可以关注公众号及时获取结果。</div>
+            </div>
+            <div className="right">
+              <div className="text">扫码关注公众号</div>
+              <div className="text">千行GMAT</div>
+            </div>
+          </div>
+          <div className="confirm">
+            <AnswerButton size="lager" theme="confirm">
+              好的，知道了
+            </AnswerButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderAskFail() {
     return (
-      <div className="modal">
+      <div className="modal ask-ok">
         <div className="mask" />
         <div className="body">
           <div className="title">提问</div>
+          <div className="content">
+            <div className="left">
+              <div className="text">提问功能正在维护中。</div>
+              <div className="text">可先查阅“相关问答” 或 成为学员享受极速 答疑特权。</div>
+              <Link to="/">了解更多></Link>
+            </div>
+            <div className="right">
+              <div className="text">扫码关注公众号</div>
+              <div className="text">千行GMAT</div>
+            </div>
+          </div>
+          <div className="confirm">
+            <AnswerButton size="lager" theme="confirm">
+              好的，知道了
+            </AnswerButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderError() {
+    return (
+      <div className="modal error">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">纠错</div>
+          <div className="desc">
+            <div className="select">我想对进行提问</div>
+            <div className="label">有疑问的具体内容是：</div>
+            <textarea className="textarea" placeholder="请复制粘贴有疑问的内容。" />
+            <div className="label">针对以上内容的问题是：</div>
+            <textarea className="textarea" placeholder="提问频率高的问题会被优先回答哦。" />
+          </div>
+          <div className="bottom">
+            <AnswerButton theme="cancel" size="lager">
+              取消
+            </AnswerButton>
+            <AnswerButton size="lager">提交</AnswerButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderErrorOk() {
+    return (
+      <div className="modal error-ok">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">纠错</div>
           <div className="desc">
             <div className="select">我想对进行提问</div>
             <div className="label">有疑问的具体内容是：</div>
@@ -156,4 +280,38 @@ export default class extends Page {
       </div>
     );
   }
+
+  renderNote() {
+    const { note = ['题目', '官方解析'] } = this.state;
+    return (
+      <div className="modal note">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">笔记</div>
+          <div className="content">
+            <div className="tabs">
+              {note.map(item => {
+                return (
+                  <div className="tab">
+                    <div className="text">{item}</div>
+                    <div className="date">2019.05.13 15:30</div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="input">
+              <textarea className="textarea" placeholder="记下笔记，方便以后复习" />
+              <div className="bottom">
+                <AnswerButton theme="cancel" size="lager">
+                  取消
+                </AnswerButton>
+                <AnswerButton size="lager">编辑</AnswerButton>
+                <AnswerButton size="lager">保存</AnswerButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }