修改详情页

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}
\ No newline at end of file

src/App.js

-import React from 'react';
-import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import SubHome from './pages/SubHome';
-import Home from './pages/Home';
-import Corn from './pages/corn';
-import Wheat from './pages/wheat';
-import Rape from './pages/rape';
-import Tomato from './pages/tomato';
-import rapeGetComponent from './pages/rape/getComponent';
-import InfoCmp from './components/InfoComponent.js'
-import tomatoGetCmp from './pages/tomato/getComponent';
-import cornGetCmp from './pages/corn/getComponent';
-import wheatGetCmp from './pages/wheat/getComponent';
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import SubHome from "./pages/SubHome";
+import Home from "./pages/Home";
+import Corn from "./pages/corn";
+import Wheat from "./pages/wheat";
+import Rape from "./pages/rape";
+import Tomato from "./pages/tomato";
+import rapeGetComponent from "./pages/rape/getComponent";
+import tomatoGetCmp from "./pages/tomato/getComponent";
+import cornGetCmp from "./pages/corn/getComponent";
+import wheatGetCmp from "./pages/wheat/getComponent";
+import CornLackNInfo from "pages/corn/LackNInfo";
+import CornLackPInfo from "pages/corn/LackPInfo";
+import CornLackKInfo from "pages/corn/LackKInfo";
+import CornLackZnInfo from "pages/corn/LackZnInfo";
+import CornLackBInfo from "pages/corn/LackBInfo";
+
+import WheatLackKInfo from "pages/wheat/LackKInfo";
+import WheatLackNInfo from "pages/wheat/LackNInfo";
+import WheatLackPInfo from "pages/wheat/LackPInfo";
+import WheatLackZnInfo from "pages/wheat/LackZnInfo";
+import WheatLackBInfo from "pages/wheat/LackBInfo";
+import WheatLackFeInfo from "pages/wheat/LackFeInfo";
+import WheatLackGaInfo from "pages/wheat/LackGaInfo";
+import WheatLackMgInfo from "pages/wheat/LackMgInfo";
+
+import RapeLackKInfo from "pages/rape/LackKInfo";
+import RapeLackNInfo from "pages/rape/LackNInfo";
+import RapeLackPInfo from "pages/rape/LackPInfo";
+import RapeLackZnInfo from "pages/rape/LackZnInfo";
+import RapeLackBInfo from "pages/rape/LackBInfo";
+import RapeLackSInfo from "pages/rape/LackSInfo";
+import RapeLackGaInfo from "pages/rape/LackGaInfo";
+import RapeLackMgInfo from "pages/rape/LackMgInfo";
+
+import TomatoLackKInfo from "pages/tomato/LackKInfo";
+import TomatoLackNInfo from "pages/tomato/LackNInfo";
+import TomatoLackPInfo from "pages/tomato/LackPInfo";
+import TomatoLackZnInfo from "pages/tomato/LackZnInfo";
+import TomatoLackBInfo from "pages/tomato/LackBInfo";
+import TomatoLackSInfo from "pages/tomato/LackSInfo";
+import TomatoLackGaInfo from "pages/tomato/LackGaInfo";
+import TomatoLackMgInfo from "pages/tomato/LackMgInfo";
 
 const baseUrl = process.env.PUBLIC_URL;
 
-const config =  {
+const config = {
   rape: {
-    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'],
+    elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s"],
     getCmp: rapeGetComponent,
-    idxFormater: idx => [Math.floor(idx / 4), idx % 4], 
+    idxFormater: idx => [Math.floor(idx / 4), idx % 4]
   },
 
   tomato: {
-    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'],
-    getCmp: tomatoGetCmp,
+    elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s", "mu"],
+    getCmp: tomatoGetCmp
   },
 
   corn: {
-    elements: ['n', 'p', 'k', 'zn', 'b'],
-    getCmp: cornGetCmp,
+    elements: ["n", "p", "k", "zn", "b"],
+    getCmp: cornGetCmp
   },
 
   wheat: {
-    elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'],
-    getCmp: wheatGetCmp,
-  },
-}
+    elements: ["n", "p", "k", "ga", "mg", "zn", "b", "mn", "fe"],
+    getCmp: wheatGetCmp
+  }
+};
 const routes = Object.keys(config).reduce((acc, category) => {
   const curRoutes = [];
   const { elements, getCmp, idxFormater } = config[category];
@@ -43,27 +74,26 @@ const routes = Object.keys(config).reduce((acc, category) => {
     const Cmp = getCmp(idxFormater ? idxFormater(idx) : idx);
     curRoutes.push(
       <Route
-        key={category + '-' + element}
+        key={category + "-" + element}
         exact
         path={`${baseUrl}/${category}/lack-of-${element}`}
         component={Cmp}
       />
     );
-    
-    curRoutes.push(
-      <Route
-        key={category + '-' + element + '-info'}
-        exact
-        path={`${baseUrl}/${category}/lack-of-${element}/info`}
-        component={() => <InfoCmp category={category} element={element} />}
-      />
-    );        
+
+    // curRoutes.push(
+    //   <Route
+    //     key={category + '-' + element + '-info'}
+    //     exact
+    //     path={`${baseUrl}/${category}/lack-of-${element}/info`}
+    //     component={() => <InfoCmp category={category} element={element} />}
+    //   />
+    // );
   });
-  
+
   return acc.concat(curRoutes);
 }, []);
 
