Skip to content

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

修改详情页

上级 c21792b2
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1741 行增加 和 219 行删除
jsconfig.json 0 → 100644
浏览文件 @ ca239e7b
{
"compilerOptions": {
"baseUrl": "src"
}
}
\ No newline at end of file
src/App.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import SubHome from './pages/SubHome'; import SubHome from "./pages/SubHome";
import Home from './pages/Home'; import Home from "./pages/Home";
import Corn from './pages/corn'; import Corn from "./pages/corn";
import Wheat from './pages/wheat'; import Wheat from "./pages/wheat";
import Rape from './pages/rape'; import Rape from "./pages/rape";
import Tomato from './pages/tomato'; import Tomato from "./pages/tomato";
import rapeGetComponent from './pages/rape/getComponent'; import rapeGetComponent from "./pages/rape/getComponent";
import InfoCmp from './components/InfoComponent.js' import tomatoGetCmp from "./pages/tomato/getComponent";
import tomatoGetCmp from './pages/tomato/getComponent'; import cornGetCmp from "./pages/corn/getComponent";
import cornGetCmp from './pages/corn/getComponent'; import wheatGetCmp from "./pages/wheat/getComponent";
import wheatGetCmp from './pages/wheat/getComponent'; import CornLackNInfo from "pages/corn/LackNInfo";
import CornLackPInfo from "pages/corn/LackPInfo";
import CornLackKInfo from "pages/corn/LackKInfo";
import CornLackZnInfo from "pages/corn/LackZnInfo";
import CornLackBInfo from "pages/corn/LackBInfo";
import WheatLackKInfo from "pages/wheat/LackKInfo";
import WheatLackNInfo from "pages/wheat/LackNInfo";
import WheatLackPInfo from "pages/wheat/LackPInfo";
import WheatLackZnInfo from "pages/wheat/LackZnInfo";
import WheatLackBInfo from "pages/wheat/LackBInfo";
import WheatLackFeInfo from "pages/wheat/LackFeInfo";
import WheatLackGaInfo from "pages/wheat/LackGaInfo";
import WheatLackMgInfo from "pages/wheat/LackMgInfo";
import RapeLackKInfo from "pages/rape/LackKInfo";
import RapeLackNInfo from "pages/rape/LackNInfo";
import RapeLackPInfo from "pages/rape/LackPInfo";
import RapeLackZnInfo from "pages/rape/LackZnInfo";
import RapeLackBInfo from "pages/rape/LackBInfo";
import RapeLackSInfo from "pages/rape/LackSInfo";
import RapeLackGaInfo from "pages/rape/LackGaInfo";
import RapeLackMgInfo from "pages/rape/LackMgInfo";
import TomatoLackKInfo from "pages/tomato/LackKInfo";
import TomatoLackNInfo from "pages/tomato/LackNInfo";
import TomatoLackPInfo from "pages/tomato/LackPInfo";
import TomatoLackZnInfo from "pages/tomato/LackZnInfo";
import TomatoLackBInfo from "pages/tomato/LackBInfo";
import TomatoLackSInfo from "pages/tomato/LackSInfo";
import TomatoLackGaInfo from "pages/tomato/LackGaInfo";
import TomatoLackMgInfo from "pages/tomato/LackMgInfo";
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
const config = { const config = {
rape: { rape: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'], elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s"],
getCmp: rapeGetComponent, getCmp: rapeGetComponent,
idxFormater: idx => [Math.floor(idx / 4), idx % 4], idxFormater: idx => [Math.floor(idx / 4), idx % 4]
}, },
tomato: { tomato: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'], elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s", "mu"],
getCmp: tomatoGetCmp, getCmp: tomatoGetCmp
}, },
corn: { corn: {
elements: ['n', 'p', 'k', 'zn', 'b'], elements: ["n", "p", "k", "zn", "b"],
getCmp: cornGetCmp, getCmp: cornGetCmp
}, },
wheat: { wheat: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'], elements: ["n", "p", "k", "ga", "mg", "zn", "b", "mn", "fe"],
getCmp: wheatGetCmp, getCmp: wheatGetCmp
}, }
} };
const routes = Object.keys(config).reduce((acc, category) => { const routes = Object.keys(config).reduce((acc, category) => {
const curRoutes = []; const curRoutes = [];
const { elements, getCmp, idxFormater } = config[category]; const { elements, getCmp, idxFormater } = config[category];
...@@ -43,27 +74,26 @@ const routes = Object.keys(config).reduce((acc, category) => { ...@@ -43,27 +74,26 @@ const routes = Object.keys(config).reduce((acc, category) => {
const Cmp = getCmp(idxFormater ? idxFormater(idx) : idx); const Cmp = getCmp(idxFormater ? idxFormater(idx) : idx);
curRoutes.push( curRoutes.push(
<Route <Route
key={category + '-' + element} key={category + "-" + element}
exact exact
path={`${baseUrl}/${category}/lack-of-${element}`} path={`${baseUrl}/${category}/lack-of-${element}`}
component={Cmp} component={Cmp}
/> />
); );
curRoutes.push( // curRoutes.push(
<Route // <Route
key={category + '-' + element + '-info'} // key={category + '-' + element + '-info'}
exact // exact
path={`${baseUrl}/${category}/lack-of-${element}/info`} // path={`${baseUrl}/${category}/lack-of-${element}/info`}
component={() => <InfoCmp category={category} element={element} />} // component={() => <InfoCmp category={category} element={element} />}
/> // />
); // );
}); });
return acc.concat(curRoutes); return acc.concat(curRoutes);
}, []); }, []);
function App() { function App() {
return ( return (
<Router> <Router>
...@@ -74,7 +104,138 @@ function App() { ...@@ -74,7 +104,138 @@ function App() {
<Route exact path={baseUrl + "/rape"} component={Rape} /> <Route exact path={baseUrl + "/rape"} component={Rape} />
<Route exact path={baseUrl + "/wheat"} component={Wheat} /> <Route exact path={baseUrl + "/wheat"} component={Wheat} />
<Route exact path={baseUrl + "/tomato"} component={Tomato} /> <Route exact path={baseUrl + "/tomato"} component={Tomato} />
{ routes } {routes}
<Route
key="corn-lack-of-n-info"
exact
path={`${baseUrl}/corn/lack-of-n/info`}
component={CornLackNInfo}
/>
<Route
key="corn-lack-of-p-info"
exact
path={`${baseUrl}/corn/lack-of-p/info`}
component={CornLackPInfo}
/>
<Route
key="corn-lack-of-k-info"
exact
path={`${baseUrl}/corn/lack-of-k/info`}
component={CornLackKInfo}
/>
<Route
key="corn-lack-of-zn-info"
exact
path={`${baseUrl}/corn/lack-of-zn/info`}
component={CornLackZnInfo}
/>
<Route
key="corn-lack-of-b-info"
exact
path={`${baseUrl}/corn/lack-of-b/info`}
component={CornLackBInfo}
/>
{/* 小麦 */}
<Route
key="wheat-lack-of-n-info"
exact
path={`${baseUrl}/wheat/lack-of-n/info`}
component={WheatLackNInfo}
/>
<Route
key="wheat-lack-of-p-info"
exact
path={`${baseUrl}/wheat/lack-of-p/info`}
component={WheatLackPInfo}
/>
<Route
key="wheat-lack-of-k-info"
exact
path={`${baseUrl}/wheat/lack-of-k/info`}
component={WheatLackKInfo}
/>
<Route
key="wheat-lack-of-zn-info"
exact
path={`${baseUrl}/wheat/lack-of-zn/info`}
component={WheatLackZnInfo}
/>
<Route
key="wheat-lack-of-b-info"
exact
path={`${baseUrl}/wheat/lack-of-b/info`}
component={WheatLackBInfo}
/>
<Route
key="wheat-lack-of-fe-info"
exact
path={`${baseUrl}/wheat/lack-of-fe/info`}
component={WheatLackFeInfo}
/>
<Route
path={`${baseUrl}/wheat/lack-of-ga/info`}
component={WheatLackGaInfo}
/>
<Route
path={`${baseUrl}/wheat/lack-of-mg/info`}
component={WheatLackMgInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-mg/info`}
component={RapeLackMgInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-n/info`}
component={RapeLackNInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-b/info`}
component={RapeLackBInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-s/info`}
component={RapeLackSInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-p/info`}
component={RapeLackPInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-ga/info`}
component={RapeLackGaInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-zn/info`}
component={RapeLackZnInfo}
/>
<Route
path={`${baseUrl}/rape/lack-of-k/info`}
component={RapeLackKInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-zn/info`}
component={TomatoLackZnInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-b/info`}
component={TomatoLackBInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-s/info`}
component={TomatoLackSInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-k/info`}
component={TomatoLackKInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-n/info`}
component={TomatoLackNInfo}
/>
<Route
path={`${baseUrl}/tomato/lack-of-ga/info`}
component={TomatoLackGaInfo}
/>
</Switch> </Switch>
</Router> </Router>
); );
......
src/components/BGWithNavBtn.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import styled from 'styled-components'; import styled from "styled-components";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import BackGround from './BackGround'; import BackGround from "./BackGround";
import AnimatedBtn from './AnimatedBtn'; import AnimatedBtn from "./AnimatedBtn";
import BackImg from '../仿真软件-植物营养元素缺素症切图/通用/返回.png'; import BackImg from "../仿真软件-植物营养元素缺素症切图/通用/返回.png";
import HomeImg from '../仿真软件-植物营养元素缺素症切图/通用/主页.png'; import HomeImg from "../仿真软件-植物营养元素缺素症切图/通用/主页.png";
import { convertpx2vw } from '../config'; import { convertpx2vw } from "../config";
import BackActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/返回按下.png";
import HomeActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/主页按下.png";
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
...@@ -14,6 +16,10 @@ const StyledNavBtn = styled(AnimatedBtn)` ...@@ -14,6 +16,10 @@ const StyledNavBtn = styled(AnimatedBtn)`
position: absolute; position: absolute;
width: ${convertpx2vw(90)}; width: ${convertpx2vw(90)};
height: ${convertpx2vw(90)}; height: ${convertpx2vw(90)};
&:active {
background-image: ${props => `url(${props.activeBg})`};
transform: none;
}
`; `;
const StyledBackBtn = styled(StyledNavBtn)` const StyledBackBtn = styled(StyledNavBtn)`
right: ${convertpx2vw(149)}; right: ${convertpx2vw(149)};
...@@ -26,15 +32,24 @@ const BackBtn = withRouter(({ history }) => { ...@@ -26,15 +32,24 @@ const BackBtn = withRouter(({ history }) => {
e.preventDefault(); e.preventDefault();
history.goBack(); history.goBack();
} }
return <StyledBackBtn bg={BackImg} to="#" onClick={e => handleClick(e)} /> return (
<StyledBackBtn
bg={BackImg}
activeBg={BackActiveBg}
to="#"
onClick={e => handleClick(e)}
/>
);
}); });
const HomeBtn = () => <StyledHomeBtn bg={HomeImg} to={baseUrl+'/'} /> const HomeBtn = () => (
<StyledHomeBtn bg={HomeImg} activeBg={HomeActiveBg} to={baseUrl + "/"} />
);
export default function BGWithNavBtn({ className, children, bg }) { export default function BGWithNavBtn({ className, children, bg }) {
return ( return (
<BackGround className={className} bg={bg} > <BackGround className={className} bg={bg}>
{ children } {children}
<BackBtn /> <BackBtn />
<HomeBtn /> <HomeBtn />
</BackGround> </BackGround>
......
src/layouts/CheckLack.js
浏览文件 @ ca239e7b
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import styled from 'styled-components'; import styled from "styled-components";
import BGWithNavBtn from '../components/BGWithNavBtn'; import BGWithNavBtn from "../components/BGWithNavBtn";
import AnimatedBtn from '../components/AnimatedBtn'; import AnimatedBtn from "../components/AnimatedBtn";
import WrongImg from '../仿真软件-植物营养元素缺素症切图/通用/×.png'; import WrongImg from "../仿真软件-植物营养元素缺素症切图/通用/×.png";
import CorrectImg from '../仿真软件-植物营养元素缺素症切图/通用/√.png'; import CorrectImg from "../仿真软件-植物营养元素缺素症切图/通用/√.png";
import { convertpx2vw } from '../config'; import { convertpx2vw } from "../config";
const Container = styled(BGWithNavBtn)` const Container = styled(BGWithNavBtn)`
display: block; display: block;
...@@ -22,9 +22,13 @@ const StyledBtn = styled(AnimatedBtn)` ...@@ -22,9 +22,13 @@ const StyledBtn = styled(AnimatedBtn)`
margin-left: ${props => convertpx2vw(props.leftgap)}; margin-left: ${props => convertpx2vw(props.leftgap)};
} }
position: relative; position: relative;
background-position: left top;
&:active { &:active {
/* background-image: url(${props => props.activeBg}); background-image: url(${props => props.activeBg});
transform: none; */ transform: none;
background-size: ${props =>
convertpx2vw(props.activeW) + ", " + convertpx2vw(props.activeH)};
background-position: left top;
} }
`; `;
const Row = styled.div` const Row = styled.div`
...@@ -38,19 +42,29 @@ const MarkImg = styled.img` ...@@ -38,19 +42,29 @@ const MarkImg = styled.img`
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
visibility: ${props => props.show ? 'visible' : 'hidden'}; visibility: ${props => (props.show ? "visible" : "hidden")};
`; `;
const WrongMark = styled(MarkImg)` const WrongMark = styled(MarkImg)`
width: ${convertpx2vw(35)}; width: ${convertpx2vw(35)};
height: ${convertpx2vw(35)}; height: ${convertpx2vw(35)};
`; `;
const CorrectMark = styled(MarkImg)` const CorrectMark = styled(MarkImg)`
width: ${convertpx2vw(51*0.9)}; width: ${convertpx2vw(51 * 0.9)};
height: ${convertpx2vw(43*0.9)}; height: ${convertpx2vw(43 * 0.9)};
`; `;
const CheckBtn = ({
const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => { w,
h,
activeW,
activeH,
leftGap,
bg,
activeBg,
to,
correct,
onClick
}) => {
const [showCheckMark, setShowCheckMark] = useState(false); const [showCheckMark, setShowCheckMark] = useState(false);
function handleClick(e) { function handleClick(e) {
...@@ -63,20 +77,23 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => { ...@@ -63,20 +77,23 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
<StyledBtn <StyledBtn
w={w} w={w}
h={h} h={h}
activeW={activeW}
activeH={activeH}
leftgap={leftGap} leftgap={leftGap}
bg={bg} bg={bg}
activeBg={activeBg} activeBg={activeBg}
to={to} to={to}
onClick={e => handleClick(e)} onClick={e => handleClick(e)}
> >
{ {correct ? (
correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} /> <CorrectMark show={showCheckMark} src={CorrectImg} />
} ) : (
<WrongMark show={showCheckMark} src={WrongImg} />
)}
</StyledBtn> </StyledBtn>
); );
}; };
/** /**
* Check Lack layout * Check Lack layout
* config = { * config = {
...@@ -108,7 +125,6 @@ const Illustrate = styled.img` ...@@ -108,7 +125,6 @@ const Illustrate = styled.img`
`; `;
function CheckLack({ config, history }) { function CheckLack({ config, history }) {
const timerRef = useRef(null); const timerRef = useRef(null);
function handleClick(to) { function handleClick(to) {
...@@ -125,24 +141,30 @@ function CheckLack({ config, history }) { ...@@ -125,24 +141,30 @@ function CheckLack({ config, history }) {
if (timerRef.current) { if (timerRef.current) {
clearTimeout(timerRef.current); clearTimeout(timerRef.current);
} }
} };
}, []) }, []);
return ( return (
<Container bg={config.bg}> <Container bg={config.bg}>
<Illustrate src={config.illustrate.src} w={config.illustrate.w} h={config.illustrate.h} top={config.illustrate.top} alt='illustrate' /> <Illustrate
{ src={config.illustrate.src}
config.btns.rows.map((row, idx) => ( w={config.illustrate.w}
h={config.illustrate.h}
top={config.illustrate.top}
alt="illustrate"
/>
{config.btns.rows.map((row, idx) => (
<Row <Row
key={idx} key={idx}
marginTop={idx === 0 ? config.btns.marginTop : config.btns.topGap} marginTop={idx === 0 ? config.btns.marginTop : config.btns.topGap}
> >
{ {row.map((ele, i) => (
row.map((ele, i) => (
<CheckBtn <CheckBtn
key={i} key={i}
w={config.btns.w} w={config.btns.w}
h={config.btns.h} h={config.btns.h}
activeW={config.btns.activeW}
activeH={config.btns.activeH}
leftGap={config.btns.leftGap} leftGap={config.btns.leftGap}
bg={ele.bg} bg={ele.bg}
activeBg={ele.activeBg} activeBg={ele.activeBg}
...@@ -150,11 +172,9 @@ function CheckLack({ config, history }) { ...@@ -150,11 +172,9 @@ function CheckLack({ config, history }) {
to={ele.to} to={ele.to}
onClick={() => handleClick(ele.to)} onClick={() => handleClick(ele.to)}
/> />
)) ))}
}
</Row> </Row>
)) ))}
}
</Container> </Container>
); );
} }
......
src/pages/Home.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import styled from 'styled-components'; import styled from "styled-components";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import BackGround from '../components/BackGround'; import bg from "../仿真软件-植物营养元素缺素症切图/首页/标题.png";
import CornImg from '../仿真软件-植物营养元素缺素症切图/首页/玉米.png';
import WheatImg from '../仿真软件-植物营养元素缺素症切图/首页/小麦.png';
import RapeImg from '../仿真软件-植物营养元素缺素症切图/首页/油菜花.png';
import tomatoImg from '../仿真软件-植物营养元素缺素症切图/首页/西红柿.png';
import AnimatedBtn from '../components/AnimatedBtn';
import bg from '../仿真软件-植物营养元素缺素症切图/首页/标题.png';
import { convertpx2vw } from '../config';
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
...@@ -22,9 +14,6 @@ const Container = styled(Link)` ...@@ -22,9 +14,6 @@ const Container = styled(Link)`
background-size: cover; background-size: cover;
`; `;
export default function Home() { export default function Home() {
return ( return <Container to={baseUrl + "/sub-home"} />;
<Container to={baseUrl+ '/sub-home'} />
);
} }
src/pages/corn/LackBInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/玉米缺硼。嫩叶叶 脉剪出现不规则白色斑 点，能合成白色条纹。 节间短，雄穗难抽出， 不能吐丝。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.51-assets/3.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(398)};
height: ${convertpx2vw(303)};
:not(:last-child) {
margin-right: 20px;
}
`;
export default function LackBInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺硼" />
<StyledImg src={img_2} alt="缺硼" />
<StyledImg src={img_3} alt="缺硼" />
</>
}
/>
);
}
src/pages/corn/LackInfoPage.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import BGWithNavBtn from "components/BGWithNavBtn";
import BgImg from "仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png";
import { convertpx2vw } from "config.js";
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
`;
export default function LackInfoPage({
textImg,
rightContent,
translateY = 0
}) {
return (
<Container bg={BgImg}>
<div
style={{
position: "absolute",
top: "50%",
transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
width: "100%",
textAlign: "center"
}}
>
<img
style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
src={textImg}
alt="缺氮"
/>
<div style={{ display: "inline-block", verticalAlign: "middle" }}>
{rightContent}
</div>
</div>
</Container>
);
}
src/pages/corn/LackKInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/玉米缺钾，叶脉间出 现黄白相间的退绿条纹， 下部老叶片尖端和边缘呈 紫红色；严重时边缘、叶 尖枯死呈倒“V”字型， 俗.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.31-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(575)};
height: ${convertpx2vw(417)};
:nth-of-type(1) {
margin-right: 20px;
}
`;
export default function LackNInfo({ config, history }) {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
</>
}
/>
);
}
src/pages/corn/LackNInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/玉米缺氮初期呈黄绿 色，旺盛期呈淡绿色至黄 色。严重时下部叶片干枯， 由叶尖开始逐渐达到中脉， 最后全部干枯。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.11-assets/3.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(383)};
height: ${convertpx2vw(605)};
:not(:first-child) {
margin-left: 20px;
}
`;
export default function LackNInfo({ config, history }) {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺氮" />
<StyledImg src={img_2} alt="缺氮" />
<StyledImg src={img_3} alt="缺氮" />
</>
}
/>
);
}
src/pages/corn/LackPInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/玉米缺磷，矮小瘦弱、直 立、分枝少、叶小易脱落；叶 色暗绿或灰绿色，叶缘及叶柄 长出现紫红色。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/1玉米/1.21-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo({ config, history }) {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/corn/LackZnInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/玉米缺锌，幼叶脉间失绿， 呈淡黄色或黄白色，叶片基部 发白，俗称“白苗”病。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/1玉米/1.41-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(461)};
height: ${convertpx2vw(628)};
:nth-of-type(1) {
margin-right: 20px;
}
`;
export default function LackNInfo({ config, history }) {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺锌" />
<StyledImg src={img_2} alt="缺锌" />
</>
}
/>
);
}
src/pages/corn/getComponent.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import CheckLack from '../../layouts/CheckLack'; import CheckLack from "../../layouts/CheckLack";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
// 症状图片 // 症状图片
import LackNSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png' import LackNSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png";
import LackPSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png' import LackPSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png";
import LackKSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png' import LackKSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png";
import LackZnSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png' import LackZnSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png";
import LackBSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png' import LackBSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png";
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png' import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺氮.png";
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png' import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺硼.png";
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺磷.png' import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺磷.png";
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png' import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png";
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png' import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png";
import LackNBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png' import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png";
import LackBBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png' import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png";
import LackPBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png' import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png";
import LackKBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺钾按下.png' import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺钾按下.png";
import LackZnBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺锌按下.png' import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺锌按下.png";
import Bg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png'; import Bg from "../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png";
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
const illustrateSrcs = [ const illustrateSrcs = [LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc];
LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc
]
export default function (idx) { export default function(idx) {
const Component = withRouter(({ match }) => { const Component = withRouter(({ match }) => {
const config = { const config = {
bg: Bg, bg: Bg,
...@@ -37,24 +35,32 @@ export default function (idx) { ...@@ -37,24 +35,32 @@ export default function (idx) {
w: 1021, w: 1021,
h: 501, h: 501,
src: illustrateSrcs[idx], src: illustrateSrcs[idx],
top: 60, top: 60
}, },
btns: { btns: {
w: 218, w: 218,
h: 218, h: 218,
activeW: 207,
activeH: 207,
marginTop: 60, marginTop: 60,
topGap: 0, topGap: 0,
leftGap: 80, leftGap: 80,
rows: [ rows: [
[ [
{ bg: LackNBtnBg, activeBg: LackNBtnBgActive }, { bg: LackPBtnBg, activeBg: LackPBtnBgActive }, { bg: LackKBtnBg, activeBg: LackKBtnBgActive }, { bg: LackZnBtnBg, activeBg: LackZnBtnBgActive }, { bg: LackBBtnBg, activeBg: LackBBtnBgActive } { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
], { bg: LackPBtnBg, activeBg: LackPBtnBgActive },
{ bg: LackKBtnBg, activeBg: LackKBtnBgActive },
{ bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
{ bg: LackBBtnBg, activeBg: LackBBtnBgActive }
]
] ]
} }
} };
const cornList = ['n', 'p', 'k', 'zn', 'b']; const cornList = ["n", "p", "k", "zn", "b"];
config.btns.rows[0][idx].correct = true; config.btns.rows[0][idx].correct = true;
config.btns.rows[0].forEach((ele, i) => ele.to = `${baseUrl}/corn/lack-of-${cornList[i]}/info`); config.btns.rows[0].forEach(
(ele, i) => (ele.to = `${baseUrl}/corn/lack-of-${cornList[i]}/info`)
);
return <CheckLack config={config} />; return <CheckLack config={config} />;
}); });
return Component; return Component;
......
src/pages/rape/LackBInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/苗期缺硼，幼苗叶色 暗绿、叶片皱缩，后期出 现紫红色斑；抽薹时叶缘 变为红色，叶片厚而脆， 出现茎裂现象；花期缺硼， .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.31-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/rape/LackGaInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/小麦缺钙，叶 脉间黄化，近生长 点叶片、叶缘枯死， 叶尖常弯曲呈钩状 新叶枯萎卷曲。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.61-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.61-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(604)};
height: ${convertpx2vw(614)};
:first-child {
margin-right: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/rape/LackInfoPage.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import BGWithNavBtn from "components/BGWithNavBtn";
import BgImg from "仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
import { convertpx2vw } from "config.js";
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
`;
export default function LackInfoPage({
textImg,
rightContent,
translateY = 0
}) {
return (
<Container bg={BgImg}>
<div
style={{
position: "absolute",
top: "50%",
transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
width: "100%",
textAlign: "center"
}}
>
<img
style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
src={textImg}
alt="缺氮"
/>
<div
style={{
display: "inline-block",
verticalAlign: "middle",
position: "relative"
}}
>
{rightContent}
</div>
</div>
</Container>
);
}
src/pages/rape/LackKInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/缺锌苗期缺锌叶片 失绿，心叶白化，中后 期缺锌植株矮小，叶小 而脆，节间缩短，植株 矮化丛生，根系变黄， 空秕粒多，千.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.71-assets/3.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(335)};
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<div style={{ display: "inline-block" }}>
<StyledImg src={img_1} alt="缺锌" />
<br />
<StyledImg
src={img_2}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
</div>
<div
style={{
display: "inline-block",
marginLeft: convertpx2vw(20),
width: convertpx2vw(574),
height: convertpx2vw(335)
}}
>
<StyledImg
src={img_3}
alt="缺锌"
style={{
position: "absolute",
right: 0,
top: "50%",
transform: "translateY(-50%)"
}}
/>
</div>
</>
}
/>
);
}
src/pages/rape/LackMgInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/rape/LackNInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/小麦缺氮，生长缓 慢，分蘖少而弱，叶片 窄小直立，叶色淡黄绿 色，老叶叶尖干枯，茎 有时呈淡紫色，根数少 而短。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.21-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.21-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(417)};
:first-child {
margin-bottom: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺氮" />
<br />
<StyledImg src={img_2} alt="缺氮" />
</>
}
/>
);
}
src/pages/rape/LackPInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/缺磷时，植株矮小，生长 缓慢，出叶延迟，叶面积小， 叶色暗绿，缺乏光泽，边缘出 现紫红色斑点或斑块，叶柄和 叶背面的叶.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(337)};
height: ${convertpx2vw(415)};
:nth-of-type(3),
:nth-of-type(4) {
margin-left: ${convertpx2vw(36)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<img
src={img_1}
style={{
width: convertpx2vw(1083),
height: convertpx2vw(311),
marginBottom: convertpx2vw(30)
}}
alt="缺磷"
/>
<br />
<StyledImg src={img_2} alt="缺磷" />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/rape/LackSInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/油菜缺硫，叶片 呈杯状，内卷，叶背 面呈红色。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.41-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(554)};
height: ${convertpx2vw(392)};
:first-child {
margin-right: ${convertpx2vw(20)};
}
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/rape/LackZnInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.81-assets/植株矮小，节间缩短。叶片小略 增厚，叶背出现紫红色花青素，严重 时先从叶缘开始褪色，变为灰白色， 中、下部叶片白化严重.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.81-assets/1.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(987)};
height: ${convertpx2vw(717)};
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
rightContent={<StyledImg src={img_1} alt="缺锌" />}
/>
);
}
src/pages/rape/getComponent.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import CheckLack from '../../layouts/CheckLack'; import CheckLack from "../../layouts/CheckLack";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.1.png' import LackMgBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.1.png";
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.2.png' import LackNBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.2.png";
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.3.png' import LackBBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.3.png";
import LackSBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.4.png' import LackSBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.4.png";
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.5.png' import LackPBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.5.png";
import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.6.png' import LackGaBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.6.png";
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.7.png' import LackKBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.7.png";
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/3.8.png' import LackZnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/3.8.png";
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺氮.png' import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺氮.png";
import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硫.png' import LackSBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺硫.png";
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺硼.png' import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺硼.png";
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺磷.png' import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺磷.png";
import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钙.png' import LackGaBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺钙.png";
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png' import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png";
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png' import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png";
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png' import LackMgBtnBg from "../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png";
import bg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺氮按下.png";
import LackSBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺硫按下.png";
import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺硼按下.png";
import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺磷按下.png";
import LackGaBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺钙按下.png";
import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺钾按下.png";
import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺锌按下.png";
import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/3油菜/缺镁按下.png";
import bg from "../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
const bgs = [ const bgs = [
[ [LackNBg, LackPBg, LackKBg, LackGaBg],
LackNBg, LackPBg, LackKBg, LackGaBg [LackMgBg, LackZnBg, LackBBg, LackSBg]
], ];
[
LackMgBg, LackZnBg, LackBBg, LackSBg
]
]
export default function (lackElement) { export default function(lackElement) {
const Component = withRouter(({ match }) => { const Component = withRouter(({ match }) => {
const config = { const config = {
bg, bg,
...@@ -40,32 +46,37 @@ export default function (lackElement) { ...@@ -40,32 +46,37 @@ export default function (lackElement) {
w: 856, w: 856,
h: 468, h: 468,
src: bgs[lackElement[0]][lackElement[1]], src: bgs[lackElement[0]][lackElement[1]],
top: 40, top: 40
}, },
btns: { btns: {
w: 170, w: 170,
h: 170, h: 170,
activeW: 159,
activeH: 159,
marginTop: 35, marginTop: 35,
topGap: 40, topGap: 40,
leftGap: 140, leftGap: 140,
rows: [ rows: [
[ [
{ bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg } { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
{ bg: LackPBtnBg, activeBg: LackPBtnBgActive },
{ bg: LackKBtnBg, activeBg: LackKBtnBgActive },
{ bg: LackGaBtnBg, activeBg: LackGaBtnBgActive }
], ],
[ [
{ bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg } { bg: LackMgBtnBg, activeBg: LackMgBtnBgActive },
{ bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
{ bg: LackBBtnBg, activeBg: LackBBtnBgActive },
{ bg: LackSBtnBg, activeBg: LackSBtnBgActive }
] ]
] ]
} }
} };
const rapeList = [ const rapeList = [["n", "p", "k", "ga"], ["mg", "zn", "b", "s"]];
['n', 'p', 'k', 'ga',],
['mg', 'zn', 'b', 's']
];
config.btns.rows[lackElement[0]][lackElement[1]].correct = true; config.btns.rows[lackElement[0]][lackElement[1]].correct = true;
config.btns.rows.forEach((r, i) => { config.btns.rows.forEach((r, i) => {
r.forEach((ele, j) => { r.forEach((ele, j) => {
ele.to = `${baseUrl}/rape/lack-of-${rapeList[i][j]}/info` ele.to = `${baseUrl}/rape/lack-of-${rapeList[i][j]}/info`;
}); });
}); });
return <CheckLack config={config} />; return <CheckLack config={config} />;
......
src/pages/tomato/LackBInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/番茄缺硼，叶缘黄化， 嫩叶边缘黄化，生长点枯 死，植株萎缩，果实表面 龟裂。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/4.png";
import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/5.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(443)};
height: ${convertpx2vw(301)};
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<div style={{ display: "inline-block" }}>
<StyledImg src={img_1} alt="缺锌" />
<br />
<StyledImg
src={img_2}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
<br />
<StyledImg
src={img_3}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
</div>
<div
style={{
display: "inline-block",
marginLeft: convertpx2vw(20),
verticalAlign: "top"
}}
>
<StyledImg
src={img_4}
alt="缺锌"
style={{ marginTop: convertpx2vw(150.5) }}
/>
<br />
<StyledImg
src={img_5}
alt="缺锌"
style={{ marginTop: convertpx2vw(20) }}
/>
</div>
</>
}
/>
);
}
src/pages/tomato/LackGaInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/番茄缺钙，植株 矮小、瘦弱，叶片下 垂，生长点坏死，上 部叶片黄化，叶缘出 现枯死，引发脐腐病。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/4.png";
import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/5.png";
import img_6 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.61-assets/6.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(481)};
height: ${convertpx2vw(288)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(n + 3) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
<br />
<StyledImg src={img_5} alt="缺磷" />
<StyledImg src={img_6} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackInfoPage.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import BGWithNavBtn from "components/BGWithNavBtn";
import BgImg from "仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
import { convertpx2vw } from "config.js";
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
`;
export default function LackInfoPage({
textImg,
rightContent,
translateY = 0
}) {
return (
<Container bg={BgImg}>
<div
style={{
position: "absolute",
top: "50%",
transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
width: "100%",
textAlign: "center"
}}
>
<img
style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
src={textImg}
alt="缺氮"
/>
<div
style={{
display: "inline-block",
verticalAlign: "middle",
position: "relative"
}}
>
{rightContent}
</div>
</div>
</Container>
);
}
src/pages/tomato/LackKInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.21-assets/番茄缺硼，叶缘黄化， 嫩叶边缘黄化，生长点枯 死，植株萎缩，果实表面 龟裂。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/4.png";
import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.41-assets/5.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(443)};
height: ${convertpx2vw(301)};
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<div style={{ display: "inline-block" }}>
<StyledImg src={img_1} alt="缺锌" />
<br />
<StyledImg
src={img_2}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
<br />
<StyledImg
src={img_3}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
</div>
<div
style={{
display: "inline-block",
marginLeft: convertpx2vw(20),
verticalAlign: "top"
}}
>
<StyledImg
src={img_4}
alt="缺锌"
style={{ marginTop: convertpx2vw(150.5) }}
/>
<br />
<StyledImg
src={img_5}
alt="缺锌"
style={{ marginTop: convertpx2vw(20) }}
/>
</div>
</>
}
/>
);
}
src/pages/tomato/LackMgInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.11-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackNInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/植株矮小， 茎细长，叶小，叶瘦长， 淡绿色，叶片表现为脉间 失绿，下部叶片先失绿并 逐渐向上部扩展，严重时 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.51-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackPInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/缺磷时，植株矮小，生长 缓慢，出叶延迟，叶面积小， 叶色暗绿，缺乏光泽，边缘出 现紫红色斑点或斑块，叶柄和 叶背面的叶.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/3油菜/3.51-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(337)};
height: ${convertpx2vw(415)};
:nth-of-type(3),
:nth-of-type(4) {
margin-left: ${convertpx2vw(36)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<img
src={img_1}
style={{
width: convertpx2vw(1083),
height: convertpx2vw(311),
marginBottom: convertpx2vw(30)
}}
alt="缺磷"
/>
<br />
<StyledImg src={img_2} alt="缺磷" />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackSInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/番茄缺硫，叶色呈 渐变状，叶色变黄，叶 背会变紫。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.31-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackZnInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/番茄缺锌，叶片变小， 叶片边缘出现褐色坏死斑 点，叶缘黄化，叶肉变褐。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.11-assets/4.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(544)};
height: ${convertpx2vw(389)};
:nth-of-type(2n + 1) {
margin-right: ${convertpx2vw(20)};
}
:nth-of-type(3),
:nth-of-type(4) {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
<StyledImg src={img_3} alt="缺磷" />
<StyledImg src={img_4} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/getComponent.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import CheckLack from '../../layouts/CheckLack'; import CheckLack from "../../layouts/CheckLack";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.1.png' import LackZnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.1.png";
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.2.png' import LackBBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.2.png";
import LackSBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.3.png' import LackSBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.3.png";
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.4.png' import LackKBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.4.png";
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.5.png' import LackNBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.5.png";
import LackGaBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.6.png' import LackGaBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.6.png";
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.7.png' import LackPBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.7.png";
import LackMgBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.8.png' import LackMgBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.8.png";
import LackMuBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/4.9.png' import LackMuBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/4.9.png";
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png' import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png";
import LackBBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png' import LackSBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png";
import LackSBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png' import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png";
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png' import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png";
import LackNBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png' import LackGaBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png";
import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png' import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png";
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png' import LackMuBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png";
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png' import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png";
import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png' import LackMgBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png";
import bg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺氮按下.png";
import LackSBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺硫按下.png";
import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺硼按下.png";
import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺磷按下.png";
import LackGaBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钙按下.png";
import LackKBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钼按下.png";
import LackMuBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺钾按下.png";
import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺锌按下.png";
import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/4西红柿/缺镁按下.png";
import bg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png";
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
const bgs = [ const bgs = [
LackNBg, LackPBg, LackKBg, LackGaBg, LackMgBg, LackZnBg, LackBBg, LackSBg, LackMuBg, LackNBg,
LackPBg,
LackKBg,
LackGaBg,
LackMgBg,
LackZnBg,
LackBBg,
LackSBg,
LackMuBg
]; ];
export default function(idx) { export default function(idx) {
...@@ -37,25 +56,35 @@ export default function(idx) { ...@@ -37,25 +56,35 @@ export default function(idx) {
w: 850, w: 850,
h: 457, h: 457,
src: bgs[idx], src: bgs[idx],
top: 60, top: 60
}, },
btns: { btns: {
w: 132, w: 132,
h: 297, h: 297,
activeW: 121,
activeH: 286,
marginTop: 55, marginTop: 55,
topGap: 0, topGap: 0,
leftGap: 48, leftGap: 48,
rows: [ rows: [
[ [
{ bg: LackNBtnBg }, { bg: LackPBtnBg }, { bg: LackKBtnBg }, { bg: LackGaBtnBg }, { bg: LackMgBtnBg }, { bg: LackZnBtnBg }, { bg: LackBBtnBg }, { bg: LackSBtnBg }, { bg: LackMuBtnBg }, { bg: LackNBtnBg, activeBg: LackNBtnBgActive },
], { bg: LackPBtnBg, activeBg: LackPBtnBgActive },
{ bg: LackKBtnBg, activeBg: LackKBtnBgActive },
{ bg: LackGaBtnBg, activeBg: LackGaBtnBgActive },
{ bg: LackMgBtnBg, activeBg: LackMgBtnBgActive },
{ bg: LackZnBtnBg, activeBg: LackZnBtnBgActive },
{ bg: LackBBtnBg, activeBg: LackBBtnBgActive },
{ bg: LackSBtnBg, activeBg: LackSBtnBgActive },
{ bg: LackMuBtnBg, activeBg: LackMuBtnBgActive }
]
] ]
} }
} };
config.btns.rows[0][idx].correct = true; config.btns.rows[0][idx].correct = true;
const tomatoList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu']; const tomatoList = ["n", "p", "k", "ga", "mg", "zn", "b", "s", "mu"];
config.btns.rows[0].forEach((ele, i) => { config.btns.rows[0].forEach((ele, i) => {
ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info` ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`;
}); });
return <CheckLack config={config} />; return <CheckLack config={config} />;
}); });
......
src/pages/wheat/LackBInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/缺硼茎叶肥厚、弯曲， 叶鞘呈紫褐色，生育期推 迟，花粉粒不萌发，造成 花而不实，影响结实率， 缺硼严重时会出现空穗。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/2小麦/2.51-assets/3.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(357)};
height: ${convertpx2vw(532)};
:not(:last-child) {
margin-right: 20px;
}
`;
export default function LackBInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺硼" />
<StyledImg src={img_2} alt="缺硼" />
<StyledImg src={img_3} alt="缺硼" />
</>
}
/>
);
}
src/pages/wheat/LackFeInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/缺磷麦苗生长缓 慢，植株矮小，叶片 呈现暗绿色，无光泽， 严重缺磷时叶片、叶 鞘发紫，次生根少而 弱，分蘖少，成穗率 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.71-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.71-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(586)};
height: ${convertpx2vw(425)};
:first-child {
margin-right: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/wheat/LackGaInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/小麦缺钙，叶 脉间黄化，近生长 点叶片、叶缘枯死， 叶尖常弯曲呈钩状 新叶枯萎卷曲。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.91-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(417)};
:first-child {
margin-right: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/wheat/LackInfoPage.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import BGWithNavBtn from "components/BGWithNavBtn";
import BgImg from "仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png";
import { convertpx2vw } from "config.js";
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
`;
export default function LackInfoPage({
textImg,
rightContent,
translateY = 0
}) {
return (
<Container bg={BgImg}>
<div
style={{
position: "absolute",
top: "50%",
transform: `translateY(calc(-50% + ${convertpx2vw(translateY)}))`,
width: "100%",
textAlign: "center"
}}
>
<img
style={{ verticalAlign: "middle", marginRight: convertpx2vw(30) }}
src={textImg}
alt="缺氮"
/>
<div
style={{
display: "inline-block",
verticalAlign: "middle",
position: "relative"
}}
>
{rightContent}
</div>
</div>
</Container>
);
}
src/pages/wheat/LackKInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/缺钾麦苗下部老叶的叶尖、叶缘 先变黄，而后逐渐变褐色，远看似火 烧状，严重时整叶干枯，茎秆细小柔 弱，根系发育不良，易.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.31-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(500)};
height: ${convertpx2vw(474)};
:nth-of-type(1) {
margin-right: 20px;
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺钾" />
<StyledImg src={img_2} alt="缺钾" />
</>
}
/>
);
}
src/pages/wheat/LackMgInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/镁叶片边缘发黄， 叶肉发黄，但叶脉仍 呈绿色，严重时下部 叶边缘开始变褐，枯 死，逐渐蔓延到上部 叶片，开花也受到抑 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.81-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(417)};
:first-child {
margin-right: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/wheat/LackNInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/小麦缺氮，生长缓 慢，分蘖少而弱，叶片 窄小直立，叶色淡黄绿 色，老叶叶尖干枯，茎 有时呈淡紫色，根数少 而短。.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.11-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(417)};
:not(:first-child) {
margin-left: 20px;
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺氮" />
<StyledImg src={img_2} alt="缺氮" />
</>
}
/>
);
}
src/pages/wheat/LackPInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/缺磷麦苗生长缓 慢，植株矮小，叶片 呈现暗绿色，无光泽， 严重缺磷时叶片、叶 鞘发紫，次生根少而 弱，分蘖少，成穗率 .png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.21-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(417)};
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
translateY={-50}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
<br />
</>
}
/>
);
}
src/pages/wheat/LackZnInfo.js 0 → 100644
浏览文件 @ ca239e7b
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/缺锌苗期缺锌叶片 失绿，心叶白化，中后 期缺锌植株矮小，叶小 而脆，节间缩短，植株 矮化丛生，根系变黄， 空秕粒多，千.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/2小麦/2.41-assets/3.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(574)};
height: ${convertpx2vw(335)};
`;
export default function() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<div style={{ display: "inline-block" }}>
<StyledImg src={img_1} alt="缺锌" />
<br />
<StyledImg
src={img_2}
style={{ marginTop: convertpx2vw(20) }}
alt="缺锌"
/>
</div>
<div
style={{
display: "inline-block",
marginLeft: convertpx2vw(20),
width: convertpx2vw(574),
height: convertpx2vw(335)
}}
>
<StyledImg
src={img_3}
alt="缺锌"
style={{
position: "absolute",
right: 0,
top: "50%",
transform: "translateY(-50%)"
}}
/>
</div>
</>
}
/>
);
}
src/pages/wheat/getComponent.js
浏览文件 @ ca239e7b
import React from 'react'; import React from "react";
import CheckLack from '../../layouts/CheckLack'; import CheckLack from "../../layouts/CheckLack";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import N_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.1.png' import N_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.1.png";
import P_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.2.png' import P_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.2.png";
import K_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.3.png' import K_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.3.png";
import Zn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.4.png' import Zn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.4.png";
import B_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.5.png' import B_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.5.png";
import Mn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.6.png' import Mn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.6.png";
import Fe_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.7.png' import Fe_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.7.png";
import Mg_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.8.png' import Mg_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.8.png";
import Ga_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/2.9.png' import Ga_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/2.9.png";
import N_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺氮.png'; import N_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺氮.png";
import B_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺硼.png'; import B_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺硼.png";
import P_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺磷.png'; import P_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺磷.png";
import Ga_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钙.png'; import Ga_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺钙.png";
import K_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺钾.png'; import K_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺钾.png";
import Fe_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺铁.png'; import Fe_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺铁.png";
import Zn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锌.png'; import Zn_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺锌.png";
import Mn_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺锰.png'; import Mn_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺锰.png";
import Mg_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/缺镁.png'; import Mg_Btn_Bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/缺镁.png";
import bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png';
const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ] import N_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺氮按下.png";
import B_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺硼按下.png";
import P_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺磷按下.png";
import Ga_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺钙按下.png";
import K_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺钾按下.png";
import Fe_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺铁按下.png";
import Zn_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺锌按下.png";
import Mn_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺锰按下.png";
import Mg_Btn_active_Bg from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/2小麦/缺镁按下.png";
import bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.png";
const bgs = [N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg];
const baseUrl = process.env.PUBLIC_URL; const baseUrl = process.env.PUBLIC_URL;
export default function (idx) { export default function(idx) {
const Component = withRouter(({ match }) => { const Component = withRouter(({ match }) => {
const to = match.url+'/info' const to = match.url + "/info";
const config = { const config = {
bg, bg,
illustrate: { illustrate: {
w: 1030, w: 1030,
h: 501, h: 501,
src: bgs[idx], src: bgs[idx],
top: 40, top: 40
}, },
btns: { btns: {
w: 132, w: 132,
h: 297, h: 297,
activeW: 121,
activeH: 286,
marginTop: 35, marginTop: 35,
topGap: 0, topGap: 0,
leftGap: 48, leftGap: 48,
rows: [ rows: [
[ [
{ bg: N_Btn_Bg, to }, { bg: P_Btn_Bg, to }, { bg: K_Btn_Bg, to }, { bg: Ga_Btn_Bg, to }, { bg: Mg_Btn_Bg, to }, { bg: Zn_Btn_Bg, to }, { bg: B_Btn_Bg, to }, { bg: Mn_Btn_Bg, to }, { bg: Fe_Btn_Bg, to }, { bg: N_Btn_Bg, to, activeBg: N_Btn_active_Bg },
], { bg: P_Btn_Bg, to, activeBg: P_Btn_active_Bg },
{ bg: K_Btn_Bg, to, activeBg: K_Btn_active_Bg },
{ bg: Ga_Btn_Bg, to, activeBg: Ga_Btn_active_Bg },
{ bg: Mg_Btn_Bg, to, activeBg: Mg_Btn_active_Bg },
{ bg: Zn_Btn_Bg, to, activeBg: Zn_Btn_active_Bg },
{ bg: B_Btn_Bg, to, activeBg: B_Btn_active_Bg },
{ bg: Mn_Btn_Bg, to, activeBg: Mn_Btn_active_Bg },
{ bg: Fe_Btn_Bg, to, activeBg: Fe_Btn_active_Bg }
]
] ]
} }
} };
config.btns.rows[0][idx].correct = true; config.btns.rows[0][idx].correct = true;
const wheatList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe']; const wheatList = ["n", "p", "k", "ga", "mg", "zn", "b", "mn", "fe"];
config.btns.rows[0].forEach((ele, i) => { config.btns.rows[0].forEach((ele, i) => {
ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info` ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`;
}); });
return <CheckLack config={config} />; return <CheckLack config={config} />;
}); });
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论