Skip to content

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

修改详情

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