修改css单位

.env

-NODE_PATH=src

package.json

 {
   "name": "zunyi",
   "version": "0.1.0",
+  "homepage": "/shifei",
   "private": true,
   "dependencies": {
     "react": "^16.9.0",

src/App.js

@@ -29,44 +29,45 @@ import FertilizeEarlySelectCornLifetime from './pages/FertilizeEarly/Corn/lifeti
 import FertilizeConcentrated from './pages/FertilizeConcentrated';
 import FertilizeControl from './pages/FertilizeControl';
 
+const baseUrl = process.env.PUBLIC_URL;
 
 function App() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/" component={Home} />
-        <Route exact path="/sub-home" component={SubHome} />
-        <Route exact path="/sub-home/fertilize-by-ground" component={FertilizeByGround} />
-        <Route exact path="/sub-home/fertilize-by-ground/acid" component={FertilizeByAcidGround} />
+        <Route exact path={baseUrl + "/"} component={Home} />
+        <Route exact path={baseUrl + "/sub-home"} component={SubHome} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground"} component={FertilizeByGround} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid"} component={FertilizeByAcidGround} />
 
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-organic" component={FertilizeByAcidGroundAddOrganic} />
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/humanity" component={FertilizeHumanity} />
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/stable" component={FertilizeStable} />
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/straw" component={FertilizeStraw} />
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/green" component={FertilizeGreen} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic"} component={FertilizeByAcidGroundAddOrganic} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/humanity"} component={FertilizeHumanity} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/stable"} component={FertilizeStable} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/straw"} component={FertilizeStraw} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/green"} component={FertilizeGreen} />
 
-        <Route exact path="/sub-home/fertilize-by-ground/acid/add-alkaline" component={FertilizeByAcidGroundAddAlkaline} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} />
 
-        <Route exact path="/sub-home/fertilize-by-ground/alkaline" component={FertilizeByAlkalineGround} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} />
         <Route exact
-          path="/sub-home/fertilize-by-ground/alkaline/add-organic"
-          render={ () => <Redirect to="/sub-home/fertilize-by-ground/acid/add-organic" /> } 
+          path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-organic"}
+          render={ () => <Redirect to={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic"} /> } 
         />
-        <Route exact path="/sub-home/fertilize-by-ground/alkaline/add-acid" component={FertilizeByAlkalineGroundAddAcid} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-acid"} component={FertilizeByAlkalineGroundAddAcid} />
 
-        <Route exact path="/sub-home/fertilize-early" component={FertilizeEarly} />
-        <Route exact path="/sub-home/fertilize-early/select" component={FertilizeEarlySelect} />
-        <Route exact path="/sub-home/fertilize-early/select/wheat" component={FertilizeEarlySelectWheat} />
-        <Route exact path="/sub-home/fertilize-early/select/rape" component={FertilizeEarlySelectRape} />
-        <Route exact path="/sub-home/fertilize-early/select/corn" component={FertilizeEarlySelectCorn} />
-        <Route exact path="/sub-home/fertilize-early/select/wheat/lifetime" component={FertilizeEarlySelectWheatLifetime} />
-        <Route exact path="/sub-home/fertilize-early/select/wheat/lifetime/seedling" component={FertilizeEarlySelectWheatSeedling} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early"} component={FertilizeEarly} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select"} component={FertilizeEarlySelect} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat"} component={FertilizeEarlySelectWheat} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/rape"} component={FertilizeEarlySelectRape} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/corn"} component={FertilizeEarlySelectCorn} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat/lifetime"} component={FertilizeEarlySelectWheatLifetime} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat/lifetime/seedling"} component={FertilizeEarlySelectWheatSeedling} />
 
-        <Route exact path="/sub-home/fertilize-early/select/rape/lifetime" component={FertilizeEarlySelectrapeLifetime} />
-        <Route exact path="/sub-home/fertilize-early/select/corn/lifetime" component={FertilizeEarlySelectCornLifetime} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/rape/lifetime"} component={FertilizeEarlySelectrapeLifetime} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-early/select/corn/lifetime"} component={FertilizeEarlySelectCornLifetime} />
 
-        <Route exact path="/sub-home/fertilize-concentrated" component={FertilizeConcentrated} />
-        <Route exact path="/sub-home/fertilize-control" component={FertilizeControl} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-concentrated"} component={FertilizeConcentrated} />
+        <Route exact path={baseUrl + "/sub-home/fertilize-control"} component={FertilizeControl} />
       </Switch>
     </Router>
   );

