Skip to content

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

按钮样式修改

上级 6f83b6c8
显示空白字符变更
内嵌 并排
正在显示 包含 94 行增加 和 154 行删除
package.json
浏览文件 @ 7ab723b2
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"react": "^16.9.0", "react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dom": "^16.9.0", "react-dom": "^16.9.0",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
"react-scripts": "3.1.1", "react-scripts": "3.1.1",
...@@ -23,12 +24,14 @@ ...@@ -23,12 +24,14 @@
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all",
"ie 11"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version",
"ie 11"
] ]
} }
} }
src/index.js
浏览文件 @ 7ab723b2
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
......
src/pages/FertilizeByGround/Acid/AddAlkaline/index.js
浏览文件 @ 7ab723b2
...@@ -16,40 +16,9 @@ import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画 ...@@ -16,40 +16,9 @@ import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画
import { BackBtn, HomeBtn } from '../../../SubHome'; import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config'; import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div` import ButtonContainer from '../../ButtonContainer';
margin: ${`convertpx2vw(102) auto 0`}; import ButtonDiy from '../../ButtonDiy';
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled.a`
display: block;
width: ${convertpx2vw(589)};
height: ${convertpx2vw(107)};
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
background-size: contain;
background-repeat: no-repeat;
background-position: center;
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
&:first-child {
margin-top: ${convertpx2vw(200)};
}
&:not(:first-child) {
margin-top: ${convertpx2vw(40)};
}
`;
const StyledCheckImg = styled.img` const StyledCheckImg = styled.img`
display: block; display: block;
width: ${convertpx2vw(50)}; width: ${convertpx2vw(50)};
...@@ -62,6 +31,9 @@ const StyledCheckImg = styled.img` ...@@ -62,6 +31,9 @@ const StyledCheckImg = styled.img`
user-select: none; user-select: none;
`; `;
function Button(props) {
return <ButtonDiy w={589} h={107} top={40} firstTop={200} {...props} />
}
export default function AddAlkaline () { export default function AddAlkaline () {
const [LAShow, setLAShow] = useState(false); const [LAShow, setLAShow] = useState(false);
...@@ -71,20 +43,20 @@ export default function AddAlkaline () { ...@@ -71,20 +43,20 @@ export default function AddAlkaline () {
return ( return (
<GroundBg> <GroundBg>
<PositionedContainer> <ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}> <Button src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/> <StyledCheckImg src={WrongBg} alt="wong" show={LAShow}/>
</StyledBtn> </Button>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}> <Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/> <StyledCheckImg src={WrongBg} alt="wong" show={GLSGShow}/>
</StyledBtn> </Button>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}> <Button src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/> <StyledCheckImg src={CorrectBg} alt="correct" show={GMShow}/>
</StyledBtn> </Button>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}> <Button src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/> <StyledCheckImg src={CorrectBg} alt="correct" show={CMHShow}/>
</StyledBtn> </Button>
</PositionedContainer> </ButtonContainer>
<BackBtn /> <BackBtn />
<HomeBtn /> <HomeBtn />
</GroundBg> </GroundBg>
......
src/pages/FertilizeByGround/Acid/AddOrganic/index.js
浏览文件 @ 7ab723b2
...@@ -14,72 +14,23 @@ import StrawBgActive from '../../../../磷肥施用技术切图/按下状态/画 ...@@ -14,72 +14,23 @@ import StrawBgActive from '../../../../磷肥施用技术切图/按下状态/画
import GreenBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png'; import GreenBgActive from '../../../../磷肥施用技术切图/按下状态/画面a-2-按下-assets/绿肥.png';
import { BackBtn, HomeBtn } from '../../../SubHome'; import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div` import ButtonContainer from '../../ButtonContainer';
margin: ${`${convertpx2vw(102)} auto 0`}; import ButtonDiy from '../../ButtonDiy';
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled(Link)` function Button(props) {
background-size: contain; return <ButtonDiy h={107} w={589} top={40} firstTop={190} {...props} />
background-repeat: no-repeat; }
background-position: center;
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});
&:active {
background-image: url(${HumanityBgActive});
}
`;
const StableBtn = styled(StyledBtn)`
background-image: url(${StableBg});
&:active {
background-image: url(${StableBgActive});
}
`;
const StrawBtn = styled(StyledBtn)`
background-image: url(${StrawBg});
&:active {
background-image: url(${StrawBgActive});
}
`;
const GreenBtn = styled(StyledBtn)`
background-image: url(${GreenBg});
&:active {
background-image: url(${GreenBgActive});
}
`;
export default function AddOrganic({ match }) { export default function AddOrganic({ match }) {
return ( return (
<GroundBg> <GroundBg>
<PositionedContainer> <ButtonContainer w={645} h={808} top={102} bg={ContainerBg} >
<HumanityBtn to={`${match.url}/humanity`}/> <Button src={HumanityBg} activeSrc={HumanityBgActive} to={`${match.url}/humanity`}/>
<StableBtn to={`${match.url}/stable`} /> <Button src={StableBg} activeSrc={StableBgActive} to={`${match.url}/stable`} />
<StrawBtn to={`${match.url}/straw`} /> <Button src={StrawBg} activeSrc={StrawBgActive} to={`${match.url}/straw`} />
<GreenBtn to={`${match.url}/green`} /> <Button src={GreenBg} activeSrc={GreenBgActive} to={`${match.url}/green`} />
</PositionedContainer> </ButtonContainer>
<BackBtn /> <BackBtn />
<HomeBtn /> <HomeBtn />
</GroundBg> </GroundBg>
......
src/pages/FertilizeByGround/Alkaline/AddAcid/index.js
浏览文件 @ 7ab723b2
...@@ -16,40 +16,9 @@ import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画 ...@@ -16,40 +16,9 @@ import CMHActiveBg from '../../../../磷肥施用技术切图/按下状态/画
import { BackBtn, HomeBtn } from '../../../SubHome'; import { BackBtn, HomeBtn } from '../../../SubHome';
import { convertpx2vw } from '../../../../config'; import { convertpx2vw } from '../../../../config';
const PositionedContainer = styled.div` import ButtonContainer from '../../ButtonContainer';
margin: ${`${convertpx2vw(102)} auto 0`}; import ButtonDiy from '../../ButtonDiy';
background-image: url(${ContainerBg});
background-size: contain;
background-repeat: repeat-x;
background-position: center;
height: ${convertpx2vw(796)};
width: ${convertpx2vw(633)};
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const StyledBtn = styled.a`
display: block;
width: ${convertpx2vw(589)};
height: ${convertpx2vw(107)};
cursor: pointer;
position: relative;
background-image: ${props => `url(${props.src})`};
background-size: contain;
background-repeat: no-repeat;
background-position: center;
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
&:first-child {
margin-top: ${convertpx2vw(200)};
}
&:not(:first-child) {
margin-top: ${convertpx2vw(40)};
}
`;
const StyledCheckImg = styled.img` const StyledCheckImg = styled.img`
display: block; display: block;
width: ${convertpx2vw(50)}; width: ${convertpx2vw(50)};
...@@ -62,6 +31,9 @@ const StyledCheckImg = styled.img` ...@@ -62,6 +31,9 @@ const StyledCheckImg = styled.img`
user-select: none; user-select: none;
`; `;
function Button(props) {
return <ButtonDiy w={589} h={107} top={40} firstTop={200} {...props} />
}
export default function AddAcid () { export default function AddAcid () {
const [LAShow, setLAShow] = useState(false); const [LAShow, setLAShow] = useState(false);
...@@ -71,20 +43,20 @@ export default function AddAcid () { ...@@ -71,20 +43,20 @@ export default function AddAcid () {
return ( return (
<GroundBg> <GroundBg>
<PositionedContainer> <ButtonContainer w={633} h={796} top={102} bg={ContainerBg}>
<StyledBtn src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}> <Button src={LABg} activeSrc={LAActiveBg} onClick={() => setLAShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/> <StyledCheckImg src={CorrectBg} alt="correct" show={LAShow}/>
</StyledBtn> </Button>
<StyledBtn src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}> <Button src={GLSGBg} activeSrc={GLSGActiveBg} onClick={() => setGLSGShow(true)}>
<StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/> <StyledCheckImg src={CorrectBg} alt="correct" show={GLSGShow}/>
</StyledBtn> </Button>
<StyledBtn src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}> <Button src={GMLBg} activeSrc={GMLActiveBg} onClick={() => setGMShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/> <StyledCheckImg src={WrongBg} alt="wong" show={GMShow}/>
</StyledBtn> </Button>
<StyledBtn src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}> <Button src={CMHBg} activeSrc={CMHActiveBg} onClick={() => setCMHShow(true)}>
<StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/> <StyledCheckImg src={WrongBg} alt="wong" show={CMHShow}/>
</StyledBtn> </Button>
</PositionedContainer> </ButtonContainer>
<BackBtn /> <BackBtn />
<HomeBtn /> <HomeBtn />
</GroundBg> </GroundBg>
......
src/pages/FertilizeByGround/ButtonContainer.js 0 → 100644
浏览文件 @ 7ab723b2
import styled from 'styled-components';
import { convertpx2vw } from '../../config.js';
const ButtonContainer = styled.div`
position: relative;
text-align: center;
display: inline-block;
background-size: contain;
background-repeat: repeat-x;
background-position: center;
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
background-image: url(${props => props.bg});
margin-top: ${props => convertpx2vw(props.top)};
`;
export default ButtonContainer;
src/pages/FertilizeByGround/ButtonDiy.js 0 → 100644
浏览文件 @ 7ab723b2
import styled from 'styled-components';
import { convertpx2vw } from '../../config.js';
import { Link } from 'react-router-dom';
const StyledBtn = styled(Link)`
display: inline-block;
width: ${props => convertpx2vw(props.w)};
height: ${props => convertpx2vw(props.h)};
cursor: pointer;
position: relative;
background-image: url(${props => props.src});
background-size: contain;
background-repeat: no-repeat;
background-position: center;
&:active {
background-image: ${props => `url(${props.activeSrc})`};
}
&:first-child {
margin-top: ${props => convertpx2vw(props.firstTop)};
}
&:not(:first-child) {
margin-top: ${props => convertpx2vw(props.top)};
}
`;
export default StyledBtn;
src/pages/FertilizeByGround/GroundBg.js
浏览文件 @ 7ab723b2
...@@ -8,9 +8,7 @@ const Container = styled.div` ...@@ -8,9 +8,7 @@ const Container = styled.div`
background-position: center; background-position: center;
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; text-align: center;
flex-direction: row; overflow: hidden;
justify-content: center;
align-items: center;
`; `;
export default Container; export default Container;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论