更改植物页面按钮样式，更改背景图

src/layouts/RowsLayout.js

+import React from 'react';
+import BGWithNavBtn from '../components/BGWithNavBtn';
+import styled from 'styled-components';
+import { convertpx2vw } from '../config';
+import AnimatedBtn from '../components/AnimatedBtn';
+
+const Container = styled(BGWithNavBtn)`
+  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;
+`;
+const StyledBtn = styled(AnimatedBtn)`
+  width: ${props => convertpx2vw(props.w)};
+  height: ${props => convertpx2vw(props.h)};
+`;
+/**
+ * 按行排列
+ * @param {Object} config 配置
+ * config.bg 背景图片 
+ * config.rowGap grid的row gap
+ * config.columnGap grid的 column gap
+ * config.columns 每行按钮数量
+ * config.w 单个按钮的宽度
+ * config.h 单个按钮的高度
+ * config.btns 按钮数组 
+ * 
+ */
+export default function RowsLayout({ config }) {
+  const { bg, rowGap, columnGap, btns, w, h, columns } = config;
+  return (
+    <Container columns={columns} bg={bg} rowGap={rowGap} columnGap={columnGap} >
+      {
+        btns.map(btn => <StyledBtn w={w} h={h} bg={btn.bg} to={btn.to} />)
+      }
+    </Container>
+  );
+}
\ No newline at end of file

src/pages/corn/getComponent.js

@@ -2,11 +2,11 @@ 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 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 LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png'
 import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png'

src/pages/corn/index.js

@@ -4,28 +4,26 @@ import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/1
 import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/3.png';
 import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/4.png';
 import LackOfBImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/5.png';
