修改

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/components/InfoComponent.js

 import React from 'react';
+import styled from 'styled-components';
+import { convertpx2vw } from '../config';
 import BGWithNavBtn from './BGWithNavBtn';
 import Rape_Mg from '../仿真软件-植物营养元素缺素症切图/3油菜/3.11.png'
+import Rape_Mg_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.11说明文字.png'
 import Rape_N from '../仿真软件-植物营养元素缺素症切图/3油菜/3.21.png'
+import Rape_N_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.21说明文字.png'
 import Rape_B from '../仿真软件-植物营养元素缺素症切图/3油菜/3.31.png'
+import Rape_B_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.31说明文字.png'
 import Rape_S from '../仿真软件-植物营养元素缺素症切图/3油菜/3.41.png'
+import Rape_S_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.41说明文字.png'
 import Rape_P from '../仿真软件-植物营养元素缺素症切图/3油菜/3.51.png'
+import Rape_P_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.51说明文字.png'
 import Rape_Ga from '../仿真软件-植物营养元素缺素症切图/3油菜/3.61.png'
+import Rape_Ga_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.61说明文字.png'
 import Rape_K from '../仿真软件-植物营养元素缺素症切图/3油菜/3.71.png'
+import Rape_K_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.71说明文字.png'
 import Rape_Zn from '../仿真软件-植物营养元素缺素症切图/3油菜/3.81.png'
+import Rape_Zn_desc from '../仿真软件-植物营养元素缺素症切图/3油菜/3.81说明文字.png'
+import rape_bg from '../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
 
 import Tomato_Zn from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.11.png'
+import Tomato_Zn_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.11说明文字.png'
 import Tomato_B from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.21.png'
+import Tomato_B_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.21说明文字.png'
 import Tomato_S from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.31.png'
+import Tomato_S_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.31说明文字.png'
 import Tomato_K from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.41.png'
+import Tomato_K_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.41说明文字.png'
 import Tomato_N from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.51.png'
+import Tomato_N_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.51说明文字.png'
 import Tomato_Ga from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.61.png'
+import Tomato_Ga_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.61说明文字.png'
 import Tomato_P from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.71.png'
+import Tomato_P_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.71说明文字.png'
 import Tomato_Mg from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.81.png'
+import Tomato_Mg_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.81说明文字.png'
 import Tomato_Mu from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.91.png'
+import Tomato_Mu_desc from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.91说明文字.png'
+import Tomato_bg from '../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
+
 
 import Corn_N from '../仿真软件-植物营养元素缺素症切图/1玉米/1.11.png';
+import Corn_N_desc from '../仿真软件-植物营养元素缺素症切图/1玉米/1.11说明文字.png';
 import Corn_P from '../仿真软件-植物营养元素缺素症切图/1玉米/1.21.png';
+import Corn_P_desc from '../仿真软件-植物营养元素缺素症切图/1玉米/1.21说明文字.png';
 import Corn_K from '../仿真软件-植物营养元素缺素症切图/1玉米/1.31.png';
+import Corn_K_desc from '../仿真软件-植物营养元素缺素症切图/1玉米/1.31说明文字.png';
 import Corn_Zn from '../仿真软件-植物营养元素缺素症切图/1玉米/1.41.png';
+import Corn_Zn_desc from '../仿真软件-植物营养元素缺素症切图/1玉米/1.41说明文字.png';
 import Corn_B from '../仿真软件-植物营养元素缺素症切图/1玉米/1.51.png';
+import Corn_B_desc from '../仿真软件-植物营养元素缺素症切图/1玉米/1.51说明文字.png';
+import corn_bg from '../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
 
 import Wheat_N from '../仿真软件-植物营养元素缺素症切图/2小麦/2.11.png';
+import Wheat_N_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.11说明文字.png';
 import Wheat_P from '../仿真软件-植物营养元素缺素症切图/2小麦/2.21.png';
+import Wheat_P_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.21说明文字.png';
 import Wheat_K from '../仿真软件-植物营养元素缺素症切图/2小麦/2.31.png';
