Skip to content

L
LiFeiShiYong
提交 99e5cd3a authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

初始化项目

上级 7fbc2386
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1571 行增加 和 51 行删除
.env 0 → 100644
浏览文件 @ 99e5cd3a
NODE_PATH=src
package.json
浏览文件 @ 99e5cd3a
......@@ -5,7 +5,9 @@
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"styled-components": "^4.3.2"
},
"scripts": {
"start": "react-scripts start",
......
public/favicon.ico 100644 → 100755
查看替换文件 @ 7fbc2386 浏览文件 @ 99e5cd3a
public/favicon.ico

3.8 KB | W: | H:

public/favicon.ico

15.0 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/manifest.json
浏览文件 @ 99e5cd3a
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "仿真软件-磷肥施用技术",
"name": "仿真软件-磷肥施用技术",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
}
],
"start_url": ".",
"display": "standalone",
......
src/App.js
浏览文件 @ 99e5cd3a
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import Home from './pages/Home';
import SubHome from './pages/SubHome';
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 FertilizeStable from './pages/FertilizeByGround/Acid/AddOrganic/Stable'
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 FertilizeEarly from './pages/FertilizeEarly';
import FertilizeEarlySelect from './pages/FertilizeEarly/select';
import FertilizeEarlySelectWheat from './pages/FertilizeEarly/Wheat';
import FertilizeEarlySelectRape from './pages/FertilizeEarly/Rape';
import FertilizeEarlySelectCorn from './pages/FertilizeEarly/Corn';
import FertilizeEarlySelectWheatLifetime from './pages/FertilizeEarly/Wheat/lifetime';
import FertilizeEarlySelectWheatSeedling from './pages/FertilizeEarly/Wheat/Seedling';
import FertilizeEarlySelectrapeLifetime from './pages/FertilizeEarly/Rape/lifetime';
import FertilizeEarlySelectCornLifetime from './pages/FertilizeEarly/Corn/lifetime';
import FertilizeConcentrated from './pages/FertilizeConcentrated';
import FertilizeControl from './pages/FertilizeControl';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<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="/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="/sub-home/fertilize-by-ground/acid/add-alkaline" component={FertilizeByAcidGroundAddAlkaline} />
<Route exact path="/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" /> }
/>
<Route exact path="/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="/sub-home/fertilize-early/select/rape/lifetime" component={FertilizeEarlySelectrapeLifetime} />
<Route exact path="/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} />
</Switch>
</Router>
);
}
......
src/config.js 0 → 100644
浏览文件 @ 99e5cd3a
export const USE_VW = true;
export function convertpx2vw(px) { return USE_VW ? px / 16 + 'vw' : px + 'px'}
\ No newline at end of file
src/index.css
浏览文件 @ 99e5cd3a
body {
html, body, #root {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
padding: 0;
}
video::-webkit-media-controls {
display:none !important;
}
\ No newline at end of file
src/index.js
浏览文件 @ 99e5cd3a
......@@ -2,11 +2,11 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
// serviceWorker.unregister();
src/logo.svg deleted 100644 → 0
浏览文件 @ 7fbc2386
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
src/pages/FertilizeByGround/Acid/AddAlkaline/index.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, {useState} from 'react';
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 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';
const PositionedContainer = styled.div`
margin: 102px auto 0;
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled.a`
display: block;
width: 589px;
height: 107px;
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
background-size: contain;
background-repeat: no-repeat;
background-position: center;
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
`;
const StyledCheckImg = styled.img`
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 88px;
visibility: ${props => props.show ? 'visible' : 'hidden'};
user-select: none;
`;
export default function AddAlkaline () {
const [LAShow, setLAShow] = useState(false);
const [GLSGShow, setGLSGShow] = useState(false);
const [GMShow, setGMShow] = useState(false);
const [CMHShow, setCMHShow] = useState(false);
return (
<GroundBg>
<PositionedContainer>
<StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
</StyledBtn>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
</StyledBtn>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/>
</StyledBtn>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/>
</StyledBtn>
</PositionedContainer>
<BackBtn />
<HomeBtn />
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddAlkalineBtn.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
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';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&:active {
background-image: url(${bgActive});
}
`;
export default Btn;
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganic/Green.js 0 → 100644
浏览文件 @ 99e5cd3a
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 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 { BackBtn, HomeBtn } from '../../../SubHome';
const StyledImg = styled.img`
display: inline-block;
width: 246px;
height: 363px;
`;
const StyledWheatBg = styled(WheatBg)`
flex-direction: column;
justify-content: space-around;
`;
const Row = styled.div`
/* text-align: center; */
display: flex;
flex-direction: row;
justify-content: space-around;
`;
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={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={LPImg} alt="绿萍" />
</Row>
<BackBtn />
<HomeBtn />
</StyledWheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganic/Humanity.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
const StyledImg = styled.img`
display: block;
width: 702px;
height: 552px;
`;
export default function Humanity() {
return (
<WheatBg>
<StyledImg src={HumanityImg} alt="人粪尿肥" style={{marginRight: '80px'}}/>
<StyledImg src={AnimalImg} alt="家畜粪尿肥" />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganic/Stable.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import styled from 'styled-components';
import WheatBg from '../../../WheatBg';
import StableImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/厩肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
const StyledImg = styled.img`
display: block;
width: 702px;
height: 552px;
`;
export default function Stable() {
return (
<WheatBg>
<StyledImg src={StableImg} alt="家畜粪尿肥" />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganic/Straw.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
const StyledImg = styled.img`
display: block;
width: 490px;
height: 391px;
`;
export default function Straw() {
return (
<WheatBg>
<StyledImg src={HeapImg} alt="堆肥" style={{marginRight: '20px'}}/>
<StyledImg src={SteepImg} alt="沤肥" style={{marginRight: '20px'}}/>
<StyledImg src={BiogasImg} alt="沼气池肥" />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganic/index.js 0 → 100644
浏览文件 @ 99e5cd3a
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 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';
const PositionedContainer = styled.div`
margin: 102px auto 0;
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled(Link)`
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 107px;
width: 590px;
`;
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});
}
`;
export default function AddOrganic({ match }) {
return (
<GroundBg>
<PositionedContainer>
<HumanityBtn to={`${match.url}/humanity`}/>
<StableBtn to={`${match.url}/stable`} />
<StrawBtn to={`${match.url}/straw`} />
<GreenBtn to={`${match.url}/green`} />
</PositionedContainer>
<BackBtn />
<HomeBtn />
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/AddOrganicBtn.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
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';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&:active {
background-image: url(${bgActive});
}
`;
export default Btn;
\ No newline at end of file
src/pages/FertilizeByGround/Acid/index.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import GroundBg from '../GroundImproveBg';
import AddOrganicBtn from './AddOrganicBtn';
import AddAlkalineBtn from './AddAlkalineBtn';
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: 240px;
`;
export default function({ match }) {
return (
<GroundBg>
<PositionedAddOrganicBtn to={`${match.url}/add-organic`} />
<AddAlkalineBtn to={`${match.url}/add-alkaline`} />
<BackBtn />
<HomeBtn />
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddAcid/index.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, {useState} from 'react';
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 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';
const PositionedContainer = styled.div`
margin: 102px auto 0;
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled.a`
display: block;
width: 589px;
height: 107px;
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
background-size: contain;
background-repeat: no-repeat;
background-position: center;
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
`;
const StyledCheckImg = styled.img`
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 88px;
visibility: ${props => props.show ? 'visible' : 'hidden'};
user-select: none;
`;
export default function AddAcid () {
const [LAShow, setLAShow] = useState(false);
const [GLSGShow, setGLSGShow] = useState(false);
const [GMShow, setGMShow] = useState(false);
const [CMHShow, setCMHShow] = useState(false);
return (
<GroundBg>
<PositionedContainer>
<StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/>
</StyledBtn>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/>
</StyledBtn>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
</StyledBtn>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
</StyledBtn>
</PositionedContainer>
<BackBtn />
<HomeBtn />
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddAcidBtn.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&:active {
background-image: url(${bgActive});
}
`;
export default Btn;
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/index.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import GroundBg from '../GroundImproveBg';
import AddOrganicBtn from '../Acid/AddOrganicBtn';
import AddAcidBtn from './AddAcidBtn'
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: 240px;
`;
export default function Alkaline({ match }) {
return (
<GroundBg>
<PositionedAddOrganicBtn to={`${match.url}/add-organic`} />
<AddAcidBtn to={`${match.url}/add-acid`} />
<BackBtn />
<HomeBtn />
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/GroundBg.js 0 → 100644
浏览文件 @ 99e5cd3a
import styled from 'styled-components';
import bg from '../../磷肥施用技术切图/默认状态/画面a-2-assets/背景.png';
const Container = styled.div`
background-image: url(${bg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
export default Container;
src/pages/FertilizeByGround/GroundImproveBg.js 0 → 100644
浏览文件 @ 99e5cd3a
import styled from 'styled-components';
import bg from '../../磷肥施用技术切图/默认状态/画面a1-assets/改良土壤.png';
const Container = styled.div`
background-image: url(${bg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
export default Container;
src/pages/FertilizeByGround/index.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, { useRef, useState, useEffect } 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';
const Container = styled(WheatBg)`
display: flex;
flex-direction: column;
justify-content: flex-start;
`;
const PositionedFertilizeByGround = styled(FertilizeByGroundBtn)`
margin: 120px auto 0;
`;
const GroundBtn = styled(Link)`
display: block;
width: 300px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
`;
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});
`;
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%;
`;
const videoSrcs = {
acid: AcidVideoSrc,
neutral: NeutralVideoSrc,
alkaline: AlkalineVideoSrc,
}
function FertilizeByGround({ history, match }) {
const videoRef = useRef(null);
const [isPlay, setIsPlay] = useState(false);
const [currentType, setCurrentType] = useState(); // acid, neutral, alkaline
const [isRedirect, setIsRedirect] = useState(true);
function handleClick(e, type, noRedirect) {
e.preventDefault();
setIsPlay(true);
setCurrentType(type);
setIsRedirect( noRedirect ? false : true);
}
useEffect(() => {
videoRef.current.src=videoSrcs[currentType]
videoRef.current.play();
}, [currentType]);
function handleEnded() {
setIsPlay(false);
if (isRedirect) {
history.push(`${match.url}/${currentType}`);
}
}
return (
<Container>
<PositionedFertilizeByGround as="div" />
<RowBtn>
<AcidGroundBtn to='#' onClick={e => handleClick(e, 'acid')} />
<NeutralGroundBtn to='#' onClick={e => handleClick(e, 'neutral', true)} />
<AlkalineGroundBtn to='#' onClick={e => handleClick(e, 'alkaline')} />
</RowBtn>
<BackBtn />
<HomeBtn />
<VideoWrapper show={isPlay}>
<StyledVideo ref={videoRef} onEnded={handleEnded} />
</VideoWrapper>
</Container>
);
}
export default withRouter(FertilizeByGround);
src/pages/FertilizeConcentrated.js 0 → 100644
浏览文件 @ 99e5cd3a
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 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 Video from './Video';
import { BackBtn, HomeBtn } from './SubHome';
import WheatBg from './WheatBg';
import { convertpx2vw } from '../config';
const StyledWheatBg = styled(WheatBg)`
flex-direction: column;
justify-content: flex-start;
`;
const StyledTitle = styled.img`
flex-shrink: 0;
width: 256px;
height: 256px;
margin: 120px 0 80px;
`;
const StyledBtn = styled.button`
background-color: transparent;
border: none;
&:focus {
outline: none;
}
cursor: pointer;
width: ${convertpx2vw(300)};
height: ${convertpx2vw(90)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: ${convertpx2vw(40) + ' ' + convertpx2vw(60)};
background-image: ${props => `url(${props.bg})`};
&:active {
background-image: ${props => `url(${props.activeBg})`};
}
`;
const Container = styled.div`
padding: 0 110px;
display: flex;
flex-wrap: wrap;
`;
const names = ['Line', 'Cave', 'Dip', 'Plug', 'Mix', ];
const bgs = {LineBg, CaveBg, DipBg, PlugBg, MixBg, };
const bgsActive = { LineBgActive, CaveBgActive, DipBgActive, PlugBgActive, MixBgActive, };
const videoSrcs = { LineVideoSrc, CaveVideoSrc, DipVideoSrc, PlugVideoSrc, MixVideoSrc, };
export default function ({ match }) {
const videoRef = useRef();
function handleClick(name) {
videoRef.current.src = videoSrcs[name+'VideoSrc'];
videoRef.current.play();
}
return (
<StyledWheatBg>
<StyledTitle src={TitleImg} />
<Container>
{
names.map(name => (
<StyledBtn
key={name}
bg={bgs[name+'Bg']}
activeBg={bgsActive[name+'BgActive']}
onClick={() => handleClick(name)}
/>
))
}
</Container>
<BackBtn />
<HomeBtn />
<Video ref={videoRef} />
</StyledWheatBg>
);
}
src/pages/FertilizeControl.js 0 → 100644
浏览文件 @ 99e5cd3a
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 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 Video from './Video';
import { BackBtn, HomeBtn } from './SubHome';
import WheatBg from './WheatBg';
const StyledWheatBg = styled(WheatBg)`
flex-direction: column;
justify-content: flex-start;
`;
const StyledTitle = styled.img`
width: 256px;
height: 256px;
margin: 120px 0 80px;
`;
const StyledBtn = styled.button`
background-color: transparent;
border: none;
&:focus {
outline: none;
}
cursor: pointer;
width: 300px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: ${props => `url(${props.bg})`};
&:active {
background-image: ${props => `url(${props.activeBg})`};
}
&:not(:first-child) {
margin-left: 120px;
}
`;
const Container = styled.div`
text-align: center;
`;
const names = ['Ten', 'Twenty', 'Fifty'];
const bgs = {TenBg, TwentyBg, FiftyBg };
const bgsActive = { TenBgActive, TwentyBgActive, FiftyBgActive };
const videoSrcs = { TenVideoSrc, TwentyVideoSrc, FiftyVideoSrc };
export default function ({ match }) {
const videoRef = useRef();
function handleClick(name) {
videoRef.current.src = videoSrcs[name+'VideoSrc'];
videoRef.current.play();
}
return (
<StyledWheatBg>
<StyledTitle src={TitleImg} />
<Container>
{
names.map(name => (
<StyledBtn
key={name}
bg={bgs[name+'Bg']}
activeBg={bgsActive[name+'BgActive']}
onClick={() => handleClick(name)}
/>
))
}
</Container>
<BackBtn />
<HomeBtn />
<Video ref={videoRef} />
</StyledWheatBg>
);
}
src/pages/FertilizeEarly/Corn/index.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
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});
}
`;
export default function Corn({ match }) {
return (
<WheatBg>
<SelectBtn to={`${match.url}/lifetime`} />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/Corn/lifetime.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, { useState, useRef } from 'react';
import { Link, 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 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 SeedlingVideoSrcs from '../../../动画/玉米/玉米苗期.mp4'
import JointingVideoSrcs from '../../../动画/玉米/玉米拔节期.mp4'
import HornVideoSrcs from '../../../动画/玉米/玉米大喇叭口期.mp4'
import TasselVideoSrcs from '../../../动画/玉米/玉米抽穗期.mp4'
import MaturityVideoSrcs from '../../../动画/玉米/玉米成熟期.mp4'
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;
`;
const Btn = styled.button`
background-color: transparent;
border: none;
&:focus {
outline: none;
}
width: 392px;
height: 62px;
cursor: pointer;
&:first-child {
margin-top: 133px;
}
&:not(:first-child) {
margin-top: 20px;
}
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: ${props => `url(${props.bg})`};
&:active {
background-image: ${props => `url(${props.activeBg})`};
}
`;
const names = ['Seedling', 'Jointing', 'Horn', 'Tassel', 'Maturity']
const bgs = {SeedlingBg, JointingBg, HornBg, TasselBg, MaturityBg };
const bgsActive = {SeedlingBgActive, JointingBgActive, HornBgActive, TasselBgActive, MaturityBgActive};
const videoSrcs = {
SeedlingVideoSrcs,
JointingVideoSrcs,
HornVideoSrcs,
TasselVideoSrcs,
MaturityVideoSrcs,
};
export default withRouter(({ match, history }) => {
const videoRef = useRef();
function handleClick(name) {
videoRef.current.src = videoSrcs[name+'VideoSrcs'];
videoRef.current.play();
}
return (
<WheatBg>
<Container>
{
names.map(name => (
<Btn
key={name}
bg={bgs[name+'Bg']}
activeBg={bgsActive[name+'BgActive']}
onClick={() => handleClick(name)}
/>
))
}
</Container>
<BackBtn />
<HomeBtn />
<Video ref={videoRef} />
</WheatBg>
);
});
\ No newline at end of file
src/pages/FertilizeEarly/Rape/index.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
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});
}
`;
export default function Wheat({ match }) {
return (
<WheatBg>
<SelectBtn to={`${match.url}/lifetime`} />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/Rape/lifetime.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, { useState, useRef } from 'react';
import { Link, 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 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 SeedlingVideoSrcs from '../../../动画/油菜/油菜苗期.mp4'
import LaceVideoSrcs from '../../../动画/油菜/油菜蕾薹期.mp4'
import MaturityVideoSrcs from '../../../动画/油菜/油菜角果成熟期.mp4'
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;
`;
const Btn = styled.button`
background-color: transparent;
border: none;
width: 392px;
height: 72px;
cursor: pointer;
&:focus {
outline: none;
}
&:first-child {
margin-top: 120px;
}
&:not(:first-child) {
margin-top: 20px;
}
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: ${props => `url(${props.bg})`};
&:active {
background-image: ${props => `url(${props.activeBg})`};
}
`;
const names = ['Seedling', 'Lace', 'Flowering', 'Maturity']
const bgs = {SeedlingBg, LaceBg, FloweringBg, MaturityBg };
const bgsActive = {SeedlingBgActive, LaceBgActive, FloweringBgActive, MaturityBgActive};
const videoSrcs = {
SeedlingVideoSrcs,
LaceVideoSrcs,
MaturityVideoSrcs,
};
export default withRouter(({ match, history }) => {
const videoRef = useRef();
function handleClick(name) {
if (name === 'Flowering') return;
videoRef.current.src = videoSrcs[name+'VideoSrcs'];
videoRef.current.play();
}
return (
<WheatBg>
<Container>
{
names.map(name => (
<Btn
key={name}
bg={bgs[name+'Bg']}
activeBg={bgsActive[name+'BgActive']}
onClick={() => handleClick(name)}
/>
))
}
</Container>
<BackBtn />
<HomeBtn />
<Video ref={videoRef} />
</WheatBg>
);
});
\ No newline at end of file
src/pages/FertilizeEarly/Wheat/Seedling.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import styled from 'styled-components';
import WheatBg from '../../WheatBg';
import img from '../../../磷肥施用技术切图/默认状态/冬小麦苗期-assets/苗期.png';
import { BackBtn, HomeBtn } from '../../SubHome';
const StyledImg = styled.img`
display: block;
width: 702px;
height: 552px;
`;
export default function Seedling() {
return (
<WheatBg>
<StyledImg src={img} />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/Wheat/index.js 0 → 100644
浏览文件 @ 99e5cd3a
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';
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});
}
`;
export default function Wheat({ match }) {
return (
<WheatBg>
<SelectBtn to={`${match.url}/lifetime`} />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/Wheat/lifetime.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, { useState, useRef } from 'react';
import { Link, 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 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 SeedlingVideoSrcs 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'
const Container = styled.div`
margin-top: 67px;
display: block;
width: 444px;
height: 867px;
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;
cursor: pointer;
&:focus {
outline: none;
}
&:first-child {
margin-top: 120px;
}
&:not(:first-child) {
margin-top: 20px;
}
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: ${props => `url(${props.bg})`};
&:active {
background-image: ${props => `url(${props.activeBg})`};
}
`;
// &:active {
// background-image: url(${SelectBgActive});
// }
const names = ['Seedling', 'Tiller', 'Wintering', 'Greening', 'Jointing', 'Booting', 'Filling', 'Maturity']
const bgs = {SeedlingBg, TillerBg, WinteringBg, GreeningBg, JointingBg, BootingBg, FillingBg, MaturityBg };
const bgsActive = {SeedlingBgActive, TillerBgActive, WinteringBgActive, GreeningBgActive, JointingBgActive, BootingBgActive, FillingBgActive, MaturityBgActive};
const videoSrcs = {
SeedlingVideoSrcs,
WinteringVideoSrcs,
GreeningVideoSrcs,
JointingVideoSrcs,
BootingVideoSrcs,
FillingVideoSrcs,
MaturityVideoSrcs,
};
export default withRouter(({ match, history }) => {
const videoRef = useRef();
const [name, setName] = useState();
function handleClick(name) {
setName(name);
if (name === 'Tiller') return;
videoRef.current.src = videoSrcs[name+'VideoSrcs'];
videoRef.current.play();
}
function handleEnded() {
if (name === 'Seedling') {
history.push(`${match.url}/Seedling`);
}
}
return (
<WheatBg>
<Container>
{
names.map(name => (
<Btn
key={name}
bg={bgs[name+'Bg']}
activeBg={bgsActive[name+'BgActive']}
onClick={() => handleClick(name)}
/>
))
}
</Container>
<BackBtn />
<HomeBtn />
<Video ref={videoRef} onEnded={handleEnded} />
</WheatBg>
);
});
\ No newline at end of file
src/pages/FertilizeEarly/index.js 0 → 100644
浏览文件 @ 99e5cd3a
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 { BackBtn, HomeBtn } from '../SubHome';
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});
}
`;
export default function FertilizeEarly({ match }) {
return (
<WheatBg>
<SelectBtn to={`${match.url}/select`} />
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/select.js 0 → 100644
浏览文件 @ 99e5cd3a
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 { BackBtn, HomeBtn } from '../SubHome';
const Icon = styled.img`
width: 256px;
height: 256px;
`;
const Btn = styled(Link)`
display: block;
width: 308px;
height: 108px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
`;
const Btns = {};
const bgs = {
WheatBtnBg, WheatBtnBgActive, RapeBtnBg, RapeBtnBgActive, CornBtnBg, CornBtnBgActive,
};
['Wheat', 'Rape', 'Corn'].map(name => {
Btns[name] = styled(Btn)`
margin-top: 79px;
background-image: url(${bgs[name+'BtnBg']});
&:active {
background-image: url(${bgs[name+'BtnBgActive']});
}
`;
});
const Row = styled.div`
`;
const Col = styled.div`
display: inline-block;
text-align: center;
&:not(:last-child) {
margin-right: 160px;
}
`;
export default function FertilizeEarlySelect({ match }) {
return (
<WheatBg>
<div>
<Col>
<Icon src={Wheat} />
<Btns.Wheat to={`${match.url}/wheat`} />
</Col>
<Col>
<Icon src={Rape} />
<Btns.Rape to={`${match.url}/rape`} />
</Col>
<Col>
<Icon src={Corn} />
<Btns.Corn to={`${match.url}/corn`} />
</Col>
</div>
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
\ No newline at end of file
src/pages/Home.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import bg from '../磷肥施用技术切图/默认状态/画面一-assets/磷肥施用技术仿真软件.png';
import { Link } from "react-router-dom";
export default function Home() {
return (
<Link to="/sub-home">
<img src={bg} alt="logo" style={{width: '100%'}} />
</Link>
);
}
\ No newline at end of file
src/pages/SubHome.js 0 → 100644
浏览文件 @ 99e5cd3a
import React from 'react';
import styled from 'styled-components';
import { Link, withRouter } from "react-router-dom";
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 WheatBg from './WheatBg';
const NavBtn = styled(Link)`
display: block;
width: 76px;
height: 76px;
position: absolute;
bottom: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
`;
export const StyledBackBtn = styled(NavBtn)`
background-image: url(${BackBtnBg});
right: 195px;
`;
export const StyledHomeBtn = styled(NavBtn)`
background-image: url(${HomeBtnBg});
right: 80px;
`;
const FertilizeBtn = styled(Link)`
display: block;
width: 256px;
height: 256px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 80px;
`;
export const FertilizeByGroundBtn = styled(FertilizeBtn)`
background-image: url(${FertilizeByGroundBg});
`;
const FertilizeEarly = styled(FertilizeBtn)`
background-image: url(${FertilizeEarlyBg});
`;
const FertilizeConcentrated = styled(FertilizeBtn)`
background-image: url(${FertilizeConcentratedBg});
`;
const FertilizeControl = styled(FertilizeBtn)`
background-image: url(${FertilizeControlBg});
margin-right: 0;
`;
export const BackBtn = withRouter((props) => {
function handleClick(e) {
e.preventDefault();
props.history.goBack();
}
return <StyledBackBtn to="#" onClick={handleClick} />
});
export function HomeBtn() {
return <StyledHomeBtn to="/" />;
}
export default function SubHome({ match }) {
return (
<WheatBg>
<FertilizeByGroundBtn to={`${match.url}/fertilize-by-ground`} />
<FertilizeEarly to={`${match.url}/fertilize-early`}/>
<FertilizeConcentrated to={`${match.url}/fertilize-concentrated`}/>
<FertilizeControl to={`${match.url}/fertilize-control`}/>
<BackBtn />
<HomeBtn />
</WheatBg>
);
}
src/pages/Video.js 0 → 100644
浏览文件 @ 99e5cd3a
import React, { useRef, useState, useEffect } from 'react';
import styled from 'styled-components';
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%;
`;
export default React.forwardRef(({ onEnded }, ref) => {
const [show, setShow] = useState(false);
function handleEnded() {
setShow(false);
if (onEnded && typeof onEnded === 'function') {
onEnded();
}
}
return (
<VideoWrapper show={show} >
<StyledVideo ref={ref} onPlay={() => setShow(true)} onEnded={handleEnded} />
</VideoWrapper>
);
});
src/pages/WheatBg.js 0 → 100644
浏览文件 @ 99e5cd3a
import styled from 'styled-components';
import bg from '../磷肥施用技术切图/默认状态/画面二-assets/背景.png';
const Container = styled.div`
background: url(${bg}) no-repeat scroll center center;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
export default Container;
yarn.lock
浏览文件 @ 99e5cd3a
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论