Skip to content

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

修改

上级 29888d78
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 197 行增加 和 80 行删除
src/App.js
浏览文件 @ fe1698dc
......@@ -48,6 +48,7 @@ const routes = Object.keys(config).reduce((acc, category) => {
component={Cmp}
/>
);
curRoutes.push(
<Route
key={category + '-' + element + '-info'}
......@@ -60,7 +61,6 @@ const routes = Object.keys(config).reduce((acc, category) => {
return acc.concat(curRoutes);
}, []);
console.log(routes);
function App() {
......
src/config.js
浏览文件 @ fe1698dc
export const USE_VW = true;
export function convertpx2vw(px) { return USE_VW ? px / 16 + 'vw' : px + 'px'}
\ No newline at end of file
let unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
let divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
window.addEventListener('resize', () => {
unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
});
export function convertpx2vw(px) { return USE_VW ? px / divide + unit : px + 'px'}
src/layouts/CheckLack.js
浏览文件 @ fe1698dc
import React, { useState } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import BGWithNavBtn from '../components/BGWithNavBtn';
......@@ -10,10 +10,12 @@ import { convertpx2vw } from '../config';
const Container = styled(BGWithNavBtn)`
display: block;
overflow: hidden;
background-size: contain;
background-repeat: repeat-x;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
`;
const StyledBtn = styled(AnimatedBtn)`
display: inline-block;
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
:not(:first-child) {
......@@ -22,57 +24,64 @@ const StyledBtn = styled(AnimatedBtn)`
position: relative;
`;
const Row = styled.div`
display: flex;
/* display: flex;
flex-direction: row;
justify-content: center;
justify-content: center; */
margin-top: ${props => convertpx2vw(props.marginTop)};
`;
const MarkImg = styled.img`
position: absolute;
bottom: ${convertpx2vw(20)};
bottom: 20px;
left: 50%;
transform: translateX(-50%);
visibility: ${props => props.show ? 'visible' : 'hidden'};
`;
const WrongMark = styled(MarkImg)`
width: ${convertpx2vw(39)};
height: ${convertpx2vw(39)};
width: ${convertpx2vw(35)};
height: ${convertpx2vw(35)};
`;
const CorrectMark = styled(MarkImg)`
width: ${convertpx2vw(51)};
height: ${convertpx2vw(43)};
width: ${convertpx2vw(51*0.9)};
height: ${convertpx2vw(43*0.9)};
`;
const CheckBtn = withRouter(({ w, h, leftGap, bg, to, correct, history }) => {
const CheckBtn = ({ w, h, leftGap, bg, to, correct, onClick }) => {
const [showCheckMark, setShowCheckMark] = useState(false);
function handleClick(e) {
e.preventDefault();
setShowCheckMark(true);
setTimeout(() => {
history.push(to);
}, 1000);
onClick();
}
return (
<StyledBtn
w={w}
h={h}
leftgap={leftGap}
bg={bg}
to={to}
onClick={e => handleClick(e)}
>
{
correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
}
</StyledBtn>
<StyledBtn
w={w}
h={h}
leftgap={leftGap}
bg={bg}
to={to}
onClick={e => handleClick(e)}
>
{
correct ? <CorrectMark show={showCheckMark} src={CorrectImg} /> : <WrongMark show={showCheckMark} src={WrongImg} />
}
</StyledBtn>
);
});
};
/**
* Check Lack layout
* config = {
* bg,
* illustrate: {
* w: number,
* h: number,
* src:
*
* }
* btns: {
* w,
* h,
......@@ -87,10 +96,36 @@ const CheckBtn = withRouter(({ w, h, leftGap, bg, to, correct, history }) => {
* }
* }
*/
const Illustrate = styled.img`
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
margin-top: ${props => convertpx2vw(props.top)};
`;
function CheckLack({ config, history }) {
const timerRef = useRef(null);
function handleClick(to) {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
timerRef.current = setTimeout(() => {
history.push(to);
}, 1000);
}
useEffect(() => {
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
}
}, [])
export default function CheckLack({ config }) {
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
......@@ -107,6 +142,7 @@ export default function CheckLack({ config }) {
bg={ele.bg}
correct={ele.correct}
to={ele.to}
onClick={() => handleClick(ele.to)}
/>
))
}
......@@ -115,4 +151,5 @@ export default function CheckLack({ config }) {
}
</Container>
);
}
\ No newline at end of file
}
export default withRouter(CheckLack);
\ No newline at end of file
src/layouts/RowsLayout.js
浏览文件 @ fe1698dc
......@@ -5,17 +5,35 @@ import { convertpx2vw } from '../config';
import AnimatedBtn from '../components/AnimatedBtn';
const Container = styled(BGWithNavBtn)`
display: grid;
/* display: grid;
grid-template-columns: ${props => `repeat(${props.columns}, auto)`};
grid-row-gap: ${props => convertpx2vw(props.rowGap)};
grid-column-gap: ${props => convertpx2vw(props.columnGap)};
grid-template-rows: auto;
justify-content: center;
align-content: center;
align-content: center; */
`;
const VerticalMiddle = styled.div`
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
`;
const StyledBtn = styled(AnimatedBtn)`
display: inline-block;
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
:not(:first-child) {
margin-left: ${props => convertpx2vw(props.left)};
}
`;
const Row = styled.div`
display: block;
text-align: center;
:not(:first-child) {
margin-top: ${props => convertpx2vw(props.top)};
}
`;
/**
* 按行排列
......@@ -31,11 +49,25 @@ const StyledBtn = styled(AnimatedBtn)`
*/
export default function RowsLayout({ config }) {
const { bg, rowGap, columnGap, btns, w, h, columns } = config;
const btnRows = Array(btns.length / columns).fill(true).map(_ => []);
btns.forEach((btn, idx) => {
btnRows[Math.floor(idx / columns)].push(btn);
});
console.log(btnRows);
return (
<Container columns={columns} bg={bg} rowGap={rowGap} columnGap={columnGap} >
{
btns.map(btn => <StyledBtn w={w} h={h} bg={btn.bg} to={btn.to} />)
}
<VerticalMiddle>
{
btnRows.map((row, idx) => (
<Row key={idx} top={rowGap}>
{
row.map(btn => <StyledBtn key={btn.to} w={w} h={h} bg={btn.bg} to={btn.to} left={columnGap} />)
}
</Row>
))
}
</VerticalMiddle>
</Container>
);
}
\ No newline at end of file
}
// btns.map(btn => <StyledBtn key={btn.to} w={w} h={h} bg={btn.bg} to={btn.to} />)
\ No newline at end of file
src/pages/Home.js
浏览文件 @ fe1698dc
......@@ -11,23 +11,34 @@ import { convertpx2vw } from '../config';
const baseUrl = process.env.PUBLIC_URL;
const Container = styled(BackGround)`
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
position: relative;
`;
const StyledDiv = styled.div`
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
`;
const StyledBtn = styled(AnimatedBtn)`
display: inline-block;
width: ${convertpx2vw(300)};
height: ${convertpx2vw(300)};
:not(:first-child) {
margin-left: ${convertpx2vw(80)}
}
`;
export default function Home() {
return (
<Container>
<StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
<StyledBtn bg={WheatImg} to={baseUrl + '/wheat'} />
<StyledBtn bg={RapeImg} to={baseUrl + '/rape'}/>
<StyledBtn bg={tomatoImg} to={baseUrl + '/tomato'} />
<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'} />
</StyledDiv>
</Container>
);
}
\ No newline at end of file
src/pages/corn/getComponent.js
浏览文件 @ fe1698dc
......@@ -2,11 +2,12 @@ import React from 'react';
import CheckLack from '../../layouts/CheckLack';
import { withRouter } from 'react-router-dom';
import LackNBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.1.png'
import LackPBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.2.png'
import LackKBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.3.png'
import LackZnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.4.png'
import LackBBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/1.5.png'
// 症状图片
import 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'
......@@ -14,20 +15,28 @@ import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png'
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png'
import Bg from '../../仿真软件-植物营养元素缺素症切图/1玉米/玉米背景.png';
const baseUrl = process.env.PUBLIC_URL;
const bgs = [
LackNBg, LackPBg, LackKBg, LackZnBg, LackBBg
const illustrateSrcs = [
LackNSrc, LackPSrc, LackKSrc, LackZnSrc, LackBSrc
]
export default function (idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[idx],
bg: Bg,
illustrate: {
w: 1021,
h: 501,
src: illustrateSrcs[idx],
top: 60,
},
btns: {
w: 207,
h: 207,
marginTop: 602,
w: 218,
h: 218,
marginTop: 60,
topGap: 0,
leftGap: 80,
rows: [
......
src/pages/rape/getComponent.js
浏览文件 @ fe1698dc
......@@ -19,6 +19,7 @@ import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/3
import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺钾.png'
import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png'
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png'
import bg from '../../仿真软件-植物营养元素缺素症切图/3油菜/油菜背景.png';
const baseUrl = process.env.PUBLIC_URL;
......@@ -34,11 +35,17 @@ const bgs = [
export default function (lackElement) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[lackElement[0]][lackElement[1]],
bg,
illustrate: {
w: 856,
h: 468,
src: bgs[lackElement[0]][lackElement[1]],
top: 40,
},
btns: {
w: 159,
h: 159,
marginTop: 539,
w: 170,
h: 170,
marginTop: 35,
topGap: 40,
leftGap: 140,
rows: [
......
src/pages/tomato/getComponent.js
浏览文件 @ fe1698dc
......@@ -21,6 +21,7 @@ import LackGaBtnBg from '../../仿真软件-植物营养元素缺素症切图/4
import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺磷.png'
import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png'
import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png'
import bg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/西红柿背景.png';
const baseUrl = process.env.PUBLIC_URL;
......@@ -31,11 +32,17 @@ const bgs = [
export default function(idx) {
const Component = withRouter(({ match }) => {
const config = {
bg: bgs[idx],
bg,
illustrate: {
w: 850,
h: 457,
src: bgs[idx],
top: 60,
},
btns: {
w: 121,
h: 286,
marginTop: 559,
w: 132,
h: 297,
marginTop: 55,
topGap: 0,
leftGap: 48,
rows: [
......
src/pages/wheat/getComponent.js
浏览文件 @ fe1698dc
......@@ -2,15 +2,15 @@ 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';
......@@ -21,6 +21,7 @@ import Fe_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小
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';
const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ]
......@@ -30,11 +31,17 @@ export default function (idx) {
const Component = withRouter(({ match }) => {
const to = match.url+'/info'
const config = {
bg: bgs[idx],
bg,
illustrate: {
w: 1030,
h: 501,
src: bgs[idx],
top: 40,
},
btns: {
w: 121,
h: 286,
marginTop: 560,
w: 132,
h: 297,
marginTop: 35,
topGap: 0,
leftGap: 48,
rows: [
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论