上传按钮调整，添加输入提示
This commit is contained in:
ciaochaos
parent
6bfcbb8156
commit
c68d35e680
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -9,55 +9,60 @@ const InputText = ({dispatch}) => {
|
|||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<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 className="Qr-input-upload-div">
|
||||
<div className="Qr-input-upload">
|
||||
<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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}}
|
||||
/>
|
||||
<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>);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue