提交 6279e1df authored 作者: 王绍森's avatar 王绍森

修改

上级 12daeff7
{
"compilerOptions": {
"baseUrl": "src"
}
}
\ No newline at end of file
......@@ -7,13 +7,13 @@ import FertilizeByGround from './pages/FertilizeByGround';
import FertilizeByAcidGround from './pages/FertilizeByGround/Acid'
import FertilizeByAcidGroundAddOrganic from './pages/FertilizeByGround/Acid/AddOrganic'
import FertilizeByAcidGroundAddAlkaline from './pages/FertilizeByGround/Acid/AddAlkaline'
import FertilizeHumanity from './pages/FertilizeByGround/Acid/AddOrganic/Humanity'
import FertilizeHumanity from 'pages/FertilizeByGround/Acid/AddOrganic/Humanity'
import FertilizeStable from './pages/FertilizeByGround/Acid/AddOrganic/Stable'
import FertilizeStraw from './pages/FertilizeByGround/Acid/AddOrganic/Straw'
import FertilizeStraw from 'pages/FertilizeByGround/Acid/AddOrganic/Straw'
import FertilizeGreen from './pages/FertilizeByGround/Acid/AddOrganic/Green'
import FertilizeByAlkalineGround from './pages/FertilizeByGround/Alkaline'
import FertilizeByAlkalineGroundAddAcid from './pages/FertilizeByGround/Alkaline/AddAcid'
import FertilizeByAlkalineGroundAddAcid from 'pages/FertilizeByGround/Alkaline/AddAcid'
import FertilizeEarly from './pages/FertilizeEarly';
import FertilizeEarlySelect from './pages/FertilizeEarly/select';
import FertilizeEarlySelectWheat from './pages/FertilizeEarly/Wheat';
......@@ -29,45 +29,44 @@ 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>
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<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={"/"} 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={"/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={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-organic/green"} component={FertilizeGreen} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} />
<Route exact path={"/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} />
<Route exact
path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-organic"}
render={ () => <Redirect to={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic"} /> }
path={"/sub-home/fertilize-by-ground/alkaline/add-organic"}
render={ () => <Redirect to={"/sub-home/fertilize-by-ground/acid/add-organic"} /> }
/>
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-acid"} component={FertilizeByAlkalineGroundAddAcid} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-acid"} component={FertilizeByAlkalineGroundAddAcid} />
<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"} 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/select/rape/lifetime"} component={FertilizeEarlySelectrapeLifetime} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/corn/lifetime"} component={FertilizeEarlySelectCornLifetime} />
<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-concentrated"} component={FertilizeConcentrated} />
<Route exact path={baseUrl + "/sub-home/fertilize-control"} component={FertilizeControl} />
<Route exact path={"/sub-home/fertilize-concentrated"} component={FertilizeConcentrated} />
<Route exact path={"/sub-home/fertilize-control"} component={FertilizeControl} />
</Switch>
</Router>
);
......
import React, {useState} from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import GroundBg from '../../GroundBg';
import ContainerBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/施用碱性肥料.png';
import LABg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png';
import GLSGBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png';
import GMLBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/钙镁磷肥.png';
import CMHBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png';
import WrongBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png';
import CorrectBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png';
import GroundBg from 'pages/FertilizeByGround/GroundBg';
import ContainerBg from '磷肥施用技术切图/默认状态/画面a-3-assets/施用碱性肥料.png';
import LABg from '磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png';
import GLSGBg from '磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png';
import GMLBg from '磷肥施用技术切图/默认状态/画面a-3-assets/钙镁磷肥.png';
import CMHBg from '磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png';
import WrongBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png';
import CorrectBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png';
import LAActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png';
import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png';
import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
import LAActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png';
import GLSGActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png';
import GMLActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import ButtonContainer from '../../ButtonContainer';
import ButtonDiy from '../../ButtonDiy';
import correctTextImg from '磷肥施用技术切图/默认状态/画面a-3-1(碱性肥料)正确答案-assets/碱性肥料正确答案.png';
import wrongTextImg from '磷肥施用技术切图/默认状态/画面c-3-1(酸性肥料)正确答案-assets/酸性肥料正确答案.png';
import GMLFImg from '磷肥施用技术切图/默认状态/画面a-3-1 钙镁磷肥-assets/钙镁磷肥.png';
import CMHImg from '磷肥施用技术切图/默认状态/画面a-3-1 草木灰-assets/草木灰.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import ButtonContainer from 'pages/FertilizeByGround/ButtonContainer';
import ButtonDiy from 'pages/FertilizeByGround/ButtonDiy';
const StyledCheckImg = styled.img`
display: block;
......@@ -31,34 +38,89 @@ const StyledCheckImg = styled.img`
user-select: none;
`;
const CenteredTextImg = styled.img`
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: ${convertpx2vw(819)};
height: ${convertpx2vw(563)};
`;
const CenteredInfoImg = styled(CenteredTextImg)`
width: ${convertpx2vw(714)};
height: ${convertpx2vw(564)};
`;
function Button(props) {
return <ButtonDiy w={589} h={107} top={40} firstTop={200} {...props} />
}
export default function AddAlkaline () {
function AddAlkaline({ history }) {
const [LAShow, setLAShow] = useState(false);
const [GLSGShow, setGLSGShow] = useState(false);
const [GMShow, setGMShow] = useState(false);
const [CMHShow, setCMHShow] = useState(false);
const [textImg, setTextImg] = useState(null);
function handleClick(e, setFunc, isCorrect) {
e.preventDefault();
setFunc(true);
setTimeout(() => {
setTextImg(isCorrect ? correctTextImg : wrongTextImg);
}, 1000);
setTimeout(() => {
setTextImg(null);
}, 3000);
}
const [infoImg, setInfoImg] = useState(null);
function handleInfoImg(e, imgSrc) {
e.preventDefault();
e.stopPropagation();
setInfoImg(imgSrc);
setTimeout(() => {
setInfoImg(null);
}, 2000);
}
return (
<GroundBg>
{
textImg !== null ? <CenteredTextImg src={textImg} alt="堆肥" />
: infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" />
: (
<ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => { e.preventDefault(); setLAShow(true)}}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, false)}>
<StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
</Button>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => { e.preventDefault(); setGLSGShow(true)}}>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, false)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
</Button>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => { e.preventDefault(); setGMShow(true)}}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow} onClick={e => handleInfoImg(e, GMLFImg)}/>
</Button>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => { e.preventDefault(); setCMHShow(true)}}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow} onClick={e => handleInfoImg(e, CMHImg)} />
</Button>
</ButtonContainer>
<BackBtn />
)
}
<BackBtn
onClick={() => {
if (textImg !== null || infoImg !== null) {
setTextImg(null);
setInfoImg(null);
} else {
history.goBack();
}
}}
/>
<HomeBtn />
</GroundBg>
);
}
export default withRouter(AddAlkaline);
\ No newline at end of file
import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/施用碱性肥料.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/施用碱性肥料.png';
import bg from '磷肥施用技术切图/默认状态/画面a-1-assets/施用碱性肥料.png';
import bgActive from '磷肥施用技术切图/按下状态/画面a-1-按下-assets/施用碱性肥料.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
import { convertpx2vw } from 'config';
const Btn = styled(Link)`
display: block;
......
import React from 'react';
import styled from 'styled-components';
import WheatBg from '../../../WheatBg';
import ZYYImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫云英.png';
import CMXImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/草木樨.png';
import ZHMXImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫花苜蓿.png';
import GZYHSZImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/光叶紫花苕子.png';
import TJImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/田菁.png';
import WheatBg from 'pages/WheatBg';
import ZYYImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫云英.png';
import CMXImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/草木樨.png';
import ZHMXImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫花苜蓿.png';
import GZYHSZImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/光叶紫花苕子.png';
import TJImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/田菁.png';
import JImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/箭筈豌豆.png';
import JKWDImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/蚕豆.png';
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';
import JImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/箭筈豌豆.png';
import JKWDImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/蚕豆.png';
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 'pages/SubHome';
const StyledImg = styled.img`
display: inline-block;
......
import React from 'react';
import styled from 'styled-components';
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: ${convertpx2vw(702)};
height: ${convertpx2vw(552)};
:first-child {
margin-right: ${convertpx2vw(80)};
}
`;
export default function Humanity() {
return (
<WheatBg>
<StyledImg src={HumanityImg} alt="人粪尿肥" />
<StyledImg src={AnimalImg} alt="家畜粪尿肥" />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HumanityImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人粪尿肥.png';
import AnimalImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/家畜粪尿肥.png';
import TextImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人畜粪尿.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(702)};
height: ${convertpx2vw(552)};
`;
const duration = 3000;
export default function Humanity({ match }) {
const [showText, setShowText] = useState(false);
useEffect(() => {
setTimeout(() => {
setShowText(true);
}, duration);
setTimeout(() => {
setShowText(false);
}, 2 * duration);
}, []);
return (
<WheatBg>
{
showText ? <StyledImg src={TextImg} style={{width: convertpx2vw(819), height: convertpx2vw(563)}} alt="家畜粪尿肥" />
: (
<>
<StyledImg src={HumanityImg} alt="人粪尿肥" style={{ marginRight: convertpx2vw(80) }} />
<StyledImg src={AnimalImg} alt="家畜粪尿肥" />
</>
)
}
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
import React from 'react';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import WheatBg from '../../../WheatBg';
import PigImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/猪厩肥.png';
import GoatImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/羊厩肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config'
import WheatBg from 'pages/WheatBg';
import PigImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/猪厩肥.png';
import GoatImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/羊厩肥.png';
import textImg1 from '磷肥施用技术切图/默认状态/画面a-2-2猪厩肥羊厩肥(增加文字1)-assets/厩肥.png';
import textImg2 from '磷肥施用技术切图/默认状态/画面a-2-2猪厩肥羊厩肥(增加文字2)-assets/厩肥.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config'
const StyledImg = styled.img`
display: block;
......@@ -12,11 +14,36 @@ const StyledImg = styled.img`
height: ${convertpx2vw(552)};
`;
const textImages = [textImg1, textImg2];
export default function Stable() {
const [showText, setShowText] = useState(false);
const [imgIndex, setImgIndex] = useState(-1);
useEffect(() => {
setTimeout(() => {
if (imgIndex+1 < textImages.length) {
setImgIndex(imgIndex+1);
setShowText(true);
} else {
setShowText(false);
}
}, 2000);
});
return (
<WheatBg>
{
showText ? <StyledImg src={textImages[imgIndex]} alt="堆肥" style={{width: convertpx2vw(819), height: convertpx2vw(563)}} />
: (
<>
<StyledImg src={PigImg} alt="猪厩肥" style={{marginRight: convertpx2vw(80)}} />
<StyledImg src={GoatImg} alt="羊厩肥" />
</>
)
}
<BackBtn />
<HomeBtn />
</WheatBg>
......
import React from 'react';
import styled from 'styled-components';
import WheatBg from '../../../WheatBg';
import HeapImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/堆肥.png';
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: ${convertpx2vw(490)};
height: ${convertpx2vw(391)};
`;
export default function Straw() {
return (
<WheatBg>
<StyledImg src={HeapImg} alt="堆肥" style={{marginRight: convertpx2vw(20) }}/>
<StyledImg src={SteepImg} alt="沤肥" style={{marginRight: convertpx2vw(20) }}/>
<StyledImg src={BiogasImg} alt="沼气池肥" />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HeapImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/堆肥.png';
import SteepImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沤肥.png';
import BiogasImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沼气池肥.png';
import StrawInGround from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/秸秆直接还田.png';
import textImg1 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥(堆肥增加文字)-assets/堆肥.png';
import textImg2 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥(沤肥增加文字)-assets/沤肥.png';
import textImg3 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥(沼气池肥增加文字)-assets/沼气池肥.png';
import textImg4 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥(秸秆直接还田增加文字)-assets/秸秆直接还田.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(490)};
height: ${convertpx2vw(391)};
`;
const textImages = [textImg1, textImg2, textImg3, textImg4];
export default function Straw() {
const [showText, setShowText] = useState(false);
const [imgIndex, setImgIndex] = useState(-1);
useEffect(() => {
setTimeout(() => {
if (imgIndex+1 < textImages.length) {
setImgIndex(imgIndex+1);
setShowText(true);
} else {
setShowText(false);
}
}, 2000);
});
return (
<WheatBg>
{
showText ? <StyledImg src={textImages[imgIndex]} alt="堆肥" style={{width: convertpx2vw(819), height: convertpx2vw(563)}} />
: (
<>
<div>
<StyledImg src={HeapImg} alt="堆肥"/>
<StyledImg src={BiogasImg} alt="沼气池肥" style={{display: 'inline-block', marginTop: convertpx2vw(40)}}/>
</div>
<div style={{marginLeft: convertpx2vw(224) }}>
<StyledImg src={SteepImg} alt="沤肥"/>
<StyledImg src={StrawInGround} alt="秸秆直接还田" style={{display: 'inline-block', marginTop: convertpx2vw(40)}}/>
</div>
</>
)
}
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import GroundBg from '../../GroundBg';
import ContainerBg from '../../../../磷肥施用技术切图/默认状态/画面a-2-assets/增施有机肥.png';
import HumanityBg from '../../../../磷肥施用技术切图/默认状态/画面a-2-assets/人畜粪尿肥.png';
import StableBg from '../../../../磷肥施用技术切图/默认状态/画面a-2-assets/厩肥.png';
import StrawBg from '../../../../磷肥施用技术切图/默认状态/画面a-2-assets/秸秆肥.png';
import GreenBg from '../../../../磷肥施用技术切图/默认状态/画面a-2-assets/绿肥.png';
import GroundBg from 'pages/FertilizeByGround/GroundBg';
import ContainerBg from '磷肥施用技术切图/默认状态/画面a-2-assets/增施有机肥.png';
import HumanityBg from '磷肥施用技术切图/默认状态/画面a-2-assets/人畜粪尿肥.png';
import StableBg from '磷肥施用技术切图/默认状态/画面a-2-assets/厩肥.png';
import StrawBg from '磷肥施用技术切图/默认状态/画面a-2-assets/秸秆肥.png';
import GreenBg from '磷肥施用技术切图/默认状态/画面a-2-assets/绿肥.png';
import HumanityBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/人畜粪尿肥.png';
import StableBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/厩肥.png';
import StrawBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/秸秆肥.png';
import GreenBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
import HumanityBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/人畜粪尿肥.png';
import StableBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/厩肥.png';
import StrawBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/秸秆肥.png';
import GreenBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import ButtonContainer from '../../ButtonContainer';
import ButtonDiy from '../../ButtonDiy';
import ButtonContainer from 'pages/FertilizeByGround/ButtonContainer';
import ButtonDiy from 'pages/FertilizeByGround/ButtonDiy';
function Button(props) {
return <ButtonDiy h={107} w={589} top={40} firstTop={190} {...props} />
......
import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/增施有机肥.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/增施有机肥.png';
import bg from '磷肥施用技术切图/默认状态/画面a-1-assets/增施有机肥.png';
import bgActive from '磷肥施用技术切图/按下状态/画面a-1-按下-assets/增施有机肥.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
import { convertpx2vw } from 'config';
const Btn = styled(Link)`
display: block;
......
import React from 'react';
import GroundBg from '../GroundImproveBg';
import GroundBg from 'pages/FertilizeByGround/GroundImproveBg';
import AddOrganicBtn from './AddOrganicBtn';
import AddAlkalineBtn from './AddAlkalineBtn';
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: ${convertpx2vw(240)};
......
import React, {useState} from 'react';
import styled from 'styled-components';
import { withRouter } from 'react-router-dom';
import GroundBg from '../../GroundBg';
import ContainerBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/施用碱性肥料.png';
import LABg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png';
import GLSGBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png';
import GMLBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/钙镁磷肥.png';
import CMHBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png';
import WrongBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png';
import CorrectBg from '../../../../磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png';
import LAActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png';
import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png';
import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
import ContainerBg from '磷肥施用技术切图/默认状态/画面c-3-assets/施用酸性肥料.png';
import LABg from '磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png';
import GLSGBg from '磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png';
import GMLBg from '磷肥施用技术切图/默认状态/画面a-3-assets/钙镁磷肥.png';
import CMHBg from '磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png';
import WrongBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png';
import CorrectBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png';
import LAActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png';
import GLSGActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png';
import GMLActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import correctTextImg from '磷肥施用技术切图/默认状态/画面c-3-1(酸性肥料)正确答案-assets/酸性肥料正确答案.png';
import wrongTextImg from '磷肥施用技术切图/默认状态/画面c-3-1(碱性肥料)错误答案-assets/碱性肥料错误答案.png';
import LAimg from '磷肥施用技术切图/默认状态/画面c-3-1硫铵-assets/硫铵.png';
import GLSGimg from '磷肥施用技术切图/默认状态/画面c-3-1过磷酸钙-assets/过磷酸钙.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import ButtonContainer from '../../ButtonContainer';
import ButtonDiy from '../../ButtonDiy';
......@@ -31,33 +38,89 @@ const StyledCheckImg = styled.img`
user-select: none;
`;
const CenteredTextImg = styled.img`
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: ${convertpx2vw(819)};
height: ${convertpx2vw(563)};
`;
const CenteredInfoImg = styled(CenteredTextImg)`
width: ${convertpx2vw(714)};
height: ${convertpx2vw(564)};
`;
function Button(props) {
return <ButtonDiy w={589} h={107} top={40} firstTop={200} {...props} />
}
export default function AddAcid () {
function AddAcid ({ history }) {
const [LAShow, setLAShow] = useState(false);
const [GLSGShow, setGLSGShow] = useState(false);
const [GMShow, setGMShow] = useState(false);
const [CMHShow, setCMHShow] = useState(false);
const [textImg, setTextImg] = useState(null);
function handleClick(e, setFunc, isCorrect) {
e.preventDefault();
setFunc(true);
setTimeout(() => {
setTextImg(isCorrect ? correctTextImg : wrongTextImg);
}, 1000);
setTimeout(() => {
setTextImg(null);
}, 3000);
}
const [infoImg, setInfoImg] = useState(null);
function handleInfoImg(e, imgSrc) {
e.preventDefault();
e.stopPropagation();
setInfoImg(imgSrc);
setTimeout(() => {
setInfoImg(null);
}, 2000);
}
return (
<GroundBg>
{
textImg !== null ? <CenteredTextImg src={textImg} alt="堆肥" />
: infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" />
: (
<ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={(e) => { e.preventDefault(); setLAShow(true)}}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow} onClick={e => handleInfoImg(e, LAimg)}/>
</Button>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={(e) => { e.preventDefault(); setGLSGShow(true)}}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow} onClick={e => handleInfoImg(e, GLSGimg)}/>
</Button>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={(e) => { e.preventDefault(); setGMShow(true)}}>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, false)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
</Button>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={(e) => { e.preventDefault(); setCMHShow(true)}}>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, false)}>
<StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
</Button>
</ButtonContainer>
<BackBtn />
)
}
<BackBtn
onClick={() => {
if (textImg !== null || infoImg !== null) {
setTextImg(null);
setInfoImg(null);
} else {
history.goBack();
}
}}
/>
<HomeBtn />
</GroundBg>
);
}
export default withRouter(AddAcid);
\ No newline at end of file
import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面c-1-assets/施用酸性肥料.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面c-1-按下-assets/施用酸性肥料.png';
import bg from '磷肥施用技术切图/默认状态/画面c-1-assets/施用酸性肥料.png';
import bgActive from '磷肥施用技术切图/按下状态/画面c-1-按下-assets/施用酸性肥料.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
import { convertpx2vw } from 'config';
const Btn = styled(Link)`
display: block;
......
import React from 'react';
import GroundBg from '../GroundImproveBg';
import GroundBg from 'pages/FertilizeByGround/GroundImproveBg';
import AddOrganicBtn from '../Acid/AddOrganicBtn';
import AddAcidBtn from './AddAcidBtn'
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: ${convertpx2vw(240)};
......
import styled from 'styled-components';
import bg from '../../磷肥施用技术切图/默认状态/画面a-2-assets/背景.png';
import bg from '磷肥施用技术切图/默认状态/画面a-2-assets/背景.png';
const Container = styled.div`
background-image: url(${bg});
......
import styled from 'styled-components';
import bg from '../../磷肥施用技术切图/默认状态/画面a1-assets/改良土壤.png';
import bg from '磷肥施用技术切图/默认状态/画面a1-assets/改良土壤.png';
const Container = styled.div`
background-image: url(${bg});
......
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState } from 'react';
import styled from 'styled-components';
import { Link, withRouter } from 'react-router-dom';
import WheatBg from '../WheatBg';
import { FertilizeByGroundBtn, BackBtn, HomeBtn } from '../SubHome';
import AcidGroundBg from '../../磷肥施用技术切图/默认状态/画面三-assets/酸性土壤.png';
import NeutralGroundBg from '../../磷肥施用技术切图/默认状态/画面三-assets/中性土壤.png';
import AlkalineGroundBg from '../../磷肥施用技术切图/默认状态/画面三-assets/石灰性土壤.png';
import AcidVideoSrc from '../../动画/因土施肥/画面a酸性土壤.mp4';
import NeutralVideoSrc from '../../动画/因土施肥/画面b中性土壤.mp4';
import AlkalineVideoSrc from '../../动画/因土施肥/画面c石灰性土壤.mp4';
import VideoDiy from '../Video';
import { convertpx2vw } from '../../config'
import WheatBg from 'pages/WheatBg';
import { FertilizeByGroundBtn, BackBtn, HomeBtn } from 'pages/SubHome';
import AcidGroundBg from '磷肥施用技术切图/默认状态/画面三-assets/酸性土壤.png';
import NeutralGroundBg from '磷肥施用技术切图/默认状态/画面三-assets/中性土壤.png';
import AlkalineGroundBg from '磷肥施用技术切图/默认状态/画面三-assets/石灰性土壤.png';
import AcidVideoSrc from '动画/因土施肥/画面a酸性土壤.mp4';
import NeutralVideoSrc from '动画/因土施肥/画面b中性土壤.mp4';
import AlkalineVideoSrc from '动画/因土施肥/画面c石灰性土壤.mp4';
import VideoDiy from 'pages/Video';
import { convertpx2vw } from 'config'
const Container = styled(WheatBg)`
display: flex;
......
import React, { useRef } from 'react';
import styled from 'styled-components';
import TitleImg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/集中施肥 .png';
import LineBg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/条施.png';
import CaveBg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/穴施.png';
import DipBg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/蘸秧根.png';
import PlugBg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/塞秧斗.png';
import MixBg from '../磷肥施用技术切图/默认状态/集中施肥01-assets/拌种.png';
import TitleImg from '磷肥施用技术切图/默认状态/集中施肥01-assets/集中施肥 .png';
import LineBg from '磷肥施用技术切图/默认状态/集中施肥01-assets/条施.png';
import CaveBg from '磷肥施用技术切图/默认状态/集中施肥01-assets/穴施.png';
import DipBg from '磷肥施用技术切图/默认状态/集中施肥01-assets/蘸秧根.png';
import PlugBg from '磷肥施用技术切图/默认状态/集中施肥01-assets/塞秧斗.png';
import MixBg from '磷肥施用技术切图/默认状态/集中施肥01-assets/拌种.png';
import LineBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/条施.png';
import CaveBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/穴施.png';
import DipBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/蘸秧根.png';
import PlugBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/塞秧斗.png';
import MixBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/拌种.png';
import LineBgActive from '磷肥施用技术切图/按下状态/集中施肥01-按下-assets/条施.png';
import CaveBgActive from '磷肥施用技术切图/按下状态/集中施肥01-按下-assets/穴施.png';
import DipBgActive from '磷肥施用技术切图/按下状态/集中施肥01-按下-assets/蘸秧根.png';
import PlugBgActive from '磷肥施用技术切图/按下状态/集中施肥01-按下-assets/塞秧斗.png';
import MixBgActive from '磷肥施用技术切图/按下状态/集中施肥01-按下-assets/拌种.png';
import LineVideoSrc from '../动画/集中施肥/点击进入“条施”按钮的画面.mp4';
import CaveVideoSrc from '../动画/集中施肥/点击进入“穴施”按钮后)出现画面.mp4';
import DipVideoSrc from '../动画/集中施肥/(点击进入“蘸秧根”按钮后)出现画面.mp4';
import PlugVideoSrc from '../动画/集中施肥/(点击进入“塞秧斗”按钮后)出现画面.mp4';
import MixVideoSrc from '../动画/集中施肥/(点击进入“拌种”按钮后).mp4';
import LineVideoSrc from '动画/集中施肥/点击进入“条施”按钮的画面.mp4';
import CaveVideoSrc from '动画/集中施肥/点击进入“穴施”按钮后)出现画面.mp4';
import DipVideoSrc from '动画/集中施肥/(点击进入“蘸秧根”按钮后)出现画面.mp4';
import PlugVideoSrc from '动画/集中施肥/(点击进入“塞秧斗”按钮后)出现画面.mp4';
import MixVideoSrc from '动画/集中施肥/(点击进入“拌种”按钮后).mp4';
import Video from './Video';
import { BackBtn, HomeBtn } from './SubHome';
......
import React, { useRef } from 'react';
import styled from 'styled-components';
import TitleImg from '../磷肥施用技术切图/默认状态/控制施用量01-assets/控制施用量.png';
import TenBg from '../磷肥施用技术切图/默认状态/控制施用量01-assets/10kg.png';
import TwentyBg from '../磷肥施用技术切图/默认状态/控制施用量01-assets/20-30kg.png';
import FiftyBg from '../磷肥施用技术切图/默认状态/控制施用量01-assets/大于50kg.png';
import TitleImg from '磷肥施用技术切图/默认状态/控制施用量01-assets/控制施用量.png';
import TenBg from '磷肥施用技术切图/默认状态/控制施用量01-assets/10kg.png';
import TwentyBg from '磷肥施用技术切图/默认状态/控制施用量01-assets/20-30kg.png';
import FiftyBg from '磷肥施用技术切图/默认状态/控制施用量01-assets/大于50kg.png';
import TenBgActive from '../磷肥施用技术切图/按下状态/控制施用量01-按下-assets/10kg.png';
import TwentyBgActive from '../磷肥施用技术切图/按下状态/控制施用量01-按下-assets/20-30kg.png';
import FiftyBgActive from '../磷肥施用技术切图/按下状态/控制施用量01-按下-assets/大于50kg.png';
import TenBgActive from '磷肥施用技术切图/按下状态/控制施用量01-按下-assets/10kg.png';
import TwentyBgActive from '磷肥施用技术切图/按下状态/控制施用量01-按下-assets/20-30kg.png';
import FiftyBgActive from '磷肥施用技术切图/按下状态/控制施用量01-按下-assets/大于50kg.png';
import TenVideoSrc from '../动画/控制施用量/(点击进入“10kg667m2 ”按钮后)出现画面.mp4';
import TwentyVideoSrc from '../动画/控制施用量/(点击进入“20-30kg667m2”按钮后)出现画面.mp4';
import FiftyVideoSrc from '../动画/控制施用量/(点击进入“大于30kg667m2”按钮后)出现画面.mp4';
import TenVideoSrc from '动画/控制施用量/(点击进入“10kg667m2 ”按钮后)出现画面.mp4';
import TwentyVideoSrc from '动画/控制施用量/(点击进入“20-30kg667m2”按钮后)出现画面.mp4';
import FiftyVideoSrc from '动画/控制施用量/(点击进入“大于50kg667m2”按钮后)出现画面.mp4';
import { convertpx2vw } from '../config';
import Video from './Video';
......
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
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';
import WheatBg from 'pages/WheatBg';
import SelectBg from '磷肥施用技术切图/默认状态/玉米01-assets/玉米生长周期.png';
import SelectBgActive from '磷肥施用技术切图/按下状态/玉米01-按下-assets/玉米生长周期.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const SelectBtn = styled(Link)`
display: block;
......
import React, { useRef } from 'react';
import styled from 'styled-components';
import WheatBg from '../../WheatBg';
import ContainerBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/玉米.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import WheatBg from 'pages/WheatBg';
import ContainerBg from '磷肥施用技术切图/默认状态/玉米02-assets/玉米.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import VideoDiy from '../../Video';
import SeedlingBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/苗期.png'
import JointingBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/拔节期.png'
import HornBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/大喇叭口期.png'
import TasselBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/抽穗期.png'
import MaturityBg from '../../../磷肥施用技术切图/默认状态/玉米02-assets/成熟期.png'
import SeedlingBg from '磷肥施用技术切图/默认状态/玉米02-assets/苗期.png'
import JointingBg from '磷肥施用技术切图/默认状态/玉米02-assets/拔节期.png'
import HornBg from '磷肥施用技术切图/默认状态/玉米02-assets/大喇叭口期.png'
import TasselBg from '磷肥施用技术切图/默认状态/玉米02-assets/抽穗期.png'
import MaturityBg from '磷肥施用技术切图/默认状态/玉米02-assets/成熟期.png'
import SeedlingBgActive from '../../../磷肥施用技术切图/按下状态/玉米02-按下-assets/苗期.png'
import JointingBgActive from '../../../磷肥施用技术切图/按下状态/玉米02-按下-assets/拔节期.png'
import HornBgActive from '../../../磷肥施用技术切图/按下状态/玉米02-按下-assets/大喇叭口期.png'
import TasselBgActive from '../../../磷肥施用技术切图/按下状态/玉米02-按下-assets/抽穗期.png'
import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/玉米02-按下-assets/成熟期.png'
import SeedlingBgActive from '磷肥施用技术切图/按下状态/玉米02-按下-assets/苗期.png'
import JointingBgActive from '磷肥施用技术切图/按下状态/玉米02-按下-assets/拔节期.png'
import HornBgActive from '磷肥施用技术切图/按下状态/玉米02-按下-assets/大喇叭口期.png'
import TasselBgActive from '磷肥施用技术切图/按下状态/玉米02-按下-assets/抽穗期.png'
import MaturityBgActive from '磷肥施用技术切图/按下状态/玉米02-按下-assets/成熟期.png'
import SeedlingVideoSrcs from '../../../动画/玉米/玉米苗期.mp4'
import JointingVideoSrcs from '../../../动画/玉米/玉米拔节期.mp4'
import HornVideoSrcs from '../../../动画/玉米/玉米大喇叭口期.mp4'
import TasselVideoSrcs from '../../../动画/玉米/玉米抽穗期.mp4'
import MaturityVideoSrcs from '../../../动画/玉米/玉米成熟期.mp4'
import { convertpx2vw } from '../../../config';
import SeedlingVideoSrcs from '动画/玉米/玉米苗期.mp4'
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: ${convertpx2vw(67)};
......
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
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';
import WheatBg from 'pages/WheatBg';
import SelectBg from '磷肥施用技术切图/默认状态/油菜01-assets/油菜生长周期.png';
import SelectBgActive from '磷肥施用技术切图/按下状态/油菜01-按下-assets/油菜生长周期.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const SelectBtn = styled(Link)`
display: block;
......
import React, { useRef } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import WheatBg from '../../WheatBg';
import ContainerBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/油菜.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import Video from '../../Video';
import WheatBg from 'pages/WheatBg';
import ContainerBg from '磷肥施用技术切图/默认状态/油菜02-assets/油菜.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import Video from 'pages/Video';
import SeedlingBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/苗期.png'
import LaceBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/蕾薹期.png'
import FloweringBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/开花期.png'
import MaturityBg from '../../../磷肥施用技术切图/默认状态/油菜02-assets/角果成熟期.png'
import SeedlingBg from '磷肥施用技术切图/默认状态/油菜02-assets/苗期.png'
import LaceBg from '磷肥施用技术切图/默认状态/油菜02-assets/蕾薹期.png'
import FloweringBg from '磷肥施用技术切图/默认状态/油菜02-assets/开花期.png'
import MaturityBg from '磷肥施用技术切图/默认状态/油菜02-assets/角果成熟期.png'
import SeedlingBgActive from '../../../磷肥施用技术切图/按下状态/油菜02-按下-assets/苗期.png'
import LaceBgActive from '../../../磷肥施用技术切图/按下状态/油菜02-按下-assets/蕾薹期.png'
import FloweringBgActive from '../../../磷肥施用技术切图/按下状态/油菜02-按下-assets/开花期.png'
import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/油菜02-按下-assets/角果成熟期.png'
import SeedlingBgActive from '磷肥施用技术切图/按下状态/油菜02-按下-assets/苗期.png'
import LaceBgActive from '磷肥施用技术切图/按下状态/油菜02-按下-assets/蕾薹期.png'
import FloweringBgActive from '磷肥施用技术切图/按下状态/油菜02-按下-assets/开花期.png'
import MaturityBgActive from '磷肥施用技术切图/按下状态/油菜02-按下-assets/角果成熟期.png'
import SeedlingVideoSrcs from '../../../动画/油菜/油菜苗期.mp4'
import LaceVideoSrcs from '../../../动画/油菜/油菜蕾薹期.mp4'
import MaturityVideoSrcs from '../../../动画/油菜/油菜角果成熟期.mp4'
import { convertpx2vw } from '../../../config';
import SeedlingVideoSrcs from '动画/油菜/油菜苗期.mp4'
import LaceVideoSrcs from '动画/油菜/油菜蕾薹期.mp4'
import MaturityVideoSrcs from '动画/油菜/油菜角果成熟期.mp4'
import FloweringVideoSrcs from '动画/油菜/油菜开花期.mp4'
import { convertpx2vw } from 'config';
const Container = styled.div`
margin-top: ${convertpx2vw(67)};
......@@ -64,12 +65,12 @@ const videoSrcs = {
SeedlingVideoSrcs,
LaceVideoSrcs,
MaturityVideoSrcs,
FloweringVideoSrcs,
};
export default withRouter(({ match, history }) => {
export default function() {
const videoRef = useRef();
function handleClick(name) {
if (name === 'Flowering') return;
videoRef.current.play(videoSrcs[name+'VideoSrcs']);
}
......@@ -93,4 +94,4 @@ export default withRouter(({ match, history }) => {
<Video wrappedComponentRef={c => videoRef.current = c} />
</WheatBg>
);
});
\ No newline at end of file
}
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';
import WheatBg from 'pages/WheatBg';
import img from '磷肥施用技术切图/默认状态/冬小麦苗期-assets/苗期.png';
import { convertpx2vw } from 'config';
import { BackBtn, HomeBtn } from 'pages/SubHome';
const StyledImg = styled.img`
display: block;
......
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
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';
import WheatBg from 'pages/WheatBg';
import SelectBg from '磷肥施用技术切图/默认状态/冬小麦01-assets/冬小麦生长周期.png';
import SelectBgActive from '磷肥施用技术切图/按下状态/冬小麦01-按下-assets/冬小麦生长周期.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
const SelectBtn = styled(Link)`
display: block;
......
import React, { useState, useRef } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import WheatBg from '../../WheatBg';
import ContainerBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/冬小麦.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import Video from '../../Video';
import WheatBg from 'pages/WheatBg';
import ContainerBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/冬小麦.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import Video from 'pages/Video';
import SeedlingBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/苗期.png'
import TillerBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/分蘖期.png'
import WinteringBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/越冬期.png'
import GreeningBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/返青期.png'
import JointingBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/拔节期.png'
import BootingBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/孕穗期.png'
import FillingBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/灌浆期.png'
import MaturityBg from '../../../磷肥施用技术切图/默认状态/冬小麦02 -assets/成熟期.png'
import SeedlingBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/苗期.png'
import TillerBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/分蘖期.png'
import WinteringBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/越冬期.png'
import GreeningBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/返青期.png'
import JointingBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/拔节期.png'
import BootingBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/孕穗期.png'
import FillingBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/灌浆期.png'
import MaturityBg from '磷肥施用技术切图/默认状态/冬小麦02 -assets/成熟期.png'
import SeedlingBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/出苗期.png'
import TillerBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/分蘖期.png'
import WinteringBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/越冬期.png'
import GreeningBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/返青期.png'
import JointingBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/拔节期.png'
import BootingBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/孕穗期.png'
import FillingBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/灌浆期.png'
import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/成熟期.png'
import SeedlingBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/出苗期.png'
import TillerBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/分蘖期.png'
import WinteringBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/越冬期.png'
import GreeningBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/返青期.png'
import JointingBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/拔节期.png'
import BootingBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/孕穗期.png'
import FillingBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/灌浆期.png'
import MaturityBgActive from '磷肥施用技术切图/按下状态/冬小麦02 -按下-assets/成熟期.png'
import SeedlingVideoSrcs from '../../../动画/冬小麦/冬小麦苗期.mp4'
import TillerVideoSrcs from '../../../动画/冬小麦/冬小麦苗期.mp4'
import WinteringVideoSrcs from '../../../动画/冬小麦/冬小麦越冬期.mp4'
import GreeningVideoSrcs from '../../../动画/冬小麦/冬小麦返青期.mp4'
import JointingVideoSrcs from '../../../动画/冬小麦/冬小麦拔节期.mp4'
import BootingVideoSrcs from '../../../动画/冬小麦/冬小麦孕穗期.mp4'
import FillingVideoSrcs from '../../../动画/冬小麦/冬小麦灌浆期.mp4'
import MaturityVideoSrcs from '../../../动画/冬小麦/冬小麦成熟期.mp4'
import { convertpx2vw } from '../../../config';
import SeedlingVideoSrcs from '动画/冬小麦/冬小麦苗期.mp4'
import TillerVideoSrcs from '动画/冬小麦/冬小麦分蘖期.mp4'
import WinteringVideoSrcs from '动画/冬小麦/冬小麦越冬期.mp4'
import GreeningVideoSrcs from '动画/冬小麦/冬小麦返青期.mp4'
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: ${convertpx2vw(67)};
......
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import WheatBg from '../WheatBg';
import SelectBg from '../../磷肥施用技术切图/默认状态/早施01.1-assets/选择作物.png';
import SelectBgActive from '../../磷肥施用技术切图/按下状态/早施01.1-按下-assets/选择作物.png';
import WheatBg from 'pages/WheatBg';
import SelectBg from '磷肥施用技术切图/默认状态/早施01.1-assets/选择作物.png';
import SelectBgActive from '磷肥施用技术切图/按下状态/早施01.1-按下-assets/选择作物.png';
import { BackBtn, HomeBtn } from '../SubHome';
import { convertpx2vw } from '../../config';
......
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import WheatBg from '../WheatBg';
import Wheat from '../../磷肥施用技术切图/默认状态/早施02.1-assets/冬小麦.png'
import WheatBtnBg from '../../磷肥施用技术切图/默认状态/早施02.1-assets/冬小麦(文字).png'
import WheatBtnBgActive from '../../磷肥施用技术切图/按下状态/早施02.1-按下-assets/冬小麦(文字).png'
import Rape from '../../磷肥施用技术切图/默认状态/早施02.1-assets/油菜.png'
import RapeBtnBg from '../../磷肥施用技术切图/默认状态/早施02.1-assets/油菜(文字).png'
import RapeBtnBgActive from '../../磷肥施用技术切图/按下状态/早施02.1-按下-assets/油菜(文字).png'
import Corn from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米.png'
import CornBtnBg from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米(文字).png'
import CornBtnBgActive from '../../磷肥施用技术切图/按下状态/早施02.1-按下-assets/玉米(文字).png'
import WheatBg from 'pages/WheatBg';
import Wheat from '磷肥施用技术切图/默认状态/早施02.1-assets/冬小麦.png'
import WheatBtnBg from '磷肥施用技术切图/默认状态/早施02.1-assets/冬小麦(文字).png'
import WheatBtnBgActive from '磷肥施用技术切图/按下状态/早施02.1-按下-assets/冬小麦(文字).png'
import Rape from '磷肥施用技术切图/默认状态/早施02.1-assets/油菜.png'
import RapeBtnBg from '磷肥施用技术切图/默认状态/早施02.1-assets/油菜(文字).png'
import RapeBtnBgActive from '磷肥施用技术切图/按下状态/早施02.1-按下-assets/油菜(文字).png'
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';
......
import React from 'react';
import bg from '../磷肥施用技术切图/默认状态/画面一-assets/磷肥施用技术仿真软件.png';
import bg from '磷肥施用技术切图/默认状态/画面一-assets/磷肥施用技术仿真软件.png';
import { Link } from "react-router-dom";
export default function Home({ match }) {
......
import React from 'react';
import styled from 'styled-components';
import { Link, withRouter } from "react-router-dom";
import BackBtnBg from '../磷肥施用技术切图/默认状态/画面二-assets/返回.png';
import BackBtnBg from '磷肥施用技术切图/默认状态/画面二-assets/返回.png';
import HomeBtnBg from '../磷肥施用技术切图/默认状态/画面二-assets/主页.png';
import FertilizeByGroundBg from '../磷肥施用技术切图/默认状态/画面二-assets/因土施肥.png';
import FertilizeEarlyBg from '../磷肥施用技术切图/默认状态/画面二-assets/早施.png';
import FertilizeConcentratedBg from '../磷肥施用技术切图/默认状态/画面二-assets/集中施肥.png';
import FertilizeControlBg from '../磷肥施用技术切图/默认状态/画面二-assets/控制施用量.png';
import HomeBtnBg from '磷肥施用技术切图/默认状态/画面二-assets/主页.png';
import FertilizeByGroundBg from '磷肥施用技术切图/默认状态/画面二-assets/因土施肥.png';
import FertilizeEarlyBg from '磷肥施用技术切图/默认状态/画面二-assets/早施.png';
import FertilizeConcentratedBg from '磷肥施用技术切图/默认状态/画面二-assets/集中施肥.png';
import FertilizeControlBg from '磷肥施用技术切图/默认状态/画面二-assets/控制施用量.png';
import WheatBg from './WheatBg';
import { convertpx2vw } from '../config';
const baseUrl = process.env.PUBLIC_URL;
......
import styled from 'styled-components';
import bg from '../磷肥施用技术切图/默认状态/画面二-assets/背景.png';
import bg from '磷肥施用技术切图/默认状态/画面二-assets/背景.png';
const Container = styled.div`
background-image: url(${bg});
......
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论