+import Wheat_K_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.31说明文字.png';
 import Wheat_Zn from '../仿真软件-植物营养元素缺素症切图/2小麦/2.41.png';
+import Wheat_Zn_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.41说明文字.png';
 import Wheat_B from '../仿真软件-植物营养元素缺素症切图/2小麦/2.51.png';
+import Wheat_B_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.51说明文字.png';
 import Wheat_Mn from '../仿真软件-植物营养元素缺素症切图/2小麦/2.61.png';
+import Wheat_Mn_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.61说明文字.png';
 import Wheat_Fe from '../仿真软件-植物营养元素缺素症切图/2小麦/2.71.png';
+import Wheat_Fe_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.71说明文字.png';
 import Wheat_Mg from '../仿真软件-植物营养元素缺素症切图/2小麦/2.81.png';
+import Wheat_Mg_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.81说明文字.png';
 import Wheat_Ga from '../仿真软件-植物营养元素缺素症切图/2小麦/2.91.png';
+import Wheat_Ga_desc from '../仿真软件-植物营养元素缺素症切图/2小麦/2.91说明文字.png';
+import wheat_bg from '../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png';
 
-const bgs = {
-  rape: {
-    mg: Rape_Mg,
-    n: Rape_N,
-    b: Rape_B,
-    s: Rape_S,
-    p: Rape_P,
-    ga: Rape_Ga,
-    k: Rape_K,
-    zn: Rape_Zn,
+// 油菜配置
+const rapeIllustrate = {w: 820, h: 441, top: 60};
+const rapeDesc = {w: 822, h: 310, top: 70,};
+const rapeSrcs = {
+  mg: {
+    illustrate: Rape_Mg,
+    desc: Rape_Mg_desc,
+  },
+  n: {
+    illustrate: Rape_N,
+    desc: Rape_N_desc,
+  },
+  b: {
+    illustrate: Rape_B,
+    desc: Rape_B_desc,
+  },
+  s: {
+    illustrate: Rape_S,
+    desc: Rape_S_desc,
+  },
+  p: {
+    illustrate: Rape_P,
+    desc: Rape_P_desc,
+  },
+  ga: {
+    illustrate: Rape_Ga,
+    desc: Rape_Ga_desc,
   },
-  tomato: {
-    n: Tomato_N,
-    p: Tomato_P,
-    k: Tomato_K,
-    ga: Tomato_Ga,
-    mg: Tomato_Mg,
-    zn: Tomato_Zn,
-    b: Tomato_B,
-    s: Tomato_S,
-    mu: Tomato_Mu 
+  k: {
+    illustrate: Rape_K,
+    desc: Rape_K_desc,
   },
-  corn: {
-    n: Corn_N ,
-    p: Corn_P ,
-    k: Corn_K ,
-    zn: Corn_Zn ,
-    b: Corn_B
+  zn: {
+    illustrate: Rape_Zn,
+    desc: Rape_Zn_desc,
   },
-  wheat: {
-    n: Wheat_N ,
-    p: Wheat_P ,
-    k: Wheat_K ,
-    ga: Wheat_Ga ,
-    mg: Wheat_Mg ,
-    zn: Wheat_Zn ,
-    b: Wheat_B ,
-    mn: Wheat_Mn ,
-    fe: Wheat_Fe,
+}
+const rape = { bg: rape_bg, };
+Object.keys(rapeSrcs).forEach(key => {
+ rape[key] = {
+    illustrate: { ...rapeIllustrate, src: rapeSrcs[key].illustrate },
+    desc: { ...rapeDesc, src: rapeSrcs[key].desc }
+  };
+});
+
+// 西虹市配置
+const tomatoIllustrate = {w: 824, h: 437, top: 60};
+const tomatoDesc = {w: 822, h: 310, top: 70,};
+const tomatoSrcs = {
+  n: { illustrate: Tomato_N, desc: Tomato_N_desc, },
+  p: { illustrate: Tomato_P, desc: Tomato_P_desc, },
+  k: { illustrate: Tomato_K, desc: Tomato_K_desc, },
+  ga: { illustrate: Tomato_Ga, desc: Tomato_Ga_desc, },
+  mg: { illustrate: Tomato_Mg, desc: Tomato_Mg_desc, },
+  zn: { illustrate: Tomato_Zn, desc: Tomato_Zn_desc, },
+  b: { illustrate: Tomato_B, desc: Tomato_B_desc, },
+  s: { illustrate: Tomato_S, desc: Tomato_S_desc, },
+  mu: { illustrate: Tomato_Mu, desc: Tomato_Mu_desc },
+};
+const tomato = { bg: Tomato_bg };
+Object.keys(tomatoSrcs).forEach(key => {
+  tomato[key] = {
+    illustrate: { ...tomatoIllustrate, src: tomatoSrcs[key].illustrate },
+    desc: { ...tomatoDesc, src: tomatoSrcs[key].desc }
+  };
+});
+
+// 玉米配置
+const cornIllustrate = {w: 824, h: 437, top: 60};
+const cornDesc = {w: 822, h: 310, top: 70,};
+const cornSrcs = {
+  n: { illustrate: Corn_N , desc: Corn_N_desc }, 
+  p: { illustrate: Corn_P , desc: Corn_P_desc }, 
+  k: { illustrate: Corn_K , desc: Corn_K_desc }, 
+  zn: { illustrate: Corn_Zn, desc:  Corn_Zn_desc }, 
+  b: { illustrate: Corn_B , desc: Corn_B_desc }
+};
+const corn = { bg: corn_bg };
+Object.keys(cornSrcs).forEach(key => {
+  corn[key] = {
+    illustrate: { ...cornIllustrate, src: cornSrcs[key].illustrate},
+    desc: { ...cornDesc, src: cornSrcs[key].desc },
   }
+});
+
+// 小麦配置
+const wheatIllustrate = {w: 905, h: 441, top: 60};
+const wheatDesc = {w: 881, h: 332, top: 30,};
+const wheatSrcs = {
+  n: { illustrate: Wheat_N , desc: Wheat_N_desc, },
+  p: { illustrate: Wheat_P , desc: Wheat_P_desc, },
+  k: { illustrate: Wheat_K , desc: Wheat_K_desc, },
+  ga: { illustrate: Wheat_Ga , desc: Wheat_Ga_desc, },
+  mg: { illustrate: Wheat_Mg , desc: Wheat_Mg_desc, },
+  zn: { illustrate: Wheat_Zn , desc: Wheat_Zn_desc, },
+  b: { illustrate: Wheat_B , desc: Wheat_B_desc, },
+  mn: { illustrate: Wheat_Mn , desc: Wheat_Mn_desc, },
+  fe: { illustrate: Wheat_Fe, desc: Wheat_Fe_desc, },
+};
+const wheat = { bg: wheat_bg };
+Object.keys(wheatSrcs).forEach(key => {
+  wheat[key] = {
+    illustrate: { ...wheatIllustrate, src: wheatSrcs[key].illustrate},
+    desc: { ...wheatDesc, src: wheatSrcs[key].desc },
+  }
+});
+const configs = { wheat, corn, rape, tomato };
+
+const Container = styled(BGWithNavBtn)`
+  text-align: center;
+`;
+const StyledImg = styled.img`
+  width: ${props => convertpx2vw(props.w)};
+  height: ${props => convertpx2vw(props.h)};
+  margin-top: ${props => convertpx2vw(props.top)};
+`;
+export default function InfoCmp({ category, element }) {
+  const { bg, [element]: { illustrate, desc }  } = configs[category];
+  // const { illustrate, desc } = configs[category][element];
+  return (
+    <Container bg={bg}>
+      <StyledImg src={illustrate.src} w={illustrate.w} h={illustrate.h} top={illustrate.top} alt='illustrate' /><br />
+      <StyledImg src={desc.src} w={desc.w} h={desc.h} top={desc.top} alt='description' />
+    </Container>
+  );
 }
 
-export default function InfoComponent({ category, element }) {
-  return <BGWithNavBtn bg={bgs[category][element]} />
-}
\ No newline at end of file

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: [