上传按钮样式调整

This commit is contained in:
ciaochaos 2020-05-19 15:13:38 +08:00
parent e141541287
commit b62ce36875
2 changed files with 121 additions and 43 deletions

View File

@ -200,13 +200,20 @@ td {
padding: 0 0 12px 0;
}
.big-input {
font-size: calc(10px + 2vmin);
.Qr-input-upload {
display: flex;
margin-top: calc((10px + 2vmin) * 2);
margin-bottom: calc((10px + 2vmin) * 2);
border: rgba(0,0,0,0.12) solid 2px;
width: 20em;
max-width: calc(100vw - 46px);
width: 20em;
}
.big-input {
height: calc(2em + 6px);
font-size: calc(10px + 2vmin);
border: rgba(0,0,0,0.12) solid 2px;
margin-right: 10px;
flex: 1;
}
@media (min-width: 500px) {
@ -215,6 +222,67 @@ td {
}
}
.Qr-upload {
color: rgba(102,102,102,1);
font-size: calc(10px + 2vmin);
border: rgba(0,0,0,0.12) solid 2px;
width: calc(2em + 6px)!important;
height: calc(2em + 6px);
cursor: pointer;
line-height: 2em;
border-radius: 3em;
outline: none;
padding: 0;
box-sizing: border-box;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.2s; /* Safari */
-moz-animation-duration: 0.2s;
transition-duration: 0.2s;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-appearance: none;
-moz-text-size-adjust: 100%;
background: white;
font-family: 'Futura', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 500px) {
.Qr-upload {
border: rgba(0,0,0,0.12) solid 3px;
}
}
.Qr-upload:hover {
border-color: #44D7B6;
color: #44D7B6;
}
.Qr-upload:active {
-webkit-transition-duration: 0s; /* Safari */
transition-duration: 0s;
-moz-transition-duration: 0s;
border-color: #3BBC9F;
color: #3BBC9F;
}
.Qr-upload-svg {
height: 60%;
}
.st0 {
fill:none;
stroke: currentColor;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
}
.small-input {
margin: 0;
font-size: 0.9em;

View File

@ -9,46 +9,56 @@ const InputText = ({dispatch}) => {
return (
<React.Fragment>
<input
className="Qr-input big-input"
placeholder="Input your URL here"
ref={textRef}
onBlur={e => dispatch(genQRInfo(e.target.value))}
onKeyPress={(e) => {
if (e.key === 'Enter') {
dispatch(genQRInfo(e.target.value));
e.target.blur();
}
}}
/>
<label
htmlFor="image_scanner"
className="dl-btn"
style={{textAlign: "center"}}
>
扫描图片
</label>
<input
type="file"
id="image_scanner"
hidden={true}
accept=".jpg, .jpeg, .png"
onClick={(e) => e.target.value = null}
onChange={(e) => {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (isPicture(file)) {
decodeData(file).then((res) => {
if (res) {
textRef.current.value = res.data;
console.log(res.data)
dispatch(genQRInfo(res.data))
}
}).catch(console.err);
<div className="Qr-input-upload">
<input
className="Qr-input big-input"
placeholder="Input your URL here"
ref={textRef}
onBlur={e => dispatch(genQRInfo(e.target.value))}
onKeyPress={(e) => {
if (e.key === 'Enter') {
dispatch(genQRInfo(e.target.value));
e.target.blur();
}
}
}}
/>
}}
/>
<label
htmlFor="image_scanner"
className="Qr-upload"
style={{textAlign: "center"}}
>
<svg className="Qr-upload-svg" version="1.1" id="图层_1" zoomAndPan="disable"
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 -5 30 40" preserveAspectRatio="none">
<g className="st0">
<line x1="15" y1="0" x2="15" y2="30"/>
<line x1="25" y1="10" x2="15" y2="0"/>
<line x1="5" y1="10" x2="15" y2="0"/>
</g>
</svg>
</label>
<input
type="file"
id="image_scanner"
hidden={true}
accept=".jpg, .jpeg, .png"
onClick={(e) => e.target.value = null}
onChange={(e) => {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (isPicture(file)) {
decodeData(file).then((res) => {
if (res) {
textRef.current.value = res.data;
console.log(res.data)
dispatch(genQRInfo(res.data))
}
}).catch(console.err);
}
}
}}
/>
</div>
</React.Fragment>);
}