src/pages/FertilizeByGround/Acid/AddAlkaline/index.js

@@ -14,15 +14,16 @@ import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画
 import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
 import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
 import { BackBtn, HomeBtn } from '../../../SubHome';
+import { convertpx2vw } from '../../../../config';
 
 const PositionedContainer = styled.div`
-  margin: 102px auto 0;
+  margin: ${`convertpx2vw(102) auto 0`};
   background-image: url(${ContainerBg});
   background-size: contain;
   background-repeat: repeat-x;
   background-position: center;
-  height: 796px;
-  width: 633px;
+  height: ${convertpx2vw(796)};
+  width: ${convertpx2vw(633)};
   position: relative;
   display: flex;
   flex-direction: column;
@@ -31,8 +32,8 @@ const PositionedContainer = styled.div`
 `;
 const StyledBtn = styled.a`
   display: block;
-  width: 589px;
-  height: 107px;
+  width: ${convertpx2vw(589)};
+  height: ${convertpx2vw(107)};
   cursor: pointer;
   position: relative;
   background-image: ${props => `url(${props.src})`};
@@ -42,15 +43,21 @@ const StyledBtn = styled.a`
   &:active {
     background-image: ${props => `url(${props.activeSrc})`};
   }
+  &:first-child {
+    margin-top: ${convertpx2vw(200)};
+  }
+  &:not(:first-child) {
+    margin-top: ${convertpx2vw(40)};
+  }
 `;
 const StyledCheckImg = styled.img`
   display: block;
-  width: 50px;
-  height: 50px;
+  width: ${convertpx2vw(50)};
+  height: ${convertpx2vw(50)};;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 88px;
+  right: ${convertpx2vw(88)};
   visibility: ${props => props.show ? 'visible' : 'hidden'};
   user-select: none;
 `;