-
 function App() {
   return (
     <Router>
@@ -74,7 +104,138 @@ function App() {
         <Route exact path={baseUrl + "/rape"} component={Rape} />
         <Route exact path={baseUrl + "/wheat"} component={Wheat} />
         <Route exact path={baseUrl + "/tomato"} component={Tomato} />
-        { routes }
+        {routes}
+        <Route
+          key="corn-lack-of-n-info"
+          exact
+          path={`${baseUrl}/corn/lack-of-n/info`}
+          component={CornLackNInfo}
+        />
+        <Route
+          key="corn-lack-of-p-info"
+          exact
+          path={`${baseUrl}/corn/lack-of-p/info`}
+          component={CornLackPInfo}
+        />
+        <Route
+          key="corn-lack-of-k-info"
+          exact
+          path={`${baseUrl}/corn/lack-of-k/info`}
+          component={CornLackKInfo}
+        />
+        <Route
+          key="corn-lack-of-zn-info"
+          exact
+          path={`${baseUrl}/corn/lack-of-zn/info`}
+          component={CornLackZnInfo}
+        />
+        <Route
+          key="corn-lack-of-b-info"
+          exact
+          path={`${baseUrl}/corn/lack-of-b/info`}
+          component={CornLackBInfo}
+        />
+        {/* 小麦 */}
+        <Route
+          key="wheat-lack-of-n-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-n/info`}
+          component={WheatLackNInfo}
+        />
+        <Route
+          key="wheat-lack-of-p-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-p/info`}
+          component={WheatLackPInfo}
+        />
+        <Route
+          key="wheat-lack-of-k-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-k/info`}
+          component={WheatLackKInfo}
+        />
+        <Route
+          key="wheat-lack-of-zn-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-zn/info`}
+          component={WheatLackZnInfo}
+        />
+        <Route
+          key="wheat-lack-of-b-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-b/info`}
+          component={WheatLackBInfo}
+        />
+        <Route
+          key="wheat-lack-of-fe-info"
+          exact
+          path={`${baseUrl}/wheat/lack-of-fe/info`}
+          component={WheatLackFeInfo}
+        />
+        <Route
+          path={`${baseUrl}/wheat/lack-of-ga/info`}
+          component={WheatLackGaInfo}
+        />
+        <Route
+          path={`${baseUrl}/wheat/lack-of-mg/info`}
+          component={WheatLackMgInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-mg/info`}
+          component={RapeLackMgInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-n/info`}
+          component={RapeLackNInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-b/info`}
+          component={RapeLackBInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-s/info`}
+          component={RapeLackSInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-p/info`}
+          component={RapeLackPInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-ga/info`}
+          component={RapeLackGaInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-zn/info`}
+          component={RapeLackZnInfo}
+        />
+        <Route
+          path={`${baseUrl}/rape/lack-of-k/info`}
+          component={RapeLackKInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-zn/info`}
+          component={TomatoLackZnInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-b/info`}
+          component={TomatoLackBInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-s/info`}
+          component={TomatoLackSInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-k/info`}
+          component={TomatoLackKInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-n/info`}
+          component={TomatoLackNInfo}
+        />
+        <Route
+          path={`${baseUrl}/tomato/lack-of-ga/info`}
+          component={TomatoLackGaInfo}
+        />
       </Switch>
     </Router>
   );

src/components/BGWithNavBtn.js

-import React from 'react';
-import styled from 'styled-components';
-import { withRouter } from 'react-router-dom';
-import BackGround from './BackGround';
-import AnimatedBtn from './AnimatedBtn';
-import BackImg from '../仿真软件-植物营养元素缺素症切图/通用/返回.png';
-import HomeImg from '../仿真软件-植物营养元素缺素症切图/通用/主页.png';
-import { convertpx2vw } from '../config';
+import React from "react";
+import styled from "styled-components";
+import { withRouter } from "react-router-dom";
+import BackGround from "./BackGround";
+import AnimatedBtn from "./AnimatedBtn";
+import BackImg from "../仿真软件-植物营养元素缺素症切图/通用/返回.png";
+import HomeImg from "../仿真软件-植物营养元素缺素症切图/通用/主页.png";
+import { convertpx2vw } from "../config";
+import BackActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/返回按下.png";
+import HomeActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/主页按下.png";
 
 const baseUrl = process.env.PUBLIC_URL;
 
 const StyledNavBtn = styled(AnimatedBtn)`
-  bottom:  ${convertpx2vw(23)};
+  bottom: ${convertpx2vw(23)};
   position: absolute;
-  width:  ${convertpx2vw(90)};
+  width: ${convertpx2vw(90)};
   height: ${convertpx2vw(90)};
+  &:active {
+    background-image: ${props => `url(${props.activeBg})`};
+    transform: none;
+  }
 `;
 const StyledBackBtn = styled(StyledNavBtn)`
   right: ${convertpx2vw(149)};
@@ -26,17 +32,26 @@ const BackBtn = withRouter(({ history }) => {
     e.preventDefault();
     history.goBack();
   }
-  return <StyledBackBtn bg={BackImg} to="#" onClick={e => handleClick(e)} />
+  return (
+    <StyledBackBtn
+      bg={BackImg}
+      activeBg={BackActiveBg}
+      to="#"
+      onClick={e => handleClick(e)}
+    />
+  );
 });
 
-const HomeBtn = () => <StyledHomeBtn bg={HomeImg} to={baseUrl+'/'} />
+const HomeBtn = () => (
+  <StyledHomeBtn bg={HomeImg} activeBg={HomeActiveBg} to={baseUrl + "/"} />
+);
 
 export default function BGWithNavBtn({ className, children, bg }) {
   return (
-    <BackGround className={className} bg={bg} >
-      { children }
+    <BackGround className={className} bg={bg}>
+      {children}
       <BackBtn />
       <HomeBtn />
     </BackGround>
   );
-}
\ No newline at end of file
+}

src/layouts/CheckLack.js

-import React, { useState, useEffect, useRef } from 'react';
-import { withRouter } from 'react-router-dom';
-import styled from 'styled-components';
-import BGWithNavBtn from '../components/BGWithNavBtn';
-import AnimatedBtn from '../components/AnimatedBtn';
-import WrongImg from '../仿真软件-植物营养元素缺素症切图/通用/×.png';
-import CorrectImg from '../仿真软件-植物营养元素缺素症切图/通用/√.png';
-import { convertpx2vw } from '../config';
+import React, { useState, useEffect, useRef } from "react";
+import { withRouter } from "react-router-dom";
+import styled from "styled-components";
+import BGWithNavBtn from "../components/BGWithNavBtn";
+import AnimatedBtn from "../components/AnimatedBtn";
+import WrongImg from "../仿真软件-植物营养元素缺素症切图/通用/×.png";
+import CorrectImg from "../仿真软件-植物营养元素缺素症切图/通用/√.png";
+import { convertpx2vw } from "../config";
 
 const Container = styled(BGWithNavBtn)`
   display: block;
@@ -22,9 +22,13 @@ const StyledBtn = styled(AnimatedBtn)`
     margin-left: ${props => convertpx2vw(props.leftgap)};
   }
   position: relative;
+  background-position: left top;
   &:active {
-    /* background-image: url(${props => props.activeBg});
-    transform: none; */
+    background-image: url(${props => props.activeBg});
+    transform: none;
+    background-size: ${props =>
+      convertpx2vw(props.activeW) + ", " + convertpx2vw(props.activeH)};
+    background-position: left top;
   }
 `;
 const Row = styled.div`
@@ -38,19 +42,29 @@ const MarkImg = styled.img`
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  visibility: ${props => props.show ? 'visible' : 'hidden'};
+  visibility: ${props => (props.show ? "visible" : "hidden")};
 `;
 const WrongMark = styled(MarkImg)`
   width: ${convertpx2vw(35)};
   height: ${convertpx2vw(35)};
 `;
 const CorrectMark = styled(MarkImg)`
-  width: ${convertpx2vw(51*0.9)};
-  height: ${convertpx2vw(43*0.9)};
+  width: ${convertpx2vw(51 * 0.9)};
+  height: ${convertpx2vw(43 * 0.9)};
 `;
 
-
-const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
+const CheckBtn = ({
+  w,
+  h,
+  activeW,
+  activeH,
+  leftGap,
+  bg,
+  activeBg,
+  to,
+  correct,
+  onClick
+}) => {
   const [showCheckMark, setShowCheckMark] = useState(false);
 
   function handleClick(e) {
@@ -60,23 +74,26 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
   }
 
   return (
-      <StyledBtn
-        w={w}
-        h={h}
-        leftgap={leftGap}
-        bg={bg}
-        activeBg={activeBg}
-        to={to}
-        onClick={e => handleClick(e)}
-      >
-        {
-          correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
-        }
-      </StyledBtn>
+    <StyledBtn
+      w={w}
+      h={h}
+      activeW={activeW}
+      activeH={activeH}
+      leftgap={leftGap}
+      bg={bg}
+      activeBg={activeBg}
+      to={to}
+      onClick={e => handleClick(e)}
+    >
+      {correct ? (
+        <CorrectMark show={showCheckMark} src={CorrectImg} />
+      ) : (
+        <WrongMark show={showCheckMark} src={WrongImg} />
+      )}
+    </StyledBtn>
   );
 };
 
- 
 /**
  *  Check Lack layout
  * config = {
@@ -84,8 +101,8 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
  *   illustrate: {
  *    w: number,
  *    h: number,
- *    src: 
- * 
+ *    src:
+ *
  *  }
  *   btns: {
  *     w,
@@ -98,7 +115,7 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
  *         {bg, to},
  *       ]
  *     ]
- *   } 
+ *   }
  * }
  */
 const Illustrate = styled.img`
@@ -108,7 +125,6 @@ const Illustrate = styled.img`
 `;
 
 function CheckLack({ config, history }) {
-
   const timerRef = useRef(null);
 
   function handleClick(to) {
@@ -125,37 +141,41 @@ function CheckLack({ config, history }) {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
-    }
-  }, [])
+    };
+  }, []);
 
   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
