Skip to content

L
LiFeiShiYong
提交 902db437 authored 作者: 徐立's avatar 徐立
浏览文件
操作

修改效果

上级 9dd1be79
显示空白字符变更
内嵌 并排
正在显示 包含 411 行增加 和 43 行删除
src/App.js
浏览文件 @ 902db437
...@@ -14,6 +14,12 @@ import FertilizeGreen from './pages/FertilizeByGround/Acid/AddOrganic/Green' ...@@ -14,6 +14,12 @@ import FertilizeGreen from './pages/FertilizeByGround/Acid/AddOrganic/Green'
import FertilizeByAlkalineGround from './pages/FertilizeByGround/Alkaline' import FertilizeByAlkalineGround from './pages/FertilizeByGround/Alkaline'
import FertilizeByAlkalineGroundAddAcid from 'pages/FertilizeByGround/Alkaline/AddAcid' import FertilizeByAlkalineGroundAddAcid from 'pages/FertilizeByGround/Alkaline/AddAcid'
// 新加页面
import FertilizeByAlkalineAddOrganic from './pages/FertilizeByGround/Alkaline/AddOrganic';
import FertilizeByAlkalineHumanity from 'pages/FertilizeByGround/Alkaline/AddOrganic/Humanity'
import FertilizeByAlkalineStable from './pages/FertilizeByGround/Alkaline/AddOrganic/Stable'
import FertilizeByAlkalineStraw from 'pages/FertilizeByGround/Alkaline/AddOrganic/Straw'
import FertilizeByAlkalineGreen from './pages/FertilizeByGround/Alkaline/AddOrganic/Green'
import FertilizeEarly from './pages/FertilizeEarly'; import FertilizeEarly from './pages/FertilizeEarly';
import FertilizeEarlySelect from './pages/FertilizeEarly/select'; import FertilizeEarlySelect from './pages/FertilizeEarly/select';
import FertilizeEarlySelectWheat from './pages/FertilizeEarly/Wheat'; import FertilizeEarlySelectWheat from './pages/FertilizeEarly/Wheat';
...@@ -46,8 +52,12 @@ function App() { ...@@ -46,8 +52,12 @@ function App() {
<Route exact path={"/sub-home/fertilize-by-ground/acid/add-organic/green"} component={FertilizeGreen} /> <Route exact path={"/sub-home/fertilize-by-ground/acid/add-organic/green"} component={FertilizeGreen} />
<Route exact path={"/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} /> <Route exact path={"/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} /> <Route exact path={"/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-organic"} component={FertilizeByAlkalineAddOrganic} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-organic/humanity"} component={FertilizeByAlkalineHumanity} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-organic/stable"} component={FertilizeByAlkalineStable} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-organic/straw"} component={FertilizeByAlkalineStraw} />
<Route exact path={"/sub-home/fertilize-by-ground/alkaline/add-organic/green"} component={FertilizeByAlkalineGreen} />
<Route exact <Route exact
path={"/sub-home/fertilize-by-ground/alkaline/add-organic"} path={"/sub-home/fertilize-by-ground/alkaline/add-organic"}
render={ () => <Redirect to={"/sub-home/fertilize-by-ground/acid/add-organic"} /> } render={ () => <Redirect to={"/sub-home/fertilize-by-ground/acid/add-organic"} /> }
......
src/pages/FertilizeByGround/Acid/AddAlkaline/index.js
浏览文件 @ 902db437
...@@ -79,25 +79,39 @@ function AddAlkaline({ history }) { ...@@ -79,25 +79,39 @@ function AddAlkaline({ history }) {
switch (isCorrect) { switch (isCorrect) {
case 'err1': case 'err1':
setTextImg(errImgOne); setTextImg(errImgOne);
setAudioSrc(audioOne); // setAudioSrc(audioOne);
break; break;
case 'err2': case 'err2':
setTextImg(errImgTwo); setTextImg(errImgTwo);
setAudioSrc(audioOne); // setAudioSrc(audioOne);
break; break;
case 'true1': case 'true1':
setTextImg(trueImgTwo); setTextImg(trueImgTwo);
setAudioSrc(audioTwo); // setAudioSrc(audioTwo);
break; break;
case 'true2': case 'true2':
setTextImg(trueImgOne); setTextImg(trueImgOne);
setAudioSrc(audioTwo); // setAudioSrc(audioTwo);
break; break;
} }
}, 1000); });
setTimeout(() => { setTimeout(() => {
switch (isCorrect) {
case 'err1':
setAudioSrc(audioOne);
break
case 'err2':
setAudioSrc(audioOne);
break
case 'true1':
setAudioSrc(audioTwo);
break
case 'true2':
setAudioSrc(audioTwo);
break
}
setTextImg(null); setTextImg(null);
}, 3000); }, 4000);
} }
const [infoImg, setInfoImg] = useState(null); const [infoImg, setInfoImg] = useState(null);
......
src/pages/FertilizeByGround/Acid/AddOrganic/Humanity/index.js
浏览文件 @ 902db437
...@@ -20,9 +20,10 @@ export default function Humanity({ match }) { ...@@ -20,9 +20,10 @@ export default function Humanity({ match }) {
const [showText, setShowText] = useState(false); const [showText, setShowText] = useState(false);
useEffect(() => { useEffect(() => {
setTimeout(() => { // 删除以下图片展示
setShowText(true); // setTimeout(() => {
}, duration); // setShowText(true);
// }, duration);
setTimeout(() => { setTimeout(() => {
setShowText(false); setShowText(false);
}, 2 * duration); }, 2 * duration);
......
src/pages/FertilizeByGround/Acid/AddOrganic/Stable.js
浏览文件 @ 902db437
...@@ -47,16 +47,17 @@ export default function Stable() { ...@@ -47,16 +47,17 @@ export default function Stable() {
const [textOne, setTextOne] = useState(false); // 第一句文本 const [textOne, setTextOne] = useState(false); // 第一句文本
const [textTwo, setTextTwo] = useState(false); // 第二局文本 const [textTwo, setTextTwo] = useState(false); // 第二局文本
const [audioThree, setaudioThree] = useState(false); // 音频 const [audioThree, setaudioThree] = useState(false); // 音频
useEffect(() => { // 删除以下页面
setTimeout(() => { // useEffect(() => {
if (imgIndex+1 < textImages.length) { // setTimeout(() => {
setImgIndex(imgIndex+1); // if (imgIndex+1 < textImages.length) {
setShowText(true); // setImgIndex(imgIndex+1);
} else { // setShowText(true);
setShowText(false); // } else {
} // setShowText(false);
}, 2000); // }
}); // }, 6000);
// });
/** /**
* 新文本出现顺序为先出现第一段, * 新文本出现顺序为先出现第一段,
*/ */
...@@ -67,7 +68,7 @@ export default function Stable() { ...@@ -67,7 +68,7 @@ export default function Stable() {
setTimeout(() => { setTimeout(() => {
setTextTwo(true) setTextTwo(true)
setaudioThree(true) setaudioThree(true)
}, 1000); }, 3000);
},[]) },[])
return ( return (
<WheatBg> <WheatBg>
......
src/pages/FertilizeByGround/Acid/AddOrganic/Straw/index.js
浏览文件 @ 902db437
...@@ -23,17 +23,17 @@ const textImages = [textImg1, textImg2, textImg3, textImg4]; ...@@ -23,17 +23,17 @@ const textImages = [textImg1, textImg2, textImg3, textImg4];
export default function Straw() { export default function Straw() {
const [showText, setShowText] = useState(false); const [showText, setShowText] = useState(false);
const [imgIndex, setImgIndex] = useState(-1); const [imgIndex, setImgIndex] = useState(-1);
// 删除以下页面
useEffect(() => { // useEffect(() => {
setTimeout(() => { // setTimeout(() => {
if (imgIndex+1 < textImages.length) { // if (imgIndex+1 < textImages.length) {
setImgIndex(imgIndex+1); // setImgIndex(imgIndex+1);
setShowText(true); // setShowText(true);
} else { // } else {
setShowText(false); // setShowText(false);
} // }
}, 2000); // }, 2000);
}); // });
return ( return (
<WheatBg> <WheatBg>
......
src/pages/FertilizeByGround/Acid/AddOrganic/index.js
浏览文件 @ 902db437
import React from 'react'; import React, {useState,useEffect} from 'react';
import GroundBg from 'pages/FertilizeByGround/GroundBg'; import GroundBg from 'pages/FertilizeByGround/GroundBg';
import ContainerBg from '磷肥施用技术切图/默认状态/画面a-2-assets/增施有机肥.png'; import ContainerBg from '磷肥施用技术切图/默认状态/画面a-2-assets/增施有机肥.png';
import HumanityBg from '磷肥施用技术切图/默认状态/画面a-2-assets/人畜粪尿肥.png'; import HumanityBg from '磷肥施用技术切图/默认状态/画面a-2-assets/人畜粪尿肥.png';
...@@ -20,7 +20,10 @@ function Button(props) { ...@@ -20,7 +20,10 @@ function Button(props) {
return <ButtonDiy h={107} w={589} top={40} firstTop={190} {...props} /> return <ButtonDiy h={107} w={589} top={40} firstTop={190} {...props} />
} }
export default function AddOrganic({ match }) { export default function AddOrganic({ match,...router }) {
useEffect(() => {
console.log(router)
}, [])
return ( return (
<GroundBg> <GroundBg>
<ButtonContainer w={645} h={808} top={102} bg={ContainerBg} > <ButtonContainer w={645} h={808} top={102} bg={ContainerBg} >
......
src/pages/FertilizeByGround/Alkaline/AddAcid/index.js
浏览文件 @ 902db437
import React, {useState} from 'react'; import React, {useState} from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import GroundBg from '../../GroundBg'; import GroundBg from '../../GroundImproveBg';
import ContainerBg from '磷肥施用技术切图/默认状态/画面c-3-assets/施用酸性肥料.png'; import ContainerBg from '磷肥施用技术切图/默认状态/画面c-3-assets/施用酸性肥料.png';
import LABg from '磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png'; import LABg from '磷肥施用技术切图/默认状态/画面a-3-assets/硫铵.png';
import GLSGBg from '磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png'; import GLSGBg from '磷肥施用技术切图/默认状态/画面a-3-assets/过磷酸钙.png';
...@@ -9,6 +9,7 @@ import GMLBg from '磷肥施用技术切图/默认状态/画面a-3-assets/钙镁 ...@@ -9,6 +9,7 @@ import GMLBg from '磷肥施用技术切图/默认状态/画面a-3-assets/钙镁
import CMHBg from '磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png'; import CMHBg from '磷肥施用技术切图/默认状态/画面a-3-assets/草木灰.png';
import WrongBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png'; import WrongBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/×.png';
import CorrectBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png'; import CorrectBg from '磷肥施用技术切图/默认状态/画面a-3-1-assets/√.png';
import bg from '磷肥施用技术切图/默认状态/画面c-3-1硫铵-assets/石灰性土壤背景.png';
import LAActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png'; import LAActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/硫铵.png';
import GLSGActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png'; import GLSGActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/过磷酸钙.png';
...@@ -82,25 +83,39 @@ function AddAcid ({ history }) { ...@@ -82,25 +83,39 @@ function AddAcid ({ history }) {
switch (isCorrect) { switch (isCorrect) {
case 'err1': case 'err1':
setTextImg(errImgTwo); setTextImg(errImgTwo);
setAudioSrc(audioTwo); // setAudioSrc(audioTwo);
break; break;
case 'err2': case 'err2':
setTextImg(errImgOne); setTextImg(errImgOne);
setAudioSrc(audioTwo); // setAudioSrc(audioTwo);
break; break;
case 'true1': case 'true1':
setTextImg(trueImgOne); setTextImg(trueImgOne);
setAudioSrc(audioOne); // setAudioSrc(audioOne);
break; break;
case 'true2': case 'true2':
setTextImg(trueImgTwo); setTextImg(trueImgTwo);
setAudioSrc(audioOne); // setAudioSrc(audioOne);
break; break;
} }
}, 1000); });
setTimeout(() => { setTimeout(() => {
switch (isCorrect) {
case 'err1':
setAudioSrc(audioTwo);
break
case 'err2':
setAudioSrc(audioTwo);
break
case 'true1':
setAudioSrc(audioOne);
break
case 'true2':
setAudioSrc(audioOne);
break
}
setTextImg(null); setTextImg(null);
}, 3000); }, 4000);
} }
const [infoImg, setInfoImg] = useState(null); const [infoImg, setInfoImg] = useState(null);
...@@ -115,7 +130,7 @@ function AddAcid ({ history }) { ...@@ -115,7 +130,7 @@ function AddAcid ({ history }) {
} }
return ( return (
<GroundBg> <GroundBg bg={bg}>
{ {
textImg !== null ? <CenteredTextImg src={textImg} alt="堆肥" /> textImg !== null ? <CenteredTextImg src={textImg} alt="堆肥" />
: infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" /> : infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" />
......
src/pages/FertilizeByGround/Alkaline/AddOrganic/Green.js 0 → 100644
浏览文件 @ 902db437
import React from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import ZYYImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫云英.png';
import CMXImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/草木樨.png';
import ZHMXImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/紫花苜蓿.png';
import GZYHSZImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/光叶紫花苕子.png';
import TJImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/田菁.png';
import JImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/箭筈豌豆.png';
import JKWDImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/蚕豆.png';
import YCImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/油菜.png';
import QMImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/荞麦.png';
import LPImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/绿萍.png';
import { convertpx2vw } from 'config';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import text from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-assets/文字.png';
import videoOne from '动画/补配音/14画外音-石灰性土壤,绿肥.mp3';
const StyledImg = styled.img`
display: inline-block;
width: ${convertpx2vw(246)};
height: ${convertpx2vw(363)};
:not(:last-child) {
margin-right: ${convertpx2vw(36)};
}
`;
const StyledWheatBg = styled(WheatBg)`
flex-direction: column;
justify-content: space-around;
`;
const Row = styled.div`
/* text-align: center; */
display: flex;
flex-direction: row;
justify-content: space-around;
`;
export default function Straw() {
return (
<StyledWheatBg>
<Row>
<StyledImg src={ZYYImg} alt="紫云英" />
<StyledImg src={CMXImg} alt="草木樨" />
<StyledImg src={ZHMXImg} alt="紫花苜蓿" />
<StyledImg src={GZYHSZImg} alt="光叶紫花苕子" />
<StyledImg src={TJImg} alt="田菁" />
</Row>
<Row>
<StyledImg src={JImg} alt="箭筈豌豆" />
<StyledImg src={JKWDImg} alt="蚕豆" />
<StyledImg src={YCImg} alt="油菜" />
<StyledImg src={QMImg} alt="荞麦" />
<StyledImg src={LPImg} alt="绿萍" />
</Row>
<Row>
<StyledImg src={text} style={{width:convertpx2vw(694),height:convertpx2vw(86)}} alt="文字" />
</Row>
<BackBtn />
<HomeBtn />
<audio src={videoOne} autoPlay></audio>
</StyledWheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddOrganic/Humanity/index.js 0 → 100644
浏览文件 @ 902db437
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HumanityImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人粪尿肥2.png';
import AnimalImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/家畜粪尿肥2.png';
import TextImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人畜粪尿.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import videoOne from '动画/补配音/12画外音-碱性土壤的人畜粪尿肥.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(702)};
height: ${convertpx2vw(552)};
`;
const duration = 3000;
export default function Humanity({ match }) {
const [showText, setShowText] = useState(false);
useEffect(() => {
// 删除以下图片展示
// setTimeout(() => {
// setShowText(true);
// }, duration);
setTimeout(() => {
setShowText(false);
}, 2 * duration);
}, []);
return (
<WheatBg>
{
showText ? <StyledImg src={TextImg} style={{width: convertpx2vw(819), height: convertpx2vw(563)}} alt="家畜粪尿肥" />
: (
<div style={{display:'flex'}}>
<StyledImg src={HumanityImg} alt="人粪尿肥" style={{ marginRight: convertpx2vw(80),height: convertpx2vw(760)}} />
<StyledImg src={AnimalImg} alt="家畜粪尿肥" />
</div>
)
}
<BackBtn />
<HomeBtn />
<audio src={videoOne} autoPlay></audio>
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddOrganic/Stable.js 0 → 100644
浏览文件 @ 902db437
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import PigImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/猪厩肥.png';
import GoatImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/羊厩肥.png';
import ChickenImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/鸡厩肥.png';
import CowImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/牛厩肥.png';
import textImg1 from '磷肥施用技术切图/默认状态/画面a-2-2猪厩肥羊厩肥（增加文字1）-assets/厩肥.png';
import textImg2 from '磷肥施用技术切图/默认状态/画面a-2-2猪厩肥羊厩肥（增加文字2）-assets/厩肥.png';
import newTextPng from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/1.png';
import newTextPng2 from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/2.png';
import newTextBgc from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-assets/背景.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import videoOne from '动画/补配音/13画外音-碱性土壤-厩肥.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(491.4)};
height: ${convertpx2vw(385)};
animation: ani 2s;
@keyframes ani{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
`;
const textImages = [textImg1, textImg2];
/**
* 新增图片div样式
*/
const img_div = {
marginLeft: convertpx2vw(41),
width:convertpx2vw(300),
padding:`${convertpx2vw(130)} 0 ${convertpx2vw(130)} ${convertpx2vw(32)}`,
background:`url(${newTextBgc}) no-repeat 0 0`,
backgroundSize:'100% 100%',
transition: 'all 1s',
}
export default function Stable() {
const [showText, setShowText] = useState(false);
const [imgIndex, setImgIndex] = useState(-1);
const [textOne, setTextOne] = useState(false); // 第一句文本
const [textTwo, setTextTwo] = useState(false); // 第二局文本
const [audioThree, setaudioThree] = useState(false); // 音频
// 删除以下页面
// useEffect(() => {
// setTimeout(() => {
// if (imgIndex+1 < textImages.length) {
// setImgIndex(imgIndex+1);
// setShowText(true);
// } else {
// setShowText(false);
// }
// }, 6000);
// });
/**
* 新文本出现顺序为先出现第一段,
*/
useEffect(()=>{
// 首先展示第一句话
setTextOne(true)
// 第二句话
setTimeout(() => {
setTextTwo(true)
setaudioThree(true)
}, 3000);
},[])
return (
<WheatBg>
{
showText ? <StyledImg src={textImages[imgIndex]} alt="堆肥" style={{width: convertpx2vw(819), height: convertpx2vw(563)}} />
: (
<>
<div style={{marginRight: convertpx2vw(80)}}>
<StyledImg src={PigImg} alt="猪厩肥" style={{marginBottom: convertpx2vw(40)}} />
<StyledImg src={CowImg} alt="牛厩肥" />
</div>
<div>
<StyledImg src={GoatImg} alt="羊厩肥" style={{marginBottom: convertpx2vw(40)}} />
<StyledImg src={ChickenImg} alt="鸡厩肥" />
</div>
<div style={img_div}>
{
textOne?<StyledImg src={newTextPng} alt="文本" style={{marginBottom: 34,width:convertpx2vw(219),height:convertpx2vw(325)}} />:''
}
{
textTwo?<StyledImg src={newTextPng2} alt="文本" style={{width:convertpx2vw(206),height:convertpx2vw(180)}}/>:''
}
</div>
</>
)
}
<BackBtn />
<HomeBtn />
{
audioThree?<audio src={videoOne} autoPlay></audio>:''
}
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddOrganic/Straw/index.js 0 → 100644
浏览文件 @ 902db437
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HeapImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/堆肥2.png';
import SteepImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沤肥2.png';
import BiogasImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沼气池肥2.png';
import StrawInGround from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/秸秆直接还田2.png';
import textImg1 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥（堆肥增加文字）-assets/堆肥.png';
import textImg2 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥（沤肥增加文字）-assets/沤肥.png';
import textImg3 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥（沼气池肥增加文字）-assets/沼气池肥.png';
import textImg4 from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥（秸秆直接还田增加文字）-assets/秸秆直接还田.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import videoOne from '动画/补配音/补配音2-增施秸秆肥,石灰性土壤.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(349.6)};
height: ${convertpx2vw(555.5)};
`;
const textImages = [textImg1, textImg2, textImg3, textImg4];
export default function Straw() {
const [showText, setShowText] = useState(false);
const [imgIndex, setImgIndex] = useState(-1);
// 删除以下页面
// useEffect(() => {
// setTimeout(() => {
// if (imgIndex+1 < textImages.length) {
// setImgIndex(imgIndex+1);
// setShowText(true);
// } else {
// setShowText(false);
// }
// }, 2000);
// });
return (
<WheatBg>
{
showText ? <StyledImg src={textImages[imgIndex]} alt="堆肥" style={{width: convertpx2vw(819), height: convertpx2vw(563)}} />
: (
<>
<div style={{display:'flex',flexWrap:'wrap'}}>
<StyledImg src={HeapImg} alt="堆肥"/>
<StyledImg src={BiogasImg} alt="沼气池肥" style={{display: 'inline-block',margin:`0 ${convertpx2vw(32)}`}}/>
<StyledImg src={SteepImg} alt="沤肥" style={{marginRight:convertpx2vw(32)}}/>
<StyledImg src={StrawInGround} alt="秸秆直接还田" style={{display: 'inline-block'}}/>
</div>
</>
)
}
<BackBtn />
<HomeBtn />
<audio src={videoOne} autoPlay></audio>
</WheatBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddOrganic/index.js 0 → 100644
浏览文件 @ 902db437
import React, {useState,useEffect} from 'react';
import ContainerBg from '磷肥施用技术切图/默认状态/画面a-2-assets/增施有机肥.png';
import HumanityBg from '磷肥施用技术切图/默认状态/画面a-2-assets/人畜粪尿肥.png';
import StableBg from '磷肥施用技术切图/默认状态/画面a-2-assets/厩肥.png';
import StrawBg from '磷肥施用技术切图/默认状态/画面a-2-assets/秸秆肥.png';
import GreenBg from '磷肥施用技术切图/默认状态/画面a-2-assets/绿肥.png';
import GroundBg from 'pages/FertilizeByGround/GroundImproveBg';
import HumanityBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/人畜粪尿肥.png';
import StableBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/厩肥.png';
import StrawBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/秸秆肥.png';
import GreenBgActive from '磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
import videoOne from '动画/补配音/2画外音-增施有机肥.mp3';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import bg from '磷肥施用技术切图/默认状态/画面c-3-1硫铵-assets/石灰性土壤背景.png';
import ButtonContainer from 'pages/FertilizeByGround/ButtonContainer';
import ButtonDiy from 'pages/FertilizeByGround/ButtonDiy';
function Button(props) {
return <ButtonDiy h={107} w={589} top={40} firstTop={190} {...props} />
}
export default function AddOrganic({ match,...router }) {
useEffect(() => {
console.log(router)
}, [])
return (
<GroundBg bg={bg}>
<ButtonContainer w={645} h={808} top={102} bg={ContainerBg} >
<Button src={HumanityBg} activeSrc={HumanityBgActive} to={`${match.url}/humanity`}/>
<Button src={StableBg} activeSrc={StableBgActive} to={`${match.url}/stable`} />
<Button src={StrawBg} activeSrc={StrawBgActive} to={`${match.url}/straw`} />
<Button src={GreenBg} activeSrc={GreenBgActive} to={`${match.url}/green`} />
</ButtonContainer>
<BackBtn />
<HomeBtn />
<audio src={videoOne} autoPlay></audio>
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/index.js
浏览文件 @ 902db437
...@@ -16,7 +16,10 @@ const PositionedAddOrganicBtn = styled(AddOrganicBtn)` ...@@ -16,7 +16,10 @@ const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
export default function Alkaline({ match }) { export default function Alkaline({ match }) {
return ( return (
<GroundBg bg={bg}> <GroundBg bg={bg}>
<PositionedAddOrganicBtn to={`${match.url}/add-organic`} /> <PositionedAddOrganicBtn to={{
pathname:`${match.url}/add-organic`,
state:'Alkaline'
}} />
<AddAcidBtn to={`${match.url}/add-acid`} /> <AddAcidBtn to={`${match.url}/add-acid`} />
<BackBtn /> <BackBtn />
<HomeBtn /> <HomeBtn />
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论