@@ -65,16 +72,16 @@ export default function AddAlkaline () {
   return (
     <GroundBg>
       <PositionedContainer>
-        <StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
+        <StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
           <StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
         </StyledBtn>
-        <StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
+        <StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
           <StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
         </StyledBtn>
-        <StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
+        <StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
           <StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/>
         </StyledBtn>
-        <StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
+        <StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
           <StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/>
         </StyledBtn>
       </PositionedContainer>

src/pages/FertilizeByGround/Acid/AddAlkalineBtn.js

@@ -2,11 +2,12 @@ import styled from 'styled-components';
 import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/施用碱性肥料.png';
 import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/施用碱性肥料.png';
 import { Link } from 'react-router-dom';
+import { convertpx2vw } from '../../../config';
 
 const Btn = styled(Link)`
   display: block;
-  width: 444px;
-  height: 108px;
+  width: ${convertpx2vw(444)};
+  height: ${convertpx2vw(108)};
   background-image: url(${bg});
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeByGround/Acid/AddOrganic/Green.js

@@ -12,13 +12,16 @@ import JKWDImg from '../../../../磷肥施用技术切图/默认状态/画面a-2
 import YCImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/油菜.png';
 import QMImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/荞麦.png';
 import LPImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/绿萍.png';
-
+import { convertpx2vw } from '../../../../config';
 import { BackBtn, HomeBtn } from '../../../SubHome';
 
 const StyledImg = styled.img`
   display: inline-block;
-  width: 246px;
-  height: 363px;
+  width: ${convertpx2vw(246)};
+  height: ${convertpx2vw(363)};
+  :not(:last-child) {
+    margin-right: ${convertpx2vw(36)};
+  }
 `;
 const StyledWheatBg = styled(WheatBg)`
   flex-direction: column;
@@ -35,17 +38,17 @@ export default function Straw() {
   return (
     <StyledWheatBg>
       <Row>
-        <StyledImg src={ZYYImg} alt="紫云英" style={{marginRight: '36px' }} />
-        <StyledImg src={CMXImg} alt="草木樨" style={{marginRight: '36px' }} />
-        <StyledImg src={ZHMXImg} alt="紫花苜蓿" style={{marginRight: '36px' }} />
-        <StyledImg src={GZYHSZImg} alt="光叶紫花苕子" style={{marginRight: '36px' }} />
+        <StyledImg src={ZYYImg} alt="紫云英" />
+        <StyledImg src={CMXImg} alt="草木樨" />
+        <StyledImg src={ZHMXImg} alt="紫花苜蓿" />
+        <StyledImg src={GZYHSZImg} alt="光叶紫花苕子" />
         <StyledImg src={TJImg} alt="田菁" />
       </Row>
       <Row>
-        <StyledImg src={JImg}  alt="箭筈豌豆" style={{marginRight: '36px'}} />
-        <StyledImg src={JKWDImg}  alt="蚕豆" style={{marginRight: '36px'}} />
-        <StyledImg src={YCImg}  alt="油菜" style={{marginRight: '36px'}} />
-        <StyledImg src={QMImg}  alt="荞麦" style={{marginRight: '36px'}} />
+        <StyledImg src={JImg}  alt="箭筈豌豆" />
+        <StyledImg src={JKWDImg}  alt="蚕豆" />
+        <StyledImg src={YCImg}  alt="油菜" />
+        <StyledImg src={QMImg}  alt="荞麦" />
         <StyledImg src={LPImg}  alt="绿萍" />
       </Row>
       <BackBtn />

src/pages/FertilizeByGround/Acid/AddOrganic/Humanity.js

@@ -4,17 +4,21 @@ import WheatBg from '../../../WheatBg';
 import HumanityImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人粪尿肥.png';
 import AnimalImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/家畜粪尿肥.png';
 import { BackBtn, HomeBtn } from '../../../SubHome';
+import { convertpx2vw } from '../../../../config';
 
 const StyledImg = styled.img`
   display: block;
-  width: 702px;
-  height: 552px;
+  width: ${convertpx2vw(702)};
+  height: ${convertpx2vw(552)};
+  :first-child {
+    margin-right: ${convertpx2vw(80)};
+  }
 `;
 
 export default function Humanity() {
   return (
     <WheatBg>
-      <StyledImg src={HumanityImg} alt="人粪尿肥" style={{marginRight: '80px'}}/>
+      <StyledImg src={HumanityImg} alt="人粪尿肥" />
       <StyledImg src={AnimalImg} alt="家畜粪尿肥" />
       <BackBtn />
       <HomeBtn />

src/pages/FertilizeByGround/Acid/AddOrganic/Straw.js

@@ -5,18 +5,19 @@ import HeapImg from '../../../../磷肥施用技术切图/默认状态/画面a-2
 import SteepImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沤肥.png';
 import BiogasImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沼气池肥.png';
 import { BackBtn, HomeBtn } from '../../../SubHome';
+import { convertpx2vw } from '../../../../config';
 
 const StyledImg = styled.img`
   display: block;
-  width: 490px;
-  height: 391px;
+  width: ${convertpx2vw(490)};
+  height: ${convertpx2vw(391)};
 `;
 
 export default function Straw() {
   return (
     <WheatBg>
-      <StyledImg src={HeapImg} alt="堆肥" style={{marginRight: '20px'}}/>
-      <StyledImg src={SteepImg} alt="沤肥" style={{marginRight: '20px'}}/>
+      <StyledImg src={HeapImg} alt="堆肥" style={{marginRight: convertpx2vw(20) }}/>
+      <StyledImg src={SteepImg} alt="沤肥" style={{marginRight: convertpx2vw(20) }}/>
       <StyledImg src={BiogasImg} alt="沼气池肥" />
       <BackBtn />
       <HomeBtn />

src/pages/FertilizeByGround/Acid/AddOrganic/index.js

@@ -14,15 +14,16 @@ import StrawBgActive from '../../../../磷肥施用技术切图/按下状态/画
 import GreenBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
 
 import { BackBtn, HomeBtn } from '../../../SubHome';
+import { convertpx2vw } from '../../../../config';
 
 const PositionedContainer = styled.div`
-  margin: 102px auto 0;
+  margin: ${`${convertpx2vw(102)} auto 0`};
   background-image: url(${ContainerBg});
   background-size: contain;
   background-repeat: repeat-x;
   background-position: center;
-  height: 796px;
-  width: 633px;
+  height: ${convertpx2vw(796)};
+  width: ${convertpx2vw(633)};
   position: relative;
   display: flex;
   flex-direction: column;
@@ -32,36 +33,39 @@ const PositionedContainer = styled.div`
 
 const StyledBtn = styled(Link)`
   background-size: contain;
-  background-repeat: repeat-x;
+  background-repeat: no-repeat;
   background-position: center;
-  height: 107px;
-  width: 590px;
+  height: ${convertpx2vw(107)};
+  width: ${convertpx2vw(590)};
+  &:first-child {
+    margin-top: ${convertpx2vw(190)};
+  }
+  &:not(:first-child) {
+    margin-top: ${convertpx2vw(40)};
+  }
 `;
 
 const HumanityBtn = styled(StyledBtn)`
   background-image: url(${HumanityBg});
-  margin-top: 190px;
+
   &:active {
     background-image: url(${HumanityBgActive});
   }
 `;
 const StableBtn = styled(StyledBtn)`
   background-image: url(${StableBg});
-  margin-top: 40px;
   &:active {
     background-image: url(${StableBgActive});
   }
 `;
 const StrawBtn = styled(StyledBtn)`
   background-image: url(${StrawBg});
-  margin-top: 40px;
   &:active {
     background-image: url(${StrawBgActive});
   }
 `;
 const GreenBtn = styled(StyledBtn)`
   background-image: url(${GreenBg});
-  margin-top: 40px;
   &:active {
     background-image: url(${GreenBgActive});
   }

src/pages/FertilizeByGround/Acid/AddOrganicBtn.js

@@ -2,11 +2,12 @@ import styled from 'styled-components';
 import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/增施有机肥.png';
 import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/增施有机肥.png';
 import { Link } from 'react-router-dom';
+import { convertpx2vw } from '../../../config';
 
 const Btn = styled(Link)`
   display: block;
-  width: 444px;
-  height: 108px;
+  width: ${convertpx2vw(444)};
+  height: ${convertpx2vw(108)};
   background-image: url(${bg});
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeByGround/Acid/index.js

@@ -4,9 +4,10 @@ import AddOrganicBtn from './AddOrganicBtn';
 import AddAlkalineBtn from './AddAlkalineBtn';
 import styled from 'styled-components';
 import { BackBtn, HomeBtn } from '../../SubHome';
+import { convertpx2vw } from '../../../config';
 
 const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
-  margin-right: 240px;
+  margin-right: ${convertpx2vw(240)};
 `;
 
 export default function({ match }) {

src/pages/FertilizeByGround/Alkaline/AddAcid/index.js

@@ -14,15 +14,16 @@ import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画
 import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
 import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
 import { BackBtn, HomeBtn } from '../../../SubHome';
+import { convertpx2vw } from '../../../../config';
 
 const PositionedContainer = styled.div`
-  margin: 102px auto 0;
+  margin: ${`${convertpx2vw(102)} auto 0`};
   background-image: url(${ContainerBg});
   background-size: contain;
   background-repeat: repeat-x;
   background-position: center;
-  height: 796px;
-  width: 633px;
+  height: ${convertpx2vw(796)};
+  width: ${convertpx2vw(633)};
   position: relative;
   display: flex;
   flex-direction: column;
@@ -31,8 +32,8 @@ const PositionedContainer = styled.div`
 `;
 const StyledBtn = styled.a`
   display: block;
-  width: 589px;
-  height: 107px;
+  width: ${convertpx2vw(589)};
+  height: ${convertpx2vw(107)};
   cursor: pointer;
   position: relative;
   background-image: ${props => `url(${props.src})`};
@@ -42,15 +43,21 @@ const StyledBtn = styled.a`
   &:active {
     background-image: ${props => `url(${props.activeSrc})`};
   }
+  &:first-child {
+    margin-top: ${convertpx2vw(200)};
+  }
+  &:not(:first-child) {
+    margin-top: ${convertpx2vw(40)};
+  }
 `;
 const StyledCheckImg = styled.img`
   display: block;
-  width: 50px;
-  height: 50px;
+  width: ${convertpx2vw(50)};
+  height: ${convertpx2vw(50)};
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 88px;
+  right: ${convertpx2vw(88)};
   visibility: ${props => props.show ? 'visible' : 'hidden'};
   user-select: none;
 `;
@@ -65,16 +72,16 @@ export default function AddAcid () {
   return (
     <GroundBg>
       <PositionedContainer>
-        <StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
+        <StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
           <StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/>
         </StyledBtn>
-        <StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
+        <StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
           <StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/>
         </StyledBtn>
-        <StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
+        <StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
           <StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
         </StyledBtn>
-        <StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
+        <StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
           <StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
         </StyledBtn>
       </PositionedContainer>

src/pages/FertilizeByGround/Alkaline/AddAcidBtn.js

@@ -2,11 +2,12 @@ import styled from 'styled-components';
 import bg from '../../../磷肥施用技术切图/默认状态/画面c-1-assets/施用酸性肥料.png';
 import bgActive from '../../../磷肥施用技术切图/按下状态/画面c-1-按下-assets/施用酸性肥料.png';
 import { Link } from 'react-router-dom';
+import { convertpx2vw } from '../../../config';
 
 const Btn = styled(Link)`
   display: block;
-  width: 444px;
-  height: 108px;
+  width: ${convertpx2vw(444)};
+  height: ${convertpx2vw(108)};
   background-image: url(${bg});
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeByGround/Alkaline/index.js

@@ -5,9 +5,10 @@ import AddOrganicBtn from '../Acid/AddOrganicBtn';
 import AddAcidBtn from './AddAcidBtn'
 import styled from 'styled-components';
 import { BackBtn, HomeBtn } from '../../SubHome';
+import { convertpx2vw } from '../../../config';
 
 const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
-  margin-right: 240px;
+  margin-right: ${convertpx2vw(240)};
 `;
 
 export default function Alkaline({ match }) {

src/pages/FertilizeByGround/index.js

@@ -10,6 +10,7 @@ import AcidVideoSrc from '../../动画/因土施肥/画面a酸性土壤.mp4';
 import NeutralVideoSrc from '../../动画/因土施肥/画面b中性土壤.mp4';
 import AlkalineVideoSrc from '../../动画/因土施肥/画面c石灰性土壤.mp4';
 import VideoDiy from '../Video';
+import { convertpx2vw } from '../../config'
 
 const Container = styled(WheatBg)`
 	display: flex;
@@ -17,23 +18,24 @@ const Container = styled(WheatBg)`
 	justify-content: flex-start;
 `;
 const PositionedFertilizeByGround = styled(FertilizeByGroundBtn)`
-  margin: 120px auto 0;
+  margin: ${`${convertpx2vw(120)} auto 0`};
 `;
 const GroundBtn = styled(Link)`
   display: block;
-  width: 300px;
-  height: 90px;
+  width: ${convertpx2vw(300)};
+  height: ${convertpx2vw(90)};
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
+  :not(:last-child) {
+    margin-right: ${convertpx2vw(120)};
+  }
 `;
 const AcidGroundBtn = styled(GroundBtn)`
   background-image: url(${AcidGroundBg});
-  margin-right: 120px;
 `;
 const NeutralGroundBtn = styled(GroundBtn)`
   background-image: url(${NeutralGroundBg});
-  margin-right: 120px;
 `;
 const AlkalineGroundBtn = styled(GroundBtn)`
   background-image: url(${AlkalineGroundBg});
@@ -41,20 +43,7 @@ const AlkalineGroundBtn = styled(GroundBtn)`
 
 const RowBtn = styled.div`
   display: flex;
-  margin-top: 120px;
-`;
-const VideoWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: black;
-  text-align: center;
-  visibility: ${props => props.show ? 'visible' : 'hidden'};
-`;
-const StyledVideo = styled.video`
-  height: 100%;
+  margin-top: ${convertpx2vw(120)};
 `;
 
 const videoSrcs = {

src/pages/FertilizeConcentrated.js

@@ -31,9 +31,9 @@ const StyledWheatBg = styled(WheatBg)`
 
 const StyledTitle = styled.img`
   flex-shrink: 0;
-  width: 256px;
-  height: 256px;
-  margin: 120px 0 80px;
+  width: ${convertpx2vw(256)};
+  height: ${convertpx2vw(256)};
+  margin: ${`${convertpx2vw(120)} 0 ${convertpx2vw(80)}`};
 `;
 const StyledBtn = styled.button`
   background-color: transparent;
@@ -54,7 +54,7 @@ const StyledBtn = styled.button`
   }
 `;
 const Container = styled.div`
-	padding: 0 110px;
+	padding: ${`0 ${convertpx2vw(110)}`};
 	display: flex;
 	flex-wrap: wrap;
 `;

src/pages/FertilizeControl.js

@@ -14,7 +14,7 @@ import FiftyBgActive from '../磷肥施用技术切图/按下状态/控制施用
 import TenVideoSrc from '../动画/控制施用量/（点击进入“10kg667m2  ”按钮后）出现画面.mp4';
 import TwentyVideoSrc from '../动画/控制施用量/（点击进入“20-30kg667m2”按钮后）出现画面.mp4';
 import FiftyVideoSrc from '../动画/控制施用量/（点击进入“大于30kg667m2”按钮后）出现画面.mp4';
-
+import { convertpx2vw } from '../config';
 
 import Video from './Video';
 import { BackBtn, HomeBtn } from './SubHome';
@@ -25,9 +25,9 @@ const StyledWheatBg = styled(WheatBg)`
 `;
 
 const StyledTitle = styled.img`
-  width: 256px;
-  height: 256px;
-  margin: 120px 0 80px;
+  width: ${convertpx2vw(256)};
+  height: ${convertpx2vw(256)};
+  margin: ${`${convertpx2vw(120)} 0 ${convertpx2vw(80)}`};
 `;
 const StyledBtn = styled.button`
   background-color: transparent;
@@ -36,8 +36,8 @@ const StyledBtn = styled.button`
     outline: none;
   }
   cursor: pointer;
-  width: 300px;
-  height: 90px;
+  width: ${convertpx2vw(300)};
+  height: ${convertpx2vw(90)};
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -46,7 +46,7 @@ const StyledBtn = styled.button`
     background-image: ${props => `url(${props.activeBg})`};
   }
   &:not(:first-child) {
-    margin-left: 120px;
+    margin-left: ${convertpx2vw(120)};
   }
 `;
 const Container = styled.div`

src/pages/FertilizeEarly/Corn/index.js

@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
 import SelectBg from '../../../磷肥施用技术切图/默认状态/玉米01-assets/玉米生长周期.png';
 import SelectBgActive from '../../../磷肥施用技术切图/按下状态/玉米01-按下-assets/玉米生长周期.png';
 import { BackBtn, HomeBtn } from '../../SubHome';
+import { convertpx2vw } from '../../../config';
 
 const SelectBtn = styled(Link)`
-    display: block;
-    width: 594px;
-    height: 98px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${SelectBg});
-    &:active {
-      background-image: url(${SelectBgActive});
-    }
+  display: block;
+  width: ${convertpx2vw(594)};
+  height:${convertpx2vw(98)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${SelectBg});
+  &:active {
+    background-image: url(${SelectBgActive});
+  }
 `;
 
 export default function Corn({ match }) {

src/pages/FertilizeEarly/Corn/lifetime.js

@@ -22,17 +22,18 @@ import JointingVideoSrcs from '../../../动画/玉米/玉米拔节期.mp4'
 import HornVideoSrcs from '../../../动画/玉米/玉米大喇叭口期.mp4'
 import TasselVideoSrcs from '../../../动画/玉米/玉米抽穗期.mp4'
 import MaturityVideoSrcs from '../../../动画/玉米/玉米成熟期.mp4'
+import { convertpx2vw } from '../../../config';
 
 const Container = styled.div`
-    margin-top: 67px;
-    display: block;
-    width: 444px;
-    height: 591px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${ContainerBg});
-    text-align: center;
+  margin-top: ${convertpx2vw(67)};
+  display: block;
+  width: ${convertpx2vw(444)};
+  height: ${convertpx2vw(591)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${ContainerBg});
+  text-align: center;
 `;
 const Btn = styled.button`
   background-color: transparent;
@@ -40,14 +41,14 @@ const Btn = styled.button`
   &:focus {
     outline: none;
   }
-  width: 392px;
-  height: 62px;
+  width: ${convertpx2vw(392)};
+  height: ${convertpx2vw(62)};
   cursor: pointer;
   &:first-child {
-    margin-top: 133px;
+    margin-top: ${convertpx2vw(133)};
   }
   &:not(:first-child) {
-    margin-top: 20px;
+    margin-top: ${convertpx2vw(20)};
   }
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeEarly/Rape/index.js

@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
 import SelectBg from '../../../磷肥施用技术切图/默认状态/油菜01-assets/油菜生长周期.png';
 import SelectBgActive from '../../../磷肥施用技术切图/按下状态/油菜01-按下-assets/油菜生长周期.png';
 import { BackBtn, HomeBtn } from '../../SubHome';
+import { convertpx2vw } from '../../../config';
 
 const SelectBtn = styled(Link)`
-    display: block;
-    width: 594px;
-    height: 98px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${SelectBg});
-    &:active {
-      background-image: url(${SelectBgActive});
-    }
+  display: block;
+  width: ${convertpx2vw(594)};
+  height: ${convertpx2vw(98)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${SelectBg});
+  &:active {
+    background-image: url(${SelectBgActive});
+  }
 `;
 
 export default function Wheat({ match }) {

src/pages/FertilizeEarly/Rape/lifetime.js

@@ -19,32 +19,33 @@ import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/油
 import SeedlingVideoSrcs from '../../../动画/油菜/油菜苗期.mp4'
 import LaceVideoSrcs from '../../../动画/油菜/油菜蕾薹期.mp4'
 import MaturityVideoSrcs from '../../../动画/油菜/油菜角果成熟期.mp4'
+import { convertpx2vw } from '../../../config';
 
 const Container = styled.div`
-    margin-top: 67px;
-    display: block;
-    width: 444px;
-    height: 500px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${ContainerBg});
-    text-align: center;
+  margin-top: ${convertpx2vw(67)};
+  display: block;
+  width: ${convertpx2vw(444)};
+  height: ${convertpx2vw(500)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${ContainerBg});
+  text-align: center;
 `;
 const Btn = styled.button`
   background-color: transparent;
   border: none;
-  width: 392px;
-  height: 72px;
+  width: ${convertpx2vw(392)};
+  height: ${convertpx2vw(72)};
   cursor: pointer;
   &:focus {
     outline: none;
   }
   &:first-child {
-    margin-top: 120px;
+    margin-top: ${convertpx2vw(120)};
   }
   &:not(:first-child) {
-    margin-top: 20px;
+    margin-top: ${convertpx2vw(20)};
   }
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeEarly/Wheat/Seedling.js

@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 import WheatBg from '../../WheatBg';
 import img from '../../../磷肥施用技术切图/默认状态/冬小麦苗期-assets/苗期.png';
-
+import { convertpx2vw } from '../../../config';
 import { BackBtn, HomeBtn } from '../../SubHome';
 
 const StyledImg = styled.img`
   display: block;
-  width: 702px;
-  height: 552px;
+  width: ${convertpx2vw(702)};
+  height: ${convertpx2vw(552)};
 `;
 export default function Seedling() {
   return (

src/pages/FertilizeEarly/Wheat/index.js

@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
 import SelectBg from '../../../磷肥施用技术切图/默认状态/冬小麦01-assets/冬小麦生长周期.png';
 import SelectBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦01-按下-assets/冬小麦生长周期.png';
 import { BackBtn, HomeBtn } from '../../SubHome';
+import { convertpx2vw } from '../../../config';
 
 const SelectBtn = styled(Link)`
-    display: block;
-    width: 594px;
-    height: 98px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${SelectBg});
-    &:active {
-      background-image: url(${SelectBgActive});
-    }
+  display: block;
+  width: ${convertpx2vw(594)};
+  height: ${convertpx2vw(98)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${SelectBg});
+  &:active {
+    background-image: url(${SelectBgActive});
+  }
 `;
 
 export default function Wheat({ match }) {

src/pages/FertilizeEarly/Wheat/lifetime.js

@@ -32,13 +32,13 @@ import JointingVideoSrcs from '../../../动画/冬小麦/冬小麦拔节期.mp4'
 import BootingVideoSrcs from '../../../动画/冬小麦/冬小麦孕穗期.mp4'
 import FillingVideoSrcs from '../../../动画/冬小麦/冬小麦灌浆期.mp4'
 import MaturityVideoSrcs from '../../../动画/冬小麦/冬小麦成熟期.mp4'
-
+import { convertpx2vw } from '../../../config';
 
 const Container = styled.div`
-    margin-top: 67px;
+    margin-top: ${convertpx2vw(67)};
     display: block;
-    width: 444px;
-    height: 867px;
+    width: ${convertpx2vw(444)};
+    height: ${convertpx2vw(867)};
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -48,17 +48,17 @@ const Container = styled.div`
 const Btn = styled.button`
   background-color: transparent;
   border: none;
-  width: 392px;
-  height: 72px;
+  width: ${convertpx2vw(392)};
+  height: ${convertpx2vw(72)};
   cursor: pointer;
   &:focus {
     outline: none;
   }
   &:first-child {
-    margin-top: 120px;
+    margin-top: ${convertpx2vw(120)};
   }
   &:not(:first-child) {
-    margin-top: 20px;
+    margin-top: ${convertpx2vw(20)};
   }
   background-repeat: no-repeat;
   background-position: center;

src/pages/FertilizeEarly/index.js

@@ -5,18 +5,19 @@ import WheatBg from '../WheatBg';
 import SelectBg from '../../磷肥施用技术切图/默认状态/早施01.1-assets/选择作物.png';
 import SelectBgActive from '../../磷肥施用技术切图/按下状态/早施01.1-按下-assets/选择作物.png';
 import { BackBtn, HomeBtn } from '../SubHome';
+import { convertpx2vw  } from '../../config';
 
 const SelectBtn = styled(Link)`
-    display: block;
-    width: 384px;
-    height: 98px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    background-image: url(${SelectBg});
-    &:active {
-      background-image: url(${SelectBgActive});
-    }
+  display: block;
+  width: ${convertpx2vw(384)};
+  height: ${convertpx2vw(98)};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-image: url(${SelectBg});
+  &:active {
+    background-image: url(${SelectBgActive});
+  }
 `;
 
 export default function FertilizeEarly({ match }) {

src/pages/FertilizeEarly/select.js

@@ -11,18 +11,18 @@ import RapeBtnBgActive from '../../磷肥施用技术切图/按下状态/早施0
 import Corn from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米.png'
 import CornBtnBg from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米（文字）.png'
 import CornBtnBgActive from '../../磷肥施用技术切图/按下状态/早施02.1-按下-assets/玉米（文字）.png'
-
+import { convertpx2vw  } from '../../config';
 import { BackBtn, HomeBtn } from '../SubHome';
 
 const Icon = styled.img`
-  width: 256px;
-  height: 256px;
+  width: ${convertpx2vw(256)};
+  height: ${convertpx2vw(256)};
 `;
 
 const Btn = styled(Link)`
   display: block;
-  width: 308px;
-  height: 108px;
+  width: ${convertpx2vw(308)};
+  height: ${convertpx2vw(108)};
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -34,7 +34,7 @@ const bgs = {
 
 ['Wheat', 'Rape', 'Corn'].forEach(name => {
   Btns[name] = styled(Btn)`
-    margin-top: 79px;
+    margin-top: ${convertpx2vw(79)};
     background-image: url(${bgs[name+'BtnBg']});
     &:active {
       background-image: url(${bgs[name+'BtnBgActive']});
@@ -45,7 +45,7 @@ const Col = styled.div`
   display: inline-block;
   text-align: center;
   &:not(:last-child) {
-    margin-right: 160px;
+    margin-right: ${convertpx2vw(160)};
   }
 `;
 

src/pages/Home.js

@@ -2,9 +2,9 @@ import React from 'react';
 import bg from '../磷肥施用技术切图/默认状态/画面一-assets/磷肥施用技术仿真软件.png';
 import { Link } from "react-router-dom";
 
-export default function Home() {
+export default function Home({ match }) {
   return (
-    <Link to="/sub-home">
+    <Link to={match.url + 'sub-home'}>
       <img src={bg} alt="logo" style={{width: '100%'}} />
     </Link>
   );

src/pages/SubHome.js

@@ -9,13 +9,15 @@ import FertilizeEarlyBg from '../磷肥施用技术切图/默认状态/画面二
 import FertilizeConcentratedBg from '../磷肥施用技术切图/默认状态/画面二-assets/集中施肥.png';
 import FertilizeControlBg from '../磷肥施用技术切图/默认状态/画面二-assets/控制施用量.png';
 import WheatBg from './WheatBg';
+import { convertpx2vw } from '../config';
+const baseUrl = process.env.PUBLIC_URL;
 
 const NavBtn = styled(Link)`
   display: block;
-  width: 76px;
-  height: 76px;
+  width: ${convertpx2vw(76)};
+  height: ${convertpx2vw(76)};
   position: absolute;
-  bottom: 47px;
+  bottom: ${convertpx2vw(47)};
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -23,21 +25,21 @@ const NavBtn = styled(Link)`
 
 export const StyledBackBtn = styled(NavBtn)`
   background-image: url(${BackBtnBg});
-  right: 195px;
+  right: ${convertpx2vw(195)};
 `;
 export const StyledHomeBtn = styled(NavBtn)`
   background-image: url(${HomeBtnBg});
-  right: 80px;
+  right: ${convertpx2vw(80)};
 `;
 
 const FertilizeBtn = styled(Link)`
   display: block;
-  width: 256px;
-  height: 256px;
+  width: ${convertpx2vw(256)};
+  height: ${convertpx2vw(256)};
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  margin-right: 80px;
+  margin-right: ${convertpx2vw(80)};
 `;
 export const FertilizeByGroundBtn = styled(FertilizeBtn)`
   background-image: url(${FertilizeByGroundBg});
@@ -61,7 +63,7 @@ export const BackBtn = withRouter(({ onClick, history }) => {
 });
 
 export function HomeBtn() {
-  return <StyledHomeBtn to="/" />;
+  return <StyledHomeBtn to={baseUrl+'/'} />;
 }
 
 export default function SubHome({ match }) {