-            key={idx}
-            marginTop={idx === 0 ? config.btns.marginTop : config.btns.topGap}
-          >
-            {
-              row.map((ele, i) => (
-                <CheckBtn
-                  key={i}
-                  w={config.btns.w}
-                  h={config.btns.h}
-                  leftGap={config.btns.leftGap}
-                  bg={ele.bg}
-                  activeBg={ele.activeBg}
-                  correct={ele.correct}
-                  to={ele.to}
-                  onClick={() => handleClick(ele.to)}
-                />
-              ))
-            }
-          </Row>
-        ))
-      }
+      <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
+          key={idx}
+          marginTop={idx === 0 ? config.btns.marginTop : config.btns.topGap}
+        >
+          {row.map((ele, i) => (
+            <CheckBtn
+              key={i}
+              w={config.btns.w}
+              h={config.btns.h}
+              activeW={config.btns.activeW}
+              activeH={config.btns.activeH}
+              leftGap={config.btns.leftGap}
+              bg={ele.bg}
+              activeBg={ele.activeBg}
+              correct={ele.correct}
+              to={ele.to}
+              onClick={() => handleClick(ele.to)}
+            />
+          ))}
+        </Row>
+      ))}
     </Container>
   );
 }
-export default withRouter(CheckLack);
\ No newline at end of file
+export default withRouter(CheckLack);

src/pages/Home.js

-import React from 'react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-import BackGround from '../components/BackGround';
-import CornImg from '../仿真软件-植物营养元素缺素症切图/首页/玉米.png';
-import WheatImg from '../仿真软件-植物营养元素缺素症切图/首页/小麦.png';
-import RapeImg from '../仿真软件-植物营养元素缺素症切图/首页/油菜花.png';
-import tomatoImg from '../仿真软件-植物营养元素缺素症切图/首页/西红柿.png';
-import AnimatedBtn from '../components/AnimatedBtn';
-import bg from '../仿真软件-植物营养元素缺素症切图/首页/标题.png';
-
-import { convertpx2vw } from '../config';
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import bg from "../仿真软件-植物营养元素缺素症切图/首页/标题.png";
 
 const baseUrl = process.env.PUBLIC_URL;
 
