Skip to content

L
LiFeiShiYong
提交 fb2ba137 authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

修改css单位

上级 edcddbdd
隐藏空白字符变更
内嵌 并排
正在显示 包含 240 行增加 和 211 行删除
package.json
浏览文件 @ fb2ba137
{
"name": "zunyi",
"version": "0.1.0",
"homepage": "/shifei",
"private": true,
"dependencies": {
"react": "^16.9.0",
......
src/App.js
浏览文件 @ fb2ba137
......@@ -29,44 +29,45 @@ import FertilizeEarlySelectCornLifetime from './pages/FertilizeEarly/Corn/lifeti
import FertilizeConcentrated from './pages/FertilizeConcentrated';
import FertilizeControl from './pages/FertilizeControl';
const baseUrl = process.env.PUBLIC_URL;
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/sub-home" component={SubHome} />
<Route exact path="/sub-home/fertilize-by-ground" component={FertilizeByGround} />
<Route exact path="/sub-home/fertilize-by-ground/acid" component={FertilizeByAcidGround} />
<Route exact path={baseUrl + "/"} component={Home} />
<Route exact path={baseUrl + "/sub-home"} component={SubHome} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground"} component={FertilizeByGround} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid"} component={FertilizeByAcidGround} />
<Route exact path="/sub-home/fertilize-by-ground/acid/add-organic" component={FertilizeByAcidGroundAddOrganic} />
<Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/humanity" component={FertilizeHumanity} />
<Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/stable" component={FertilizeStable} />
<Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/straw" component={FertilizeStraw} />
<Route exact path="/sub-home/fertilize-by-ground/acid/add-organic/green" component={FertilizeGreen} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic"} component={FertilizeByAcidGroundAddOrganic} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/humanity"} component={FertilizeHumanity} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/stable"} component={FertilizeStable} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic/straw"} component={FertilizeStraw} />
<Route exact path={baseUrl + "/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={baseUrl + "/sub-home/fertilize-by-ground/acid/add-alkaline"} component={FertilizeByAcidGroundAddAlkaline} />
<Route exact path="/sub-home/fertilize-by-ground/alkaline" component={FertilizeByAlkalineGround} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline"} component={FertilizeByAlkalineGround} />
<Route exact
path="/sub-home/fertilize-by-ground/alkaline/add-organic"
render={ () => <Redirect to="/sub-home/fertilize-by-ground/acid/add-organic" /> }
path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-organic"}
render={ () => <Redirect to={baseUrl + "/sub-home/fertilize-by-ground/acid/add-organic"} /> }
/>
<Route exact path="/sub-home/fertilize-by-ground/alkaline/add-acid" component={FertilizeByAlkalineGroundAddAcid} />
<Route exact path={baseUrl + "/sub-home/fertilize-by-ground/alkaline/add-acid"} component={FertilizeByAlkalineGroundAddAcid} />
<Route exact path="/sub-home/fertilize-early" component={FertilizeEarly} />
<Route exact path="/sub-home/fertilize-early/select" component={FertilizeEarlySelect} />
<Route exact path="/sub-home/fertilize-early/select/wheat" component={FertilizeEarlySelectWheat} />
<Route exact path="/sub-home/fertilize-early/select/rape" component={FertilizeEarlySelectRape} />
<Route exact path="/sub-home/fertilize-early/select/corn" component={FertilizeEarlySelectCorn} />
<Route exact path="/sub-home/fertilize-early/select/wheat/lifetime" component={FertilizeEarlySelectWheatLifetime} />
<Route exact path="/sub-home/fertilize-early/select/wheat/lifetime/seedling" component={FertilizeEarlySelectWheatSeedling} />
<Route exact path={baseUrl + "/sub-home/fertilize-early"} component={FertilizeEarly} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select"} component={FertilizeEarlySelect} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat"} component={FertilizeEarlySelectWheat} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/rape"} component={FertilizeEarlySelectRape} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/corn"} component={FertilizeEarlySelectCorn} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat/lifetime"} component={FertilizeEarlySelectWheatLifetime} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/wheat/lifetime/seedling"} component={FertilizeEarlySelectWheatSeedling} />
<Route exact path="/sub-home/fertilize-early/select/rape/lifetime" component={FertilizeEarlySelectrapeLifetime} />
<Route exact path="/sub-home/fertilize-early/select/corn/lifetime" component={FertilizeEarlySelectCornLifetime} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/rape/lifetime"} component={FertilizeEarlySelectrapeLifetime} />
<Route exact path={baseUrl + "/sub-home/fertilize-early/select/corn/lifetime"} component={FertilizeEarlySelectCornLifetime} />
<Route exact path="/sub-home/fertilize-concentrated" component={FertilizeConcentrated} />
<Route exact path="/sub-home/fertilize-control" component={FertilizeControl} />
<Route exact path={baseUrl + "/sub-home/fertilize-concentrated"} component={FertilizeConcentrated} />
<Route exact path={baseUrl + "/sub-home/fertilize-control"} component={FertilizeControl} />
</Switch>
</Router>
);
......
src/pages/FertilizeByGround/Acid/AddAlkaline/index.js
浏览文件 @ fb2ba137
......@@ -14,15 +14,16 @@ import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画
import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div`
margin: 102px auto 0;
margin: ${`convertpx2vw(102) auto 0`};
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
......@@ -31,8 +32,8 @@ const PositionedContainer = styled.div`
`;
const StyledBtn = styled.a`
display: block;
width: 589px;
height: 107px;
width: ${convertpx2vw(589)};
height: ${convertpx2vw(107)};
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
......@@ -42,15 +43,21 @@ const StyledBtn = styled.a`
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
&:first-child {
margin-top: ${convertpx2vw(200)};
}
&:not(:first-child) {
margin-top: ${convertpx2vw(40)};
}
`;
const StyledCheckImg = styled.img`
display: block;
width: 50px;
height: 50px;
width: ${convertpx2vw(50)};
height: ${convertpx2vw(50)};;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 88px;
right: ${convertpx2vw(88)};
visibility: ${props => props.show ? 'visible' : 'hidden'};
user-select: none;
`;
......@@ -65,16 +72,16 @@ export default function AddAlkaline () {
return (
<GroundBg>
<PositionedContainer>
<StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
<StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
</StyledBtn>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
</StyledBtn>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/>
</StyledBtn>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/>
</StyledBtn>
</PositionedContainer>
......
src/pages/FertilizeByGround/Acid/AddAlkalineBtn.js
浏览文件 @ fb2ba137
......@@ -2,11 +2,12 @@ import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/施用碱性肥料.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/施用碱性肥料.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(108)};
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeByGround/Acid/AddOrganic/Green.js
浏览文件 @ fb2ba137
......@@ -12,13 +12,16 @@ import JKWDImg from '../../../../磷肥施用技术切图/默认状态/画面a-2
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 '../../../SubHome';
const StyledImg = styled.img`
display: inline-block;
width: 246px;
height: 363px;
width: ${convertpx2vw(246)};
height: ${convertpx2vw(363)};
:not(:last-child) {
margin-right: ${convertpx2vw(36)};
}
`;
const StyledWheatBg = styled(WheatBg)`
flex-direction: column;
......@@ -35,17 +38,17 @@ export default function Straw() {
return (
<StyledWheatBg>
<Row>
<StyledImg src={ZYYImg} alt="紫云英" style={{marginRight: '36px' }} />
<StyledImg src={CMXImg} alt="草木樨" style={{marginRight: '36px' }} />
<StyledImg src={ZHMXImg} alt="紫花苜蓿" style={{marginRight: '36px' }} />
<StyledImg src={GZYHSZImg} alt="光叶紫花苕子" style={{marginRight: '36px' }} />
<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="箭筈豌豆" style={{marginRight: '36px'}} />
<StyledImg src={JKWDImg} alt="蚕豆" style={{marginRight: '36px'}} />
<StyledImg src={YCImg} alt="油菜" style={{marginRight: '36px'}} />
<StyledImg src={QMImg} alt="荞麦" style={{marginRight: '36px'}} />
<StyledImg src={JImg} alt="箭筈豌豆" />
<StyledImg src={JKWDImg} alt="蚕豆" />
<StyledImg src={YCImg} alt="油菜" />
<StyledImg src={QMImg} alt="荞麦" />
<StyledImg src={LPImg} alt="绿萍" />
</Row>
<BackBtn />
......
src/pages/FertilizeByGround/Acid/AddOrganic/Humanity.js
浏览文件 @ fb2ba137
......@@ -4,17 +4,21 @@ import WheatBg from '../../../WheatBg';
import HumanityImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/人粪尿肥.png';
import AnimalImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-1人畜粪尿肥-assets/家畜粪尿肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const StyledImg = styled.img`
display: block;
width: 702px;
height: 552px;
width: ${convertpx2vw(702)};
height: ${convertpx2vw(552)};
:first-child {
margin-right: ${convertpx2vw(80)};
}
`;
export default function Humanity() {
return (
<WheatBg>
<StyledImg src={HumanityImg} alt="人粪尿肥" style={{marginRight: '80px'}}/>
<StyledImg src={HumanityImg} alt="人粪尿肥" />
<StyledImg src={AnimalImg} alt="家畜粪尿肥" />
<BackBtn />
<HomeBtn />
......
src/pages/FertilizeByGround/Acid/AddOrganic/Straw.js
浏览文件 @ fb2ba137
......@@ -5,18 +5,19 @@ import HeapImg from '../../../../磷肥施用技术切图/默认状态/画面a-2
import SteepImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沤肥.png';
import BiogasImg from '../../../../磷肥施用技术切图/默认状态/画面a-2-3秸秆肥-assets/沼气池肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const StyledImg = styled.img`
display: block;
width: 490px;
height: 391px;
width: ${convertpx2vw(490)};
height: ${convertpx2vw(391)};
`;
export default function Straw() {
return (
<WheatBg>
<StyledImg src={HeapImg} alt="堆肥" style={{marginRight: '20px'}}/>
<StyledImg src={SteepImg} alt="沤肥" style={{marginRight: '20px'}}/>
<StyledImg src={HeapImg} alt="堆肥" style={{marginRight: convertpx2vw(20) }}/>
<StyledImg src={SteepImg} alt="沤肥" style={{marginRight: convertpx2vw(20) }}/>
<StyledImg src={BiogasImg} alt="沼气池肥" />
<BackBtn />
<HomeBtn />
......
src/pages/FertilizeByGround/Acid/AddOrganic/index.js
浏览文件 @ fb2ba137
......@@ -14,15 +14,16 @@ import StrawBgActive from '../../../../磷肥施用技术切图/按下状态/画
import GreenBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div`
margin: 102px auto 0;
margin: ${`${convertpx2vw(102)} auto 0`};
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
......@@ -32,36 +33,39 @@ const PositionedContainer = styled.div`
const StyledBtn = styled(Link)`
background-size: contain;
background-repeat: repeat-x;
background-repeat: no-repeat;
background-position: center;
height: 107px;
width: 590px;
height: ${convertpx2vw(107)};
width: ${convertpx2vw(590)};
&:first-child {
margin-top: ${convertpx2vw(190)};
}
&:not(:first-child) {
margin-top: ${convertpx2vw(40)};
}
`;
const HumanityBtn = styled(StyledBtn)`
background-image: url(${HumanityBg});
margin-top: 190px;
&:active {
background-image: url(${HumanityBgActive});
}
`;
const StableBtn = styled(StyledBtn)`
background-image: url(${StableBg});
margin-top: 40px;
&:active {
background-image: url(${StableBgActive});
}
`;
const StrawBtn = styled(StyledBtn)`
background-image: url(${StrawBg});
margin-top: 40px;
&:active {
background-image: url(${StrawBgActive});
}
`;
const GreenBtn = styled(StyledBtn)`
background-image: url(${GreenBg});
margin-top: 40px;
&:active {
background-image: url(${GreenBgActive});
}
......
src/pages/FertilizeByGround/Acid/AddOrganicBtn.js
浏览文件 @ fb2ba137
......@@ -2,11 +2,12 @@ import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面a-1-assets/增施有机肥.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面a-1-按下-assets/增施有机肥.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(108)};
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeByGround/Acid/index.js
浏览文件 @ fb2ba137
......@@ -4,9 +4,10 @@ import AddOrganicBtn from './AddOrganicBtn';
import AddAlkalineBtn from './AddAlkalineBtn';
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: 240px;
margin-right: ${convertpx2vw(240)};
`;
export default function({ match }) {
......
src/pages/FertilizeByGround/Alkaline/AddAcid/index.js
浏览文件 @ fb2ba137
......@@ -14,15 +14,16 @@ import GLSGActiveBg from '../../../../磷肥施用技术切图/按下状态/画
import GMLActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/钙镁磷肥.png';
import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画面a-3-按下-assets/草木灰.png';
import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div`
margin: 102px auto 0;
margin: ${`${convertpx2vw(102)} auto 0`};
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: 796px;
width: 633px;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
......@@ -31,8 +32,8 @@ const PositionedContainer = styled.div`
`;
const StyledBtn = styled.a`
display: block;
width: 589px;
height: 107px;
width: ${convertpx2vw(589)};
height: ${convertpx2vw(107)};
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
......@@ -42,15 +43,21 @@ const StyledBtn = styled.a`
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
&:first-child {
margin-top: ${convertpx2vw(200)};
}
&:not(:first-child) {
margin-top: ${convertpx2vw(40)};
}
`;
const StyledCheckImg = styled.img`
display: block;
width: 50px;
height: 50px;
width: ${convertpx2vw(50)};
height: ${convertpx2vw(50)};
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 88px;
right: ${convertpx2vw(88)};
visibility: ${props => props.show ? 'visible' : 'hidden'};
user-select: none;
`;
......@@ -65,16 +72,16 @@ export default function AddAcid () {
return (
<GroundBg>
<PositionedContainer>
<StyledBtn src={LABg} activeSrc={LAActiveBg} style={{marginTop: '200px'}} onClick={() => setLAShow(true)}>
<StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/>
</StyledBtn>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} style={{marginTop: '40px'}} onClick={() => setGLSGShow(true)}>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/>
</StyledBtn>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} style={{marginTop: '40px'}} onClick={() => setGMShow(true)}>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
</StyledBtn>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} style={{marginTop: '40px'}} onClick={() => setCMHShow(true)}>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
</StyledBtn>
</PositionedContainer>
......
src/pages/FertilizeByGround/Alkaline/AddAcidBtn.js
浏览文件 @ fb2ba137
......@@ -2,11 +2,12 @@ import styled from 'styled-components';
import bg from '../../../磷肥施用技术切图/默认状态/画面c-1-assets/施用酸性肥料.png';
import bgActive from '../../../磷肥施用技术切图/按下状态/画面c-1-按下-assets/施用酸性肥料.png';
import { Link } from 'react-router-dom';
import { convertpx2vw } from '../../../config';
const Btn = styled(Link)`
display: block;
width: 444px;
height: 108px;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(108)};
background-image: url(${bg});
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeByGround/Alkaline/index.js
浏览文件 @ fb2ba137
......@@ -5,9 +5,10 @@ import AddOrganicBtn from '../Acid/AddOrganicBtn';
import AddAcidBtn from './AddAcidBtn'
import styled from 'styled-components';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
const PositionedAddOrganicBtn = styled(AddOrganicBtn)`
margin-right: 240px;
margin-right: ${convertpx2vw(240)};
`;
export default function Alkaline({ match }) {
......
src/pages/FertilizeByGround/index.js
浏览文件 @ fb2ba137
......@@ -10,6 +10,7 @@ import AcidVideoSrc from '../../动画/因土施肥/画面a酸性土壤.mp4';
import NeutralVideoSrc from '../../动画/因土施肥/画面b中性土壤.mp4';
import AlkalineVideoSrc from '../../动画/因土施肥/画面c石灰性土壤.mp4';
import VideoDiy from '../Video';
import { convertpx2vw } from '../../config'
const Container = styled(WheatBg)`
display: flex;
......@@ -17,23 +18,24 @@ const Container = styled(WheatBg)`
justify-content: flex-start;
`;
const PositionedFertilizeByGround = styled(FertilizeByGroundBtn)`
margin: 120px auto 0;
margin: ${`${convertpx2vw(120)} auto 0`};
`;
const GroundBtn = styled(Link)`
display: block;
width: 300px;
height: 90px;
width: ${convertpx2vw(300)};
height: ${convertpx2vw(90)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
:not(:last-child) {
margin-right: ${convertpx2vw(120)};
}
`;
const AcidGroundBtn = styled(GroundBtn)`
background-image: url(${AcidGroundBg});
margin-right: 120px;
`;
const NeutralGroundBtn = styled(GroundBtn)`
background-image: url(${NeutralGroundBg});
margin-right: 120px;
`;
const AlkalineGroundBtn = styled(GroundBtn)`
background-image: url(${AlkalineGroundBg});
......@@ -41,20 +43,7 @@ const AlkalineGroundBtn = styled(GroundBtn)`
const RowBtn = styled.div`
display: flex;
margin-top: 120px;
`;
const VideoWrapper = styled.div`
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
text-align: center;
visibility: ${props => props.show ? 'visible' : 'hidden'};
`;
const StyledVideo = styled.video`
height: 100%;
margin-top: ${convertpx2vw(120)};
`;
const videoSrcs = {
......
src/pages/FertilizeConcentrated.js
浏览文件 @ fb2ba137
......@@ -31,9 +31,9 @@ const StyledWheatBg = styled(WheatBg)`
const StyledTitle = styled.img`
flex-shrink: 0;
width: 256px;
height: 256px;
margin: 120px 0 80px;
width: ${convertpx2vw(256)};
height: ${convertpx2vw(256)};
margin: ${`${convertpx2vw(120)} 0 ${convertpx2vw(80)}`};
`;
const StyledBtn = styled.button`
background-color: transparent;
......@@ -54,7 +54,7 @@ const StyledBtn = styled.button`
}
`;
const Container = styled.div`
padding: 0 110px;
padding: ${`0 ${convertpx2vw(110)}`};
display: flex;
flex-wrap: wrap;
`;
......
src/pages/FertilizeControl.js
浏览文件 @ fb2ba137
......@@ -14,7 +14,7 @@ import FiftyBgActive from '../磷肥施用技术切图/按下状态/控制施用
import TenVideoSrc from '../动画/控制施用量/（点击进入“10kg667m2 ”按钮后）出现画面.mp4';
import TwentyVideoSrc from '../动画/控制施用量/（点击进入“20-30kg667m2”按钮后）出现画面.mp4';
import FiftyVideoSrc from '../动画/控制施用量/（点击进入“大于30kg667m2”按钮后）出现画面.mp4';
import { convertpx2vw } from '../config';
import Video from './Video';
import { BackBtn, HomeBtn } from './SubHome';
......@@ -25,9 +25,9 @@ const StyledWheatBg = styled(WheatBg)`
`;
const StyledTitle = styled.img`
width: 256px;
height: 256px;
margin: 120px 0 80px;
width: ${convertpx2vw(256)};
height: ${convertpx2vw(256)};
margin: ${`${convertpx2vw(120)} 0 ${convertpx2vw(80)}`};
`;
const StyledBtn = styled.button`
background-color: transparent;
......@@ -36,8 +36,8 @@ const StyledBtn = styled.button`
outline: none;
}
cursor: pointer;
width: 300px;
height: 90px;
width: ${convertpx2vw(300)};
height: ${convertpx2vw(90)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
......@@ -46,7 +46,7 @@ const StyledBtn = styled.button`
background-image: ${props => `url(${props.activeBg})`};
}
&:not(:first-child) {
margin-left: 120px;
margin-left: ${convertpx2vw(120)};
}
`;
const Container = styled.div`
......
src/pages/FertilizeEarly/Corn/index.js
浏览文件 @ fb2ba137
......@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
import SelectBg from '../../../磷肥施用技术切图/默认状态/玉米01-assets/玉米生长周期.png';
import SelectBgActive from '../../../磷肥施用技术切图/按下状态/玉米01-按下-assets/玉米生长周期.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
const SelectBtn = styled(Link)`
display: block;
width: 594px;
height: 98px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
display: block;
width: ${convertpx2vw(594)};
height:${convertpx2vw(98)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
`;
export default function Corn({ match }) {
......
src/pages/FertilizeEarly/Corn/lifetime.js
浏览文件 @ fb2ba137
......@@ -22,17 +22,18 @@ import JointingVideoSrcs from '../../../动画/玉米/玉米拔节期.mp4'
import HornVideoSrcs from '../../../动画/玉米/玉米大喇叭口期.mp4'
import TasselVideoSrcs from '../../../动画/玉米/玉米抽穗期.mp4'
import MaturityVideoSrcs from '../../../动画/玉米/玉米成熟期.mp4'
import { convertpx2vw } from '../../../config';
const Container = styled.div`
margin-top: 67px;
display: block;
width: 444px;
height: 591px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${ContainerBg});
text-align: center;
margin-top: ${convertpx2vw(67)};
display: block;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(591)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${ContainerBg});
text-align: center;
`;
const Btn = styled.button`
background-color: transparent;
......@@ -40,14 +41,14 @@ const Btn = styled.button`
&:focus {
outline: none;
}
width: 392px;
height: 62px;
width: ${convertpx2vw(392)};
height: ${convertpx2vw(62)};
cursor: pointer;
&:first-child {
margin-top: 133px;
margin-top: ${convertpx2vw(133)};
}
&:not(:first-child) {
margin-top: 20px;
margin-top: ${convertpx2vw(20)};
}
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeEarly/Rape/index.js
浏览文件 @ fb2ba137
......@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
import SelectBg from '../../../磷肥施用技术切图/默认状态/油菜01-assets/油菜生长周期.png';
import SelectBgActive from '../../../磷肥施用技术切图/按下状态/油菜01-按下-assets/油菜生长周期.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
const SelectBtn = styled(Link)`
display: block;
width: 594px;
height: 98px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
display: block;
width: ${convertpx2vw(594)};
height: ${convertpx2vw(98)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
`;
export default function Wheat({ match }) {
......
src/pages/FertilizeEarly/Rape/lifetime.js
浏览文件 @ fb2ba137
......@@ -19,32 +19,33 @@ import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/油
import SeedlingVideoSrcs from '../../../动画/油菜/油菜苗期.mp4'
import LaceVideoSrcs from '../../../动画/油菜/油菜蕾薹期.mp4'
import MaturityVideoSrcs from '../../../动画/油菜/油菜角果成熟期.mp4'
import { convertpx2vw } from '../../../config';
const Container = styled.div`
margin-top: 67px;
display: block;
width: 444px;
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${ContainerBg});
text-align: center;
margin-top: ${convertpx2vw(67)};
display: block;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(500)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${ContainerBg});
text-align: center;
`;
const Btn = styled.button`
background-color: transparent;
border: none;
width: 392px;
height: 72px;
width: ${convertpx2vw(392)};
height: ${convertpx2vw(72)};
cursor: pointer;
&:focus {
outline: none;
}
&:first-child {
margin-top: 120px;
margin-top: ${convertpx2vw(120)};
}
&:not(:first-child) {
margin-top: 20px;
margin-top: ${convertpx2vw(20)};
}
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeEarly/Wheat/Seedling.js
浏览文件 @ fb2ba137
......@@ -2,13 +2,13 @@ import React from 'react';
import styled from 'styled-components';
import WheatBg from '../../WheatBg';
import img from '../../../磷肥施用技术切图/默认状态/冬小麦苗期-assets/苗期.png';
import { convertpx2vw } from '../../../config';
import { BackBtn, HomeBtn } from '../../SubHome';
const StyledImg = styled.img`
display: block;
width: 702px;
height: 552px;
width: ${convertpx2vw(702)};
height: ${convertpx2vw(552)};
`;
export default function Seedling() {
return (
......
src/pages/FertilizeEarly/Wheat/index.js
浏览文件 @ fb2ba137
......@@ -5,18 +5,19 @@ import WheatBg from '../../WheatBg';
import SelectBg from '../../../磷肥施用技术切图/默认状态/冬小麦01-assets/冬小麦生长周期.png';
import SelectBgActive from '../../../磷肥施用技术切图/按下状态/冬小麦01-按下-assets/冬小麦生长周期.png';
import { BackBtn, HomeBtn } from '../../SubHome';
import { convertpx2vw } from '../../../config';
const SelectBtn = styled(Link)`
display: block;
width: 594px;
height: 98px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
display: block;
width: ${convertpx2vw(594)};
height: ${convertpx2vw(98)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
`;
export default function Wheat({ match }) {
......
src/pages/FertilizeEarly/Wheat/lifetime.js
浏览文件 @ fb2ba137
......@@ -32,13 +32,13 @@ import JointingVideoSrcs from '../../../动画/冬小麦/冬小麦拔节期.mp4'
import BootingVideoSrcs from '../../../动画/冬小麦/冬小麦孕穗期.mp4'
import FillingVideoSrcs from '../../../动画/冬小麦/冬小麦灌浆期.mp4'
import MaturityVideoSrcs from '../../../动画/冬小麦/冬小麦成熟期.mp4'
import { convertpx2vw } from '../../../config';
const Container = styled.div`
margin-top: 67px;
margin-top: ${convertpx2vw(67)};
display: block;
width: 444px;
height: 867px;
width: ${convertpx2vw(444)};
height: ${convertpx2vw(867)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
......@@ -48,17 +48,17 @@ const Container = styled.div`
const Btn = styled.button`
background-color: transparent;
border: none;
width: 392px;
height: 72px;
width: ${convertpx2vw(392)};
height: ${convertpx2vw(72)};
cursor: pointer;
&:focus {
outline: none;
}
&:first-child {
margin-top: 120px;
margin-top: ${convertpx2vw(120)};
}
&:not(:first-child) {
margin-top: 20px;
margin-top: ${convertpx2vw(20)};
}
background-repeat: no-repeat;
background-position: center;
......
src/pages/FertilizeEarly/index.js
浏览文件 @ fb2ba137
......@@ -5,18 +5,19 @@ import WheatBg from '../WheatBg';
import SelectBg from '../../磷肥施用技术切图/默认状态/早施01.1-assets/选择作物.png';
import SelectBgActive from '../../磷肥施用技术切图/按下状态/早施01.1-按下-assets/选择作物.png';
import { BackBtn, HomeBtn } from '../SubHome';
import { convertpx2vw } from '../../config';
const SelectBtn = styled(Link)`
display: block;
width: 384px;
height: 98px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
display: block;
width: ${convertpx2vw(384)};
height: ${convertpx2vw(98)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(${SelectBg});
&:active {
background-image: url(${SelectBgActive});
}
`;
export default function FertilizeEarly({ match }) {
......
src/pages/FertilizeEarly/select.js
浏览文件 @ fb2ba137
......@@ -11,18 +11,18 @@ import RapeBtnBgActive from '../../磷肥施用技术切图/按下状态/早施0
import Corn from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米.png'
import CornBtnBg from '../../磷肥施用技术切图/默认状态/早施02.1-assets/玉米（文字）.png'
import CornBtnBgActive from '../../磷肥施用技术切图/按下状态/早施02.1-按下-assets/玉米（文字）.png'
import { convertpx2vw } from '../../config';
import { BackBtn, HomeBtn } from '../SubHome';
const Icon = styled.img`
width: 256px;
height: 256px;
width: ${convertpx2vw(256)};
height: ${convertpx2vw(256)};
`;
const Btn = styled(Link)`
display: block;
width: 308px;
height: 108px;
width: ${convertpx2vw(308)};
height: ${convertpx2vw(108)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
......@@ -34,7 +34,7 @@ const bgs = {
['Wheat', 'Rape', 'Corn'].forEach(name => {
Btns[name] = styled(Btn)`
margin-top: 79px;
margin-top: ${convertpx2vw(79)};
background-image: url(${bgs[name+'BtnBg']});
&:active {
background-image: url(${bgs[name+'BtnBgActive']});
......@@ -45,7 +45,7 @@ const Col = styled.div`
display: inline-block;
text-align: center;
&:not(:last-child) {
margin-right: 160px;
margin-right: ${convertpx2vw(160)};
}
`;
......
src/pages/Home.js
浏览文件 @ fb2ba137
......@@ -2,9 +2,9 @@ import React from 'react';
import bg from '../磷肥施用技术切图/默认状态/画面一-assets/磷肥施用技术仿真软件.png';
import { Link } from "react-router-dom";
export default function Home() {
export default function Home({ match }) {
return (
<Link to="/sub-home">
<Link to={match.url + 'sub-home'}>
<img src={bg} alt="logo" style={{width: '100%'}} />
</Link>
);
......
src/pages/SubHome.js
浏览文件 @ fb2ba137
......@@ -9,13 +9,15 @@ import FertilizeEarlyBg from '../磷肥施用技术切图/默认状态/画面二
import FertilizeConcentratedBg from '../磷肥施用技术切图/默认状态/画面二-assets/集中施肥.png';
import FertilizeControlBg from '../磷肥施用技术切图/默认状态/画面二-assets/控制施用量.png';
import WheatBg from './WheatBg';
import { convertpx2vw } from '../config';
const baseUrl = process.env.PUBLIC_URL;
const NavBtn = styled(Link)`
display: block;
width: 76px;
height: 76px;
width: ${convertpx2vw(76)};
height: ${convertpx2vw(76)};
position: absolute;
bottom: 47px;
bottom: ${convertpx2vw(47)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
......@@ -23,21 +25,21 @@ const NavBtn = styled(Link)`
export const StyledBackBtn = styled(NavBtn)`
background-image: url(${BackBtnBg});
right: 195px;
right: ${convertpx2vw(195)};
`;
export const StyledHomeBtn = styled(NavBtn)`
background-image: url(${HomeBtnBg});
right: 80px;
right: ${convertpx2vw(80)};
`;
const FertilizeBtn = styled(Link)`
display: block;
width: 256px;
height: 256px;
width: ${convertpx2vw(256)};
height: ${convertpx2vw(256)};
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 80px;
margin-right: ${convertpx2vw(80)};
`;
export const FertilizeByGroundBtn = styled(FertilizeBtn)`
background-image: url(${FertilizeByGroundBg});
......@@ -61,7 +63,7 @@ export const BackBtn = withRouter(({ onClick, history }) => {
});
export function HomeBtn() {
return <StyledHomeBtn to="/" />;
return <StyledHomeBtn to={baseUrl+'/'} />;
}
export default function SubHome({ match }) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论