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

@@ -0,0 +1,26 @@
+import React from 'react';
+import './index.less';
+
+function AnswerButton(props) {
+  const {
+    children,
+    className = '',
+    theme = 'default',
+    size = 'basic',
+    disabled,
+    radius = true,
+    width,
+    onClick,
+  } = props;
+  return (
+    <div
+      style={{ width: width || '' }}
+      className={`answer-button ${className} ${theme} ${size} ${disabled ? 'disabled' : ''}  ${radius ? 'radius' : ''}`}
+      onClick={e => onClick && onClick(e)}
+    >
+      {children}
+    </div>
+  );
+}
+AnswerButton.propTypes = {};
+export default AnswerButton;

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

@@ -0,0 +1,72 @@
+@import '../../app.less';
+
+.answer-button {
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  transition: all 0.25s;
+  border-radius: 2px;
+}
+
+.answer-button.basic {
+  padding: 4px 24px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.answer-button.small {
+  padding: 3px 14px;
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.answer-button.lager {
+  font-size: 18px;
+  line-height: 28px;
+  padding: 8px 30px;
+}
+
+.answer-button.disabled {
+  cursor: no-drop;
+}
+
+.answer-button.basic.radius {
+  border-radius: 17px;
+}
+
+.answer-button.small.radius {
+  border-radius: 14px;
+}
+
+.answer-button.lager.radius {
+  border-radius: 36px;
+}
+
+.answer-button.default {
+  background: transparent;
+  color: #686872;
+}
+
+.answer-button.cancel {
+  background: transparent;
+  color: #A7A7B7;
+}
+
+.answer-button.confirm {
+  background: #4299FF;
+  color: #fff;
+}
+
+.answer-button.default:hover {
+  background: #4299FF;
+  color: #fff;
+}
+
+.answer-button.cancel:hover {
+  background: #ECEDEE;
+}
+
+.answer-button.confirm:hover {
+  background: #69AEFF;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './index.less';
+
+function getKey(index, selected, answer) {
+  return `${index === selected ? 'selected' : ''} ${index === answer ? 'true' : 'false'}`;
+}
+
+function AnswerList(props) {
+  const { selected, answer, show, list = [] } = props;
+  return (
+    <div className="answer-list">
+      {list.map((item, index) => {
+        return (
+          <div className={`item ${getKey(index, selected, answer)} ${show ? 'show' : ''}`}>
+            <div className="icon" />
+            <div className="text">{item.text}</div>
+            {item.total && <div className="total">30%用户选择该选项</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+AnswerList.propTypes = {};
+export default AnswerList;

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

@@ -0,0 +1,60 @@
+@import '../../app.less';
+
+.answer-list {
+  padding-left: 20px;
+
+  .item {
+    position: relative;
+    margin-bottom: 30px;
+
+    .text {
+      color: #303036;
+    }
+
+    .icon {
+      width: 15px;
+      height: 15px;
+      position: absolute;
+      left: -25px;
+      top: 4px;
+      background: url('/assets/option_normal.png') no-repeat center;
+    }
+
+    .total {
+      display: none;
+      color: #A7A7B7;
+      margin-top: 20px;
+    }
+  }
+
+  .item.selected {
+    .icon {
+      background-image: url('/assets/option_select.png');
+    }
+  }
+
+  .item.show {
+    .total {
+      display: block;
+    }
+  }
+
+  .item.show.true {
+    .icon {
+      background-image: url('/assets/option_right.png');
+    }
+  }
+  item  false show
+  .item.show.false {
+    .text {
+      color: #686872;
+    }
+  }
+
+  .item.show.false.selected {
+    .icon {
+      background-image: url('/assets/option_wrong.png');
+    }
+  }
+
+}

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

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

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

@@ -0,0 +1,84 @@
+@import '../../app.less';
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.icon.sceen-full {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/screen_full_normal.png') no-repeat center;
+}
+
+.icon.sceen-full.active,
+.icon.sceen-full:hover {
+  background-image: url('/assets/screen_full_highlight.png');
+}
+
+.icon.sceen-restore {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/screen_restore_normal.png') no-repeat center;
+}
+
+.icon.sceen-restore.active,
+.icon.sceen-restore:hover {
+  background-image: url('/assets/screen_restore_highlight.png');
+}
+
+.icon.next {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/footer_next_normal.png') no-repeat center;
+}
+
+.icon.next.active,
+.icon.next:hover {
+  background-image: url('/assets/footer_next_highlight.png');
+}
+
+.icon.prev {
+  width: 36px;
+  height: 36px;
+  background: url('/assets/footer_previous_normal.png') no-repeat center;
+}
+
+.icon.prev.active,
+.icon.prev:hover {
+  background-image: url('/assets/footer_previous_highlight.png');
+}
+
+.icon.more {
+  width: 16px;
+  height: 16px;
+  background: url('/assets/header_more_normal.png') no-repeat center;
+}
+
+.icon.more.active,
+.icon.more:hover {
+  background-image: url('/assets/header_more_highlight.png');
+}
+
+.icon.question {
+  width: 16px;
+  height: 16px;
+  background: url('/assets/header_question_normal.png') no-repeat center;
+}
+
+.icon.question.active,
+.icon.question:hover {
+  background-image: url('/assets/header_question_highlight.png');
+}
+
+.icon.star {
+  width: 16px;
+  height: 16px;
+  background: url('/assets/header_star_normal.png') no-repeat center;
+}
+
+.icon.star.active,
+.icon.star:hover {
+  background-image: url('/assets/header_star_select.png');
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+import Assets from '@src/components/Assets';
+
+function Switch(props) {
+  const { checked, children } = props;
+  return (
+    <div className="switch">
+      <Assets name={checked ? 'swich_on' : 'swich_off'} />
+      {children}
+    </div>
+  );
+}
+Switch.propTypes = {};
+export default Switch;

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

@@ -0,0 +1,12 @@
+@import '../../app.less';
+
+.switch {
+  display: inline-block;
+  vertical-align: middle;
+  color: #AABCCA;
+
+  .assets {
+    cursor: pointer;
+    margin-right: 10px;
+  }
+}

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

@@ -19,19 +19,33 @@
       left: 0;
       right: 0;
       box-shadow: 0px 4px 14px 0px rgba(189, 199, 215, 0.16);
+      text-align: center;
 
-      .no {
-        font-size: 20px;
-        display: inline-block;
-        color: #303036;
-        font-size: 20px;
-        margin-right: 25px;
+      .left {
+        position: absolute;
+
+        .no {
+          font-size: 20px;
+          display: inline-block;
+          color: #303036;
+          font-size: 20px;
+          margin-right: 25px;
+        }
+
+        .title {
+          color: #A7A7B7;
+          display: inline-block;
+          font-size: 20px;
+        }
       }
 
-      .title {
-        color: #A7A7B7;
+      .center {
         display: inline-block;
-        font-size: 20px;
+        transform: translateX(100%);
+
+        .icon {
+          margin-left: 20px;
+        }
       }
 
       .right {
@@ -46,8 +60,8 @@
           }
         }
 
-        .assets {
-          margin-right: 10px;
+        .icon {
+          margin-left: 10px;
         }
       }
     }
@@ -73,6 +87,10 @@
       display: inline-block;
       text-align: right;
       padding-right: 50px;
+
+      .icon {
+        margin-left: 10px;
+      }
     }
 
     .center {
@@ -81,17 +99,7 @@
       text-align: center;
 
       .item {
-        display: inline-block;
-        width: 72px;
-        height: 36px;
-        line-height: 36px;
         margin: 0 10px;
-        color: #787883;
-        cursor: pointer;
-      }
-
-      .item:hover {
-        color: #4299FF;
       }
     }
   }
@@ -107,12 +115,32 @@
       display: flex;
       height: 100%;
 
-      .content-left {
+      .one {
         flex: 1;
+        display: flex;
+        flex-direction: column;
       }
 
-      .content-right {
+      .two {
         flex: 1;
+        display: flex;
+      }
+
+      .block {
+        flex: 1;
+      }
+
+      .block.hide {
+        display: none;
+      }
+
+      .block-content,
+      .block-answer {
+        padding: 30px 60px;
+        color: #303036;
+      }
+
+      .block-analysis {
         background: #EFF3F7;
         padding: 20px 20px 0 20px;
         display: flex;
@@ -130,6 +158,7 @@
           .tab {
             background: #E5E8EE;
             border-radius: 4px 4px 0px 0px;
+            overflow: hidden;
           }
 
           .tab.active,
@@ -158,48 +187,61 @@
     right: 0;
     bottom: 0;
 
+    .mask {
+      background: #000;
+      opacity: .2;
+      width: 100%;
+      height: 100%;
+    }
+
     .body {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      background: #006DAA;
-      width: 400px;
-      color: #fff;
+      background: #fff;
+      width: 630px;
+      color: #686872;
+      padding: 20px 30px;
 
       .title {
-        height: 38px;
-        line-height: 38px;
-        font-size: 18px;
-        padding-left: 25px;
-        border-bottom: 1px solid #fff;
+        color: #303036;
+        font-size: 20px;
+        font-weight: 600;
       }
 
       .desc {
-        text-align: center;
-        margin-top: 20px;
-        margin-bottom: 20px;
+        color: #686872;
+        font-size: 16px;
+        padding: 20px 0;
 
-      }
+        .select {
+          margin-bottom: 15px;
+        }
 
-      .btn-list {
-        text-align: center;
-        margin-bottom: 15px;
+        .label {
+          margin-bottom: 5px;
+        }
 
-        .btn {
-          display: inline-block;
-          width: 70px;
-          line-height: 35px;
-          height: 35px;
-          border: 1px solid #fff;
-          background: #006DAA;
-          cursor: pointer;
+        .textarea {
+          width: 570px;
+          height: 80px;
+          background: rgba(247, 247, 247, 1);
+          margin-bottom: 15px;
+          border: none;
+          padding: 5px 10px;
         }
 
-        .btn:hover {
-          background: darken(#006DAA, 5);
+        .textarea::placeholder {
+          color: #A7A7B7;
         }
       }
+
+      .bottom {
+        border-top: 1px solid #E1E1E1;
+        padding-top: 10px;
+        text-align: right;
+      }
     }
   }
 }

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

@@ -1,17 +1,30 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
-import Assets from '@src/components/Assets';
 import Tabs from '../../../components/Tabs';
+import Icon from '../../../components/Icon';
+import Switch from '../../../components/Switch';
+import AnswerList from '../../../components/AnswerList';
+import AnswerButton from '../../../components/AnswerButton';
 
 export default class extends Page {
+  constructor(props) {
+    super(props);
+    this.state = { hideAnalysis: true };
+  }
+
   renderView() {
-    const { modal } = this.state;
     return (
       <div className="layout">
         <div className="layout-header">
-          <div className="no">No.36</div>
-          <div className="title">OG18 - Easy (21-40) </div>
+          <div className="left">
+            <div className="no">No.36</div>
+            <div className="title">OG18 - Easy (21-40) </div>
+          </div>
+          <div className="center">
+            ID:PREP 07-124
+            <Icon name="more" />
+          </div>
           <div className="right">
             <span className="b">
               用时:<span className="s">1</span>m<span className="s">39</span>s
@@ -22,37 +35,51 @@ export default class extends Page {
             <span className="b">
               <span className="s">80</span>%
             </span>
-            <Assets name="" />
-            <Assets name="" />
+            <Icon name="question" />
+            <Icon name="star" />
           </div>
         </div>
-        <div className="layout-body">{this.renderContent()}</div>
+        <div className="layout-body">{this.renderBody()}</div>
         <div className="layout-footer">
-          <div className="left">1</div>
+          <div className="left">
+            <Icon name="sceen-full" />
+          </div>
           <div className="center">
-            <div className="item">笔记</div>
-            <div className="item">提问</div>
-            <div className="item">纠错</div>
+            <AnswerButton className="item">笔记</AnswerButton>
+            <AnswerButton className="item">提问</AnswerButton>
+            <AnswerButton className="item">纠错</AnswerButton>
+          </div>
+          <div className="right">
+            <Icon name="prev" />
+            <Icon name="next" />
           </div>
-          <div className="right">1</div>
         </div>
-        {modal ? this.renderModal() : ''}
+        {this.renderModal()}
       </div>
     );
   }
 
-  renderContent() {
+  renderBody() {
+    const { question = { content: {} } } = this.state;
+    const { typeset = 'one' } = question.content;
     return (
       <div className="layout-content">
-        {this.renderLeft()}
-        {this.renderRight()}
+        <div className={`${typeset}`}>
+          {this.renderContent()}
+          {this.renderAnswer()}
+        </div>
+        {this.renderAnalysis()}
       </div>
     );
   }
 
-  renderRight() {
+  renderAnalysis() {
+    const { question = { content: {} } } = this.state;
+    const { typeset = 'one' } = question.content;
+    const { hideAnalysis } = this.state;
+    const show = typeset === 'one' ? true : !hideAnalysis;
     return (
-      <div className="content-right">
+      <div className={`block block-analysis ${!show ? 'hide' : ''}`}>
         <Tabs
           type="card"
           active="1"
@@ -73,34 +100,58 @@ export default class extends Page {
     );
   }
 
-  renderLeft() {
-    return <div className="content-left">1</div>;
+  renderAnswer() {
+    const { question = { content: {} } } = this.state;
+    const { typeset = 'one' } = question.content;
+    const { hideAnalysis } = this.state;
+    const show = typeset === 'one' ? true : hideAnalysis;
+    return (
+      <div className={`block block-answer ${!show ? 'hide' : ''}`}>
+        {typeset === 'two' ? <Switch>显示答案</Switch> : ''}
+      </div>
+    );
+  }
+
+  renderContent() {
+    const { question = { content: {} } } = this.state;
+    const { typeset = 'one' } = question.content;
+    return (
+      <div className="block block-content">
+        {typeset === 'one' ? <Switch>显示答案</Switch> : ''}
+        <AnswerList
+          selected={1}
+          answer={2}
+          show
+          list={[
+            { text: ' They can become increasingly vulnerable to serious illness.' },
+            { text: ' They can become increasingly vulnerable to serious illness.' },
+            { text: ' They can become increasingly vulnerable to serious illness.' },
+            { text: ' They can become increasingly vulnerable to serious illness.' },
+          ]}
+        />
+      </div>
+    );
   }
 
   renderModal() {
-    const { modal } = this.state;
     return (
       <div className="modal">
         <div className="mask" />
         <div className="body">
-          <div className="title">{modal.title}</div>
-          <div className="desc">{modal.desc}</div>
-          {modal.type === 'confirm' ? (
-            <div className="btn-list">
-              <div className="btn" onClick={() => this.hideModal(true)}>
-                <span className="t-d-l">Y</span>es
-              </div>
-              <div className="btn" onClick={() => this.hideModal(false)}>
-                <span className="t-d-l">N</span>o
-              </div>
-            </div>
-          ) : (
-            <div className="btn-list">
-              <div className="btn" onClick={() => this.hideModal(true)}>
-                <span className="t-d-l">O</span>k
-              </div>
-            </div>
-          )}
+          <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>
     );