提交

mock/main.ts

@@ -61,13 +61,13 @@ export default [
             {
               "channel": "1",
               "endTime": "23:00:00",
-              "joinStatus": false,
+              "joinStatus": true,
               "rainId": "2",
               "ruId": null,
               "startTime": "14:10:30"
             }
           ],
-          "redRainCountDownTime": 3,
+          "redRainCountDownTime": 0,
           actStartTime: Date.now() - 1 * 24 * 60 * 60 * 1000,
           actEndTime: Date.now() + 3 * 24 * 60 * 60 * 1000,
           endPoint: Date.now() + 0.0001 * 24 * 60 * 60 * 1000,
@@ -491,7 +491,7 @@ export default [
       return {
         "code": null,
         "data": {
-          "answers": ['选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1', "选项2", "选项3", "选项4"],
+          "answers": ['选项选项选项选项选项选项选项选项选项选项a', "选项2", "选项3", "选项4"],
           "avatar": null,
           "content": "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
           "fullStrength": true,

src/panels/answerPanel/index.jsx

@@ -85,19 +85,34 @@ class AnswerPanel extends React.Component {
     ModalCtrl.closeModal()
   })
 
+  getBLen = function (str) {
+    if (str == null) return 0;
+    if (typeof str != "string") {
+      str += "";
+    }
+    return str.replace(/[^\x00-\xff]/g, "01").length;
+  }
   render() {
     const qsInfo = this.state.qsInfo || {};
     const correctAnswers = this.state.correctAnswers || [];
     const selAnswer = this.state.selAnswer;
+    const labelObj = {
+      0: 'A',
+      1: 'B',
+      2: 'C',
+      3: 'D'
+    }
     return (
       <div className="answerPanel modal_center">
         <span className="bg"></span>
         <div className='question-title'>{qsInfo.content || ''}</div>
         <div className='answer-con'>
           {(qsInfo.answers || []).map((el, index) => {
-            return <div className={`answer-item ${(selAnswer === index + 1 + '') && correctAnswers.length > 0 && !correctAnswers.includes(index + 1 + '') ? 'error' : ''} ${correctAnswers.includes(index + 1 + '') ? 'correct' : ''}`} key={index} onClick={_asyncThrottle(() => {
+            const str = labelObj[index] + '、' + el;
+            let len = this.getBLen(str);
+            return <div className={`${len > 44 ? 'toolong' : ''} answer-item ${(selAnswer === index + 1 + '') && correctAnswers.length > 0 && !correctAnswers.includes(index + 1 + '') ? 'error' : ''} ${correctAnswers.includes(index + 1 + '') ? 'correct' : ''}`} key={index} onClick={_asyncThrottle(() => {
               this.submit(index)
-            })}>{el}
+            })}>{str}
               {(selAnswer === index + 1 + '') && correctAnswers.length > 0 && !correctAnswers.includes(index + 1 + '') && <span className='error-icon'></span>}
               {correctAnswers.includes(index + 1 + '') && <span className='correct-icon'></span>}
             </div>

src/panels/answerPanel/index.less

@@ -31,26 +31,30 @@
   }
 
   .answer-con {
-    width: 492px;
+    width: 540px;
     height: 360px;
     position: absolute;
     top: 740px;
-    left: 129px;
+    left: 105px;
 
     .answer-item {
-      width: 492px;
+      width: 540px;
       height: 80px;
-      line-height: 80px;
-      text-align: center;
+      text-align: left;
       color: rgb(88, 88, 88);
-      font-size: 30px;
+      font-size: 24px;
       font-weight: bold;
       margin-bottom: 6px;
-      .lineClamp1();
+      line-height: 80px;
+      padding-left: 10px;
       .sparkBg("answerPanel/normalBg.png");
       position: relative;
     }
 
+    .toolong {
+      line-height: 1.5;
+    }
+
     .error {
       .sparkBg("answerPanel/errorBg.png");
     }
@@ -64,7 +68,7 @@
       position: absolute;
       width: 61px;
       height: 60px;
-      right: -20px;
+      right: -10px;
       top: -10px;
       .sparkBg("answerPanel/correctIcon.png");
     }
@@ -73,7 +77,7 @@
       position: absolute;
       width: 58px;
       height: 54px;
-      right: -20px;
+      right: -10px;
       top: -10px;
       display: inline-block;
       .sparkBg("answerPanel/errorIcon.png");