This commit is contained in:
ciaochaos 2020-05-01 18:58:11 +08:00
parent 971bd6eb46
commit 461ad92cee
4 changed files with 111 additions and 21 deletions

View File

@ -12,7 +12,9 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="0.1.0.2"> <list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="0.1.0.2">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/QrItem.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/QrItem.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/Qrcode.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Qrcode.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.js" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -77,7 +79,7 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1588240852207</updated> <updated>1588240852207</updated>
<workItem from="1588240855414" duration="15673000" /> <workItem from="1588240855414" duration="15673000" />
<workItem from="1588305721761" duration="12962000" /> <workItem from="1588305721761" duration="17092000" />
</task> </task>
<task id="LOCAL-00001" summary="0.1.0.1"> <task id="LOCAL-00001" summary="0.1.0.1">
<created>1588308749650</created> <created>1588308749650</created>
@ -261,7 +263,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1588323249801</updated> <updated>1588323249801</updated>
</task> </task>
<option name="localTasksCounter" value="27" /> <task id="LOCAL-00027" summary="0.1.0.2">
<created>1588324026075</created>
<option name="number" value="00027" />
<option name="presentableId" value="LOCAL-00027" />
<option name="project" value="LOCAL" />
<updated>1588324026075</updated>
</task>
<option name="localTasksCounter" value="28" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -289,10 +298,10 @@
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="23" width="2541" height="1057" />
</state> </state>
<state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" /> <state x="1161" y="421" key="#Notifications/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588307553058" />
<state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588323264967"> <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588324036378">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="23" width="2541" height="1057" />
</state> </state>
<state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588323264967" /> <state x="870" y="291" key="Vcs.Push.Dialog.v2/428.1103.1680.1027/0.23.2541.1057/-1600.203.1600.877@0.23.2541.1057" timestamp="1588324036378" />
<state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667"> <state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667">
<screen x="0" y="23" width="2541" height="1057" /> <screen x="0" y="23" width="2541" height="1057" />
</state> </state>

View File

@ -21,7 +21,7 @@ class QrItem extends React.Component {
return ( return (
<div className="Qr-item"> <div className="Qr-item">
<div className="Qr-item-image"> <div className="Qr-item-image">
<svg width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"> <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white">
{this.props.renderer} {this.props.renderer}
</svg> </svg>
</div> </div>

View File

@ -3,6 +3,26 @@
box-sizing: border-box; box-sizing: border-box;
border-top: rgba(0,0,0,0.06) solid 3px; border-top: rgba(0,0,0,0.06) solid 3px;
border-bottom: rgba(0,0,0,0.06) solid 3px; border-bottom: rgba(0,0,0,0.06) solid 3px;
padding-top: calc((10px + 2vmin) * 2);
padding-bottom: calc((10px + 2vmin) * 2);
}
.Qr-titled-nobg {
padding-top: calc((10px + 2vmin) * 2);
padding-bottom: calc((10px + 2vmin) * 2);
}
.Qr-title {
margin-top: 3em;
}
.Qr-subtitle {
margin-top: -1em;
}
.Qr-s-subtitle {
margin-top: 0;
margin-bottom: 0;
} }
.Qr-s { .Qr-s {
@ -19,14 +39,17 @@
} }
.Qr-s-title { .Qr-s-title {
margin-top: 23px;
font-size: 1.4em; font-size: 1.4em;
} }
.title-margin {
margin-bottom: 20px;
}
.Qr-box { .Qr-box {
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
padding: 10px 13px 23px 23px; padding: 10px 13px 0px 23px;
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
@ -56,6 +79,14 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.Qr-item-svg {
opacity: 0.36;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.2s; /* Safari */
transition-duration: 0.2s;
}
@media (min-width: 500px) { @media (min-width: 500px) {
.Qr-item-image { .Qr-item-image {
width: 200px; width: 200px;
@ -67,6 +98,10 @@
border-color: #44D7B6; border-color: #44D7B6;
} }
.Qr-item:hover .Qr-item-svg {
opacity: 1;
}
.Qr-item:hover .Qr-item-detail { .Qr-item:hover .Qr-item-detail {
color: #000000; color: #000000;
} }
@ -82,18 +117,30 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.Qr-input { td:nth-child(1) {
caret-color: #44D7B6; font-size: 0.8em;
}
td:nth-child(2) {
font-size: 0.8em;
}
.big-input {
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
padding: 0;
margin-bottom: calc((10px + 2vmin) * 2); margin-bottom: calc((10px + 2vmin) * 2);
border: rgba(0,0,0,0.12) solid 3px;
}
.Qr-input {
font-size: 0.6em;
caret-color: #44D7B6;
padding: 0;
line-height: 2em; line-height: 2em;
box-sizing: border-box; box-sizing: border-box;
border: rgba(0,0,0,0.12) solid 3px; border: rgba(0,0,0,0.12) solid 2px;
border-radius: 3em; border-radius: 3em;
outline: none; outline: none;
text-indent: 1em; text-indent: 1em;
width: 20em;
max-width: calc(100vw - 46px); max-width: calc(100vw - 46px);
overflow: visible; overflow: visible;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
@ -103,6 +150,8 @@
-webkit-appearance: none; -webkit-appearance: none;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: 'Futura', sans-serif;
color: rgba(0,0,0,0.6);
} }
.Qr-input::placeholder { .Qr-input::placeholder {
@ -110,11 +159,6 @@
color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.18);
} }
.Qr-input {
font-family: 'Futura', sans-serif;
color: rgba(0,0,0,0.6);
}
.Qr-Centered { .Qr-Centered {
padding-left: 23px; padding-left: 23px;
padding-right: 23px; padding-right: 23px;
@ -126,3 +170,13 @@
border-color: #44D7B6; border-color: #44D7B6;
color: #000000; color: #000000;
} }
.Qr-table {
width: 100%;
border-spacing: 0;
margin-top: 23px;
}
.Qr-div-table {
max-width: 600px;
}

View File

@ -47,9 +47,10 @@ class Qrcode extends React.Component {
return ( return (
<div> <div>
<div className="Qr-Centered"> <div className="Qr-Centered">
<h1>qrbtf.com</h1> <h1 className="Qr-title">qrbtf.com</h1>
<p className="Qr-subtitle">参数化二维码生成器</p>
<input <input
className="Qr-input" className="Qr-input big-input"
placeholder="Input your URL here" placeholder="Input your URL here"
onChange={this.handleChange} onChange={this.handleChange}
onBlur={this.handleCreate} onBlur={this.handleCreate}
@ -57,8 +58,9 @@ class Qrcode extends React.Component {
/> />
</div> </div>
<div className="Qr-titled"> <div className="Qr-titled">
<div className="Qr-Centered Qr-s-title"> <div className="Qr-Centered title-margin">
Styles <div className="Qr-s-title">Styles</div>
<p className="Qr-s-subtitle">样式选择</p>
</div> </div>
<div className="Qr-s"> <div className="Qr-s">
<div className="Qr-box"> <div className="Qr-box">
@ -66,6 +68,31 @@ class Qrcode extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<div className="Qr-titled-nobg">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">Parameters</div>
<p className="Qr-s-subtitle">参数调整</p>
</div>
<div className="Qr-Centered">
<div className="Qr-div-table">
<table className="Qr-table">
<tbody>
<tr>
<td>圆点大小</td>
<td><input className="Qr-input"
placeholder="10" />&ensp;px</td>
</tr>
<tr>
<td>随机种</td>
<td><input className="Qr-input"
placeholder="1" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> </div>
); );
} }