@@ -22,9 +14,6 @@ const Container = styled(Link)`
   background-size: cover;
 `;
 
-
 export default function Home() {
-  return (
-    <Container to={baseUrl+ '/sub-home'} />
-  );
-}
\ No newline at end of file
+  return <Container to={baseUrl + "/sub-home"} />;
+}

src/pages/corn/LackBInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/玉米缺硼。嫩叶叶 脉剪出现不规则白色斑 点，能合成白色条纹。 节间短，雄穗难抽出， 不能吐丝。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/3.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(398)};
+  height: ${convertpx2vw(303)};
+
+  :not(:last-child) {
+    margin-right: 20px;
+  }
+`;
+
+export default function LackBInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺硼" />
+          <StyledImg src={img_2} alt="缺硼" />
+          <StyledImg src={img_3} alt="缺硼" />
+        </>
+      }
+    />
+  );
+}

src/pages/corn/LackInfoPage.js

+import React from "react";
+import styled from "styled-components";
+import BGWithNavBtn from "components/BGWithNavBtn";
+import BgImg from "仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png";
+import { convertpx2vw } from "config.js";
+
+const Container = styled(BGWithNavBtn)`
+  display: block;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
+`;
+
+export default function LackInfoPage({
+  textImg,
+  rightContent,
+  translateY = 0
+}) {
+  return (
+    <Container bg={BgImg}>
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
+          width: "100%",
+          textAlign: "center"
+        }}
+      >
+        <img
+          style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
+          src={textImg}
+          alt="缺氮"
+        />
+        <div style={{ display: "inline-block", verticalAlign: "middle" }}>
+          {rightContent}
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/corn/LackKInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/玉米缺钾，叶脉间出 现黄白相间的退绿条纹， 下部老叶片尖端和边缘呈 紫红色；严重时边缘、叶 尖枯死呈倒“V”字型， 俗.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(575)};
+  height: ${convertpx2vw(417)};
+
+  :nth-of-type(1) {
+    margin-right: 20px;
+  }
+`;
+
+export default function LackNInfo({ config, history }) {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/corn/LackNInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/玉米缺氮初期呈黄绿 色，旺盛期呈淡绿色至黄 色。严重时下部叶片干枯， 由叶尖开始逐渐达到中脉， 最后全部干枯。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/3.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(383)};
+  height: ${convertpx2vw(605)};
+  :not(:first-child) {
+    margin-left: 20px;
+  }
+`;
+
+export default function LackNInfo({ config, history }) {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺氮" />
+          <StyledImg src={img_2} alt="缺氮" />
+          <StyledImg src={img_3} alt="缺氮" />
+        </>
+      }
+    />
+  );
+}

src/pages/corn/LackPInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/玉米缺磷，矮小瘦弱、直 立、分枝少、叶小易脱落；叶 色暗绿或灰绿色，叶缘及叶柄 长出现紫红色。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo({ config, history }) {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/corn/LackZnInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/玉米缺锌，幼叶脉间失绿， 呈淡黄色或黄白色，叶片基部 发白，俗称“白苗”病。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(461)};
+  height: ${convertpx2vw(628)};
+
+  :nth-of-type(1) {
+    margin-right: 20px;
+  }
+`;
+
+export default function LackNInfo({ config, history }) {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺锌" />
+          <StyledImg src={img_2} alt="缺锌" />
+        </>
+      }
+    />
+  );
+}

src/pages/corn/getComponent.js

-import React from 'react';
-import CheckLack from '../../layouts/CheckLack';
-import { withRouter } from 'react-router-dom';
+import React from "react";
+import CheckLack from "../../layouts/CheckLack";
+import { withRouter } from "react-router-dom";
 
 // 症状图片
-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 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'
-import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺磷.png'
-import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png'
-import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png'
+import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png";
+import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png";
+import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺磷.png";
+import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png";
+import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png";
 
-import LackNBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png'
-import LackBBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png'
-import LackPBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png'
-import LackKBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺钾按下.png'
-import LackZnBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺锌按下.png'
+import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png";
+import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png";
+import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png";
+import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺钾按下.png";
+import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺锌按下.png";
 
-import Bg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
+import Bg from "../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png";
 
 const baseUrl = process.env.PUBLIC_URL;
 
-const illustrateSrcs = [
-  LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc
-]
+const illustrateSrcs = [LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc];
 
