Skip to content

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

修改详情

上级 ca239e7b
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 130 行增加 和 168 行删除
package.json
浏览文件 @ 3a0fe192
......@@ -4,6 +4,9 @@
"homepage": "/yingyang",
"private": true,
"dependencies": {
"husky": "^3.0.5",
"lint-staged": "^9.2.5",
"prettier": "^1.18.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dom": "^16.9.0",
......@@ -17,6 +20,17 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"git add"
]
},
"eslintConfig": {
"extends": "react-app"
},
......
src/App.js
浏览文件 @ 3a0fe192
......@@ -42,8 +42,7 @@ 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;
import TomatoLackMuInfo from "pages/tomato/LackMuInfo";
const config = {
rape: {
......@@ -76,19 +75,10 @@ const routes = Object.keys(config).reduce((acc, category) => {
<Route
key={category + "-" + element}
exact
path={`${baseUrl}/${category}/lack-of-${element}`}
path={`/${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} />}
// />
// );
});
return acc.concat(curRoutes);
......@@ -96,146 +86,101 @@ const routes = Object.keys(config).reduce((acc, category) => {
function App() {
return (
<Router>
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path={baseUrl + "/"} component={Home} />
<Route path={baseUrl + "/sub-home"} component={SubHome} />
<Route exact path={baseUrl + "/corn"} component={Corn} />
<Route exact path={baseUrl + "/rape"} component={Rape} />
<Route exact path={baseUrl + "/wheat"} component={Wheat} />
<Route exact path={baseUrl + "/tomato"} component={Tomato} />
<Route exact path="/" component={Home} />
<Route path="/sub-home" component={SubHome} />
<Route exact path="/corn" component={Corn} />
<Route exact path="/rape" component={Rape} />
<Route exact path="/wheat" component={Wheat} />
<Route exact path="/tomato" component={Tomato} />
{routes}
<Route
key="corn-lack-of-n-info"
exact
path={`${baseUrl}/corn/lack-of-n/info`}
path={`/corn/lack-of-n/info`}
component={CornLackNInfo}
/>
<Route
key="corn-lack-of-p-info"
exact
path={`${baseUrl}/corn/lack-of-p/info`}
path={`/corn/lack-of-p/info`}
component={CornLackPInfo}
/>
<Route
key="corn-lack-of-k-info"
exact
path={`${baseUrl}/corn/lack-of-k/info`}
path={`/corn/lack-of-k/info`}
component={CornLackKInfo}
/>
<Route
key="corn-lack-of-zn-info"
exact
path={`${baseUrl}/corn/lack-of-zn/info`}
path={`/corn/lack-of-zn/info`}
component={CornLackZnInfo}
/>
<Route
key="corn-lack-of-b-info"
exact
path={`${baseUrl}/corn/lack-of-b/info`}
path={`/corn/lack-of-b/info`}
component={CornLackBInfo}
/>
{/* 小麦 */}
<Route
key="wheat-lack-of-n-info"
exact
path={`${baseUrl}/wheat/lack-of-n/info`}
path={`/wheat/lack-of-n/info`}
component={WheatLackNInfo}
/>
<Route
key="wheat-lack-of-p-info"
exact
path={`${baseUrl}/wheat/lack-of-p/info`}
path={`/wheat/lack-of-p/info`}
component={WheatLackPInfo}
/>
<Route
key="wheat-lack-of-k-info"
exact
path={`${baseUrl}/wheat/lack-of-k/info`}
path={`/wheat/lack-of-k/info`}
component={WheatLackKInfo}
/>
<Route
key="wheat-lack-of-zn-info"
exact
path={`${baseUrl}/wheat/lack-of-zn/info`}
path={`/wheat/lack-of-zn/info`}
component={WheatLackZnInfo}
/>
<Route
key="wheat-lack-of-b-info"
exact
path={`${baseUrl}/wheat/lack-of-b/info`}
path={`/wheat/lack-of-b/info`}
component={WheatLackBInfo}
/>
<Route
key="wheat-lack-of-fe-info"
exact
path={`${baseUrl}/wheat/lack-of-fe/info`}
path={`/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}
/>
<Route path={`/wheat/lack-of-ga/info`} component={WheatLackGaInfo} />
<Route path={`/wheat/lack-of-mg/info`} component={WheatLackMgInfo} />
<Route path={`/rape/lack-of-mg/info`} component={RapeLackMgInfo} />
<Route path={`/rape/lack-of-n/info`} component={RapeLackNInfo} />
<Route path={`/rape/lack-of-b/info`} component={RapeLackBInfo} />
<Route path={`/rape/lack-of-s/info`} component={RapeLackSInfo} />
<Route path={`/rape/lack-of-p/info`} component={RapeLackPInfo} />
<Route path={`/rape/lack-of-ga/info`} component={RapeLackGaInfo} />
<Route path={`/rape/lack-of-zn/info`} component={RapeLackZnInfo} />
<Route path={`/rape/lack-of-k/info`} component={RapeLackKInfo} />
<Route path={`/tomato/lack-of-zn/info`} component={TomatoLackZnInfo} />
<Route path={`/tomato/lack-of-b/info`} component={TomatoLackBInfo} />
<Route path={`/tomato/lack-of-s/info`} component={TomatoLackSInfo} />
<Route path={`/tomato/lack-of-k/info`} component={TomatoLackKInfo} />
<Route path={`/tomato/lack-of-n/info`} component={TomatoLackNInfo} />
<Route path={`/tomato/lack-of-ga/info`} component={TomatoLackGaInfo} />
<Route path={`/tomato/lack-of-p/info`} component={TomatoLackPInfo} />
<Route path={`/tomato/lack-of-mg/info`} component={TomatoLackMgInfo} />
<Route path={`/tomato/lack-of-mu/info`} component={TomatoLackMuInfo} />
</Switch>
</Router>
);
......
src/components/BGWithNavBtn.js
浏览文件 @ 3a0fe192
......@@ -9,8 +9,6 @@ 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)};
position: absolute;
......@@ -43,7 +41,7 @@ const BackBtn = withRouter(({ history }) => {
});
const HomeBtn = () => (
<StyledHomeBtn bg={HomeImg} activeBg={HomeActiveBg} to={baseUrl + "/"} />
<StyledHomeBtn bg={HomeImg} activeBg={HomeActiveBg} to="/" />
);
export default function BGWithNavBtn({ className, children, bg }) {
......
src/pages/Home.js
浏览文件 @ 3a0fe192
......@@ -3,8 +3,6 @@ import styled from "styled-components";
import { Link } from "react-router-dom";
import bg from "../仿真软件-植物营养元素缺素症切图/首页/标题.png";
const baseUrl = process.env.PUBLIC_URL;
const Container = styled(Link)`
text-align: center;
position: relative;
......@@ -13,7 +11,6 @@ const Container = styled(Link)`
background-image: url(${bg});
background-size: cover;
`;
export default function Home() {
return <Container to={baseUrl + "/sub-home"} />;
return <Container to="/sub-home" />;
}
src/pages/SubHome.js
浏览文件 @ 3a0fe192
import React from 'react';
import styled from 'styled-components';
import BackGround from '../components/BackGround';
import CornImg from '../仿真软件-植物营养元素缺素症切图/首页/玉米.png';
import WheatImg from '../仿真软件-植物营养元素缺素症切图/首页/小麦.png';
import RapeImg from '../仿真软件-植物营养元素缺素症切图/首页/油菜花.png';
import tomatoImg from '../仿真软件-植物营养元素缺素症切图/首页/西红柿.png';
import AnimatedBtn from '../components/AnimatedBtn';
import { convertpx2vw } from '../config';
const baseUrl = process.env.PUBLIC_URL;
import React from "react";
import styled from "styled-components";
import BackGround from "../components/BackGround";
import CornImg from "../仿真软件-植物营养元素缺素症切图/首页/玉米.png";
import WheatImg from "../仿真软件-植物营养元素缺素症切图/首页/小麦.png";
import RapeImg from "../仿真软件-植物营养元素缺素症切图/首页/油菜花.png";
import tomatoImg from "../仿真软件-植物营养元素缺素症切图/首页/西红柿.png";
import AnimatedBtn from "../components/AnimatedBtn";
import { convertpx2vw } from "../config";
const Container = styled(BackGround)`
text-align: center;
......@@ -26,7 +24,7 @@ const StyledBtn = styled(AnimatedBtn)`
width: ${convertpx2vw(300)};
height: ${convertpx2vw(300)};
:not(:first-child) {
margin-left: ${convertpx2vw(80)}
margin-left: ${convertpx2vw(80)};
}
`;
......@@ -34,10 +32,10 @@ export default function SubHome() {
return (
<Container>
<StyledDiv>
<StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
<StyledBtn bg={WheatImg} to={baseUrl + '/wheat'} />
<StyledBtn bg={RapeImg} to={baseUrl + '/rape'}/>
<StyledBtn bg={tomatoImg} to={baseUrl + '/tomato'} />
<StyledBtn bg={CornImg} to="/corn" />
<StyledBtn bg={WheatImg} to="/wheat" />
<StyledBtn bg={RapeImg} to="/rape" />
<StyledBtn bg={tomatoImg} to="/tomato" />
</StyledDiv>
</Container>
);
......
src/pages/corn/getComponent.js
浏览文件 @ 3a0fe192
......@@ -23,8 +23,6 @@ import LackZnBtnBgActive from "../../仿真软件-植物营养元素缺素症切
import Bg from "../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png";
const baseUrl = process.env.PUBLIC_URL;
const illustrateSrcs = [LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc];
export default function(idx) {
......@@ -59,7 +57,7 @@ export default function(idx) {
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`)
(ele, i) => (ele.to = `/corn/lack-of-${cornList[i]}/info`)
);
return <CheckLack config={config} />;
});
......
src/pages/rape/getComponent.js
浏览文件 @ 3a0fe192
......@@ -31,8 +31,6 @@ import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切
import bg from "../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
const baseUrl = process.env.PUBLIC_URL;
const bgs = [
[LackNBg, LackPBg, LackKBg, LackGaBg],
[LackMgBg, LackZnBg, LackBBg, LackSBg]
......@@ -76,7 +74,7 @@ export default function(lackElement) {
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 = `/rape/lack-of-${rapeList[i][j]}/info`;
});
});
return <CheckLack config={config} />;
......
src/pages/tomato/LackInfoPage.js
浏览文件 @ 3a0fe192
import React from "react";
import styled from "styled-components";
import BGWithNavBtn from "components/BGWithNavBtn";
import BgImg from "仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png";
import BgImg from "仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png";
import { convertpx2vw } from "config.js";
const Container = styled(BGWithNavBtn)`
......
src/pages/tomato/LackMgInfo.js
浏览文件 @ 3a0fe192
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 textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.81-assets/番茄缺镁，下部老叶边缘失绿， 后向中部扩展，黄化由基部向上发 展，形成黄化斑叶，严重的叶缘上 卷，叶脉间出现坏死斑点，.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.81-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.81-assets/2.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) {
width: ${convertpx2vw(733)};
height: ${convertpx2vw(439)};
:last-child {
margin-top: ${convertpx2vw(20)};
}
`;
......@@ -24,14 +18,11 @@ 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="缺磷" />
<StyledImg src={img_2} alt="缺磷" />
</>
}
/>
......
src/pages/tomato/LackMuInfo.js 0 → 100644
浏览文件 @ 3a0fe192
import React from "react";
import styled from "styled-components";
import textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.91-assets/番茄缺钼时，老叶先褪绿， 叶缘和叶脉间的叶肉呈黄色斑 状，叶边向上卷，叶尖萎焦， 渐向内移；轻者影响开花结实， 重者死.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.91-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.91-assets/2.png";
import { convertpx2vw } from "config.js";
import LackInfoPage from "./LackInfoPage";
const StyledImg = styled.img`
width: ${convertpx2vw(733)};
height: ${convertpx2vw(439)};
:last-child {
margin-top: ${convertpx2vw(20)};
}
`;
export default function LackNInfo() {
return (
<LackInfoPage
textImg={textImg}
rightContent={
<>
<StyledImg src={img_1} alt="缺磷" />
<br />
<StyledImg src={img_2} alt="缺磷" />
</>
}
/>
);
}
src/pages/tomato/LackPInfo.js
浏览文件 @ 3a0fe192
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 textImg from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/番茄缺磷初期茎细 小，严重时叶片僵硬， 并向后卷曲；叶正面呈 蓝绿色，背面和叶脉呈 紫色。老叶逐渐变黄， 并产生不规则.png";
import img_1 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/1.png";
import img_2 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/2.png";
import img_3 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/3.png";
import img_4 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/4.png";
import img_5 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/5.png";
import img_6 from "仿真软件-植物营养元素缺素症切图/4西红柿/4.71-assets/6.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)};
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}
translateY={-50}
rightContent={
<>
<img
src={img_1}
style={{
width: convertpx2vw(1083),
height: convertpx2vw(311),
marginBottom: convertpx2vw(30)
}}
alt="缺磷"
/>
<br />
<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/getComponent.js
浏览文件 @ 3a0fe192
......@@ -34,8 +34,6 @@ import LackMgBtnBgActive from "../../仿真软件-植物营养元素缺素症切
import bg from "../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png";
const baseUrl = process.env.PUBLIC_URL;
const bgs = [
LackNBg,
LackPBg,
......@@ -84,7 +82,7 @@ export default function(idx) {
config.btns.rows[0][idx].correct = true;
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 = `/tomato/lack-of-${tomatoList[i]}/info`;
});
return <CheckLack config={config} />;
});
......
src/pages/wheat/getComponent.js
浏览文件 @ 3a0fe192
......@@ -36,8 +36,6 @@ import bg from "../../仿真软件-植物营养元素缺素症切图/2小麦/小
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) {
const Component = withRouter(({ match }) => {
const to = match.url + "/info";
......@@ -75,7 +73,7 @@ export default function(idx) {
config.btns.rows[0][idx].correct = true;
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 = `/wheat/lack-of-${wheatList[i]}/info`;
});
return <CheckLack config={config} />;
});
......
yarn.lock
浏览文件 @ 3a0fe192
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论