上传按钮调整，添加输入提示

src/components/Qrcode.css

@@ -202,17 +202,50 @@ td {
 
 .Qr-input-upload {
     display: flex;
-    margin-top: calc((10px + 2vmin) * 2);
-    margin-bottom: calc((10px + 2vmin) * 2);
     max-width: calc(100vw - 46px);
     width: 20em;
 }
 
+.Qr-input-upload-div {
+    margin-top: calc((5px + 2vmin) * 2);
+    margin-bottom: calc((10px + 2vmin + 10px) * 2);
+    position: relative;
+}
+
+.Qr-input-upload:hover + .Qr-input-hint {
+    opacity: 0.6;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    -moz-animation-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+.Qr-input-hint {
+    opacity: 0;
+    margin-top: 12px;
+    font-size: 12px;
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    -webkit-transition-timing-function: ease-in-out;
+    -moz-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.3s; /* Safari */
+    -moz-animation-duration: 0.3s;
+    transition-duration: 0.3s;
+}
+
+@media (min-width: 500px) {
+    .Qr-input-hint {
+        margin-top: 14px;
+        font-size: 14px;
+    }
+}
+
 .big-input {
     height: calc(2em + 6px);
     font-size: calc(10px + 2vmin);
     border: rgba(0,0,0,0.12) solid 2px;
-    margin-right: 10px;
+    margin-left: 10px;
     flex: 1;
 }
 
@@ -514,6 +547,11 @@ input[type="number"]{
 }
 
 a {
+    -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%;
     color: currentColor;
     text-decoration: none;
 }

src/components/app/PartMore.js

@@ -13,7 +13,7 @@ const PartMore = () => (
                 <h2>这个生成器的特别之处在哪里？</h2>
                 <p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
                 <h2>如何使用？</h2>
-                <p>从输入 URL 开始。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。</p>
+                <p>从输入 URL 开始（记得加 http:// 或 https://）。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。</p>
                 <h2>我应该下载 SVG 还是 JPG？</h2>
                 <p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。</p>
                 <h2>使用遇到了问题，怎么反馈？</h2>

src/containers/app/InputText.js

@@ -9,55 +9,60 @@ const InputText = ({dispatch}) => {
 
     return (
         <React.Fragment>
-            <div className="Qr-input-upload">
+            <div className="Qr-input-upload-div">
-                <input
+                <div className="Qr-input-upload">
-                    className="Qr-input big-input"
+                    <label
-                    placeholder="Input your URL here"
+                        htmlFor="image_scanner"
-                    ref={textRef}
+                        className="Qr-upload"
-                    onBlur={e => dispatch(genQRInfo(e.target.value))}
+                        style={{textAlign: "center"}}
-                    onKeyPress={(e) => {
+                    >
-                        if (e.key === 'Enter') {
+                        <svg className="Qr-upload-svg" version="1.1" id="图层_1" zoomAndPan="disable"
-                            dispatch(genQRInfo(e.target.value));
+                             xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                            e.target.blur();
+                             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"/>
-                <label
+                                <line x1="5" y1="10" x2="15" y2="0"/>
-                    htmlFor="image_scanner"
+                            </g>
-                    className="Qr-upload"
+                        </svg>
-                    style={{textAlign: "center"}}
+                    </label>
-                >
+                    <input
-                    <svg className="Qr-upload-svg" version="1.1" id="图层_1" zoomAndPan="disable"
+                        type="file"
-                         xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                        id="image_scanner"
-                         viewBox="0 -5 30 40" preserveAspectRatio="none">
+                        hidden={true}
-                        <g className="st0">
+                        accept=".jpg, .jpeg, .png"
-                            <line x1="15" y1="0" x2="15" y2="30"/>
+                        onClick={(e) => e.target.value = null}
-                            <line x1="25" y1="10" x2="15" y2="0"/>
+                        onChange={(e) => {
-                            <line x1="5" y1="10" x2="15" y2="0"/>
+                            if (e.target.files.length > 0) {
-                        </g>
+                                const file = e.target.files[0];
-                    </svg>
+                                if (isPicture(file)) {
-                </label>
+                                    decodeData(file).then((res) => {
-                <input
+                                        if (res) {
-                    type="file"
+                                            textRef.current.value = res.data;
-                    id="image_scanner"
+                                            console.log(res.data)
-                    hidden={true}
+                                            dispatch(genQRInfo(res.data))
-                    accept=".jpg, .jpeg, .png"
+                                        }
-                    onClick={(e) => e.target.value = null}
+                                    }).catch(console.err);
-                    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);
                             }
-                        }
+                        }}
-                    }}
+                    />
-                />
+                    <input
+                        className="Qr-input big-input"
+                        placeholder="https://qrbtf.com"
+                        ref={textRef}
+                        onBlur={e => dispatch(genQRInfo(e.target.value))}
+                        onKeyPress={(e) => {
+                            if (e.key === 'Enter') {
+                                dispatch(genQRInfo(e.target.value));
+                                e.target.blur();
+                            }
+                        }}
+                    />
+                </div>
+                <div className="Qr-input-hint">
+                    上传普通二维码或输入网址
+                </div>
             </div>
         </React.Fragment>);
 }