-export default function (idx) {
+export default function(idx) {
   const Component = withRouter(({ match }) => {
     const config = {
       bg: Bg,
@@ -37,24 +35,32 @@ export default function (idx) {
         w: 1021,
         h: 501,
         src: illustrateSrcs[idx],
-        top: 60,
+        top: 60
       },
       btns: {
         w: 218,
         h: 218,
+        activeW: 207,
+        activeH: 207,
         marginTop: 60,
         topGap: 0,
         leftGap: 80,
         rows: [
           [
-            { bg: LackNBtnBg, activeBg: LackNBtnBgActive }, { bg: LackPBtnBg, activeBg: LackPBtnBgActive }, { bg: LackKBtnBg, activeBg: LackKBtnBgActive }, { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive }, { bg: LackBBtnBg, activeBg: LackBBtnBgActive }
-          ],
+            { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
+            { bg: LackPBtnBg, activeBg: LackPBtnBgActive },
+            { bg: LackKBtnBg, activeBg: LackKBtnBgActive },
+            { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
+            { bg: LackBBtnBg, activeBg: LackBBtnBgActive }
+          ]
         ]
       }
-    }
-    const cornList = ['n', 'p', 'k', 'zn', 'b'];
+    };
+    const cornList = ["n", "p", "k", "zn", "b"];
     config.btns.rows[0][idx].correct = true;
-    config.btns.rows[0].forEach((ele, i) => ele.to = `${baseUrl}/corn/lack-of-${cornList[i]}/info`);
+    config.btns.rows[0].forEach(
+      (ele, i) => (ele.to = `${baseUrl}/corn/lack-of-${cornList[i]}/info`)
+    );
     return <CheckLack config={config} />;
   });
   return Component;

src/pages/rape/LackBInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/苗期缺硼，幼苗叶色 暗绿、叶片皱缩，后期出 现紫红色斑；抽薹时叶缘 变为红色，叶片厚而脆， 出现茎裂现象；花期缺硼， .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackGaInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/小麦缺钙，叶 脉间黄化，近生长 点叶片、叶缘枯死， 叶尖常弯曲呈钩状 新叶枯萎卷曲。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.61-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.61-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(604)};
+  height: ${convertpx2vw(614)};
+  :first-child {
+    margin-right: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackInfoPage.js

+import React from "react";
+import styled from "styled-components";
+import BGWithNavBtn from "components/BGWithNavBtn";
+import BgImg from "仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
+import { convertpx2vw } from "config.js";
+
+const Container = styled(BGWithNavBtn)`
+  display: block;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
+`;
+
+export default function LackInfoPage({
+  textImg,
+  rightContent,
+  translateY = 0
+}) {
+  return (
+    <Container bg={BgImg}>
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
+          width: "100%",
+          textAlign: "center"
+        }}
+      >
+        <img
+          style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
+          src={textImg}
+          alt="缺氮"
+        />
+        <div
+          style={{
+            display: "inline-block",
+            verticalAlign: "middle",
+            position: "relative"
+          }}
+        >
+          {rightContent}
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/rape/LackKInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/缺锌苗期缺锌叶片 失绿，心叶白化，中后 期缺锌植株矮小，叶小 而脆，节间缩短，植株 矮化丛生，根系变黄， 空秕粒多，千.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/3.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(335)};
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <div style={{ display: "inline-block" }}>
+            <StyledImg src={img_1} alt="缺锌" />
+            <br />
+            <StyledImg
+              src={img_2}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              marginLeft: convertpx2vw(20),
+              width: convertpx2vw(574),
+              height: convertpx2vw(335)
+            }}
+          >
+            <StyledImg
+              src={img_3}
+              alt="缺锌"
+              style={{
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                transform: "translateY(-50%)"
+              }}
+            />
+          </div>
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackMgInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackNInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/小麦缺氮，生长缓 慢，分蘖少而弱，叶片 窄小直立，叶色淡黄绿 色，老叶叶尖干枯，茎 有时呈淡紫色，根数少 而短。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.21-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.21-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(417)};
+  :first-child {
+    margin-bottom: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺氮" />
+          <br />
+          <StyledImg src={img_2} alt="缺氮" />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackPInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/缺磷时，植株矮小，生长 缓慢，出叶延迟，叶面积小， 叶色暗绿，缺乏光泽，边缘出 现紫红色斑点或斑块，叶柄和 叶背面的叶.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(337)};
+  height: ${convertpx2vw(415)};
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-left: ${convertpx2vw(36)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <img
+            src={img_1}
+            style={{
+              width: convertpx2vw(1083),
+              height: convertpx2vw(311),
+              marginBottom: convertpx2vw(30)
+            }}
+            alt="缺磷"
+          />
+          <br />
+          <StyledImg src={img_2} alt="缺磷" />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackSInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/油菜缺硫，叶片 呈杯状，内卷，叶背 面呈红色。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(554)};
+  height: ${convertpx2vw(392)};
+  :first-child {
+    margin-right: ${convertpx2vw(20)};
+  }
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/rape/LackZnInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.81-assets/植株矮小，节间缩短。叶片小略 增厚，叶背出现紫红色花青素，严重 时先从叶缘开始褪色，变为灰白色， 中、下部叶片白化严重.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.81-assets/1.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(987)};
+  height: ${convertpx2vw(717)};
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={<StyledImg src={img_1} alt="缺锌" />}
+    />
+  );
+}

src/pages/rape/getComponent.js

-import React from 'react';
-import CheckLack from '../../layouts/CheckLack';
-import { withRouter } from 'react-router-dom';
+import React from "react";
+import CheckLack from "../../layouts/CheckLack";
+import { withRouter } from "react-router-dom";
 
-import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.1.png'
-import LackNBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.2.png'
-import LackBBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.3.png'
-import LackSBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.4.png'
-import LackPBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.5.png'
-import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.6.png'
-import LackKBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.7.png'
-import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.8.png'
+import LackMgBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.1.png";
+import LackNBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.2.png";
+import LackBBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.3.png";
+import LackSBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.4.png";
+import LackPBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.5.png";
+import LackGaBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.6.png";
+import LackKBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.7.png";
+import LackZnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.8.png";
 
-import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺氮.png'
-import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硫.png'
-import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硼.png'
-import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺磷.png'
-import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钙.png'
-import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png'
-import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png'
-import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png'
-import bg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
+import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺氮.png";
+import LackSBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺硫.png";
+import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺硼.png";
+import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺磷.png";
+import LackGaBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺钙.png";
+import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png";
+import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png";
+import LackMgBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png";
+
+import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺氮按下.png";
+import LackSBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺硫按下.png";
+import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺硼按下.png";
+import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺磷按下.png";
+import LackGaBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺钙按下.png";
+import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺钾按下.png";
+import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺锌按下.png";
+import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺镁按下.png";
+
+import bg from "../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
 
 const baseUrl = process.env.PUBLIC_URL;
 
 const bgs = [
-  [
-    LackNBg, LackPBg, LackKBg, LackGaBg
-  ],
-  [
-    LackMgBg, LackZnBg, LackBBg, LackSBg
-  ]
-]
+  [LackNBg, LackPBg, LackKBg, LackGaBg],
+  [LackMgBg, LackZnBg, LackBBg, LackSBg]
+];
 
