Skip to content

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

修改详情页

上级 c21792b2
隐藏空白字符变更
内嵌 并排
正在显示 包含 1778 行增加 和 259 行删除
jsconfig.json 0 → 100644
浏览文件 @ ca239e7b
{
"compilerOptions": {
"baseUrl": "src"
}
}
\ No newline at end of file
src/App.js
浏览文件 @ ca239e7b
import React from 'react';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SubHome from './pages/SubHome';
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';
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import SubHome from "./pages/SubHome";
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 tomatoGetCmp from "./pages/tomato/getComponent";
import cornGetCmp from "./pages/corn/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 config = {
const config = {
rape: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'],
elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s"],
getCmp: rapeGetComponent,
idxFormater: idx => [Math.floor(idx / 4), idx % 4],
idxFormater: idx => [Math.floor(idx / 4), idx % 4]
},
tomato: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'],
getCmp: tomatoGetCmp,
elements: ["n", "p", "k", "ga", "mg", "zn", "b", "s", "mu"],
getCmp: tomatoGetCmp
},
corn: {
elements: ['n', 'p', 'k', 'zn', 'b'],
getCmp: cornGetCmp,
elements: ["n", "p", "k", "zn", "b"],
getCmp: cornGetCmp
},
wheat: {
elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'],
getCmp: wheatGetCmp,
},
}
elements: ["n", "p", "k", "ga", "mg", "zn", "b", "mn", "fe"],
getCmp: wheatGetCmp
}
};
const routes = Object.keys(config).reduce((acc, category) => {
const curRoutes = [];
const { elements, getCmp, idxFormater } = config[category];
......@@ -43,27 +74,26 @@ const routes = Object.keys(config).reduce((acc, category) => {
const Cmp = getCmp(idxFormater ? idxFormater(idx) : idx);
curRoutes.push(
<Route
key={category + '-' + element}
key={category + "-" + element}
exact
path={`${baseUrl}/${category}/lack-of-${element}`}
component={Cmp}
/>
);
curRoutes.push(
<Route
key={category + '-' + element + '-info'}
exact
path={`${baseUrl}/${category}/lack-of-${element}/info`}
component={() => <InfoCmp category={category} element={element} />}
/>
);
// curRoutes.push(
// <Route
// key={category + '-' + element + '-info'}
// exact
// path={`${baseUrl}/${category}/lack-of-${element}/info`}
// component={() => <InfoCmp category={category} element={element} />}
// />
// );
});
return acc.concat(curRoutes);
}, []);
function App() {
return (
<Router>
......@@ -74,7 +104,138 @@ function App() {
<Route exact path={baseUrl + "/rape"} component={Rape} />
<Route exact path={baseUrl + "/wheat"} component={Wheat} />
<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>
</Router>
);
......
src/components/BGWithNavBtn.js
浏览文件 @ ca239e7b
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';
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";
import BackActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/返回按下.png";
import HomeActiveBg from "../仿真软件-植物营养元素缺素症切图/按钮按下状态/通用/主页按下.png";
const baseUrl = process.env.PUBLIC_URL;
const StyledNavBtn = styled(AnimatedBtn)`
bottom: ${convertpx2vw(23)};
bottom: ${convertpx2vw(23)};
position: absolute;
width: ${convertpx2vw(90)};
width: ${convertpx2vw(90)};
height: ${convertpx2vw(90)};
&:active {
background-image: ${props => `url(${props.activeBg})`};
transform: none;
}
`;
const StyledBackBtn = styled(StyledNavBtn)`
right: ${convertpx2vw(149)};
......@@ -26,17 +32,26 @@ const BackBtn = withRouter(({ history }) => {
e.preventDefault();
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 }) {
return (
<BackGround className={className} bg={bg} >
{ children }
<BackGround className={className} bg={bg}>
{children}
<BackBtn />
<HomeBtn />
</BackGround>
);
}
\ No newline at end of file
}
src/layouts/CheckLack.js
浏览文件 @ ca239e7b
import React, { useState, useEffect, useRef } 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';
import React, { useState, useEffect, useRef } 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;
......@@ -22,9 +22,13 @@ const StyledBtn = styled(AnimatedBtn)`
margin-left: ${props => convertpx2vw(props.leftgap)};
}
position: relative;
background-position: left top;
&:active {
/* background-image: url(${props => props.activeBg});
transform: none; */
background-image: url(${props => props.activeBg});
transform: none;
background-size: ${props =>
convertpx2vw(props.activeW) + ", " + convertpx2vw(props.activeH)};
background-position: left top;
}
`;
const Row = styled.div`
......@@ -38,19 +42,29 @@ const MarkImg = styled.img`
bottom: 20px;
left: 50%;
transform: translateX(-50%);
visibility: ${props => props.show ? 'visible' : 'hidden'};
visibility: ${props => (props.show ? "visible" : "hidden")};
`;
const WrongMark = styled(MarkImg)`
width: ${convertpx2vw(35)};
height: ${convertpx2vw(35)};
`;
const CorrectMark = styled(MarkImg)`
width: ${convertpx2vw(51*0.9)};
height: ${convertpx2vw(43*0.9)};
width: ${convertpx2vw(51 * 0.9)};
height: ${convertpx2vw(43 * 0.9)};
`;
const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
const CheckBtn = ({
w,
h,
activeW,
activeH,
leftGap,
bg,
activeBg,
to,
correct,
onClick
}) => {
const [showCheckMark, setShowCheckMark] = useState(false);
function handleClick(e) {
......@@ -60,23 +74,26 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
}
return (
<StyledBtn
w={w}
h={h}
leftgap={leftGap}
bg={bg}
activeBg={activeBg}
to={to}
onClick={e => handleClick(e)}
>
{
correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
}
</StyledBtn>
<StyledBtn
w={w}
h={h}
activeW={activeW}
activeH={activeH}
leftgap={leftGap}
bg={bg}
activeBg={activeBg}
to={to}
onClick={e => handleClick(e)}
>
{correct ? (
<CorrectMark show={showCheckMark} src={CorrectImg} />
) : (
<WrongMark show={showCheckMark} src={WrongImg} />
)}
</StyledBtn>
);
};
/**
* Check Lack layout
* config = {
......@@ -84,8 +101,8 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
* illustrate: {
* w: number,
* h: number,
* src:
*
* src:
*
* }
* btns: {
* w,
......@@ -98,7 +115,7 @@ const CheckBtn = ({ w, h, leftGap, bg, activeBg, to, correct, onClick }) => {
* {bg, to},
* ]
* ]
* }
* }
* }
*/
const Illustrate = styled.img`
......@@ -108,7 +125,6 @@ const Illustrate = styled.img`
`;
function CheckLack({ config, history }) {
const timerRef = useRef(null);
function handleClick(to) {
......@@ -125,37 +141,41 @@ function CheckLack({ config, history }) {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
}
}, [])
};
}, []);
return (
<Container bg={config.bg}>
<Illustrate src={config.illustrate.src} w={config.illustrate.w} h={config.illustrate.h} top={config.illustrate.top} alt='illustrate' />
{
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}
activeBg={ele.activeBg}
correct={ele.correct}
to={ele.to}
onClick={() => handleClick(ele.to)}
/>
))
}
</Row>
))
}
<Illustrate
src={config.illustrate.src}
w={config.illustrate.w}
h={config.illustrate.h}
top={config.illustrate.top}
alt="illustrate"
/>
{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}
activeW={config.btns.activeW}
activeH={config.btns.activeH}
leftGap={config.btns.leftGap}
bg={ele.bg}
activeBg={ele.activeBg}
correct={ele.correct}
to={ele.to}
onClick={() => handleClick(ele.to)}
/>
))}
</Row>
))}
</Container>
);
}
export default withRouter(CheckLack);
\ No newline at end of file
export default withRouter(CheckLack);
src/pages/Home.js
浏览文件 @ ca239e7b
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
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 bg from '../仿真软件-植物营养元素缺素症切图/首页/标题.png';
import { convertpx2vw } from '../config';
import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import bg from "../仿真软件-植物营养元素缺素症切图/首页/标题.png";
const baseUrl = process.env.PUBLIC_URL;
......@@ -22,9 +14,6 @@ const Container = styled(Link)`
background-size: cover;
`;
export default function Home() {
return (
<Container to={baseUrl+ '/sub-home'} />
);
}
\ No newline at end of file
return <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 CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import React from "react";
import CheckLack from "../../layouts/CheckLack";
import { withRouter } from "react-router-dom";
// 症状图片
import LackNSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png'
import LackPSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png'
import LackKSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png'
import LackZnSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png'
import LackBSrc from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png'
import LackNSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png";
import LackPSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png";
import LackKSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png";
import LackZnSrc from "../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png";
import LackBSrc 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'
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";
import LackNBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png'
import LackBBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png'
import LackPBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png'
import LackKBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺钾按下.png'
import LackZnBtnBgActive from '../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺锌按下.png'
import LackNBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺氮按下.png";
import LackBBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺硼按下.png";
import LackPBtnBgActive from "../../仿真软件-植物营养元素缺素症切图/按钮按下状态/1玉米/缺磷按下.png";
import LackKBtnBgActive 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 illustrateSrcs = [
LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc
]
const illustrateSrcs = [LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc];
export default function (idx) {
export default function(idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: Bg,
......@@ -37,24 +35,32 @@ export default function (idx) {
w: 1021,
h: 501,
src: illustrateSrcs[idx],
top: 60,
top: 60
},
btns: {
w: 218,
h: 218,
activeW: 207,
activeH: 207,
marginTop: 60,
topGap: 0,
leftGap: 80,
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].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 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 CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
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 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'
import bg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.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";
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 bgs = [
[
LackNBg, LackPBg, LackKBg, LackGaBg
],
[
LackMgBg, LackZnBg, LackBBg, LackSBg
]
]
[LackNBg, LackPBg, LackKBg, LackGaBg],
[LackMgBg, LackZnBg, LackBBg, LackSBg]
];
export default function (lackElement) {
export default function(lackElement) {
const Component = withRouter(({ match }) => {
const config = {
bg,
......@@ -40,32 +46,37 @@ export default function (lackElement) {
w: 856,
h: 468,
src: bgs[lackElement[0]][lackElement[1]],
top: 40,
top: 40
},
btns: {
w: 170,
h: 170,
activeW: 159,
activeH: 159,
marginTop: 35,
topGap: 40,
leftGap: 140,
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 = [
['n', 'p', 'k', 'ga',],
['mg', 'zn', 'b', 's']
];
};
const rapeList = [["n", "p", "k", "ga"], ["mg", "zn", "b", "s"]];
config.btns.rows[lackElement[0]][lackElement[1]].correct = true;
config.btns.rows.forEach((r, i) => {
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} />;
......
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 CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
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 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'
import bg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
import LackNBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺氮.png";
import LackSBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硫.png";
import LackBBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺硼.png";
import LackPBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png";
import LackGaBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钙.png";
import LackKBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钾.png";
import LackMuBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png";
import LackZnBtnBg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/缺锌.png";
import LackMgBtnBg 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 bgs = [
LackNBg, LackPBg, LackKBg, LackGaBg, LackMgBg, LackZnBg, LackBBg, LackSBg, LackMuBg,
LackNBg,
LackPBg,
LackKBg,
LackGaBg,
LackMgBg,
LackZnBg,
LackBBg,
LackSBg,
LackMuBg
];
export default function(idx) {
......@@ -37,25 +56,35 @@ export default function(idx) {
w: 850,
h: 457,
src: bgs[idx],
top: 60,
top: 60
},
btns: {
w: 132,
h: 297,
activeW: 121,
activeH: 286,
marginTop: 55,
topGap: 0,
leftGap: 48,
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;
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) => {
ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`
ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`;
});
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 CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
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_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';
import bg from '../../仿真软件-植物营养元素缺素症切图/2小麦/小麦背景.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, ]
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;
export default function (idx) {
export default function(idx) {
const Component = withRouter(({ match }) => {
const to = match.url+'/info'
const to = match.url + "/info";
const config = {
bg,
illustrate: {
w: 1030,
h: 501,
src: bgs[idx],
top: 40,
top: 40
},
btns: {
w: 132,
h: 297,
activeW: 121,
activeH: 286,
marginTop: 35,
topGap: 0,
leftGap: 48,
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;
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) => {
ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`
ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`;
});
return <CheckLack config={config} />;
});
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论