sync

config/router.config.js

@@ -60,10 +60,16 @@ export default [
           },
           {
             key: '315',
-            path: '/exam/questionList',
+            path: '/exam/question/list',
             isFull: true, 
             component: './exam/question/list',
           },
+          {
+            key: '316',
+            path: '/exam/question/single',
+            isFull: true, 
+            component: './exam/question/single',
+          },
         ],
       },
     ],

src/pages/exam/basic.js

@@ -33,9 +33,9 @@ const Index = () => {
     console.log(id);
   };
   
-  const onClickButton = id => {
-    router.push('/exam/questionList');
-
+  const onClickButton = (id,e) => {
+    e.preventDefault()
+  return  router.push('/exam/question/list');
   };
   
 

src/pages/exam/components/item.js

@@ -42,7 +42,7 @@ const Index = ({
             />
             <div className={styles.label}>分享</div>
           </div>
-          <Button type="primary" onClick={() => onClickButton(id)}>
+          <Button type="primary" onClick={(e) => onClickButton(id,e)}>
             {buttonLable}
           </Button>
         </div>

src/pages/exam/question/list.js

 import React from 'react';
 import styles from './list.less';
+import router from 'umi/router';
 
 const images = [
   {
-    image: '',
-    title: '',
+    key: 'single',
+    image: '/images/danxuanti.png',
+    title: '单选题',
   },
   {
-    image: '',
-    title: '',
+    key: 'multiple',
+    image: '/images/duoxuanti.png',
+    title: '多选题',
   },
   {
-    image: '',
-    title: '',
+    key: 'judgment',
+    image: '/images/panduanti.png',
+    title: '判断题',
   },
   {
-    image: '',
-    title: '',
+    key: 'completion',
+    image: '/images/tiankongti.png',
+    title: '填空题',
   },
   {
-    image: '',
-    title: '',
+    key: 'short',
+    image: '/images/jiandati.png',
+    title: '简答题',
   },
   {
-    image: '',
-    title: '',
+    key: 'caseChoice ',
+    image: '/images/anlixuanzeti.png',
+    title: '案例选择题',
   },
   {
-    image: '',
-    title: '',
+    key: 'caseMultiple',
+    image: '/images/mingcijieshi.png',
+    title: '名词解释',
   },
   {
-    image: '',
-    title: '',
+    key: 'b1',
+    image: '/images/b1tixing.png',
+    title: 'B1题型',
   },
   {
-    image: '',
-    title: '',
+    key: 'argumentation',
+    image: '/images/lunshuti.png',
+    title: '论述题',
+  },
+  {
+    key: 'analytical ',
+    image: '/images/fenxiti.png',
+    title: '分析题',
   },
 ];
-const Index = () => {
-  return (
-    <div className={styles.root}>
-      <div className={styles.row}>
-        <div>
-          <img src={'/images/danxuanti.png'} alt=""></img>
-          <span>单选题</span>
-        </div>
+const goPage = key => {
+  router.push(`/exam/question/${key}`);
+};
 
-        <img src={'/images/duoxuanti.png'} alt=""></img>
-        <img src={'/images/panduanti.png'} alt=""></img>
-      </div>
-      <div className={styles.row}>
-        <img src={'/images/tiankongti.png'} alt=""></img>
-        <img src={'/images/jiandati.png'} alt=""></img>
-        <img src={'/images/anlixuanzeti.png'} alt=""></img>
-      </div>
-      <div className={styles.row}>
-        <img src={'/images/mingcijieshi.png'} alt=""></img>
-        <img src={'/images/b1tixing.png'} alt=""></img>
-        <img src={'/images/lunshuti.png'} alt=""></img>
-      </div>
-      <div className={styles.row}>
-        <img src={'/images/fenxiti.png'} alt=""></img>
-      </div>
-    </div>
-  );
+const renderMenu = () => {
+  const menus = [];
+  for (let i = 0; i < images.length; ) {
+    if (i % 3 === 0) {
+      console.log(i)
+      console.log(images[i])
+      console.log(images[i + 1])
+      console.log(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>
+         {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>
+          </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>
+          </div>}
+        </div>,
+      );
+    }
+    i += 3;
+  }
+  return menus;
+};
+const Index = () => {
+  return <div className={styles.root}>{renderMenu()}</div>;
 };
 
 export default Index;

src/pages/exam/question/list.less

 .root{
   display: flex;
   flex-direction: column;
+  padding-top: 8px;
   .row{
     display: flex;
     justify-content: space-between;
     padding: 0px 8px;
-    img{
-      padding: 4px 4px;
+  
+    .col{
+      position: relative;
+      img{
+        padding: 4px 4px;
+      }
+      span{
+        margin-left: -20px;
+        width: 100px;
+        position: absolute;
+        left: 50%;
+        right: 50%;
+        bottom: 18px;
+        color: #FFFFFF;
+      }
     }
     
   }

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

+import React from "react";
+import styles from "./index.less";
+
+const Index = () => {
+  return <div className={styles.root}>hello wolrd</div>;
+};
+
+export default Index;
\ No newline at end of file

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

+.root{
+  
+}
\ No newline at end of file