-export default function (lackElement) {
+export default function(lackElement) {
   const Component = withRouter(({ match }) => {
     const config = {
       bg,
@@ -40,32 +46,37 @@ export default function (lackElement) {
         w: 856,
         h: 468,
         src: bgs[lackElement[0]][lackElement[1]],
-        top: 40,
+        top: 40
       },
       btns: {
         w: 170,
         h: 170,
+        activeW: 159,
+        activeH: 159,
         marginTop: 35,
         topGap: 40,
         leftGap: 140,
         rows: [
           [
-            { bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg }
+            { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
+            { bg: LackPBtnBg, activeBg: LackPBtnBgActive },
+            { bg: LackKBtnBg, activeBg: LackKBtnBgActive },
+            { bg: LackGaBtnBg, activeBg: LackGaBtnBgActive }
           ],
           [
-            { bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg }
+            { bg: LackMgBtnBg, activeBg: LackMgBtnBgActive },
+            { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
+            { bg: LackBBtnBg, activeBg: LackBBtnBgActive },
+            { bg: LackSBtnBg, activeBg: LackSBtnBgActive }
           ]
         ]
       }
-    }
-    const rapeList = [
-      ['n', 'p', 'k', 'ga',],
-      ['mg', 'zn', 'b', 's']
-    ];
+    };
+    const rapeList = [["n", "p", "k", "ga"], ["mg", "zn", "b", "s"]];
     config.btns.rows[lackElement[0]][lackElement[1]].correct = true;
     config.btns.rows.forEach((r, i) => {
       r.forEach((ele, j) => {
-        ele.to = `${baseUrl}/rape/lack-of-${rapeList[i][j]}/info`
+        ele.to = `${baseUrl}/rape/lack-of-${rapeList[i][j]}/info`;
       });
     });
     return <CheckLack config={config} />;

src/pages/tomato/LackBInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/番茄缺硼，叶缘黄化， 嫩叶边缘黄化，生长点枯 死，植株萎缩，果实表面 龟裂。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/4.png";
+import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/5.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(443)};
+  height: ${convertpx2vw(301)};
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <div style={{ display: "inline-block" }}>
+            <StyledImg src={img_1} alt="缺锌" />
+            <br />
+            <StyledImg
+              src={img_2}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+            <br />
+            <StyledImg
+              src={img_3}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              marginLeft: convertpx2vw(20),
+              verticalAlign: "top"
+            }}
+          >
+            <StyledImg
+              src={img_4}
+              alt="缺锌"
+              style={{ marginTop: convertpx2vw(150.5) }}
+            />
+            <br />
+            <StyledImg
+              src={img_5}
+              alt="缺锌"
+              style={{ marginTop: convertpx2vw(20) }}
+            />
+          </div>
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackGaInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/番茄缺钙，植株 矮小、瘦弱，叶片下 垂，生长点坏死，上 部叶片黄化，叶缘出 现枯死，引发脐腐病。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/4.png";
+import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/5.png";
+import img_6 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/6.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(481)};
+  height: ${convertpx2vw(288)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(n + 3) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+          <br />
+          <StyledImg src={img_5} alt="缺磷" />
+          <StyledImg src={img_6} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackInfoPage.js

+import React from "react";
+import styled from "styled-components";
+import BGWithNavBtn from "components/BGWithNavBtn";
+import BgImg from "仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
+import { convertpx2vw } from "config.js";
+
+const Container = styled(BGWithNavBtn)`
+  display: block;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
+`;
+
+export default function LackInfoPage({
+  textImg,
+  rightContent,
+  translateY = 0
+}) {
+  return (
+    <Container bg={BgImg}>
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
+          width: "100%",
+          textAlign: "center"
+        }}
+      >
+        <img
+          style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
+          src={textImg}
+          alt="缺氮"
+        />
+        <div
+          style={{
+            display: "inline-block",
+            verticalAlign: "middle",
+            position: "relative"
+          }}
+        >
+          {rightContent}
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/tomato/LackKInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/番茄缺硼，叶缘黄化， 嫩叶边缘黄化，生长点枯 死，植株萎缩，果实表面 龟裂。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/4.png";
+import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/5.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(443)};
+  height: ${convertpx2vw(301)};
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <div style={{ display: "inline-block" }}>
+            <StyledImg src={img_1} alt="缺锌" />
+            <br />
+            <StyledImg
+              src={img_2}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+            <br />
+            <StyledImg
+              src={img_3}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              marginLeft: convertpx2vw(20),
+              verticalAlign: "top"
+            }}
+          >
+            <StyledImg
+              src={img_4}
+              alt="缺锌"
+              style={{ marginTop: convertpx2vw(150.5) }}
+            />
+            <br />
+            <StyledImg
+              src={img_5}
+              alt="缺锌"
+              style={{ marginTop: convertpx2vw(20) }}
+            />
+          </div>
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackMgInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackNInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/植株矮小， 茎细长，叶小，叶瘦长， 淡绿色，叶片表现为脉间 失绿，下部叶片先失绿并 逐渐向上部扩展，严重时 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackPInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/缺磷时，植株矮小，生长 缓慢，出叶延迟，叶面积小， 叶色暗绿，缺乏光泽，边缘出 现紫红色斑点或斑块，叶柄和 叶背面的叶.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(337)};
+  height: ${convertpx2vw(415)};
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-left: ${convertpx2vw(36)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <img
+            src={img_1}
+            style={{
+              width: convertpx2vw(1083),
+              height: convertpx2vw(311),
+              marginBottom: convertpx2vw(30)
+            }}
+            alt="缺磷"
+          />
+          <br />
+          <StyledImg src={img_2} alt="缺磷" />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackSInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/番茄缺硫，叶色呈 渐变状，叶色变黄，叶 背会变紫。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/LackZnInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/番茄缺锌，叶片变小， 叶片边缘出现褐色坏死斑 点，叶缘黄化，叶肉变褐。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/3.png";
+import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/4.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(544)};
+  height: ${convertpx2vw(389)};
+  :nth-of-type(2n + 1) {
+    margin-right: ${convertpx2vw(20)};
+  }
+  :nth-of-type(3),
+  :nth-of-type(4) {
+    margin-top: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+          <StyledImg src={img_3} alt="缺磷" />
+          <StyledImg src={img_4} alt="缺磷" />
+        </>
+      }
+    />
+  );
+}

