fix style

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

@@ -76,7 +76,6 @@
     .item {
       height: 0;
       line-height: 25px;
-      padding-left: 10px;
       font-size: 12px;
       cursor: pointer;
       transition: all 0.3s;

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

@@ -99,14 +99,14 @@
   background-image: url('/assets/dropdown_hover.png');
 }
 
-.icon.more {
+.icon.other {
   width: 16px;
   height: 16px;
   background: url('/assets/header_more_normal.png') no-repeat center;
 }
 
-.icon.more.active,
-.icon.more:hover {
+.icon.other.active,
+.icon.other:hover {
   background-image: url('/assets/header_more_highlight.png');
 }
 

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

@@ -39,6 +39,7 @@
   .select-body {
     overflow: hidden;
     position: absolute;
+    min-width: 100%;
     bottom: 0;
     left: 50%;
     background: #fff;
@@ -58,6 +59,7 @@
       cursor: pointer;
       transition: all 0.3s;
       text-align: left;
+      white-space: nowrap;
     }
 
     .select-option:hover {

front/project/www/routes/paper/question/detail/index.js

@@ -35,11 +35,10 @@ export default class extends Component {
     };
   }
 
-
   prevQuestion() {
     const { userQuestion } = this.props;
     if (userQuestion.no === 1) return;
-    Question.getDetailByNo(userQuestion.reportId, userQuestion.no - 1).then((r) => {
+    Question.getDetailByNo(userQuestion.reportId, userQuestion.no - 1).then(r => {
       linkTo(`/paper/question/${r.id}`);
     });
   }
@@ -47,7 +46,7 @@ export default class extends Component {
   nextQuestion() {
     const { userQuestion } = this.props;
     if (userQuestion.questionNumber === userQuestion.no) return;
-    Question.getDetailByNo(userQuestion.reportId, userQuestion.no + 1).then((r) => {
+    Question.getDetailByNo(userQuestion.reportId, userQuestion.no + 1).then(r => {
       linkTo(`/paper/question/${r.id}`);
     });
   }
@@ -56,32 +55,45 @@ export default class extends Component {
     const { question = {}, questionNo = {}, paper = {} } = this.props;
     const { ask = {} } = this.state;
     if (ask.originContent === '' || ask.content === '' || ask.target === '') return;
-    My.addQuestionAsk(paper.id, ask.target, question.questionModule, questionNo.id, ask.originContent, ask.content).then(() => {
-      this.setState({ askModal: false, askOkModal: true });
-    }).catch(err => {
-      this.setState({ askError: err.message });
-    });
+    My.addQuestionAsk(paper.id, ask.target, question.questionModule, questionNo.id, ask.originContent, ask.content)
+      .then(() => {
+        this.setState({ askModal: false, askOkModal: true });
+      })
+      .catch(err => {
+        this.setState({ askError: err.message });
+      });
   }
 
   submitFeedbackError() {
     const { userQuestion = {}, questionNo = {} } = this.props;
     const { feedback = {} } = this.state;
     if (feedback.originContent === '' || feedback.content === '' || feedback.target === '') return;
-    My.addFeedbackErrorQuestion(userQuestion.questionModule, questionNo.id, questionNo.title, feedback.target, feedback.originContent, feedback.content).then(() => {
-      this.setState({ feedbackModal: false, feedbackOkModal: true });
-    }).catch(err => {
-      this.setState({ feedbackError: err.message });
-    });
+    My.addFeedbackErrorQuestion(
+      userQuestion.questionModule,
+      questionNo.id,
+      questionNo.title,
+      feedback.target,
+      feedback.originContent,
+      feedback.content,
+    )
+      .then(() => {
+        this.setState({ feedbackModal: false, feedbackOkModal: true });
+      })
+      .catch(err => {
+        this.setState({ feedbackError: err.message });
+      });
   }
 
   submitNote(close) {
     const { userQuestion = {}, questionNo = {} } = this.props;
     const { note = {} } = this.state;
-    My.updateQuestionNote(userQuestion.questionModule, questionNo.id, note).then(() => {
-      if (close) this.setState({ noteModal: false });
-    }).catch(err => {
-      this.setState({ noteError: err.message });
-    });
+    My.updateQuestionNote(userQuestion.questionModule, questionNo.id, note)
+      .then(() => {
+        if (close) this.setState({ noteModal: false });
+      })
+      .catch(err => {
+        this.setState({ noteError: err.message });
+      });
   }
 
   toggleFullscreen() {
@@ -126,7 +138,8 @@ export default class extends Component {
             selected={(userQuestion.userAnswer || { questions: [] }).questions[i]}
             answer={(question.answer || { questions: [] }).questions[i]}
             fix
-            show={showAnswer} />,
+            show={showAnswer}
+          />,
           selectList[i],
         );
       }
@@ -157,95 +170,179 @@ export default class extends Component {
     const { paper = {} } = this.props;
     switch (paper.paperModule) {
       case 'sentence':
-        return <Sentence {...this.props} {...this.state} flow={this} scene='answer' mode='question' />;
+        return <Sentence {...this.props} {...this.state} flow={this} scene="answer" mode="question" />;
       default:
-        return <div className='base'>{this.renderBase()}</div>;
+        return <div className="base">{this.renderBase()}</div>;
     }
   }
 
   renderHeader() {
-    const { userQuestion = {}, questionNo = {}, paper = {}, report = {}, questionNos = [], question = {}, info, detail } = this.props;
+    const {
+      userQuestion = {},
+      questionNo = {},
+      paper = {},
+      report = {},
+      questionNos = [],
+      question = {},
+      info,
+      detail,
+    } = this.props;
     const { showIds } = this.state;
-    return <div className={'layout-header'}>
-      {detail && <div className="left">
-        {paper.paperModule && paper.paperModule !== 'examination' && <div className="btn"><Button radius onClick={() => {
-          linkTo(`/paper/report/${report.id}`);
-        }}>返回练习报告</Button></div>}
-        {paper.paperModule && paper.paperModule === 'examination' && <div className="btn"><Button radius onClick={() => {
-          linkTo(`/paper/report/${report.id}`);
-        }}>返回成绩单</Button></div>}
-        <div className="no">No.{userQuestion.stageNo || userQuestion.no}</div>
-        <div className="title"><Assets name='book' />{paper.title}</div>
-      </div>}
-      <div className="center">
-        <div className="menu-wrap">
-          ID:{questionNo.title}
-          {questionNos && questionNos.length > 0 && <Icon name="more" onClick={() => {
-            this.setState({ showIds: true });
-          }} />}
-          {showIds && <div className='menu-content'>
-            <p>题源汇总</p>
-            {(questionNos || []).map((row) => <p onClick={() => info && this.switchNo(row)}>ID:{row.title}</p>)}
-          </div>}
+    return (
+      <div className={'layout-header'}>
+        {detail && (
+          <div className="left">
+            {paper.paperModule && paper.paperModule !== 'examination' && (
+              <div className="btn">
+                <Button
+                  radius
+                  onClick={() => {
+                    linkTo(`/paper/report/${report.id}`);
+                  }}
+                >
+                  返回练习报告
+                </Button>
+              </div>
+            )}
+            {paper.paperModule && paper.paperModule === 'examination' && (
+              <div className="btn">
+                <Button
+                  radius
+                  onClick={() => {
+                    linkTo(`/paper/report/${report.id}`);
+                  }}
+                >
+                  返回成绩单
+                </Button>
+              </div>
+            )}
+            <div className="no">No.{userQuestion.stageNo || userQuestion.no}</div>
+            <div className="title">
+              <Assets name="book" />
+              {paper.title}
+            </div>
+          </div>
+        )}
+        <div className="center">
+          <div className="menu-wrap">
+            ID:{questionNo.title}
+            {questionNos && questionNos.length > 0 && (
+              <Icon
+                name="other"
+                onClick={() => {
+                  this.setState({ showIds: true });
+                }}
+              />
+            )}
+            {showIds && (
+              <div className="menu-content">
+                <p>题源汇总</p>
+                {(questionNos || []).map(row => (
+                  <p onClick={() => info && this.switchNo(row)}>ID:{row.title}</p>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="right" hidden={question.questionType === 'awa'}>
+          {detail && (
+            <span className="b" hidden={!userQuestion.id}>
+              用时：
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: formatSeconds(userQuestion.userTime).replace(
+                    /([0-9]+)(m|min|h|hour|s)/g,
+                    '<span class="s">$1</span>$2',
+                  ),
+                }}
+              />
+              {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
+            </span>
+          )}
+          <span className="b">
+            全站：
+            <span
+              dangerouslySetInnerHTML={{
+                __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(
+                  /([0-9]+)(m|min|h|hour|s)/g,
+                  '<span class="s">$1</span>$2',
+                ),
+              }}
+            />
+            {/* 全站:<span className="s">1</span>m<span className="s">39</span>s */}
+          </span>
+          <span className="b">
+            <span className="s">{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}</span>%
+          </span>
+          <Icon name="question" />
+          <Icon name="star" active={userQuestion.collect} onClick={() => this.toggleCollect()} />
         </div>
       </div>
-      <div className="right" hidden={question.questionType === 'awa'}>
-        {detail && <span className="b" hidden={!userQuestion.id}>
-          用时：<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)(m|min|h|hour|s)/g, '<span class="s">$1</span>$2') }} />
-          {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
-        </span>}
-        <span className="b">
-          全站：<span dangerouslySetInnerHTML={{ __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(/([0-9]+)(m|min|h|hour|s)/g, '<span class="s">$1</span>$2') }} />
-          {/* 全站:<span className="s">1</span>m<span className="s">39</span>s */}
-        </span>
-        <span className="b">
-          <span className="s">{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}</span>%
-        </span>
-        <Icon name="question" />
-        <Icon name="star" active={userQuestion.collect} onClick={() => this.toggleCollect()} />
-      </div>
-    </div>;
+    );
   }
 
   renderBase() {
     const { questionStatus, userQuestion = {}, paper = {}, detail } = this.props;
     const { showIds } = this.state;
-    return <div className={`layout ${paper.paperModule}`} onClick={() => {
-      if (showIds) this.setState({ showIds: false });
-    }}>
-      {this.renderHeader()}
-      <div className="layout-body">{this.renderBody()}</div>
-      <div className="layout-footer">
-        <div className="left">
-          <Tooltip overlayClassName='gray' placement='top' title='全屏'>
-            <a>
-              <Icon name={this.state.isFullscreenEnabled ? 'sceen-restore' : 'sceen-full'} onClick={() => this.toggleFullscreen()} />
-            </a>
-          </Tooltip>
-        </div>
-        <div className="center">
-          <AnswerButton className="item" onClick={() => this.setState({ noteModal: true })}>笔记</AnswerButton>
-          {questionStatus >= 0 && <AnswerButton className="item" onClick={() => {
-            if (questionStatus > 0) {
-              this.setState({ askModal: true });
-            } else {
-              this.setState({ askFailModal: true });
-            }
-          }}>提问</AnswerButton>}
-          <AnswerButton className="item" onClick={() => this.setState({ feedbackModal: true })}>纠错</AnswerButton>
+    return (
+      <div
+        className={`layout ${paper.paperModule}`}
+        onClick={() => {
+          if (showIds) this.setState({ showIds: false });
+        }}
+      >
+        {this.renderHeader()}
+        <div className="layout-body">{this.renderBody()}</div>
+        <div className="layout-footer">
+          <div className="left">
+            <Tooltip overlayClassName="gray" placement="top" title="全屏">
+              <a>
+                <Icon
+                  name={this.state.isFullscreenEnabled ? 'sceen-restore' : 'sceen-full'}
+                  onClick={() => this.toggleFullscreen()}
+                />
+              </a>
+            </Tooltip>
+          </div>
+          <div className="center">
+            <AnswerButton className="item" onClick={() => this.setState({ noteModal: true })}>
+              笔记
+            </AnswerButton>
+            {questionStatus >= 0 && (
+              <AnswerButton
+                className="item"
+                onClick={() => {
+                  if (questionStatus > 0) {
+                    this.setState({ askModal: true });
+                  } else {
+                    this.setState({ askFailModal: true });
+                  }
+                }}
+              >
+                提问
+              </AnswerButton>
+            )}
+            <AnswerButton className="item" onClick={() => this.setState({ feedbackModal: true })}>
+              纠错
+            </AnswerButton>
+          </div>
+          {detail && (
+            <div className="right">
+              {userQuestion.no !== 1 && <Icon name="prev" onClick={() => this.prevQuestion()} />}
+              {userQuestion.questionNumber !== userQuestion.no && (
+                <Icon name="next" onClick={() => this.nextQuestion()} />
+              )}
+            </div>
+          )}
         </div>
-        {detail && <div className="right">
-          {userQuestion.no !== 1 && <Icon name="prev" onClick={() => this.prevQuestion()} />}
-          {userQuestion.questionNumber !== userQuestion.no && <Icon name="next" onClick={() => this.nextQuestion()} />}
-        </div>}
+        {this.state.askModal && this.renderAsk()}
+        {this.state.askOkModal && this.renderAskOk()}
+        {this.state.askFailModal && this.renderAskFail()}
+        {this.state.feedbackModal && this.renderFeedbackError()}
+        {this.state.feedbackOkModal && this.renderFeedbackErrorOk()}
+        {this.state.noteModal && this.renderNote()}
       </div>
-      {this.state.askModal && this.renderAsk()}
-      {this.state.askOkModal && this.renderAskOk()}
-      {this.state.askFailModal && this.renderAskFail()}
-      {this.state.feedbackModal && this.renderFeedbackError()}
-      {this.state.feedbackOkModal && this.renderFeedbackErrorOk()}
-      {this.state.noteModal && this.renderNote()}
-    </div>;
+    );
   }
 
   renderBody() {
@@ -255,7 +352,7 @@ export default class extends Component {
     const show = typeset === 'one' ? true : !hideAnalysis;
     return (
       <div className="layout-content">
-        <div className='two'>
+        <div className="two">
           {this.renderContent()}
           {question.questionType !== 'awa' && this.renderAnswer()}
           {question.questionType === 'awa' && this.renderAWA()}
@@ -287,7 +384,7 @@ export default class extends Component {
             { key: 'association', name: '题源联想' },
             { key: 'qa', name: '相关回答' },
           ]}
-          onChange={(key) => {
+          onChange={key => {
             this.setState({ analysisTab: key });
           }}
         />
@@ -306,26 +403,32 @@ export default class extends Component {
     let content;
     switch (analysisTab) {
       case 'official':
-        content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.officialContent }} />;
+        content = (
+          <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.officialContent }} />
+        );
         break;
       case 'qx':
         content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.qxContent }} />;
         break;
       case 'association':
-        content = <div className="detail-block">
-          <Carousel>
-            {associations.map(association => {
-              return <div className="text-block" dangerouslySetInnerHTML={{ __html: association.stem }} />;
-            })}
-          </Carousel>
-        </div>;
+        content = (
+          <div className="detail-block">
+            <Carousel>
+              {associations.map(association => {
+                return <div className="text-block" dangerouslySetInnerHTML={{ __html: association.stem }} />;
+              })}
+            </Carousel>
+          </div>
+        );
         break;
       case 'qa':
-        content = <div className="detail-block answer-block">
-          {asks.map((ask, index) => {
-            return <OtherAnswer key={index} data={ask} />;
-          })}
-        </div>;
+        content = (
+          <div className="detail-block answer-block">
+            {asks.map((ask, index) => {
+              return <OtherAnswer key={index} data={ask} />;
+            })}
+          </div>
+        );
         break;
       default:
         break;
@@ -337,29 +440,40 @@ export default class extends Component {
     const { question = { content: {} }, userQuestion = {}, detail } = this.props;
     const { questions = [], type, typeset = 'one' } = question.content;
     const { showAnswer } = this.state;
-    return <div className="block block-answer">
-      {detail && typeset === 'two' ? <Switch checked={showAnswer} onChange={(value) => {
-        this.setState({ showAnswer: value });
-      }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
-      {questions.map((item, index) => {
-        return (
-          <div>
-            <div className="text m-b-2">{item.description}</div>
-            <AnswerList
-              show={showAnswer}
-              selected={(userQuestion.userAnswer || { questions: [] }).questions[index]}
-              answer={(question.answer || { questions: [] }).questions[index]}
-              distributed={(question.answerDistributed || { questions: [] }).questions[index]}
-              list={item.select}
-              type={type}
-              first={item.first}
-              second={item.second}
-              direction={item.direction}
-            />
-          </div>
-        );
-      })}
-    </div>;
+    return (
+      <div className="block block-answer">
+        {detail && typeset === 'two' ? (
+          <Switch
+            checked={showAnswer}
+            onChange={value => {
+              this.setState({ showAnswer: value });
+            }}
+          >
+            {showAnswer ? '显示答案' : '关闭答案'}
+          </Switch>
+        ) : (
+          ''
+        )}
+        {questions.map((item, index) => {
+          return (
+            <div>
+              <div className="text m-b-2">{item.description}</div>
+              <AnswerList
+                show={showAnswer}
+                selected={(userQuestion.userAnswer || { questions: [] }).questions[index]}
+                answer={(question.answer || { questions: [] }).questions[index]}
+                distributed={(question.answerDistributed || { questions: [] }).questions[index]}
+                list={item.select}
+                type={type}
+                first={item.first}
+                second={item.second}
+                direction={item.direction}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
   renderContent() {
@@ -369,12 +483,32 @@ export default class extends Component {
     const { showAnswer, step } = this.state;
     return (
       <div className="block block-content">
-        {detail && typeset === 'one' && question.questionType !== 'awa' ? <Switch checked={showAnswer} onChange={(value) => {
-          this.setState({ showAnswer: value });
-        }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
+        {detail && typeset === 'one' && question.questionType !== 'awa' ? (
+          <Switch
+            checked={showAnswer}
+            onChange={value => {
+              this.setState({ showAnswer: value });
+            }}
+          >
+            {showAnswer ? '显示答案' : '关闭答案'}
+          </Switch>
+        ) : (
+          ''
+        )}
         {question.questionType === 'awa' && <h2>Analytical Writing Assessment</h2>}
-        {steps.length > 0 && <Navigation theme='detail' list={question.content.steps} active={step} onChange={(v) => this.setState({ step: v })} />}
-        <div className="text" style={{ height: 2000 }} dangerouslySetInnerHTML={{ __html: this.formatStem(steps.length > 0 ? steps[step].stem : question.stem) }} />
+        {steps.length > 0 && (
+          <Navigation
+            theme="detail"
+            list={question.content.steps}
+            active={step}
+            onChange={v => this.setState({ step: v })}
+          />
+        )}
+        <div
+          className="text"
+          style={{ height: 2000 }}
+          dangerouslySetInnerHTML={{ __html: this.formatStem(steps.length > 0 ? steps[step].stem : question.stem) }}
+        />
       </div>
     );
   }
@@ -382,27 +516,44 @@ export default class extends Component {
   renderAWA() {
     const { userQuestion = { detail: {}, userAnswer: {} } } = this.state;
     const { showAnswer } = this.state;
-    return <div className="block block-awa">
-      <Switch checked={showAnswer} onChange={(value) => {
-        this.setState({ showAnswer: value });
-      }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch>
-      <div className="body">
-        <h2>Your Response</h2>
-        {showAnswer && <div className='detail'>
-          <div className='info'>
-            <span className="b">
-              用时：<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)(m|min|h|hour|s)/g, '<span class="s">$1</span>$2') }} />
-              {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
-            </span>
-            <span className="b">
-              单词数：<span className="s">{Number((userQuestion.detail || {}).words || 0)}</span>词
-            </span>
-          </div>
-          <div className='content-awa' dangerouslySetInnerHTML={{ __html: userQuestion.userAnswer.awa || '' }} />
-        </div>}
-        {!showAnswer && <div className='show-awa'>选择「显示答案」查看自己的作文</div>}
+    return (
+      <div className="block block-awa">
+        <Switch
+          checked={showAnswer}
+          onChange={value => {
+            this.setState({ showAnswer: value });
+          }}
+        >
+          {showAnswer ? '显示答案' : '关闭答案'}
+        </Switch>
+        <div className="body">
+          <h2>Your Response</h2>
+          {showAnswer && (
+            <div className="detail">
+              <div className="info">
+                <span className="b">
+                  用时：
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: formatSeconds(userQuestion.userTime).replace(
+                        /([0-9]+)(m|min|h|hour|s)/g,
+                        '<span class="s">$1</span>$2',
+                      ),
+                    }}
+                  />
+                  {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
+                </span>
+                <span className="b">
+                  单词数：<span className="s">{Number((userQuestion.detail || {}).words || 0)}</span>词
+                </span>
+              </div>
+              <div className="content-awa" dangerouslySetInnerHTML={{ __html: userQuestion.userAnswer.awa || '' }} />
+            </div>
+          )}
+          {!showAnswer && <div className="show-awa">选择「显示答案」查看自己的作文</div>}
+        </div>
       </div>
-    </div>;
+    );
   }
 
   renderAsk() {
@@ -413,26 +564,49 @@ export default class extends Component {
         <div className="body">
           <div className="title">提问</div>
           <div className="desc">
-            <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={ask.target} list={AskTarget} onChange={(item) => {
-              ask.target = item.value;
-              this.setState({ ask });
-            }} />进行提问</div>
+            <div className="select-inline">
+              我想对
+              <Select
+                excludeSelf
+                size="small"
+                theme="white"
+                value={ask.target}
+                list={AskTarget}
+                onChange={item => {
+                  ask.target = item.value;
+                  this.setState({ ask });
+                }}
+              />
+              进行提问
+            </div>
             <div className="label">有疑问的具体内容是：</div>
-            <textarea className="textarea" value={ask.originContent} placeholder="请复制粘贴有疑问的内容。" onChange={(e) => {
-              ask.originContent = e.target.value;
-              this.setState({ ask });
-            }} />
+            <textarea
+              className="textarea"
+              value={ask.originContent}
+              placeholder="请复制粘贴有疑问的内容。"
+              onChange={e => {
+                ask.originContent = e.target.value;
+                this.setState({ ask });
+              }}
+            />
             <div className="label">针对以上内容的问题是：</div>
-            <textarea className="textarea" value={ask.content} placeholder="提问频率高的问题会被优先回答哦。" onChange={(e) => {
-              ask.content = e.target.value;
-              this.setState({ ask });
-            }} />
+            <textarea
+              className="textarea"
+              value={ask.content}
+              placeholder="提问频率高的问题会被优先回答哦。"
+              onChange={e => {
+                ask.content = e.target.value;
+                this.setState({ ask });
+              }}
+            />
           </div>
           <div className="bottom">
             <AnswerButton theme="cancel" size="lager" onClick={() => this.setState({ askModal: false })}>
               取消
             </AnswerButton>
-            <AnswerButton size="lager" onClick={() => this.submitAsk()}>提交</AnswerButton>
+            <AnswerButton size="lager" onClick={() => this.submitAsk()}>
+              提交
+            </AnswerButton>
           </div>
         </div>
       </div>
@@ -450,7 +624,9 @@ export default class extends Component {
               <div className="text">已提交成功！</div>
               <div className="text">关注公众号，老师回答后会立即收到通知。</div>
               <div className="text">我们也会通过站内信的方式通知你。</div>
-              <div className="small">成为学员享受极速答疑特权。<Link>了解更多</Link></div>
+              <div className="small">
+                成为学员享受极速答疑特权。<Link>了解更多</Link>
+              </div>
             </div>
             <div className="right">
               <div className="text">扫码关注公众号</div>
@@ -458,9 +634,13 @@ export default class extends Component {
             </div>
           </div>
           <div className="confirm">
-            <AnswerButton size="lager" theme="confirm" onClick={() => {
-              this.setState({ askOkModal: false });
-            }}>
+            <AnswerButton
+              size="lager"
+              theme="confirm"
+              onClick={() => {
+                this.setState({ askOkModal: false });
+              }}
+            >
               好的，知道了
             </AnswerButton>
           </div>
@@ -487,9 +667,13 @@ export default class extends Component {
             </div>
           </div>
           <div className="confirm">
-            <AnswerButton size="lager" theme="confirm" onClick={() => {
-              this.setState({ askFailModal: false });
-            }}>
+            <AnswerButton
+              size="lager"
+              theme="confirm"
+              onClick={() => {
+                this.setState({ askFailModal: false });
+              }}
+            >
               好的，知道了
             </AnswerButton>
           </div>
@@ -506,24 +690,48 @@ export default class extends Component {
         <div className="body">
           <div className="title">纠错</div>
           <div className="desc">
-            <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={feedback.target} list={AskTarget} onChange={(item) => {
-              feedback.target = item.value;
-              this.setState({ feedback });
-            }} />进行提问</div>
+            <div className="select-inline">
+              我想对
+              <Select
+                excludeSelf
+                size="small"
+                theme="white"
+                value={feedback.target}
+                list={AskTarget}
+                onChange={item => {
+                  feedback.target = item.value;
+                  this.setState({ feedback });
+                }}
+              />
+              进行提问
+            </div>
             <div className="label">错误内容是：</div>
-            <textarea className="textarea" value={feedback.originContent} placeholder="你可以适当扩大复制范围以使我们准确定位，感谢。" />
+            <textarea
+              className="textarea"
+              value={feedback.originContent}
+              placeholder="你可以适当扩大复制范围以使我们准确定位，感谢。"
+            />
             <div className="label">应该改为：</div>
             <textarea className="textarea" placeholder="只需提供正确内容即可" />
           </div>
           <div className="bottom">
-            <AnswerButton theme="cancel" size="lager" onClick={() => {
-              this.setState({ feedbackModal: false });
-            }}>
+            <AnswerButton
+              theme="cancel"
+              size="lager"
+              onClick={() => {
+                this.setState({ feedbackModal: false });
+              }}
+            >
               取消
             </AnswerButton>
-            <AnswerButton size="lager" onClick={() => {
-              this.submitFeedbackError();
-            }}>提交</AnswerButton>
+            <AnswerButton
+              size="lager"
+              onClick={() => {
+                this.submitFeedbackError();
+              }}
+            >
+              提交
+            </AnswerButton>
           </div>
         </div>
       </div>
@@ -538,7 +746,10 @@ export default class extends Component {
           <div className="title">纠错</div>
           <div className="content">
             <div className="left">
-              <div className="text"><Assets name='right' svg />已提交成功！</div>
+              <div className="text">
+                <Assets name="right" svg />
+                已提交成功！
+              </div>
               <div className="text">感谢您的耐心反馈，我们会尽快核实并以站内信的方式告知结果。</div>
               <div className="text">您也可以关注公众号及时获取结果。</div>
             </div>
@@ -548,9 +759,13 @@ export default class extends Component {
             </div>
           </div>
           <div className="confirm">
-            <AnswerButton size="lager" theme="confirm" onClick={() => {
-              this.setState({ feedbackOkModal: false });
-            }}>
+            <AnswerButton
+              size="lager"
+              theme="confirm"
+              onClick={() => {
+                this.setState({ feedbackOkModal: false });
+              }}
+            >
               好的，知道了
             </AnswerButton>
           </div>
@@ -570,9 +785,12 @@ export default class extends Component {
             <div className="tabs">
               {AskTarget.map(item => {
                 return (
-                  <div className={`tab ${noteField === item.key ? 'active' : ''}`} onClick={() => {
-                    this.setState({ noteField: item.key });
-                  }}>
+                  <div
+                    className={`tab ${noteField === item.key ? 'active' : ''}`}
+                    onClick={() => {
+                      this.setState({ noteField: item.key });
+                    }}
+                  >
                     <div className="text">{item.label}</div>
                     <div className="date">{note[`${item.key}Time`] ? formatDate(note[`${item.key}Time`]) : ''}</div>
                   </div>
@@ -580,23 +798,42 @@ export default class extends Component {
               })}
             </div>
             <div className="input">
-              <textarea className="textarea" value={note[`${noteField}Content`] || ''} placeholder="记下笔记，方便以后复习" onChange={(e) => {
-                note[`${noteField}Time`] = new Date();
-                note[`${noteField}Content`] = e.target.value;
-                this.setState({ note });
-              }} />
+              <textarea
+                className="textarea"
+                value={note[`${noteField}Content`] || ''}
+                placeholder="记下笔记，方便以后复习"
+                onChange={e => {
+                  note[`${noteField}Time`] = new Date();
+                  note[`${noteField}Content`] = e.target.value;
+                  this.setState({ note });
+                }}
+              />
               <div className="bottom">
-                <AnswerButton theme="cancel" size="lager" onClick={() => {
-                  this.setState({ noteModal: false });
-                }}>
+                <AnswerButton
+                  theme="cancel"
+                  size="lager"
+                  onClick={() => {
+                    this.setState({ noteModal: false });
+                  }}
+                >
                   取消
                 </AnswerButton>
-                <AnswerButton size="lager" onClick={() => {
-                  this.submitNote();
-                }}>编辑</AnswerButton>
-                <AnswerButton size="lager" onClick={() => {
-                  this.submitNote(true);
-                }}>保存</AnswerButton>
+                <AnswerButton
+                  size="lager"
+                  onClick={() => {
+                    this.submitNote();
+                  }}
+                >
+                  编辑
+                </AnswerButton>
+                <AnswerButton
+                  size="lager"
+                  onClick={() => {
+                    this.submitNote(true);
+                  }}
+                >
+                  保存
+                </AnswerButton>
               </div>
             </div>
           </div>