Skip to content

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

按钮样式修改

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