fix modal

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

@@ -46,7 +46,7 @@
         color: @base_color;
       }
 
-      .tab::after {
+      .tab.active::after {
         content: '';
         width: 0;
         height: 4px;
@@ -58,12 +58,13 @@
         left: 50%;
       }
 
-      .tab:hover,
+      .tab:hover {
+        color: @theme_color;
+      }
       .tab.active {
         color: #444;
       }
 
-      .tab:hover::after,
       .tab.active::after {
         width: 100%;
       }

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import './index.less';
 import { Modal, Icon } from 'antd';
-import Button from '../Button';
+import AnswerButton from '../AnswerButton';
 
 export default class extends Component {
   render() {
@@ -20,7 +20,6 @@ export default class extends Component {
       close = true,
       maskClosable = false,
       body = true,
-      btnType,
       center,
       height,
       getContainer,
@@ -49,14 +48,19 @@ export default class extends Component {
           )}
           <div className={`g-modal-btns ${btnAlign}`}>
             {onCancel && (
-              <Button size="lager" theme={btnType === 'link' ? 'link t-6' : 'link'} onClick={() => onCancel()}>
+              <AnswerButton size="lager" theme="cancel" onClick={() => onCancel()}>
                 {cancelText}
-              </Button>
+              </AnswerButton>
             )}
-            {onConfirm && (
-              <Button size="lager" theme={btnType === 'link' ? 'link' : 'theme'} radius onClick={() => onConfirm()}>
+            {onCancel && onConfirm && (
+              <AnswerButton size="lager" onClick={() => onConfirm()}>
                 {confirmText}
-              </Button>
+              </AnswerButton>
+            )}
+            {!onCancel && onConfirm && (
+              <AnswerButton size="lager" theme="confirm" radius onClick={() => onConfirm()}>
+                {confirmText}
+              </AnswerButton>
             )}
           </div>
         </div>

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

@@ -504,7 +504,7 @@ export class EditAvatar extends Component {
       };
     } else {
       const img = new Image();
-      img.onload = function () {
+      img.onload = function() {
         const canvas = document.createElement('canvas');
         canvas.height = img.height;
         canvas.width = img.width;
@@ -795,15 +795,27 @@ export class FeedbackErrorDataModal extends Component {
     const { onConfirm } = this.props;
     const { data } = this.state;
     if (!data.position[0] || !data.position[1] || !data.position[2] || !data.content || !data.originContent) {
-      this.setState({ empty: { 'position[0]': !data.position[0], 'position[1]': !data.position[1], 'position[2]': !data.position[2], content: !data.content, originContent: !data.originContent } });
+      this.setState({
+        empty: {
+          'position[0]': !data.position[0],
+          'position[1]': !data.position[1],
+          'position[2]': !data.position[2],
+          content: !data.content,
+          originContent: !data.originContent,
+        },
+      });
       return Promise.reject();
     }
-    return My.addFeedbackErrorData(data.dataId, data.title, data.position.join(','), data.originContent, data.content).then(
-      () => {
-        this.setState({ data: { position: ['', '', ''], content: '', originContent: '' } });
-        if (onConfirm) onConfirm();
-      },
-    );
+    return My.addFeedbackErrorData(
+      data.dataId,
+      data.title,
+      data.position.join(','),
+      data.originContent,
+      data.content,
+    ).then(() => {
+      this.setState({ data: { position: ['', '', ''], content: '', originContent: '' } });
+      if (onConfirm) onConfirm();
+    });
   }
 
   onCancel() {
@@ -912,10 +924,12 @@ export class AskCourseModal extends Component {
       this.setState({ empty: { content: !data.content, originContent: !data.originContent } });
       return Promise.reject();
     }
-    return My.addCourseAsk(course.id, courseNo.id, data.position.join(','), data.originContent, data.content).then(() => {
-      this.setState({ data: { position: [], content: '', originContent: '' } });
-      if (onConfirm) onConfirm();
-    });
+    return My.addCourseAsk(course.id, courseNo.id, data.position.join(','), data.originContent, data.content).then(
+      () => {
+        this.setState({ data: { position: [], content: '', originContent: '' } });
+        if (onConfirm) onConfirm();
+      },
+    );
   }
 
   onCancel() {
@@ -1117,7 +1131,7 @@ export class TextbookFeedbackModal extends Component {
         this.setState({ data: { content: '' } });
         if (onConfirm) onConfirm();
       })
-      .catch((e) => {
+      .catch(e => {
         asyncSMessage(e.message, 'error');
       });
   }
@@ -1366,7 +1380,10 @@ export class SuppleModal extends Component {
     const { data, empty = {} } = this.state;
     return (
       <Modal show={show} title="考场信息" onConfirm={() => this.onConfirm()} onCancel={() => this.onCancel()}>
-        <div className="t-2 t-s-16">考场位置: {info.isOverseas ? '海外' : '中国'}{info.area ? ` ${info.area}` : ''} {info.title}</div>
+        <div className="t-2 t-s-16">
+          考场位置: {info.isOverseas ? '海外' : '中国'}
+          {info.area ? ` ${info.area}` : ''} {info.title}
+        </div>
         <div className="t-2 t-s-16">补充内容:</div>
         <textarea
           value={data.content}
@@ -1436,75 +1453,71 @@ export class QuestionNoteModal extends Component {
   }
 
   render() {
-    const { show, getContainer } = this.props;
+    const { show } = this.props;
     const { data, noteField } = this.state;
     return (
-      <Modal
-        show={show}
-        title="笔记"
-        width={630}
-        getContainer={getContainer}
-        confirmText="提交"
-        onConfirm={() => this.onConfirm()}
-        onCancel={() => this.onCancel()}
-      >
-        <div className="content">
-          <div className="tabs">
-            {AskTarget.map(item => {
-              return (
-                <div
-                  className={`tab ${noteField === item.key ? 'active' : ''}`}
+      <div hidden={!show} className="modal note">
+        <div className="mask" />
+        <div className="body">
+          <div className="title">提问</div>
+          <div className="content">
+            <div className="tabs">
+              {AskTarget.map(item => {
+                return (
+                  <div
+                    className={`tab ${noteField === item.key ? 'active' : ''}`}
+                    onClick={() => {
+                      this.setState({ noteField: item.key });
+                    }}
+                  >
+                    <div className="text">{item.label}</div>
+                    <div className="date">{data[`${item.key}Time`] ? formatDate(data[`${item.key}Time`]) : ''}</div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="input">
+              <textarea
+                className="textarea"
+                value={data[`${noteField}Content`] || ''}
+                placeholder="记下笔记，方便以后复习"
+                onChange={e => {
+                  data[`${noteField}Time`] = new Date();
+                  data[`${noteField}Content`] = e.target.value;
+                  this.setState({ data });
+                }}
+              />
+              <div className="bottom">
+                <AnswerButton
+                  theme="cancel"
+                  size="lager"
                   onClick={() => {
-                    this.setState({ noteField: item.key });
+                    this.onCancel();
                   }}
                 >
-                  <div className="text">{item.label}</div>
-                  <div className="date">{data[`${item.key}Time`] ? formatDate(data[`${item.key}Time`]) : ''}</div>
-                </div>
-              );
-            })}
-          </div>
-          <div className="input">
-            <textarea
-              className="textarea"
-              value={data[`${noteField}Content`] || ''}
-              placeholder="记下笔记，方便以后复习"
-              onChange={e => {
-                data[`${noteField}Time`] = new Date();
-                data[`${noteField}Content`] = e.target.value;
-                this.setState({ data });
-              }}
-            />
-            <div className="bottom">
-              <AnswerButton
-                theme="cancel"
-                size="lager"
-                onClick={() => {
-                  this.onCancel();
-                }}
-              >
-                取消
+                  取消
                 </AnswerButton>
-              <AnswerButton
-                size="lager"
-                onClick={() => {
-                  this.onConfirm();
-                }}
-              >
-                编辑
+                <AnswerButton
+                  size="lager"
+                  onClick={() => {
+                    this.onConfirm();
+                  }}
+                >
+                  编辑
                 </AnswerButton>
-              <AnswerButton
-                size="lager"
-                onClick={() => {
-                  this.onConfirm(true);
-                }}
-              >
-                保存
+                <AnswerButton
+                  size="lager"
+                  onClick={() => {
+                    this.onConfirm(true);
+                  }}
+                >
+                  保存
                 </AnswerButton>
+              </div>
             </div>
           </div>
         </div>
-      </Modal>
+      </div>
     );
   }
 }

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

@@ -139,4 +139,165 @@
       margin-bottom: 30px;
     }
   }
+}
+
+.question-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  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: #fff;
+    width: 630px;
+    color: #686872;
+    padding: 20px 30px;
+
+    .title {
+      color: #303036;
+      font-size: 20px;
+      font-weight: 600;
+      border: none;
+    }
+
+    .desc {
+      color: #686872;
+      font-size: 16px;
+      padding: 20px 0;
+
+      .select-inline {
+        margin-bottom: 15px;
+
+        .select {
+          display: inline-block;
+        }
+      }
+
+      .label {
+        margin-bottom: 5px;
+      }
+    }
+
+    .textarea {
+      width: 570px;
+      height: 80px;
+      background: rgba(247, 247, 247, 1);
+      margin-bottom: 15px;
+      border: none;
+      padding: 5px 10px;
+    }
+
+    .textarea::placeholder {
+      color: #A7A7B7;
+    }
+
+    .bottom {
+      border-top: 1px solid #E1E1E1;
+      padding-top: 10px;
+      text-align: right;
+    }
+  }
+}
+
+.question-modal.ask-ok,
+.question-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;
+      }
+    }
+  }
+}
+
+.question-modal.note {
+  .body {
+    width: 720px;
+
+    .content {
+      padding-top: 20px;
+      width: 100%;
+
+      .tabs {
+        display: inline-block;
+        width: 170px;
+        vertical-align: top;
+        margin-left: -30px;
+        margin-right: 30px;
+        height: 100%;
+
+        .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/layouts/User/index.less

@@ -30,7 +30,9 @@
       margin: 4px 0;
     }
 
-    .item:hover,
+    .item:hover {
+      color: #4299FF;
+    }
     .item.active {
       color: #fff;
       background: #4299FF;

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

@@ -648,7 +648,7 @@ export default class extends Component {
     const { ask = {}, empty = {} } = this.state;
     const emptyAsk = empty.ask || {};
     return (
-      <div className="modal ask">
+      <div className="question-modal ask">
         <div className="mask" />
         <div className="body">
           <div className="title">提问</div>
@@ -703,7 +703,7 @@ export default class extends Component {
 
   renderAskOk() {
     return (
-      <div className="modal ask-ok">
+      <div className="question-modal ask-ok">
         <div className="mask" />
         <div className="body">
           <div className="title">提问</div>
@@ -740,7 +740,7 @@ export default class extends Component {
 
   renderAskFail() {
     return (
-      <div className="modal ask-ok">
+      <div className="question-modal ask-ok">
         <div className="mask" />
         <div className="body">
           <div className="title">提问</div>
@@ -773,10 +773,10 @@ export default class extends Component {
   }
 
   renderFeedbackError() {
-    const { feedback = {}, empty } = this.state;
+    const { feedback = {}, empty = {} } = this.state;
     const emptyFeedback = empty.feedback || {};
     return (
-      <div className="modal error">
+      <div className="question-modal error">
         <div className="mask" />
         <div className="body">
           <div className="title">纠错</div>
@@ -841,7 +841,7 @@ export default class extends Component {
 
   renderFeedbackErrorOk() {
     return (
-      <div className="modal error-ok">
+      <div className="question-modal error-ok">
         <div className="mask" />
         <div className="body">
           <div className="title">纠错</div>
@@ -879,7 +879,7 @@ export default class extends Component {
   renderNote() {
     const { noteField, note = {} } = this.state;
     return (
-      <div className="modal note">
+      <div className="question-modal note">
         <div className="mask" />
         <div className="body">
           <div className="title">笔记</div>

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

@@ -388,165 +388,5 @@
       }
     }
 
-    .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      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: #fff;
-        width: 630px;
-        color: #686872;
-        padding: 20px 30px;
-
-        .title {
-          color: #303036;
-          font-size: 20px;
-          font-weight: 600;
-          border: none;
-        }
-
-        .desc {
-          color: #686872;
-          font-size: 16px;
-          padding: 20px 0;
-
-          .select-inline {
-            margin-bottom: 15px;
-
-            .select {
-              display: inline-block;
-            }
-          }
-
-          .label {
-            margin-bottom: 5px;
-          }
-        }
-
-        .textarea {
-          width: 570px;
-          height: 80px;
-          background: rgba(247, 247, 247, 1);
-          margin-bottom: 15px;
-          border: none;
-          padding: 5px 10px;
-        }
-
-        .textarea::placeholder {
-          color: #A7A7B7;
-        }
-
-        .bottom {
-          border-top: 1px solid #E1E1E1;
-          padding-top: 10px;
-          text-align: right;
-        }
-      }
-    }
-
-    .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;
-          width: 100%;
-
-          .tabs {
-            display: inline-block;
-            width: 170px;
-            vertical-align: top;
-            margin-left: -30px;
-            margin-right: 30px;
-            height: 100%;
-
-            .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;
-            }
-          }
-        }
-      }
-    }
   }
 }