Skip to content

Z
ZunYiYuanSuQueFaZhen
提交 f8bd6405 authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

初始化项目

上级 fbd2e390
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 836 行增加 和 83 行删除
package.json
浏览文件 @ f8bd6405
......@@ -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
查看替换文件 @ fbd2e390 浏览文件 @ f8bd6405
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/index.html
浏览文件 @ f8bd6405
......@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>植物营养元素缺素症</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
public/manifest.json
浏览文件 @ f8bd6405
{
"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.css deleted 100644 → 0
浏览文件 @ fbd2e390
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
浏览文件 @ f8bd6405
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import Corn from './pages/corn';
import Wheat from './pages/wheat';
import Rape from './pages/rape';
import Tomato from './pages/tomato';
import rapeGetComponent from './pages/rape/getComponent';
import InfoCmp from './components/InfoComponent.js'
import tomatoGetCmp from './pages/tomato/getComponent';
import cornGetCmp from './pages/corn/getComponent';
import wheatGetCmp from './pages/wheat/getComponent';
const rapeList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'];
const tomatoList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'];
const cornList = ['n', 'p', 'k', 'zn', 'b'];
const wheatList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'];
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="/corn" component={Corn} />
<Route exact path="/rape" component={Rape} />
<Route exact path="/wheat" component={Wheat} />
<Route exact path="/tomato" component={Tomato} />
{
rapeList.map((name, idx) => {
const Cmp = rapeGetComponent([Math.floor(idx / 4), idx % 4]);
return (
<Route key={'rape-'+name} exact path={'/rape/lack-of-' + name} component={Cmp} />
);
})
}
{
rapeList.map(name => (
<Route
key={'rape'+ name+'info'}
exact
path={'/rape/lack-of-' + name + '/info'}
component={() => <InfoCmp category='rape' element={name} />}
/>
))
}
{
tomatoList.map((name, idx) => (
<Route
exact
key={'tomato-'+name}
path={'/tomato/lack-of-' + name}
component={tomatoGetCmp(idx)}
/>
))
}
{
tomatoList.map((name, idx) => (
<Route
exact
key={'tomato-'+name+'info'}
path={'/tomato/lack-of-' + name+'/info'}
component={() => <InfoCmp category='tomato' element={name} />}
/>
))
}
{
cornList.map((name, idx) => (
<Route
exact
key={'corn-'+name}
path={'/corn/lack-of-' + name}
component={cornGetCmp(idx)}
/>
))
}
{
cornList.map((name, idx) => (
<Route
exact
key={'corn-'+name+'info'}
path={'/corn/lack-of-' + name+'/info'}
component={() => <InfoCmp category='corn' element={name} />}
/>
))
}
{
wheatList.map((name, idx) => (
<Route
exact
key={'wheat-'+name}
path={'/wheat/lack-of-' + name}
component={wheatGetCmp(idx)}
/>
))
}
{
wheatList.map((name, idx) => (
<Route
exact
key={'wheat-'+name+'info'}
path={'/wheat/lack-of-' + name+'/info'}
component={() => <InfoCmp category='wheat' element={name} />}
/>
))
}
</Switch>
</Router>
);
}
......
src/components/AnimatedBtn.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import EleWithBg from './EleWithBg'
const StyledEle = styled(EleWithBg)`
transition: transform 250ms ease;
&:active {
transform: translate(10px, 10px);
}
cursor: pointer;
`;
const AnimatedBtn = ({ children, ...props}) => (
<StyledEle forwardedAs={Link} {...props} >{ children } </StyledEle>
);
export default AnimatedBtn;
\ No newline at end of file
src/components/BGWithNavBtn.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import styled from 'styled-components';
import { withRouter } from 'react-router-dom';
import BackGround from './BackGround';
import AnimatedBtn from './AnimatedBtn';
import BackImg from '../仿真软件-植物营养元素缺素症切图/通用/返回.png';
import HomeImg from '../仿真软件-植物营养元素缺素症切图/通用/主页.png';
import { convertpx2vw } from '../config';
const StyledNavBtn = styled(AnimatedBtn)`
bottom: ${convertpx2vw(23)};
position: absolute;
width: ${convertpx2vw(90)};
height: ${convertpx2vw(90)};
`;
const StyledBackBtn = styled(StyledNavBtn)`
right: ${convertpx2vw(149)};
`;
const StyledHomeBtn = styled(StyledNavBtn)`
right: ${convertpx2vw(23)};
`;
const BackBtn = withRouter(({ history }) => {
function handleClick(e) {
e.preventDefault();
history.goBack();
}
return <StyledBackBtn bg={BackImg} to="#" onClick={e => handleClick(e)} />
});
const HomeBtn = () => <StyledHomeBtn bg={HomeImg} to="/" />
export default function BGWithNavBtn({ className, children, bg }) {
return (
<BackGround className={className} bg={bg} >
{ children }
<BackBtn />
<HomeBtn />
</BackGround>
);
}
\ No newline at end of file
src/components/BackGround.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import BgImg from '../仿真软件-植物营养元素缺素症切图/通用/背景.png';
import styled from 'styled-components';
import EleWithBg from './EleWithBg';
const StyledBg = styled(EleWithBg)`
height: 100%;
background-size: cover;
`;
const BackGround = ({children, bg, ...props}) => <StyledBg bg={bg || BgImg} {...props}>{ children }</StyledBg>;
export default BackGround;
\ No newline at end of file
src/components/EleWithBg.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import styled from 'styled-components';
const EleWithBg = styled.div`
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: ${props => `url(${props.bg})`};
user-select: none;
`
// export default EleWithBg;
export default function({ as, className, bg, children, to, onClick}) {
// console.log('props: ', props);
return <EleWithBg as={as} className={className} to={to} onClick={onClick} bg={bg}>{children}</EleWithBg>;
}
src/components/InfoComponent.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import BGWithNavBtn from './BGWithNavBtn';
import Rape_Mg from '../仿真软件-植物营养元素缺素症切图/3油菜/3.11.png'
import Rape_N from '../仿真软件-植物营养元素缺素症切图/3油菜/3.21.png'
import Rape_B from '../仿真软件-植物营养元素缺素症切图/3油菜/3.31.png'
import Rape_S from '../仿真软件-植物营养元素缺素症切图/3油菜/3.41.png'
import Rape_P from '../仿真软件-植物营养元素缺素症切图/3油菜/3.51.png'
import Rape_Ga from '../仿真软件-植物营养元素缺素症切图/3油菜/3.61.png'
import Rape_K from '../仿真软件-植物营养元素缺素症切图/3油菜/3.71.png'
import Rape_Zn from '../仿真软件-植物营养元素缺素症切图/3油菜/3.81.png'
import Tomato_Zn from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.11.png'
import Tomato_B from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.21.png'
import Tomato_S from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.31.png'
import Tomato_K from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.41.png'
import Tomato_N from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.51.png'
import Tomato_Ga from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.61.png'
import Tomato_P from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.71.png'
import Tomato_Mg from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.81.png'
import Tomato_Mu from '../仿真软件-植物营养元素缺素症切图/4西红柿/4.91.png'
import Corn_N from '../仿真软件-植物营养元素缺素症切图/1玉米/1.11.png';
import Corn_P from '../仿真软件-植物营养元素缺素症切图/1玉米/1.21.png';
import Corn_K from '../仿真软件-植物营养元素缺素症切图/1玉米/1.31.png';
import Corn_Zn from '../仿真软件-植物营养元素缺素症切图/1玉米/1.41.png';
import Corn_B from '../仿真软件-植物营养元素缺素症切图/1玉米/1.51.png';
import Wheat_N from '../仿真软件-植物营养元素缺素症切图/2小麦/2.11.png';
import Wheat_P from '../仿真软件-植物营养元素缺素症切图/2小麦/2.21.png';
import Wheat_K from '../仿真软件-植物营养元素缺素症切图/2小麦/2.31.png';
import Wheat_Zn from '../仿真软件-植物营养元素缺素症切图/2小麦/2.41.png';
import Wheat_B from '../仿真软件-植物营养元素缺素症切图/2小麦/2.51.png';
import Wheat_Mn from '../仿真软件-植物营养元素缺素症切图/2小麦/2.61.png';
import Wheat_Fe from '../仿真软件-植物营养元素缺素症切图/2小麦/2.71.png';
import Wheat_Mg from '../仿真软件-植物营养元素缺素症切图/2小麦/2.81.png';
import Wheat_Ga from '../仿真软件-植物营养元素缺素症切图/2小麦/2.91.png';
const bgs = {
rape: {
mg: Rape_Mg,
n: Rape_N,
b: Rape_B,
s: Rape_S,
p: Rape_P,
ga: Rape_Ga,
k: Rape_K,
zn: Rape_Zn,
},
tomato: {
n: Tomato_N,
p: Tomato_P,
k: Tomato_K,
ga: Tomato_Ga,
mg: Tomato_Mg,
zn: Tomato_Zn,
b: Tomato_B,
s: Tomato_S,
mu: Tomato_Mu
},
corn: {
n: Corn_N ,
p: Corn_P ,
k: Corn_K ,
zn: Corn_Zn ,
b: Corn_B
},
wheat: {
n: Wheat_N ,
p: Wheat_P ,
k: Wheat_K ,
ga: Wheat_Ga ,
mg: Wheat_Mg ,
zn: Wheat_Zn ,
b: Wheat_B ,
mn: Wheat_Mn ,
fe: Wheat_Fe,
}
}
export default function InfoComponent({ category, element }) {
return <BGWithNavBtn bg={bgs[category][element]} />
}
\ No newline at end of file
src/config.js 0 → 100644
浏览文件 @ f8bd6405
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
浏览文件 @ f8bd6405
body {
html, body, #root {
height: 100%;
padding: 0;
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;
}
src/index.js
浏览文件 @ f8bd6405
......@@ -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/layouts/CheckLack.js 0 → 100644
浏览文件 @ f8bd6405
import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import BGWithNavBtn from '../components/BGWithNavBtn';
import AnimatedBtn from '../components/AnimatedBtn';
import WrongImg from '../仿真软件-植物营养元素缺素症切图/通用/×.png';
import CorrectImg from '../仿真软件-植物营养元素缺素症切图/通用/√.png';
import { convertpx2vw } from '../config';
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: contain;
background-repeat: repeat-x;
`;
const StyledBtn = styled(AnimatedBtn)`
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
:not(:first-child) {
margin-left: ${props => convertpx2vw(props.leftgap)};
}
position: relative;
`;
const Row = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
margin-top: ${props => convertpx2vw(props.marginTop)};
`;
const MarkImg = styled.img`
position: absolute;
bottom: ${convertpx2vw(20)};
left: 50%;
transform: translateX(-50%);
visibility: ${props => props.show ? 'visible' : 'hidden'};
`;
const WrongMark = styled(MarkImg)`
width: ${convertpx2vw(39)};
height: ${convertpx2vw(39)};
`;
const CorrectMark = styled(MarkImg)`
width: ${convertpx2vw(51)};
height: ${convertpx2vw(43)};
`;
const CheckBtn = withRouter(({ w, h, leftGap, bg, to, history }) => {
const [showCheckMark, setShowCheckMark] = useState(false);
function handleClick(e) {
e.preventDefault();
setShowCheckMark(true);
if(to !== '#') {
setTimeout(() => {
history.push(to);
}, 500);
}
}
return (
<StyledBtn
w={w}
h={h}
leftgap={leftGap}
bg={bg}
to={to}
onClick={e => handleClick(e)}
>
{
to !== '#' ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
}
</StyledBtn>
);
});
/**
* Check Lack layout
* config = {
* bg,
* btns: {
* w,
* h,
* marginTop,
* leftGap,
* topGap,
* rows: [
* [
* {bg, to},
* ]
* ]
* }
* }
*/
export default function CheckLack({ config }) {
return (
<Container bg={config.bg}>
{
config.btns.rows.map((row, idx) => (
<Row
key={idx}
marginTop={idx === 0 ? config.btns.marginTop : config.btns.topGap}
>
{
row.map((ele, i) => (
<CheckBtn
key={i}
w={config.btns.w}
h={config.btns.h}
leftGap={config.btns.leftGap}
bg={ele.bg}
to={ele.to || '#'}
/>
))
}
</Row>
))
}
</Container>
);
}
\ No newline at end of file
src/layouts/ThreeColumnsLayout.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import styled from 'styled-components';
import BGWithNavBtn from '../components/BGWithNavBtn';
import AnimatedBtn from '../components/AnimatedBtn';
import { convertpx2vw } from '../config';
const Container = styled(BGWithNavBtn)`
display: flex;
flex-direction: ${props => props.rowLayout ? 'column' : 'row'};
justify-content: ${props => props.rowLayout ? 'center' : 'space-evenly'};
`;
const StyledBtn = styled(AnimatedBtn)`
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
:not(:first-child) {
margin-top: ${props => (!props.rowLayout ? convertpx2vw(props.rowgap): convertpx2vw(0))};
margin-left: ${props => (props.rowLayout ? convertpx2vw(props.rowgap): convertpx2vw(0))};
}
`;
const Column = styled.div`
display: flex;
flex-direction: ${props => props.rowLayout ? 'row' : 'column'};
justify-content: center;
`;
/**
* Three columns layout
* @param {Array} config.columns, [[{bg, to}], [{bg, to}], [{bg to}]]
* @param {Number} config.w element's width
* @param {Number} config.h element's height
* @param {Number} config.rowGap element's row gap between element
* @param {Boolean} rowLayout if is rowlayout
*/
export default function ThreeColumnsLayout({ config, rowLayout }) {
return (
<Container rowLayout={rowLayout} >
{
config.columns.map((col, i) => (
<Column key={i} rowLayout={rowLayout}>
{
col.map((ele, j) => (
<StyledBtn rowLayout={rowLayout} key={j} w={config.w} h={config.h} rowgap={config.rowGap} bg={ele.bg} to={ele.to} />
))
}
</Column>
))
}
</Container>
);
}
\ No newline at end of file
src/pages/Home.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import styled from 'styled-components';
import BackGround from '../components/BackGround';
import CornImg from '../仿真软件-植物营养元素缺素症切图/首页/玉米.png';
import WheatImg from '../仿真软件-植物营养元素缺素症切图/首页/小麦.png';
import RapeImg from '../仿真软件-植物营养元素缺素症切图/首页/油菜花.png';
import tomatoImg from '../仿真软件-植物营养元素缺素症切图/首页/西红柿.png';
import AnimatedBtn from '../components/AnimatedBtn';
import { convertpx2vw } from '../config';
const Container = styled(BackGround)`
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
`;
const StyledBtn = styled(AnimatedBtn)`
width: ${convertpx2vw(300)};
height: ${convertpx2vw(300)};
`;
export default function Home() {
return (
<Container>
<StyledBtn bg={CornImg} to='/corn' />
<StyledBtn bg={WheatImg} to='/wheat' />
<StyledBtn bg={RapeImg} to='/rape' />
<StyledBtn bg={tomatoImg} to='/tomato' />
</Container>
);
}
\ No newline at end of file
src/pages/corn/getComponent.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1缺氮.png'
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2缺磷.png'
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3缺钾.png'
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4缺锌.png'
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5缺鹏.png'
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png'
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png'
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺磷.png'
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png'
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png'
const bgs = [
LackNBg, LackPBg, LackKBg, LackZnBg, LackBBg
]
export default function (idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[idx],
btns: {
w: 207,
h: 207,
marginTop: 602,
topGap: 0,
leftGap: 80,
rows: [
[
{ bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }
],
]
}
}
config.btns.rows[0][idx].to = match.url+'/info';
return <CheckLack config={config} />;
});
return Component;
}
src/pages/corn/index.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import LackOfNImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.png';
import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/2.png';
import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/3.png';
import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/4.png';
import LackOfBImg from '../../仿真软件-植物营养元素缺素症切图/1玉米/5.png';
import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
export default function Corn({ match }) {
const config = {
w: 407,
h: 220,
rowGap: 20,
columns: [
[
{ bg: LackOfNImg, to: match.url + "/lack-of-n" },
{ bg: LackOfPImg, to: match.url + "/lack-of-p" },
],
[
{ bg: LackOfKImg, to: match.url + "/lack-of-k" },
{ bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
],
[
{ bg: LackOfBImg, to: match.url + "/lack-of-b" },
],
],
}
return (
<ThreeColumnsLayout rowLayout config={config} />
);
}
\ No newline at end of file
src/pages/rape/getComponent.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.1缺镁.png'
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.2缺氮.png'
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.3缺硼.png'
import LackSBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.4缺硫.png'
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.5缺磷.png'
import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.6缺钙.png'
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.7缺钾.png'
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.8缺锌.png'
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺氮.png'
import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硫.png'
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硼.png'
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺磷.png'
import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钙.png'
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png'
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png'
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png'
const bgs = [
[
LackNBg, LackPBg, LackKBg, LackGaBg
],
[
LackMgBg, LackZnBg, LackBBg, LackSBg
]
]
export default function (lackElement) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[lackElement[0]][lackElement[1]],
btns: {
w: 159,
h: 159,
marginTop: 539,
topGap: 40,
leftGap: 140,
rows: [
[
{ bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg }
],
[
{ bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg }
]
]
}
}
config.btns.rows[lackElement[0]][lackElement[1]].to = match.url+'/info';
return <CheckLack config={config} />;
});
return Component;
}
src/pages/rape/index.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import LackOfMgImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/1.png';
import LackOfNImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/2.png';
import LackOfBImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.png';
import LackOfSImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/4.png';
import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/5.png';
import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/6.png';
import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/7.png';
import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/3油菜/8.png';
import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
export default function Rape({ match }) {
const config = {
w: 407,
h: 220,
rowGap: 20,
columns: [
[
{ bg: LackOfPImg, to: match.url + "/lack-of-p" },
{ bg: LackOfNImg, to: match.url + "/lack-of-n" },
{ bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
],
[
{ bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
{ bg: LackOfBImg, to: match.url + "/lack-of-b" },
],
[
{ bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
{ bg: LackOfSImg, to: match.url + "/lack-of-s" },
{ bg: LackOfKImg, to: match.url + "/lack-of-k" },
],
],
}
return (
<ThreeColumnsLayout config={config} />
);
}
\ No newline at end of file
src/pages/tomato/getComponent.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.1缺锌.png'
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.2缺硼.png'
import LackSBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.3缺硫.png'
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.4缺钾.png'
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.5缺氮.png'
import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.6缺钙.png'
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.7缺磷.png'
import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.8缺镁.png'
import LackMuBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.9缺钼.png'
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png'
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png'
import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png'
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png'
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png'
import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png'
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png'
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png'
import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png'
const bgs = [
LackNBg, LackPBg, LackKBg, LackGaBg, LackMgBg, LackZnBg, LackBBg, LackSBg, LackMuBg,
];
export default function(idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[idx],
btns: {
w: 121,
h: 286,
marginTop: 559,
topGap: 0,
leftGap: 48,
rows: [
[
{ bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg }, { bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg }, { bg: LackMuBtnBg },
],
]
}
}
config.btns.rows[0][idx].to = match.url+'/info';
return <CheckLack config={config} />;
});
return Component;
}
src/pages/tomato/index.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/1.png';
import LackOfBImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/2.png';
import LackOfSImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/3.png';
import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.png';
import LackOfNImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/5.png';
import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/6.png';
import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/7.png';
import LackOfMgImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/8.png';
import LackOfMuImg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/9.png';
import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
export default function Tomato({ match }) {
const config = {
w: 370,
h: 198,
rowGap: 70,
columns: [
[
{ bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
{ bg: LackOfKImg, to: match.url + "/lack-of-k" },
{ bg: LackOfPImg, to: match.url + "/lack-of-p" },
],
[
{ bg: LackOfBImg, to: match.url + "/lack-of-b" },
{ bg: LackOfNImg, to: match.url + "/lack-of-n" },
{ bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
],
[
{ bg: LackOfSImg, to: match.url + "/lack-of-s" },
{ bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
{ bg: LackOfMuImg, to: match.url + "/lack-of-mu" },
],
],
}
return (
<ThreeColumnsLayout config={config} />
);
}
src/pages/wheat/getComponent.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import N_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.1缺氮.png'
import P_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.2缺磷.png'
import K_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.3缺钾.png'
import Zn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.4缺锌.png'
import B_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.5缺硼.png'
import Mn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.6缺锰.png'
import Fe_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.7缺铁.png'
import Mg_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.8缺镁.png'
import Ga_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.9缺钙.png'
import N_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺氮.png';
import B_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺硼.png';
import P_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺磷.png';
import Ga_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钙.png';
import K_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钾.png';
import Fe_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺铁.png';
import Zn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锌.png';
import Mn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锰.png';
import Mg_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺镁.png';
const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ]
export default function (idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[idx],
btns: {
w: 121,
h: 286,
marginTop: 560,
topGap: 0,
leftGap: 48,
rows: [
[
{ bg: N_Btn_Bg }, { bg: P_Btn_Bg }, { bg: K_Btn_Bg }, { bg: Ga_Btn_Bg }, { bg: Mg_Btn_Bg }, { bg: Zn_Btn_Bg }, { bg: B_Btn_Bg }, { bg: Mn_Btn_Bg }, { bg: Fe_Btn_Bg },
],
]
}
}
config.btns.rows[0][idx].to = match.url+'/info';
return <CheckLack config={config} />;
});
return Component;
}
src/pages/wheat/index.js 0 → 100644
浏览文件 @ f8bd6405
import React from 'react';
import LackOfNImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/1.png';
import LackOfPImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.png';
import LackOfKImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/3.png';
import LackOfZnImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/4.png';
import LackOfBImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/5.png';
import LackOfMnImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/6.png';
import LackOfFeImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/7.png';
import LackOfMgImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/8.png';
import LackOfGaImg from '../../仿真软件-植物营养元素缺素症切图/2小麦/9.png';
import ThreeColumnsLayout from '../../layouts/ThreeColumnsLayout';
export default function Wheat({ match }) {
const config = {
w: 448,
h: 216,
rowGap: 20,
columns: [
[
{ bg: LackOfNImg, to: match.url + "/lack-of-n" },
{ bg: LackOfZnImg, to: match.url + "/lack-of-zn" },
{ bg: LackOfFeImg, to: match.url + "/lack-of-fe" },
],
[
{ bg: LackOfPImg, to: match.url + "/lack-of-p" },
{ bg: LackOfBImg, to: match.url + "/lack-of-b" },
{ bg: LackOfMgImg, to: match.url + "/lack-of-mg" },
],
[
{ bg: LackOfKImg, to: match.url + "/lack-of-k" },
{ bg: LackOfMnImg, to: match.url + "/lack-of-mn" },
{ bg: LackOfGaImg, to: match.url + "/lack-of-ga" },
],
],
}
return (
<ThreeColumnsLayout config={config} />
);
}
yarn.lock
浏览文件 @ f8bd6405
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论