sync

config/defaultSettings.js

+export default {
+  selectNo:["A","B","C","D","E","F","G","H"],
+  judgeNo:["T","F"]
+}
\ No newline at end of file

package.json

@@ -12,7 +12,8 @@
     "dva": "^2.6.0-beta.6",
     "path-to-regexp": "^2.4.0",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "babel-eslint": "^9.0.0",

src/global.less

@@ -3,6 +3,7 @@
 html,
 body,
 #root {
+  background-color: #FFFFFF;
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',

src/pages/exam/question/list.js

@@ -66,21 +66,24 @@ const renderMenu = () => {
       console.log(images[i])
       console.log(images[i + 1])
       console.log(images[i + 2])
+     const v1= images[i]
+     const v2=images[i + 1]
+     const v3=  images[i + 2]
       menus.push(
         <div className={styles.row} key={i}>
-          <div className={styles.col} key={images[i].key}>
-            <img src={images[i].image} alt="" onClick={()=>goPage(images[i].key)} />
-            <span>{images[i].title}</span>
+          <div className={styles.col} key={v1.key} data-id={v1.key}>
+            <img src={v1.image} alt="" onClick={()=>goPage(v1.key)} />
+            <span>{v1.title}</span>
           </div>
-         {i+1< images.length &&  <div className={styles.col} key={images[i+ 1].key}>
-            <img src={images[i + 1].image} alt="" onClick={()=>goPage(images[i + 1].key)} />
-            <span>{images[i + 1].title}</span>
+         {i+1< images.length &&  <div className={styles.col} key={v2.key} data-id={i+ 1}>
+            <img src={v2.image} alt="" onClick={()=>goPage(v2.key)} />
+            <span>{v2.title}</span>
           </div>}
-          {i+2< images.length && <div className={styles.col} key={images[i+ 2].key}>
-            <img src={images[i + 2].image} alt="" onClick={()=>goPage(images[i + 2].key)} />
-            <span>{images[i + 2].title}</span>
+          {i+2< images.length && <div className={styles.col} key={v3.key} data-id={i+ 2}>
+            <img src={v3.image} alt="" onClick={()=>goPage(v3.key)} />
+            <span>{v3.title}</span>
           </div>}
-        </div>,
+        </div>
       );
     }
     i += 3;

src/pages/exam/question/single/index.js

-import React from "react";
-import styles from "./index.less";
+import React, { useState } from 'react';
+import styles from './index.less';
+import config from '@/config';
+import { Button } from 'antd-mobile';
+import classNames from 'classNames';
+const Index = ({}) => {
+  const [isShowAnswer, setIsShowAnswer] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
 
-const Index = () => {
-  return <div className={styles.root}>hello wolrd</div>;
+  const options = [
+    {
+      id: 1,
+      title: '前交通动脉',
+      isRight: true,
+    },
+    {
+      id: 1,
+      title: '矩形备份',
+      isRight: true,
+    },
+    {
+      id: 1,
+      title: '矩形备份',
+      isRight: true,
+    },
+    {
+      id: 1,
+      title: '矩形备份',
+      isRight: false,
+    },
+    {
+      id: 1,
+      title: '矩形备份',
+      isRight: true,
+    },
+  ];
+
+  const showAnswer = () => {
+    setIsShowAnswer(true);
+  };
+
+  const selectOption=()=>{
+  }
+
+  const renderOption = () => {
+    return options.map((item, index) => {
+      return (
+        <div
+          className={classNames(
+            styles.option,
+            isShowAnswer && (item.isRight ? styles.right : styles.error),
+            isSelected && styles.selected
+          )}
+        >
+          {config.selectNo[index]}.{item.title}
+          {isShowAnswer && (
+            <img src={`/images/${item.isRight ? 'right' : 'error'}.png`} alt=""></img>
+          )}
+        </div>
+      );
+    });
+  };
+  return (
+    <div className={styles.root}>
+      <div className={styles.title}>
+        2/211、脑底动脉环在脑循环中起着非常重要的作用，能沟通脑前脑、后、左、右的血液供应，下列哪条动脉不参与脑底动脉环的组成？
+      </div>
+      <div className={styles.options}>{renderOption()}</div>
+      {isShowAnswer && (
+        <div className={styles.answer}>
+          <div className={styles.rightAnswer}>正确答案为：B</div>
+          <div className={styles.analysis}>
+            <span>题型解析</span>
+            ：脑底动脉环的组成包括颈内动脉，大脑前动脉起始段，前交通动脉，大脑后动脉和后交通动脉，不包括椎动脉。
+          </div>
+        </div>
+      )}
+      {!isShowAnswer && (
+        <div className={styles.submit}>
+          <Button type="primary" onClick={showAnswer}>
+            查看答案
+          </Button>
+        </div>
+      )}
+      <div className={styles.action}>
+        <div className={styles.pre}>上一题</div>
+        <div className={styles.input}>
+          跳转到
+          <input type="text" />题
+        </div>
+        <div className={styles.next}>下一题</div>
+      </div>
+    </div>
+  );
 };
 
 export default Index;

src/pages/exam/question/single/index.less

-.root{
+.root {
+  font-size: 16px;
+  padding: 16px;
+  .title {
+    color: #202030;
+    font-weight: 600;
+    line-height: 1.5;
+  }
 
+  .options {
+    margin: 32px 0 24px;
+    font-size: 14px;
+    .option {
+      background-color: rgba(250, 250, 250, 1);
+      border-radius: 5px;
+      height: 44px;
+      line-height: 44px;
+      margin-bottom: 16px;
+      padding-left: 16px;
+      position: relative;
+      &.error {
+        background-color: #feeff2;
+        color: #f94268;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      &.right {
+        background-color: #f1fbf6;
+        color: #3dc484;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      &.selected {
+        background-color: #ecf3fe;
+      }
+      img {
+        position: absolute;
+        right: 16px;
+      }
+    }
+  }
+
+  .submit {
+    :global {
+      .am-button {
+        line-height: 40px;
+        font-size: 16px;
+        width: 105px;
+        height: 40px;
+        background: linear-gradient(270deg, rgba(23, 106, 254, 1) 0%, rgba(97, 159, 255, 1) 100%);
+        border-radius: 20px;
+      }
+    }
+  }
+
+  .action {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-top: 48px;
+    .pre {
+      width: 72px;
+      height: 32px;
+      background: #f9f9f9;
+      border-radius: 16px;
+      color: #cccccc;
+      font-weight: 600;
+      line-height: 32px;
+      text-align: center;
+    }
+    .input {
+      input {
+        width: 36px;
+        height: 26px;
+        border-radius: 4px;
+        border: 1px solid #eff4fe;
+        color: #176aff;
+        font-weight: 500;
+        margin: 0 12px;
+      }
+    }
+    .next {
+      width: 72px;
+      height: 32px;
+      line-height: 32px;
+      background: #e3edfe;
+      border-radius: 16px;
+      color: #176aff;
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+
+  .answer {
+    .rightAnswer {
+      margin-bottom: 16px;
+      color: #3dc484;
+    }
+    .analysis {
+      margin-bottom: 16px;
+      font-size: 14px;
+      color: #202030;
+      line-height: 1.5;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
 }