添加文字说明图片

src/App.js

@@ -24,6 +24,7 @@ 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 WheatLackMnInfo from "pages/wheat/LackMnInfo";
 
 import RapeLackKInfo from "pages/rape/LackKInfo";
 import RapeLackNInfo from "pages/rape/LackNInfo";
@@ -162,6 +163,12 @@ function App() {
           path={`/wheat/lack-of-fe/info`}
           component={WheatLackFeInfo}
         />
+        <Route
+          key="wheat-lack-of-fe-info"
+          exact
+          path={`/wheat/lack-of-mn/info`}
+          component={WheatLackMnInfo}
+        />
         <Route path={`/wheat/lack-of-ga/info`} component={WheatLackGaInfo} />
         <Route path={`/wheat/lack-of-mg/info`} component={WheatLackMgInfo} />
         <Route path={`/rape/lack-of-mg/info`} component={RapeLackMgInfo} />

src/pages/rape/LackGaInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/小麦缺钙，叶 脉间黄化，近生长 点叶片、叶缘枯死， 叶尖常弯曲呈钩状 新叶枯萎卷曲。.png";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.61-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";

src/pages/rape/LackKInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/缺锌苗期缺锌叶片 失绿，心叶白化，中后 期缺锌植株矮小，叶小 而脆，节间缩短，植株 矮化丛生，根系变黄， 空秕粒多，千.png";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-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";

src/pages/rape/LackMgInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-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";

src/pages/rape/LackNInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/小麦缺氮，生长缓 慢，分蘖少而弱，叶片 窄小直立，叶色淡黄绿 色，老叶叶尖干枯，茎 有时呈淡紫色，根数少 而短。.png";
+import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.21-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";

src/pages/tomato/LackKInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/番茄缺硼，叶缘黄化， 嫩叶边缘黄化，生长点枯 死，植株萎缩，果实表面 龟裂。.png";
+import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-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";

src/pages/wheat/LackFeInfo.js

 import React from "react";
 import styled from "styled-components";
-import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/缺磷麦苗生长缓 慢，植株矮小，叶片 呈现暗绿色，无光泽， 严重缺磷时叶片、叶 鞘发紫，次生根少而 弱，分蘖少，成穗率 .png";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.71-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";

src/pages/wheat/LackInfoPage.js

@@ -15,7 +15,8 @@ const Container = styled(BGWithNavBtn)`
 export default function LackInfoPage({
   textImg,
   rightContent,
-  translateY = 0
+  translateY = 0,
+  textH
 }) {
   return (
     <Container bg={BgImg}>
@@ -29,7 +30,11 @@ export default function LackInfoPage({
         }}
       >
         <img
-          style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
+          style={{
+            verticalAlign: "middle",
+            marginRight: convertpx2vw(30),
+            height: convertpx2vw(textH)
+          }}
           src={textImg}
           alt="缺氮"
         />

src/pages/wheat/LackMnInfo.js

+import React from "react";
+import styled from "styled-components";
+import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.61-assets/缺锰主要表现为叶片 柔软下披，新叶脉间条纹 状失绿，由黄绿色到黄色， 叶脉仍为绿色；有时叶片 呈浅绿色，黄色的条纹扩 .png";
+import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.61-assets/1.png";
+import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.61-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/LackPInfo.js

@@ -18,7 +18,11 @@ export default function LackNInfo() {
       translateY={-50}
       rightContent={
         <>
-          <StyledImg src={img_1} alt="缺磷" />
+          <StyledImg
+            src={img_1}
+            alt="缺磷"
+            style={{ marginRight: convertpx2vw(20) }}
+          />
           <StyledImg src={img_2} alt="缺磷" />
           <br />
         </>