提交 99e5cd3a authored 作者: 王绍森's avatar 王绍森

初始化项目

上级 7fbc2386
NODE_PATH=src
......@@ -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

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
{
"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": ".",
......
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>
);
}
......
export const USE_VW = true;
export function convertpx2vw(px) { return USE_VW ? px / 16 + 'vw' : px + 'px'}
\ No newline at end of file
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;
padding: 0;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
video::-webkit-media-controls {
display:none !important;
}
\ No newline at end of file
......@@ -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();
<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>
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
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
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
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
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
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
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
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
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
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
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
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
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;
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;
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);
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>
);
}
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>
);
}
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
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
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
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
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
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
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
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
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
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
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>
);
}
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>
);
});
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;
......@@ -805,7 +805,7 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-typescript" "^7.3.2"
"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
......@@ -896,6 +896,23 @@
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
"@emotion/is-prop-valid@^0.8.1":
version "0.8.2"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
dependencies:
"@emotion/memoize" "0.7.2"
"@emotion/memoize@0.7.2":
version "0.7.2"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
"@emotion/unitless@^0.7.0":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
"@hapi/address@2.x.x":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
......@@ -1949,6 +1966,21 @@ babel-plugin-named-asset-import@^0.3.3:
resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.3.tgz#9ba2f3ac4dc78b042651654f07e847adfe50667c"
integrity sha512-1XDRysF4894BUdMChT+2HHbtJYiO7zx5Be7U6bT8dISy7OdyETMGIAQBMPQCsY1YRf0xcubwnKKaDr5bk15JTA==
"babel-plugin-styled-components@>= 1":
version "1.10.6"
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
dependencies:
"@babel/helper-annotate-as-pure" "^7.0.0"
"@babel/helper-module-imports" "^7.0.0"
babel-plugin-syntax-jsx "^6.18.0"
lodash "^4.17.11"
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
......@@ -2350,6 +2382,11 @@ camelcase@^5.2.0, camelcase@^5.3.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
camelize@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
......@@ -2880,6 +2917,11 @@ css-blank-pseudo@^0.1.4:
dependencies:
postcss "^7.0.5"
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
css-color-names@0.0.4, css-color-names@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
......@@ -2950,6 +2992,15 @@ css-select@^2.0.0:
domutils "^1.7.0"
nth-check "^1.0.2"
css-to-react-native@^2.2.2:
version "2.3.1"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.1.tgz#cf0f61e0514846e2d4dc188b0886e29d8bef64a2"
integrity sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^3.3.0"
css-tree@1.0.0-alpha.28:
version "1.0.0-alpha.28"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
......@@ -4484,6 +4535,11 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
gzip-size@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
......@@ -4612,6 +4668,18 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
history@^4.9.0:
version "4.9.0"
resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca"
integrity sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==
dependencies:
"@babel/runtime" "^7.1.2"
loose-envify "^1.2.0"
resolve-pathname "^2.2.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
value-equal "^0.4.0"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
......@@ -4621,6 +4689,13 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.1.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
dependencies:
react-is "^16.7.0"
hosted-git-info@^2.1.4:
version "2.7.1"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
......@@ -5228,6 +5303,11 @@ is-typedarray@~1.0.0:
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
is-what@^3.2.4:
version "3.3.1"
resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
......@@ -5238,6 +5318,11 @@ is-wsl@^1.1.0:
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
isarray@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
......@@ -6076,7 +6161,7 @@ loglevel@^1.4.1:
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
......@@ -6174,6 +6259,11 @@ mem@^4.0.0:
mimic-fn "^1.0.0"
p-is-promise "^2.0.0"
memoize-one@^5.0.0:
version "5.0.5"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
memory-fs@^0.4.0, memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
......@@ -6182,6 +6272,13 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
errno "^0.1.3"
readable-stream "^2.0.1"
merge-anything@^2.2.4:
version "2.4.0"
resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44"
integrity sha512-MhJcPOEcDUIbwU0LnEfx5S9s9dfQ/KPu4g2UA5T5G1LRKS0XmpDvJ9+UUfTkfhge+nA1gStE4tJAvx6lXLs+rg==
dependencies:
is-what "^3.2.4"
merge-deep@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
......@@ -6277,6 +6374,15 @@ mimic-fn@^2.1.0:
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
mini-create-react-context@^0.3.0:
version "0.3.2"
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
dependencies:
"@babel/runtime" "^7.4.0"
gud "^1.0.0"
tiny-warning "^1.0.2"
mini-css-extract-plugin@0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
......@@ -7074,6 +7180,13 @@ path-to-regexp@0.1.7:
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
path-to-regexp@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
dependencies:
isarray "0.0.1"
path-type@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
......@@ -7920,7 +8033,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.3"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -8119,7 +8232,7 @@ react-dev-utils@^9.0.3:
strip-ansi "5.2.0"
text-table "0.2.0"
react-dom@16.9.0:
react-dom@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
......@@ -8134,15 +8247,44 @@ react-error-overlay@^6.0.1:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
react-is@^16.8.1:
version "16.8.4"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
react-is@^16.8.4:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
react-router-dom@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==
dependencies:
"@babel/runtime" "^7.1.2"
history "^4.9.0"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "5.0.1"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-router@5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
dependencies:
"@babel/runtime" "^7.1.2"
history "^4.9.0"
hoist-non-react-statics "^3.1.0"
loose-envify "^1.3.1"
mini-create-react-context "^0.3.0"
path-to-regexp "^1.7.0"
prop-types "^15.6.2"
react-is "^16.6.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-scripts@3.1.1:
version "3.1.1"
......@@ -8205,7 +8347,7 @@ react-scripts@3.1.1:
optionalDependencies:
fsevents "2.0.7"
react@16.9.0:
react@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
......@@ -8484,6 +8626,11 @@ resolve-from@^4.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
resolve-pathname@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
integrity sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==
resolve-url-loader@3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
......@@ -9268,6 +9415,25 @@ style-loader@1.0.0:
loader-utils "^1.2.3"
schema-utils "^2.0.1"
styled-components@^4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/traverse" "^7.0.0"
"@emotion/is-prop-valid" "^0.8.1"
"@emotion/unitless" "^0.7.0"
babel-plugin-styled-components ">= 1"
css-to-react-native "^2.2.2"
memoize-one "^5.0.0"
merge-anything "^2.2.4"
prop-types "^15.5.4"
react-is "^16.6.0"
stylis "^3.5.0"
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
stylehacks@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
......@@ -9277,12 +9443,22 @@ stylehacks@^4.0.0:
postcss "^7.0.0"
postcss-selector-parser "^3.0.0"
stylis-rule-sheet@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
stylis@^3.5.0:
version "3.5.4"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
supports-color@^5.3.0:
supports-color@^5.3.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
......@@ -9452,6 +9628,16 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-invariant@^1.0.2:
version "1.0.6"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
......@@ -9796,6 +9982,11 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"
value-equal@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
integrity sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论