修改

src/App.js

@@ -48,6 +48,7 @@ const routes = Object.keys(config).reduce((acc, category) => {
         component={Cmp}
       />
     );
+    
     curRoutes.push(
       <Route
         key={category + '-' + element + '-info'}
@@ -60,7 +61,6 @@ const routes = Object.keys(config).reduce((acc, category) => {
   
   return acc.concat(curRoutes);
 }, []);
-console.log(routes);
 
 
 function App() {

src/config.js

 export const USE_VW = true;
-export function convertpx2vw(px) { return USE_VW ? px / 16 + 'vw' : px + 'px'}
+let unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
\ No newline at end of file
+let divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
+
+window.addEventListener('resize', () => {
+  unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
+  divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
+});
+export function convertpx2vw(px) { return USE_VW ? px / divide + unit : px + 'px'}

src/layouts/CheckLack.js

-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import BGWithNavBtn from '../components/BGWithNavBtn';
@@ -10,10 +10,12 @@ import { convertpx2vw } from '../config';
 const Container = styled(BGWithNavBtn)`
   display: block;
   overflow: hidden;
-  background-size: contain;
-  background-repeat: repeat-x;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
 `;
 const StyledBtn = styled(AnimatedBtn)`
+  display: inline-block;
   width: ${props => convertpx2vw(props.w)};
   height: ${props => convertpx2vw(props.h)};
   :not(:first-child) {
@@ -22,57 +24,64 @@ const StyledBtn = styled(AnimatedBtn)`
   position: relative;
 `;
 const Row = styled.div`
-  display: flex;
+  /* display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: center; */
   margin-top: ${props => convertpx2vw(props.marginTop)};
 `;
 const MarkImg = styled.img`
   position: absolute;
-  bottom: ${convertpx2vw(20)};
+  bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   visibility: ${props => props.show ? 'visible' : 'hidden'};
 `;
 const WrongMark = styled(MarkImg)`
-  width: ${convertpx2vw(39)};
-  height: ${convertpx2vw(39)};
+  width: ${convertpx2vw(35)};
+  height: ${convertpx2vw(35)};
 `;
 const CorrectMark = styled(MarkImg)`
-  width: ${convertpx2vw(51)};
-  height: ${convertpx2vw(43)};
+  width: ${convertpx2vw(51*0.9)};
+  height: ${convertpx2vw(43*0.9)};
 `;
 
 
-const CheckBtn = withRouter(({ w, h, leftGap, bg, to, correct, history }) => {
+const CheckBtn = ({ w, h, leftGap, bg, to, correct, onClick }) => {
   const [showCheckMark, setShowCheckMark] = useState(false);
+
   function handleClick(e) {
     e.preventDefault();
     setShowCheckMark(true);
-    setTimeout(() => {
-      history.push(to);
-    }, 1000);
+    onClick();
   }
+
   return (
-    <StyledBtn
-      w={w}
-      h={h}
-      leftgap={leftGap}
-      bg={bg}
-      to={to}
-      onClick={e => handleClick(e)}
-    >
-      {
-        correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
-      }
-    </StyledBtn>
+      <StyledBtn
+        w={w}
+        h={h}
+        leftgap={leftGap}
+        bg={bg}
+        to={to}
+        onClick={e => handleClick(e)}
+      >
+        {
+          correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
+        }
+      </StyledBtn>
   );
-});
+};
+
  
 /**
  *  Check Lack layout
  * config = {
  *   bg,
+ *   illustrate: {
+ *    w: number,
+ *    h: number,
+ *    src: 
+ * 
+ *  }
  *   btns: {
  *     w,
  *     h,
@@ -87,10 +96,36 @@ const CheckBtn = withRouter(({ w, h, leftGap, bg, to, correct, history }) => {
  *   } 
  * }
  */
+const Illustrate = styled.img`
+  width: ${props => convertpx2vw(props.w)};
+  height: ${props => convertpx2vw(props.h)};
+  margin-top: ${props => convertpx2vw(props.top)};
+`;
+
+function CheckLack({ config, history }) {
+
+  const timerRef = useRef(null);
+
+  function handleClick(to) {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      history.push(to);
+    }, 1000);
+  }
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    }
+  }, [])
 
-export default function CheckLack({ config }) {
   return (
     <Container bg={config.bg}>
+      <Illustrate src={config.illustrate.src} w={config.illustrate.w} h={config.illustrate.h} top={config.illustrate.top}  alt='illustrate' />
       {
         config.btns.rows.map((row, idx) => (
           <Row
@@ -107,6 +142,7 @@ export default function CheckLack({ config }) {
                   bg={ele.bg}
                   correct={ele.correct}
                   to={ele.to}
+                  onClick={() => handleClick(ele.to)}
                 />
               ))
             }
@@ -115,4 +151,5 @@ export default function CheckLack({ config }) {
       }
     </Container>
   );
-}
+}
\ No newline at end of file
+export default withRouter(CheckLack);
\ No newline at end of file

src/layouts/RowsLayout.js

@@ -5,17 +5,35 @@ import { convertpx2vw } from '../config';
 import AnimatedBtn from '../components/AnimatedBtn';
 
 const Container = styled(BGWithNavBtn)`
-  display: grid;
+  /* display: grid;
   grid-template-columns: ${props => `repeat(${props.columns}, auto)`};
   grid-row-gap: ${props => convertpx2vw(props.rowGap)};
   grid-column-gap: ${props => convertpx2vw(props.columnGap)};
   grid-template-rows: auto;
   justify-content: center;
-  align-content: center;
+  align-content: center; */
+`;
+const VerticalMiddle = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
 `;
 const StyledBtn = styled(AnimatedBtn)`
+  display: inline-block;
   width: ${props => convertpx2vw(props.w)};
   height: ${props => convertpx2vw(props.h)};
+  :not(:first-child) {
+    margin-left: ${props => convertpx2vw(props.left)};
+  }
+`;
+
+const Row = styled.div`
+  display: block;
+  text-align: center;
+  :not(:first-child) {
+    margin-top: ${props => convertpx2vw(props.top)};
+  }
 `;
 /**
  * 按行排列
@@ -31,11 +49,25 @@ const StyledBtn = styled(AnimatedBtn)`
  */
 export default function RowsLayout({ config }) {
   const { bg, rowGap, columnGap, btns, w, h, columns } = config;
+  const btnRows = Array(btns.length / columns).fill(true).map(_ => []);
+  btns.forEach((btn, idx) => {
+    btnRows[Math.floor(idx / columns)].push(btn);
+  });
+  console.log(btnRows);
   return (
     <Container columns={columns} bg={bg} rowGap={rowGap} columnGap={columnGap} >
-      {
-        btns.map(btn => <StyledBtn w={w} h={h} bg={btn.bg} to={btn.to} />)
-      }
+      <VerticalMiddle>
+        {
+          btnRows.map((row, idx) => (
+            <Row key={idx} top={rowGap}>
+              {
+                row.map(btn => <StyledBtn key={btn.to} w={w} h={h} bg={btn.bg} to={btn.to} left={columnGap} />)
+              }
+            </Row>
+          ))
+        }
+      </VerticalMiddle>
     </Container>
   );
-}
+}
\ No newline at end of file
+// btns.map(btn => <StyledBtn key={btn.to} w={w} h={h} bg={btn.bg} to={btn.to} />)
\ No newline at end of file

src/pages/Home.js

@@ -11,23 +11,34 @@ import { convertpx2vw } from '../config';
 const baseUrl = process.env.PUBLIC_URL;
 
 const Container = styled(BackGround)`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: center;
+  text-align: center;
+  position: relative;
+`;
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  width: 100%;
 `;
 const StyledBtn = styled(AnimatedBtn)`
+  display: inline-block;
   width: ${convertpx2vw(300)};
   height: ${convertpx2vw(300)};
+  :not(:first-child) {
+    margin-left: ${convertpx2vw(80)}
+  }
 `;
 
 export default function Home() {
   return (
     <Container>
-      <StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
-      <StyledBtn bg={WheatImg}  to={baseUrl + '/wheat'} />
-      <StyledBtn bg={RapeImg}  to={baseUrl + '/rape'}/>
-      <StyledBtn bg={tomatoImg}   to={baseUrl + '/tomato'} />
+      <StyledDiv>
+        <StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
+        <StyledBtn bg={WheatImg}  to={baseUrl + '/wheat'} />
+        <StyledBtn bg={RapeImg}  to={baseUrl + '/rape'}/>
+        <StyledBtn bg={tomatoImg}   to={baseUrl + '/tomato'} />
+      </StyledDiv>
     </Container>
   );
 }
\ No newline at end of file

src/pages/corn/getComponent.js

@@ -2,11 +2,12 @@ import React from 'react';
 import CheckLack from '../../layouts/CheckLack';
 import { withRouter } from 'react-router-dom';
 
-import LackNBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png'
-import LackPBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png'
-import LackKBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png'
-import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png'
-import LackBBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png'
+// 症状图片
+import LackNSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png'
+import LackPSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png'
+import LackKSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png'
+import LackZnSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png'
+import LackBSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png'
 
 import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png'
 import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png'
@@ -14,20 +15,28 @@ import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1
 import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png'
 import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png'
 
+import Bg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
+
 const baseUrl = process.env.PUBLIC_URL;
 
-const bgs = [
-  LackNBg, LackPBg, LackKBg, LackZnBg, LackBBg
+const illustrateSrcs = [
+  LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc
 ]
 
 export default function (idx) {
   const Component = withRouter(({ match }) => {
     const config = {
-      bg: bgs[idx],
+      bg: Bg,
+      illustrate: {
+        w: 1021,
+        h: 501,
+        src: illustrateSrcs[idx],
+        top: 60,
+      },
       btns: {
-        w: 207,
-        h: 207,
-        marginTop: 602,
+        w: 218,
+        h: 218,
+        marginTop: 60,
         topGap: 0,
         leftGap: 80,
         rows: [

src/pages/rape/getComponent.js

@@ -19,6 +19,7 @@ import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/3
 import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png'
 import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png'
 import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png'
+import bg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
 
 const baseUrl = process.env.PUBLIC_URL;
 
@@ -34,11 +35,17 @@ const bgs = [
 export default function (lackElement) {
   const Component = withRouter(({ match }) => {
     const config = {
-      bg: bgs[lackElement[0]][lackElement[1]],
+      bg,
+      illustrate: {
+        w: 856,
+        h: 468,
+        src: bgs[lackElement[0]][lackElement[1]],
+        top: 40,
+      },
       btns: {
-        w: 159,
-        h: 159,
-        marginTop: 539,
+        w: 170,
+        h: 170,
+        marginTop: 35,
         topGap: 40,
         leftGap: 140,
         rows: [

src/pages/tomato/getComponent.js

@@ -21,6 +21,7 @@ import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/4
 import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png'
 import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png'
 import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png'
+import bg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
 
 const baseUrl = process.env.PUBLIC_URL;
 
@@ -31,11 +32,17 @@ const bgs = [
 export default function(idx) {
   const Component = withRouter(({ match }) => {
     const config = {
-      bg: bgs[idx],
+      bg,
+      illustrate: {
+        w: 850,
+        h: 457,
+        src: bgs[idx],
+        top: 60,
+      },
       btns: {
-        w: 121,
-        h: 286,
-        marginTop: 559,
+        w: 132,
+        h: 297,
+        marginTop: 55,
         topGap: 0,
         leftGap: 48,
         rows: [

src/pages/wheat/getComponent.js

@@ -2,15 +2,15 @@ import React from 'react';
 import CheckLack from '../../layouts/CheckLack';
 import { withRouter } from 'react-router-dom';
 
-import N_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.1缺氮.png'
-import P_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.2缺磷.png'
-import K_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.3缺钾.png'
-import Zn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.4缺锌.png'
-import B_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.5缺硼.png'
-import Mn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.6缺锰.png'
-import Fe_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.7缺铁.png'
-import Mg_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.8缺镁.png'
-import Ga_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.9缺钙.png'
+import N_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.1.png'
+import P_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.2.png'
+import K_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.3.png'
+import Zn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.4.png'
+import B_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.5.png'
+import Mn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.6.png'
+import Fe_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.7.png'
+import Mg_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.8.png'
+import Ga_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.9.png'
 
 import N_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺氮.png';
 import B_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺硼.png';
@@ -21,6 +21,7 @@ import Fe_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小
 import Zn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锌.png';
 import Mn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锰.png';
 import Mg_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺镁.png';
+import bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png';
 
 const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ]
 
@@ -30,11 +31,17 @@ export default function (idx) {
   const Component = withRouter(({ match }) => {
     const to = match.url+'/info'
     const config = {
-      bg: bgs[idx],
+      bg,
+      illustrate: {
+        w: 1030,
+        h: 501,
+        src: bgs[idx],
+        top: 40,
+      },
       btns: {
-        w: 121,
-        h: 286,
-        marginTop: 560,
+        w: 132,
+        h: 297,
+        marginTop: 35,
         topGap: 0,
         leftGap: 48,
         rows: [