答题页布局

src/components/activity/2020-717/index.scss → src/components/activity/2020-717/activity/index.scss

@@ -259,7 +259,7 @@
         transform: translateX(-50%);
         width: 280px;
         height: 6px;
-        background: url("./images/h-bar.png");
+        background: url("../images/h-bar.png");
         background-size: contain;
 
         & + .h-bar {
@@ -274,7 +274,7 @@
         left: 0;
         width: 6px;
         height: 198px;
-        background: url("./images/v-bar.png");
+        background: url("../images/v-bar.png");
         background-size: contain;
 
         & + .v-bar {
@@ -304,11 +304,11 @@
             background-size: contain;
 
             &.available {
-              background: url("./images/lottery-button-available.png") no-repeat;
+              background: url("../images/lottery-button-available.png") no-repeat;
             }
 
             &.unavailable {
-              background: url("./images/draw.png") no-repeat !important;
+              background: url("../images/draw.png") no-repeat !important;
             }
           }
         }
@@ -380,7 +380,7 @@
           width: 14px;
           height: 16px;
           margin-right: 9px;
-          background: url("./images/lottery-icon.png") no-repeat;
+          background: url("../images/lottery-icon.png") no-repeat;
           background-size: contain;
         }
       }
@@ -478,7 +478,7 @@
         display: inline-block;
         width: 84px;
         height: 25px;
-        background: url("./images/my-team.png");
+        background: url("../images/my-team.png");
         background-size: contain;
       }
 
@@ -570,7 +570,7 @@
             width: 14px;
             height: 14px;
             margin-right: 8px;
-            background: url("./images/start-exercise.png");
+            background: url("../images/start-exercise.png");
             background-size: contain;
           }
         }
@@ -597,7 +597,7 @@
           transform: translateY(-50%);
           width: 25px;
           height: 11px;
-          background: url("./images/rank-title-decorator.png");
+          background: url("../images/rank-title-decorator.png");
         }
 
         &::before {

src/components/activity/2020-717/question/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { Toast } from "antd-mobile";
+import classnames from 'classnames'
+import { http } from "@/utils"
+
+class Question extends Component {
+
+  state = {
+    question: {},
+    selectedIndex: 0,
+    correctIndex: 2,
+    wrongIndex: 3,
+  }
+
+  componentDidMount() {
+    this.getQuestion()
+  }
+
+  getQuestion = () => {
+    const assistId = this.props.match.params.assistId
+    http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+          this.setState({
+            question: data,
+          });
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
+  render() {
+    const {question, selectedIndex, correctIndex, wrongIndex} = this.state
+    return (
+      <div id={'question'}>
+        <div className="banner"></div>
+        <div className={'question'}>
+          {question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
+          <ul>
+            {
+              question.options && !!question.options.length && question.options.map((item, index) => {
+                return <li key={item.id} className={classnames({
+                  selected: selectedIndex === index,
+                  correct: correctIndex === index,
+                  wrong: wrongIndex === index,
+                })}>
+                  <span>{String.fromCharCode(65 + index)}</span>
+                  {item.des}
+                </li>
+              })
+            }
+          </ul>
+        </div>
+        <div className="answered">
+          <div className="analysis">
+            <div className="estimate">
+              您选择的是C，正确答案是D 回答错误
+            </div>
+            <div className="analysis-content">
+              <div className="title">
+                <i className={'icon'}></i>
+                解析
+              </div>
+              <div className="content">
+                解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
+              </div>
+            </div>
+          </div>
+          <div className="recommends">
+            <div className="title">相关课程</div>
+            <ul>
+              <li>
+
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="submit-bar">
+          <button className={'submit'}>提交</button>
+          {/*<button className={'lottery-related'}>去抽奖</button>*/}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Question;
\ No newline at end of file

src/components/activity/2020-717/question/index.scss

+html, body {
+  min-height: 100%;
+}
+
+#root {
+  min-height: 100%;
+}
+
+#question {
+  background: #F5F5F5;
+  min-height: 100%;
+  padding-bottom: 55px;
+
+  .banner {
+    height: 94px;
+    background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/question-banner.png");
+    background-size: contain;
+  }
+
+  .question {
+    padding: 15px 16px;
+    background: #fff;
+    margin-bottom: 8px;
+
+    .topic {
+      margin-bottom: 20px;
+      font-size: 16px;
+      color: #222;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      width: 375px;
+      height: 49px;
+      margin-left: -16px;
+      margin-right: -16px;
+      padding: 0 16px;
+      font-size: 16px;
+
+      &.selected {
+        background-color: rgba(0, 153, 255, .05);
+        color: #09f;
+
+        span {
+          color: #fff;
+          background: #09f;
+          border: 1px solid #09f;
+        }
+      }
+
+      &.correct {
+        background-color: rgba(44, 219, 175, .05);
+        color: #2CDBAF;
+
+        span {
+          color: #fff;
+          background: rgba(44, 219, 175, 1);
+          border: rgba(44, 219, 175, .05);
+        }
+      }
+
+      &.wrong {
+        color: #FC3540;
+
+        span {
+          color: #FC3540;
+          border: 1px solid #FC3540;
+        }
+      }
+
+      span {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        margin-right: 15px;
+        border: 1px solid rgba(153, 153, 153, 1);
+        border-radius: 50%;
+        text-align: center;
+      }
+    }
+  }
+
+  .answered {
+    padding: 15px 16px;
+    background-color: #fff;
+
+    .estimate {
+      margin-bottom: 20px;
+      font-size: 14px;
+      color: #333;
+    }
+
+    .analysis-content {
+      margin-bottom: 22px;
+
+      .title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        color: #09f;
+
+        .icon {
+          display: inline-block;
+          width: 14px;
+          height: 16px;
+          margin-right: 6px;
+          background: url("../images/analysis-icon.png");
+          background-size: contain;
+        }
+      }
+
+      .content {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+
+    .recommends {
+      .title {
+        color: #09f;
+      }
+
+      ul {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      li {
+        width: 160px;
+        height: 115px;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .submit-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 55px;
+    line-height: 55px;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+    text-align: center;
+    background: #fff;
+
+    button {
+      -webkit-appearance: none;
+      outline: 0;
+      border: 0;
+      font-size: 16px;
+    }
+
+    .submit {
+      width: 92px;
+      height: 34px;
+      background: #09f;
+      border-radius: 17px;
+      color: #fff;
+    }
+
+    .lottery-related {
+      height: 34px;
+      padding: 0 20px;
+      background: #FEE333;
+      border-radius: 3em;
+      color: #2636FB;
+    }
+  }
+}
\ No newline at end of file