上传按钮样式调整

src/components/Qrcode.css

@@ -200,13 +200,20 @@ td {
     padding: 0 0 12px 0;
 }
 
-.big-input {
+.Qr-input-upload {
-    font-size: calc(10px + 2vmin);
+    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;

src/containers/app/InputText.js

@@ -9,46 +9,56 @@ const InputText = ({dispatch}) => {
 
     return (
         <React.Fragment>
-            <input
+            <div className="Qr-input-upload">
-                className="Qr-input big-input"
+                <input
-                placeholder="Input your URL here"
+                    className="Qr-input big-input"
-                ref={textRef}
+                    placeholder="Input your URL here"
-                onBlur={e => dispatch(genQRInfo(e.target.value))}
+                    ref={textRef}
-                onKeyPress={(e) => {
+                    onBlur={e => dispatch(genQRInfo(e.target.value))}
-                    if (e.key === 'Enter') {
+                    onKeyPress={(e) => {
-                        dispatch(genQRInfo(e.target.value));
+                        if (e.key === 'Enter') {
-                        e.target.blur();
+                            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);
                         }
-                    }
+                    }}
-                }}
+                />
-            />
+                <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>);
 }