Skip to content

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

修改并添加新功能

上级 9c5afc27
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 53 行删除
src/pages/FertilizeByGround/Acid/AddAlkaline/index.js
浏览文件 @ 20eb9a3a
......@@ -15,14 +15,19 @@ import GLSGActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下
import GMLActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import correctTextImg from '磷肥施用技术切图/默认状态/画面a-3-1（碱性肥料）正确答案-assets/碱性肥料正确答案.png';
import wrongTextImg from '磷肥施用技术切图/默认状态/画面c-3-1（酸性肥料）正确答案-assets/酸性肥料正确答案.png';
import GMLFImg from '磷肥施用技术切图/默认状态/画面a-3-1 钙镁磷肥-assets/钙镁磷肥.png';
import CMHImg from '磷肥施用技术切图/默认状态/画面a-3-1 草木灰-assets/草木灰.png';
// 答案相关图片展示
import errImgOne from '磷肥施用技术切图/默认状态/答案/硫铵.png';
import errImgTwo from '磷肥施用技术切图/默认状态/答案/过磷酸钙.png';
// 正确答案
import trueImgOne from '磷肥施用技术切图/默认状态/答案/草木灰.png';
import trueImgTwo from '磷肥施用技术切图/默认状态/答案/钙镁磷肥.png';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
// 音频
import audioOne from '动画/补配音/7画外音-过磷酸钙.mp3';
import audioTwo from '动画/补配音/8画外音-钙镁磷肥.mp3';
import ButtonContainer from 'pages/FertilizeByGround/ButtonContainer';
import ButtonDiy from 'pages/FertilizeByGround/ButtonDiy';
......@@ -64,12 +69,31 @@ function AddAlkaline({ history }) {
const [CMHShow, setCMHShow] = useState(false);
const [textImg, setTextImg] = useState(null);
// 添加音频插入
const [audioSrc, setAudioSrc] = useState();
function handleClick(e, setFunc, isCorrect) {
e.preventDefault();
setFunc(true);
setTimeout(() => {
setTextImg(isCorrect ? correctTextImg : wrongTextImg);
setAudioSrc('');
switch (isCorrect) {
case 'err1':
setTextImg(errImgOne);
setAudioSrc(audioOne);
break;
case 'err2':
setTextImg(errImgTwo);
setAudioSrc(audioOne);
break;
case 'true1':
setTextImg(trueImgTwo);
setAudioSrc(audioTwo);
break;
case 'true2':
setTextImg(trueImgOne);
setAudioSrc(audioTwo);
break;
}
}, 1000);
setTimeout(() => {
setTextImg(null);
......@@ -94,16 +118,16 @@ function AddAlkaline({ history }) {
: infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" />
: (
<ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, false)}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, 'err1')}>
<StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
</Button>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, false)}>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, 'err2')}>
<StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
</Button>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, true)}>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, 'true1')}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow} onClick={e => handleInfoImg(e, GMLFImg)}/>
</Button>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, true)}>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, 'true2')}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow} onClick={e => handleInfoImg(e, CMHImg)} />
</Button>
</ButtonContainer>
......@@ -120,6 +144,9 @@ function AddAlkaline({ history }) {
}}
/>
<HomeBtn />
{
audioSrc?<audio src={audioSrc} autoPlay />:<audio src={audioSrc} autoPlay />
}
</GroundBg>
);
}
......
src/pages/FertilizeByGround/Acid/AddOrganic/Green.js
浏览文件 @ 20eb9a3a
......@@ -14,7 +14,8 @@ import QMImg from '磷肥施用技术切图/默认状态/画面a-2-4绿肥-asset
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 '动画/补配音/6画外音-绿肥.mp3';
const StyledImg = styled.img`
display: inline-block;
width: ${convertpx2vw(246)};
......@@ -51,8 +52,12 @@ export default function Straw() {
<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/Acid/AddOrganic/Humanity/index.js
浏览文件 @ 20eb9a3a
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HumanityImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人粪尿肥.png';
import AnimalImg from '磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/家畜粪尿肥.png';
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 '动画/补配音/3画外音-人粪.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(702)};
......@@ -33,14 +33,15 @@ export default function Humanity({ match }) {
{
showText ? <StyledImg src={TextImg} style={{width: convertpx2vw(819), height: convertpx2vw(563)}} alt="家畜粪尿肥" />
: (
<>
<StyledImg src={HumanityImg} alt="人粪尿肥" style={{ marginRight: convertpx2vw(80) }} />
<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/Acid/AddOrganic/Stable.js
浏览文件 @ 20eb9a3a
......@@ -7,22 +7,46 @@ import ChickenImg from '磷肥施用技术切图/默认状态/画面a-2-2厩肥-
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 { convertpx2vw } from 'config';
import videoOne from '动画/补配音/4画外音-增施厩肥.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(503)};
height: ${convertpx2vw(397)};
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) {
......@@ -33,8 +57,18 @@ export default function Stable() {
}
}, 2000);
});
/**
* 新文本出现顺序为先出现第一段,
*/
useEffect(()=>{
// 首先展示第一句话
setTextOne(true)
// 第二句话
setTimeout(() => {
setTextTwo(true)
setaudioThree(true)
}, 1000);
},[])
return (
<WheatBg>
{
......@@ -49,11 +83,23 @@ export default function Stable() {
<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/Acid/AddOrganic/Straw/index.js
浏览文件 @ 20eb9a3a
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import WheatBg from 'pages/WheatBg';
import HeapImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/堆肥.png';
import SteepImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沤肥.png';
import BiogasImg from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沼气池肥.png';
import StrawInGround from '磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/秸秆直接还田.png';
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 '动画/补配音/5画外音-秸秆肥.mp3';
const StyledImg = styled.img`
display: block;
width: ${convertpx2vw(490)};
height: ${convertpx2vw(391)};
width: ${convertpx2vw(349.6)};
height: ${convertpx2vw(555.5)};
`;
const textImages = [textImg1, textImg2, textImg3, textImg4];
......@@ -41,19 +41,18 @@ export default function Straw() {
showText ? <StyledImg src={textImages[imgIndex]} alt="堆肥" style={{width: convertpx2vw(819), height: convertpx2vw(563)}} />
: (
<>
<div>
<div style={{display:'flex',flexWrap:'wrap'}}>
<StyledImg src={HeapImg} alt="堆肥"/>
<StyledImg src={BiogasImg} alt="沼气池肥" style={{display: 'inline-block', marginTop: convertpx2vw(40)}}/>
</div>
<div style={{marginLeft: convertpx2vw(224) }}>
<StyledImg src={SteepImg} alt="沤肥"/>
<StyledImg src={StrawInGround} alt="秸秆直接还田" style={{display: 'inline-block', marginTop: convertpx2vw(40)}}/>
<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/Acid/AddOrganic/index.js
浏览文件 @ 20eb9a3a
......@@ -10,7 +10,7 @@ import HumanityBgActive from '磷肥施用技术切图/按下状态/画面a-2-
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 ButtonContainer from 'pages/FertilizeByGround/ButtonContainer';
......@@ -31,6 +31,7 @@ export default function AddOrganic({ match }) {
</ButtonContainer>
<BackBtn />
<HomeBtn />
<audio src={videoOne} autoPlay></audio>
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Acid/index.js
浏览文件 @ 20eb9a3a
import React from 'react';
import React, { useRef, useEffect } from 'react';
import GroundBg from 'pages/FertilizeByGround/GroundImproveBg';
import AddOrganicBtn from './AddOrganicBtn';
import AddAlkalineBtn from './AddAlkalineBtn';
import styled from 'styled-components';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import VideoDiy from 'pages/Video';
// 视频引入
import videoOne from '动画/补配音/画外音1为了使磷的有效性得以提高.mp3';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: ${convertpx2vw(240)};
`;
// const videoSrcs = {
// acid: videoOne,
// }
export default function({ match }) {
const videoRef = useRef({});
// useEffect(()=>{
// videoRef.current.play(videoSrcs.acid);
// })
return (
<GroundBg>
<PositionedAddOrganicBtn to={`${match.url}/add-organic`} />
<AddAlkalineBtn to={`${match.url}/add-alkaline`} />
<BackBtn />
<HomeBtn />
{/* <VideoDiy wrappedComponentRef={c => videoRef.current = c} /> */}
<audio src={videoOne} autoPlay></audio>
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeByGround/Alkaline/AddAcid/index.js
浏览文件 @ 20eb9a3a
......@@ -20,6 +20,16 @@ import wrongTextImg from '磷肥施用技术切图/默认状态/画面c-3-1（
import LAimg from '磷肥施用技术切图/默认状态/画面c-3-1硫铵-assets/硫铵.png';
import GLSGimg from '磷肥施用技术切图/默认状态/画面c-3-1过磷酸钙-assets/过磷酸钙.png';
// 答案相关图片展示
import trueImgOne from '磷肥施用技术切图/默认状态/答案/硫铵.png';
import trueImgTwo from '磷肥施用技术切图/默认状态/答案/过磷酸钙.png';
// 错误答案
import errImgOne from '磷肥施用技术切图/默认状态/答案/草木灰.png';
import errImgTwo from '磷肥施用技术切图/默认状态/答案/钙镁磷肥.png';
// 音频
import audioOne from '动画/补配音/15画外音-石灰土壤正确.mp3';
import audioTwo from '动画/补配音/16画外音-石灰土壤错误.mp3';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
......@@ -62,12 +72,31 @@ function AddAcid ({ history }) {
const [CMHShow, setCMHShow] = useState(false);
const [textImg, setTextImg] = useState(null);
// 添加音频插入
const [audioSrc, setAudioSrc] = useState();
function handleClick(e, setFunc, isCorrect) {
e.preventDefault();
setFunc(true);
setTimeout(() => {
setTextImg(isCorrect ? correctTextImg : wrongTextImg);
setAudioSrc('');
switch (isCorrect) {
case 'err1':
setTextImg(errImgTwo);
setAudioSrc(audioTwo);
break;
case 'err2':
setTextImg(errImgOne);
setAudioSrc(audioTwo);
break;
case 'true1':
setTextImg(trueImgOne);
setAudioSrc(audioOne);
break;
case 'true2':
setTextImg(trueImgTwo);
setAudioSrc(audioOne);
break;
}
}, 1000);
setTimeout(() => {
setTextImg(null);
......@@ -92,16 +121,16 @@ function AddAcid ({ history }) {
: infoImg !== null ? <CenteredInfoImg src={infoImg} alt="堆肥" />
: (
<ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, true)}>
<Button src={LABg} activeSrc={LAActiveBg} onClick={e => handleClick(e, setLAShow, 'true1')}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow} onClick={e => handleInfoImg(e, LAimg)}/>
</Button>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, true)}>
<Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={e => handleClick(e, setGLSGShow, 'true2')}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow} onClick={e => handleInfoImg(e, GLSGimg)}/>
</Button>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, false)}>
<Button src={GMLBg} activeSrc={GMLActiveBg} onClick={e => handleClick(e, setGMShow, 'err1')}>
<StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
</Button>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, false)}>
<Button src={CMHBg} activeSrc={CMHActiveBg} onClick={e => handleClick(e, setCMHShow, 'err2')}>
<StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
</Button>
</ButtonContainer>
......@@ -119,6 +148,9 @@ function AddAcid ({ history }) {
}}
/>
<HomeBtn />
{
audioSrc?<audio src={audioSrc} autoPlay />:<audio src={audioSrc} autoPlay />
}
</GroundBg>
);
}
......
src/pages/FertilizeByGround/Alkaline/index.js
浏览文件 @ 20eb9a3a
......@@ -6,7 +6,7 @@ import AddAcidBtn from './AddAcidBtn'
import styled from 'styled-components';
import { BackBtn, HomeBtn } from 'pages/SubHome';
import { convertpx2vw } from 'config';
import audioOne from '动画/补配音/10画外音-石灰性土壤.mp3';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: ${convertpx2vw(240)};
`;
......@@ -18,6 +18,7 @@ export default function Alkaline({ match }) {
<AddAcidBtn to={`${match.url}/add-acid`} />
<BackBtn />
<HomeBtn />
<audio src={audioOne} autoPlay/>
</GroundBg>
);
}
\ No newline at end of file
src/pages/FertilizeEarly/Corn/lifetime.js
浏览文件 @ 20eb9a3a
......@@ -19,7 +19,7 @@ import MaturityBgActive from '磷肥施用技术切图/按下状态/玉米02-按
import SeedlingVideoSrcs from '动画/玉米/玉米苗期.mp4'
import JointingVideoSrcs from '动画/玉米/玉米拔节期.mp4'
import HornVideoSrcs from '动画/玉米/玉米大喇叭口期.mp4'
import HornVideoSrcs from '动画/玉米/玉米大喇叭口期 .mp4'
import TasselVideoSrcs from '动画/玉米/玉米抽穗期.mp4'
import MaturityVideoSrcs from '动画/玉米/玉米成熟期.mp4'
import { convertpx2vw } from 'config';
......@@ -31,7 +31,7 @@ const Container = styled.div`
height: ${convertpx2vw(591)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-size: contain;
background-image: url(${ContainerBg});
text-align: center;
`;
......
src/pages/FertilizeEarly/Wheat/lifetime.js
浏览文件 @ 20eb9a3a
......@@ -95,9 +95,9 @@ export default withRouter(({ match, history }) => {
}
function getRedirectPath() {
if (name === 'Seedling') {
return `${match.url}/seedling`;
}
// if (name === 'Seedling') {
// return `${match.url}/seedling`;
// }
return null;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论