增加按钮按下状态资源

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "react": "^16.9.0",
+    "react-app-polyfill": "^1.0.2",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.1",
@@ -23,12 +24,14 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "ie 11"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 safari version",
+      "ie 11"
     ]
   }
 }

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';
@@ -68,6 +69,7 @@ function App() {
     <Router>
       <Switch>
         <Route exact path={baseUrl + "/"} component={Home} />
+        <Route path={baseUrl + "/sub-home"} component={SubHome} />
         <Route exact path={baseUrl + "/corn"} component={Corn} />
         <Route exact path={baseUrl + "/rape"} component={Rape} />
         <Route exact path={baseUrl + "/wheat"} component={Wheat} />

src/index.js

+import 'react-app-polyfill/ie9';
+import 'react-app-polyfill/stable';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';

src/layouts/CheckLack.js

@@ -22,6 +22,10 @@ const StyledBtn = styled(AnimatedBtn)`
     margin-left: ${props => convertpx2vw(props.leftgap)};
   }
   position: relative;
+  &:active {
+    /* background-image: url(${props => props.activeBg});
+    transform: none; */
+  }
 `;
 const Row = styled.div`
   /* display: flex;
@@ -46,7 +50,7 @@ const CorrectMark = styled(MarkImg)`
 `;
 
 
-const CheckBtn = ({ w, h, leftGap, bg, to, correct, onClick }) => {
+const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
   const [showCheckMark, setShowCheckMark] = useState(false);
 
   function handleClick(e) {
@@ -61,6 +65,7 @@ const CheckBtn = ({ w, h, leftGap, bg, to, correct, onClick }) => {
         h={h}
         leftgap={leftGap}
         bg={bg}
+        activeBg={activeBg}
         to={to}
         onClick={e => handleClick(e)}
       >
@@ -140,6 +145,7 @@ function CheckLack({ config, history }) {
                   h={config.btns.h}
                   leftGap={config.btns.leftGap}
                   bg={ele.bg}
+                  activeBg={ele.activeBg}
                   correct={ele.correct}
                   to={ele.to}
                   onClick={() => handleClick(ele.to)}

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';
 
 const baseUrl = process.env.PUBLIC_URL;
 
-const Container = styled(BackGround)`
+const Container = styled(Link)`
   text-align: center;
   position: relative;
+  display: block;
+  height: 100%;
+  background-image: url(${bg});
+  background-size: cover;
 `;
-const StyledDiv = styled.div`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  text-align: center;
-  width: 100%;
-`;
-const StyledBtn = styled(AnimatedBtn)`
-  display: inline-block;
-  width: ${convertpx2vw(300)};
-  height: ${convertpx2vw(300)};
-  :not(:first-child) {
-    margin-left: ${convertpx2vw(80)}
-  }
-`;
+
 
 export default function Home() {
   return (
-    <Container>
-      <StyledDiv>
-        <StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
-        <StyledBtn bg={WheatImg}  to={baseUrl + '/wheat'} />
-        <StyledBtn bg={RapeImg}  to={baseUrl + '/rape'}/>
-        <StyledBtn bg={tomatoImg}   to={baseUrl + '/tomato'} />
-      </StyledDiv>
-    </Container>
+    <Container to={baseUrl+ '/sub-home'} />
   );
 }
\ No newline at end of file

src/pages/SubHome.js

+import React from 'react';
+import styled from 'styled-components';
+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 { convertpx2vw } from '../config';
+
+const baseUrl = process.env.PUBLIC_URL;
+
+const Container = styled(BackGround)`
+  text-align: center;
+  position: relative;
+`;
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  width: 100%;
+`;
+const StyledBtn = styled(AnimatedBtn)`
+  display: inline-block;
+  width: ${convertpx2vw(300)};
+  height: ${convertpx2vw(300)};
+  :not(:first-child) {
+    margin-left: ${convertpx2vw(80)}
+  }
+`;
+
+export default function SubHome() {
+  return (
+    <Container>
+      <StyledDiv>
+        <StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
+        <StyledBtn bg={WheatImg}  to={baseUrl + '/wheat'} />
+        <StyledBtn bg={RapeImg}  to={baseUrl + '/rape'}/>
+        <StyledBtn bg={tomatoImg}   to={baseUrl + '/tomato'} />
+      </StyledDiv>
+    </Container>
+  );
+}
\ No newline at end of file

src/pages/corn/getComponent.js

@@ -15,6 +15,12 @@ import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1
 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 Bg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
 
 const baseUrl = process.env.PUBLIC_URL;
@@ -41,7 +47,7 @@ export default function (idx) {
         leftGap: 80,
         rows: [
           [
-            { bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }
+            { bg: LackNBtnBg, activeBg: LackNBtnBgActive }, { bg: LackPBtnBg, activeBg: LackPBtnBgActive }, { bg: LackKBtnBg, activeBg: LackKBtnBgActive }, { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive }, { bg: LackBBtnBg, activeBg: LackBBtnBgActive }
           ],
         ]
       }