fix

front/project/www/routes/paper/process/base/index.js

@@ -52,22 +52,27 @@ export default class extends Component {
     this.setState({ answer });
   }
 
-  showConfirm(title, desc, cb) {
-    this.showModal('confirm', title, desc, cb);
+  showConfirm(title, desc, width, cb) {
+    this.showModal('confirm', title, desc, width, cb);
   }
 
-  showToast(title, desc, cb) {
-    this.showModal('toast', title, desc, cb);
+  showToast(title, desc, width, cb) {
+    this.showModal('toast', title, desc, width, cb);
   }
 
-  showModal(type, title, desc, cb) {
-    this.setState({ modal: { type, title, desc, cb } });
+  showModal(type, title, desc, width, cb) {
+    this.setState({ modal: { type, title, desc, width, cb } });
+  }
+
+  timeOut(cb) {
+    this.showToast('Time Expired', 'Time has expired for this section. \n Click OK to continue.', 440, cb);
   }
 
   checkAnswer() {
     const { question } = this.props;
     const { answer } = this.state;
     let result = null;
+    if (!answer) return this.showToast('Answer Required', 'You can not continue with this question unanswered. ', 430);
     if (question.questionType === 'awa' && !answer.awa) result = 'Please answer the question first.';
     if (result) return this.showToast(null, result);
     return true;
@@ -113,8 +118,10 @@ export default class extends Component {
     const { flow } = this.props;
     const { answer } = this.state;
     if (this.checkAnswer()) {
-      flow.submit(answer).then(() => {
-        flow.next();
+      this.showConfirm('Answer Confirmation', 'Click Yes to confirm your answer and continue to the next \n question. ', 560, () => {
+        flow.submit(answer).then(() => {
+          flow.next();
+        });
       });
     }
   }
@@ -505,7 +512,7 @@ export default class extends Component {
     return (
       <div className="modal">
         <div className="mask" />
-        <div className="body">
+        <div style={{ width: modal.width }} className="body">
           <div className="title">{modal.title}</div>
           <div className="desc">{modal.desc}</div>
           {modal.type === 'confirm' ? (

front/project/www/routes/paper/process/base/index.less

@@ -80,15 +80,16 @@
 
     .fixed {
       position: absolute;
-      top: 62px;
+      top: 60px;
       left: 0;
-      right: 0;
+      right: 25px;
+      border-top: 2px solid #fff;
+      border-bottom: 2px solid #fff;
       height: 30px;
-      line-height: 30px;
+      line-height: 26px;
       background: #7EAFE0;
       color: #fff;
       padding: 0 25px;
-      z-index: 100;
 
       .calculator-icon {
         margin-left: 50px;
@@ -98,9 +99,6 @@
       .collect-icon {
         float: right;
         cursor: pointer;
-        transform: translateY(5px);
-        line-height: 16px;
-        height: 16px;
       }
     }
 
@@ -440,6 +438,15 @@
     right: 0;
     bottom: 0;
 
+    .mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
+    }
+
     .body {
       position: absolute;
       left: 50%;
@@ -461,7 +468,8 @@
         text-align: center;
         margin-top: 20px;
         margin-bottom: 20px;
-
+        padding: 0 20px;
+        white-space: pre;
       }
 
       .btn-list {
@@ -476,6 +484,7 @@
           border: 1px solid #fff;
           background: #006DAA;
           cursor: pointer;
+          margin: 0 5px;
         }
 
         .btn:hover {