-import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
+import RowsLayout from '../../layouts/RowsLayout';
+import BgImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
 
 export default function Corn({ match }) {
   const config = {
-    w: 407,
-    h: 220,
-    rowGap: 20,
-    columns: [
-      [
-        { bg: LackOfNImg, to: match.url + "/lack-of-n" },
-        { bg: LackOfPImg, to: match.url + "/lack-of-p" },
-      ],
-      [
-        { bg: LackOfKImg, to: match.url + "/lack-of-k" },
-        { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
-      ],
-      [
-        { bg: LackOfBImg, to: match.url + "/lack-of-b" },
-      ],
-    ],
+    w: 262,
+    h: 259,
+    rowGap: 0,
+    columnGap: 40,
+    columns: 5,
+    bg: BgImg,
+    btns: [
+      { bg: LackOfNImg, to: match.url + "/lack-of-n" },
+      { bg: LackOfPImg, to: match.url + "/lack-of-p" },
+      { bg: LackOfKImg, to: match.url + "/lack-of-k" },
+      { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
+      { bg: LackOfBImg, to: match.url + "/lack-of-b" },
+    ]
   }
   return (
-    <ThreeColumnsLayout rowLayout config={config} />
+    <RowsLayout rowLayout config={config} />
   );
 }
\ No newline at end of file

src/pages/rape/getComponent.js

@@ -2,14 +2,14 @@ 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'

src/pages/rape/index.js

@@ -7,31 +7,29 @@ import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/3
 import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/6.png';
 import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/7.png';
 import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/8.png';
-import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
+import BgImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
+import RowsLayout from '../../layouts/RowsLayout';
 
 export default function Rape({ match }) {
   const config = {
-    w: 407,
-    h: 220,
-    rowGap: 20,
-    columns: [
-      [
-        { bg: LackOfPImg, to: match.url + "/lack-of-p" },
-        { bg: LackOfNImg, to: match.url + "/lack-of-n" },
-        { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
-      ],
-      [
-        { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
-        { bg: LackOfBImg, to: match.url + "/lack-of-b" },
-      ],
-      [
-        { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
-        { bg: LackOfSImg, to: match.url + "/lack-of-s" },
-        { bg: LackOfKImg, to: match.url + "/lack-of-k" },
-      ],
-    ],
+    w: 253,
+    h: 250,
+    columns: 4,
+    rowGap: 60,
+    columnGap: 72,
+    bg: BgImg,
+    btns: [
+      { bg: LackOfPImg, to: match.url + "/lack-of-p" },
+      { bg: LackOfNImg, to: match.url + "/lack-of-n" },
+      { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
+      { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
+      { bg: LackOfBImg, to: match.url + "/lack-of-b" },
+      { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
+      { bg: LackOfSImg, to: match.url + "/lack-of-s" },
+      { bg: LackOfKImg, to: match.url + "/lack-of-k" },
+    ]
   }
   return (
-    <ThreeColumnsLayout config={config} />
+    <RowsLayout config={config} />
   );
 }
\ No newline at end of file

src/pages/tomato/getComponent.js

@@ -2,15 +2,15 @@ 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'

src/pages/tomato/index.js

@@ -8,32 +8,30 @@ import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/4
 import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/7.png';
 import LackOfMgImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/8.png';
 import LackOfMuImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/9.png';
-import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
+import BgImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
+import RowsLayout from '../../layouts/RowsLayout';
 
 export default function Tomato({ match }) {
   const config = {
-    w: 370,
-    h: 198,
-    rowGap: 70,
-    columns: [
-      [
-        { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
-        { bg: LackOfKImg, to: match.url + "/lack-of-k" },
-        { bg: LackOfPImg, to: match.url + "/lack-of-p" },
-      ],
-      [
-        { bg: LackOfBImg, to: match.url + "/lack-of-b" },
-        { bg: LackOfNImg, to: match.url + "/lack-of-n" },
-        { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
-      ],
-      [
-        { bg: LackOfSImg, to: match.url + "/lack-of-s" },
-        { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
-        { bg: LackOfMuImg, to: match.url + "/lack-of-mu" },
-      ],
-    ],
+    w: 253,
+    h: 250,
+    rowGap: 50,
+    columnGap: 90,
+    columns: 3,
+    bg: BgImg,
+    btns: [
+      { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
+      { bg: LackOfKImg, to: match.url + "/lack-of-k" },
+      { bg: LackOfPImg, to: match.url + "/lack-of-p" },
+      { bg: LackOfBImg, to: match.url + "/lack-of-b" },
+      { bg: LackOfNImg, to: match.url + "/lack-of-n" },
+      { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
+      { bg: LackOfSImg, to: match.url + "/lack-of-s" },
+      { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
+      { bg: LackOfMuImg, to: match.url + "/lack-of-mu" },
+    ]
   }
   return (
-    <ThreeColumnsLayout config={config} />
+    <RowsLayout config={config} />
   );
 }

src/pages/wheat/index.js

@@ -8,32 +8,30 @@ import LackOfMnImg from '../../仿真软件-植物营养元素缺素症切图/2
 import LackOfFeImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/7.png';
 import LackOfMgImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/8.png';
 import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/9.png';
-import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
+import RowsLayout from '../../layouts/RowsLayout';
+import BgImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png';
 
 export default function Wheat({ match }) {
   const config = {
-    w: 448,
-    h: 216,
-    rowGap: 20,
-    columns: [
-      [
-        { bg: LackOfNImg, to: match.url + "/lack-of-n" },
-        { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
-        { bg: LackOfFeImg, to: match.url + "/lack-of-fe" },
-      ],
-      [
-        { bg: LackOfPImg, to: match.url + "/lack-of-p" },
-        { bg: LackOfBImg, to: match.url + "/lack-of-b" },
-        { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
-      ],
-      [
-        { bg: LackOfKImg, to: match.url + "/lack-of-k" },
-        { bg: LackOfMnImg, to: match.url + "/lack-of-mn" },
-        { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
-      ],
-    ],
+    w: 253,
+    h: 250,
+    rowGap: 50,
+    columnGap: 90,
+    columns: 3,
+    bg: BgImg,
+    btns: [
+      { bg: LackOfNImg, to: match.url + "/lack-of-n" },
+      { bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
+      { bg: LackOfFeImg, to: match.url + "/lack-of-fe" },
+      { bg: LackOfPImg, to: match.url + "/lack-of-p" },
+      { bg: LackOfBImg, to: match.url + "/lack-of-b" },
+      { bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
+      { bg: LackOfKImg, to: match.url + "/lack-of-k" },
+      { bg: LackOfMnImg, to: match.url + "/lack-of-mn" },
+      { bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
+    ]
   }
   return (
-    <ThreeColumnsLayout config={config} />
+    <RowsLayout config={config} />
   );
 }