src/pages/tomato/getComponent.js

-import React from 'react';
-import CheckLack from '../../layouts/CheckLack';
-import { withRouter } from 'react-router-dom';
+import React from "react";
+import CheckLack from "../../layouts/CheckLack";
+import { withRouter } from "react-router-dom";
 
-import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.1.png'
-import LackBBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.2.png'
-import LackSBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.3.png'
-import LackKBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.4.png'
-import LackNBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.5.png'
-import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.6.png'
-import LackPBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.7.png'
-import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.8.png'
-import LackMuBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.9.png'
+import LackZnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.1.png";
+import LackBBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.2.png";
+import LackSBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.3.png";
+import LackKBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.4.png";
+import LackNBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.5.png";
+import LackGaBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.6.png";
+import LackPBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.7.png";
+import LackMgBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.8.png";
+import LackMuBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.9.png";
 
-import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png'
-import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png'
-import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png'
-import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png'
-import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png'
-import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png'
-import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png'
-import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png'
-import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png'
-import bg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
+import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png";
+import LackSBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png";
+import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png";
+import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png";
+import LackGaBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png";
+import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png";
+import LackMuBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png";
+import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png";
+import LackMgBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png";
+
+import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺氮按下.png";
+import LackSBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺硫按下.png";
+import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺硼按下.png";
+import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺磷按下.png";
+import LackGaBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钙按下.png";
+import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钼按下.png";
+import LackMuBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钾按下.png";
+import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺锌按下.png";
+import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺镁按下.png";
+
+import bg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png";
 
 const baseUrl = process.env.PUBLIC_URL;
 
 const bgs = [
-  LackNBg, LackPBg, LackKBg, LackGaBg, LackMgBg, LackZnBg, LackBBg, LackSBg, LackMuBg,
+  LackNBg,
+  LackPBg,
+  LackKBg,
+  LackGaBg,
+  LackMgBg,
+  LackZnBg,
+  LackBBg,
+  LackSBg,
+  LackMuBg
 ];
 
 export default function(idx) {
@@ -37,25 +56,35 @@ export default function(idx) {
         w: 850,
         h: 457,
         src: bgs[idx],
-        top: 60,
+        top: 60
       },
       btns: {
         w: 132,
         h: 297,
+        activeW: 121,
+        activeH: 286,
         marginTop: 55,
         topGap: 0,
         leftGap: 48,
         rows: [
           [
-            { bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg }, { bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg }, { bg: LackMuBtnBg },
-          ],
+            { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
+            { bg: LackPBtnBg, activeBg: LackPBtnBgActive },
+            { bg: LackKBtnBg, activeBg: LackKBtnBgActive },
+            { bg: LackGaBtnBg, activeBg: LackGaBtnBgActive },
+            { bg: LackMgBtnBg, activeBg: LackMgBtnBgActive },
+            { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
+            { bg: LackBBtnBg, activeBg: LackBBtnBgActive },
+            { bg: LackSBtnBg, activeBg: LackSBtnBgActive },
+            { bg: LackMuBtnBg, activeBg: LackMuBtnBgActive }
+          ]
         ]
       }
-    }
+    };
     config.btns.rows[0][idx].correct = true;
-    const tomatoList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'];
+    const tomatoList = ["n", "p", "k", "ga", "mg", "zn", "b", "s", "mu"];
     config.btns.rows[0].forEach((ele, i) => {
-      ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`
+      ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`;
     });
     return <CheckLack config={config} />;
   });

