add table

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

@@ -2,9 +2,12 @@ import React from 'react';
 import './index.less';
 
 function GIcon(props) {
-  const { active, name, onClick, children } = props;
+  const { active, name, noHover, onClick, children } = props;
   return (
-    <div className={`icon ${name} ${active ? 'active' : ''}`} onClick={() => onClick && onClick()}>
+    <div
+      className={`icon ${name} ${active ? 'active' : ''} ${noHover ? 'no' : ''}`}
+      onClick={() => onClick && onClick()}
+    >
       {children}
     </div>
   );

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

@@ -6,6 +6,10 @@
   cursor: pointer;
 }
 
+.icon.no {
+  cursor: default;
+}
+
 .icon.sceen-full {
   width: 36px;
   height: 36px;
@@ -100,6 +104,10 @@
   background: url('/assets/header_star_normal.png') no-repeat center;
 }
 
+.icon.star.no {
+  background-image: url('/assets/header_star_normal.png') !important;
+}
+
 .icon.star.active,
 .icon.star:hover {
   background-image: url('/assets/header_star_select.png');
@@ -147,4 +155,53 @@
 .icon.close.active,
 .icon.close:hover {
   background-image: url('/assets/close_hover.png');
+}
+
+.icon.error {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/option_wrong.png') no-repeat center;
+}
+
+.icon.right {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/option_right.png') no-repeat center;
+}
+
+.icon.arrow-up {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/up_normal.png') no-repeat center;
+}
+
+.icon.arrow-up.active,
+.icon.arrow-up:hover {
+  background-image: url('/assets/up_hover.png');
+}
+
+.icon.arrow-down {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/down_normal.png') no-repeat center;
+}
+
+.icon.arrow-down.active,
+.icon.arrow-down:hover {
+  background-image: url('/assets/down_hover.png');
+}
+
+.icon.note {
+  width: 20px;
+  height: 20px;
+  background: url('/assets/note_normal.png') no-repeat center;
+}
+
+.icon.note.no {
+  background-image: url('/assets/note_normal.png') !important;
+}
+
+.icon.note.active,
+.icon.note:hover {
+  background-image: url('/assets/note_highlight.png');
 }

front/project/www/routes/paper/report/index.less

@@ -214,6 +214,60 @@
   }
 }
 
+.sentence.question {
+  .header {
+    text-align: center;
+
+    .title {}
+
+    .back {
+      position: absolute;
+      left: 0;
+      top: 15px;
+    }
+  }
+
+  .body {
+    padding-top: 25px !important;
+
+    .tip {
+      font-size: 12px;
+      color: #A7A7B7;
+      margin-bottom: 10px !important;
+    }
+
+    table {
+
+      th {
+        padding: 0 20px;
+        background: #ECEDEE;
+        height: 60px;
+        border: 1px solid #fff;
+      }
+
+      td {
+        padding: 20px;
+
+        .n {
+          color: #A7A7B7;
+          font-size: 12px;
+        }
+
+        .desc {
+          color: #686872;
+          font-size: 14px;
+        }
+      }
+
+      tbody {
+        tr:nth-of-type(even) {
+          background: #FBFBFB;
+        }
+      }
+    }
+  }
+}
+
 .examination {
   border-top: 20px solid #8D909C;
   background: #fff;

front/project/www/routes/paper/report/page.js

@@ -3,13 +3,19 @@ import './index.less';
 import LineChart from '@src/components/LineChart';
 import BarChart from '@src/components/BarChart';
 import PieChart from '@src/components/PieChart';
+import Assets from '@src/components/Assets';
 import Page from '@src/containers/Page';
 import { formatDate, formatPercent, formatSeconds, formatMinute, formatSecond, getMap } from '@src/services/Tools';
 import { Icon, Tooltip } from 'antd';
 import { Question } from '../../../stores/question';
 import { Button } from '../../../components/Button';
 import Tabs from '../../../components/Tabs';
-import { QuestionDifficult, ExaminationQuestionType, ExaminationSubject } from '../../../../Constant';
+import { Icon as GIcon } from '../../../components/Icon';
+import {
+  QuestionDifficult,
+  ExaminationQuestionType,
+  ExaminationSubject,
+} from '../../../../Constant';
 
 const QuestionDifficultMap = getMap(QuestionDifficult, 'value', 'label');
 
@@ -496,7 +502,7 @@ function pieOption2(title, value1, value2, value3) {
 
 export default class extends Page {
   initState() {
-    return { tab: 'main' };
+    return { tab: 'main', report: { paperModule: 'sentence' } };
   }
 
   initData() {
@@ -565,6 +571,7 @@ export default class extends Page {
 
   renderView() {
     const { report = {} } = this.state;
+    console.log(report);
     switch (report.paperModule) {
       case 'sentence':
         return this.renderSentence();
@@ -683,7 +690,82 @@ export default class extends Page {
   }
 
   renderSentenceQuestion() {
-    return <div />;
+    return <div className='sentence question'>
+      <div className='header'>
+        <div className='content'>
+          <div className='title'>题目回顾</div>
+          <Button className='back' radius>返回长难句报告</Button>
+        </div>
+      </div>
+      <div className='body'>
+        <div className='content'>
+          <div className='tip'><Assets name='notice' />点击题目查看详情</div>
+          <table>
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th width='360'>题目</th>
+                <th>句子结构<GIcon name='arrow-up' /></th>
+                <th>逻辑关系<GIcon name='arrow-down' /></th>
+                <th>用时<GIcon name='arrow-up' /></th>
+                <th>收藏<GIcon name='arrow-up' /></th>
+                <th>笔记<GIcon name='arrow-up' /></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td>
+                  <div className='n'> OG18 #678</div>
+                  <div className='desc'>「图形」None of the attempts to specify the causes of crime explains why most of the people exposed to</div>
+                </td>
+                <td><GIcon name='error' noHover /></td>
+                <td><GIcon name='right' noHover /></td>
+                <td>1.3</td>
+                <td><GIcon name='star' noHover /></td>
+                <td><GIcon name='note' noHover /></td>
+              </tr>
+              <tr>
+                <td>1</td>
+                <td>
+                  <div className='n'> OG18 #678</div>
+                  <div className='desc'>「图形」None of the attempts to specify the causes of crime explains why most of the people exposed to</div>
+                </td>
+                <td><GIcon name='error' noHover /></td>
+                <td><GIcon name='right' noHover /></td>
+                <td>1.3</td>
+                <td><GIcon name='star' active /></td>
+                <td><GIcon name='note' active /></td>
+              </tr>
+              <tr>
+                <td>1</td>
+                <td>
+                  <div className='n'> OG18 #678</div>
+                  <div className='desc'>「图形」None of the attempts to specify the causes of crime explains why most of the people exposed to</div>
+                </td>
+                <td><GIcon name='error' noHover /></td>
+                <td><GIcon name='right' noHover /></td>
+                <td>1.3</td>
+                <td><GIcon name='star' noHover /></td>
+                <td><GIcon name='note' noHover /></td>
+              </tr>
+              <tr>
+                <td>1</td>
+                <td>
+                  <div className='n'> OG18 #678</div>
+                  <div className='desc'>「图形」None of the attempts to specify the causes of crime explains why most of the people exposed to</div>
+                </td>
+                <td><GIcon name='error' noHover /></td>
+                <td><GIcon name='right' noHover /></td>
+                <td>1.3</td>
+                <td><GIcon name='star' active /></td>
+                <td><GIcon name='note' active /></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>;
   }
 
   renderSentenceDetail() {