src/pages/wheat/LackBInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/缺硼茎叶肥厚、弯曲， 叶鞘呈紫褐色，生育期推 迟，花粉粒不萌发，造成 花而不实，影响结实率， 缺硼严重时会出现空穗。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/3.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(357)};
+  height: ${convertpx2vw(532)};
+  :not(:last-child) {
+    margin-right: 20px;
+  }
+`;
+
+export default function LackBInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺硼" />
+          <StyledImg src={img_2} alt="缺硼" />
+          <StyledImg src={img_3} alt="缺硼" />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackFeInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/缺磷麦苗生长缓 慢，植株矮小，叶片 呈现暗绿色，无光泽， 严重缺磷时叶片、叶 鞘发紫，次生根少而 弱，分蘖少，成穗率 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.71-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.71-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(586)};
+  height: ${convertpx2vw(425)};
+  :first-child {
+    margin-right: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackGaInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/小麦缺钙，叶 脉间黄化，近生长 点叶片、叶缘枯死， 叶尖常弯曲呈钩状 新叶枯萎卷曲。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(417)};
+  :first-child {
+    margin-right: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackInfoPage.js

+import React from "react";
+import styled from "styled-components";
+import BGWithNavBtn from "components/BGWithNavBtn";
+import BgImg from "仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png";
+import { convertpx2vw } from "config.js";
+
+const Container = styled(BGWithNavBtn)`
+  display: block;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: center;
+`;
+
+export default function LackInfoPage({
+  textImg,
+  rightContent,
+  translateY = 0
+}) {
+  return (
+    <Container bg={BgImg}>
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
+          width: "100%",
+          textAlign: "center"
+        }}
+      >
+        <img
+          style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
+          src={textImg}
+          alt="缺氮"
+        />
+        <div
+          style={{
+            display: "inline-block",
+            verticalAlign: "middle",
+            position: "relative"
+          }}
+        >
+          {rightContent}
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/wheat/LackKInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/缺钾麦苗下部老叶的叶尖、叶缘 先变黄，而后逐渐变褐色，远看似火 烧状，严重时整叶干枯，茎秆细小柔 弱，根系发育不良，易.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(500)};
+  height: ${convertpx2vw(474)};
+
+  :nth-of-type(1) {
+    margin-right: 20px;
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺钾" />
+          <StyledImg src={img_2} alt="缺钾" />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackMgInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(417)};
+  :first-child {
+    margin-right: ${convertpx2vw(20)};
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackNInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/小麦缺氮，生长缓 慢，分蘖少而弱，叶片 窄小直立，叶色淡黄绿 色，老叶叶尖干枯，茎 有时呈淡紫色，根数少 而短。.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(417)};
+  :not(:first-child) {
+    margin-left: 20px;
+  }
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺氮" />
+          <StyledImg src={img_2} alt="缺氮" />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackPInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/缺磷麦苗生长缓 慢，植株矮小，叶片 呈现暗绿色，无光泽， 严重缺磷时叶片、叶 鞘发紫，次生根少而 弱，分蘖少，成穗率 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/2.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(417)};
+`;
+
+export default function LackNInfo() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      translateY={-50}
+      rightContent={
+        <>
+          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg src={img_2} alt="缺磷" />
+          <br />
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/LackZnInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/缺锌苗期缺锌叶片 失绿，心叶白化，中后 期缺锌植株矮小，叶小 而脆，节间缩短，植株 矮化丛生，根系变黄， 空秕粒多，千.png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/2.png";
+import img_3 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/3.png";
+import { convertpx2vw } from "config.js";
+import LackInfoPage from "./LackInfoPage";
+
+const StyledImg = styled.img`
+  width: ${convertpx2vw(574)};
+  height: ${convertpx2vw(335)};
+`;
+
+export default function() {
+  return (
+    <LackInfoPage
+      textImg={textImg}
+      rightContent={
+        <>
+          <div style={{ display: "inline-block" }}>
+            <StyledImg src={img_1} alt="缺锌" />
+            <br />
+            <StyledImg
+              src={img_2}
+              style={{ marginTop: convertpx2vw(20) }}
+              alt="缺锌"
+            />
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              marginLeft: convertpx2vw(20),
+              width: convertpx2vw(574),
+              height: convertpx2vw(335)
+            }}
+          >
+            <StyledImg
+              src={img_3}
+              alt="缺锌"
+              style={{
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                transform: "translateY(-50%)"
+              }}
+            />
+          </div>
+        </>
+      }
+    />
+  );
+}

src/pages/wheat/getComponent.js

-import React from 'react';
-import CheckLack from '../../layouts/CheckLack';
-import { withRouter } from 'react-router-dom';
+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';
-import P_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺磷.png';
-import Ga_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钙.png';
-import K_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钾.png';
-import Fe_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺铁.png';
-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';
+import N_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺氮.png";
+import B_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺硼.png";
+import P_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺磷.png";
+import Ga_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺钙.png";
+import K_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺钾.png";
+import Fe_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺铁.png";
+import Zn_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺锌.png";
+import Mn_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺锰.png";
+import Mg_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺镁.png";
 
-const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ]
+import N_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺氮按下.png";
+import B_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺硼按下.png";
+import P_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺磷按下.png";
+import Ga_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺钙按下.png";
+import K_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺钾按下.png";
+import Fe_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺铁按下.png";
+import Zn_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺锌按下.png";
+import Mn_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺锰按下.png";
+import Mg_Btn_active_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];
 
 const baseUrl = process.env.PUBLIC_URL;
 
-export default function (idx) {
+export default function(idx) {
   const Component = withRouter(({ match }) => {
-    const to = match.url+'/info'
+    const to = match.url + "/info";
     const config = {
       bg,
       illustrate: {
         w: 1030,
         h: 501,
         src: bgs[idx],
-        top: 40,
+        top: 40
       },
       btns: {
         w: 132,
         h: 297,
+        activeW: 121,
+        activeH: 286,
         marginTop: 35,
         topGap: 0,
         leftGap: 48,
         rows: [
           [
-            { bg: N_Btn_Bg, to }, { bg: P_Btn_Bg, to }, { bg: K_Btn_Bg, to }, { bg: Ga_Btn_Bg, to }, { bg: Mg_Btn_Bg, to }, { bg: Zn_Btn_Bg, to }, { bg: B_Btn_Bg, to }, { bg: Mn_Btn_Bg, to }, { bg: Fe_Btn_Bg, to },
-          ],
+            { bg: N_Btn_Bg, to, activeBg: N_Btn_active_Bg },
+            { bg: P_Btn_Bg, to, activeBg: P_Btn_active_Bg },
+            { bg: K_Btn_Bg, to, activeBg: K_Btn_active_Bg },
+            { bg: Ga_Btn_Bg, to, activeBg: Ga_Btn_active_Bg },
+            { bg: Mg_Btn_Bg, to, activeBg: Mg_Btn_active_Bg },
+            { bg: Zn_Btn_Bg, to, activeBg: Zn_Btn_active_Bg },
+            { bg: B_Btn_Bg, to, activeBg: B_Btn_active_Bg },
+            { bg: Mn_Btn_Bg, to, activeBg: Mn_Btn_active_Bg },
+            { bg: Fe_Btn_Bg, to, activeBg: Fe_Btn_active_Bg }
+          ]
         ]
       }
-    }
+    };
     config.btns.rows[0][idx].correct = true;
-    const wheatList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'];
+    const wheatList = ["n", "p", "k", "ga", "mg", "zn", "b", "mn", "fe"];
     config.btns.rows[0].forEach((ele, i) => {
-      ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`
+      ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`;
     });
     return <CheckLack config={config} />;
   });