0.1.0.2

.idea/workspace.xml

@@ -12,7 +12,6 @@
   <component name="ChangeListManager">
     <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$/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.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Qrcode.js" afterDir="false" />
     </list>
@@ -79,7 +78,7 @@
       <option name="presentableId" value="Default" />
       <updated>1588240852207</updated>
       <workItem from="1588240855414" duration="15673000" />
-      <workItem from="1588305721761" duration="17092000" />
+      <workItem from="1588305721761" duration="19884000" />
     </task>
     <task id="LOCAL-00001" summary="0.1.0.1">
       <created>1588308749650</created>
@@ -270,7 +269,14 @@
       <option name="project" value="LOCAL" />
       <updated>1588324026075</updated>
     </task>
-    <option name="localTasksCounter" value="28" />
+    <task id="LOCAL-00028" summary="0.1.0.2">
+      <created>1588330691377</created>
+      <option name="number" value="00028" />
+      <option name="presentableId" value="LOCAL-00028" />
+      <option name="project" value="LOCAL" />
+      <updated>1588330691377</updated>
+    </task>
+    <option name="localTasksCounter" value="29" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -298,10 +304,10 @@
       <screen x="0" y="23" width="2541" height="1057" />
     </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="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588324036378">
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588330694571">
       <screen x="0" y="23" width="2541" height="1057" />
     </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="1588324036378" />
+    <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="1588330694571" />
     <state x="997" y="347" key="git4idea.merge.GitPullDialog" timestamp="1588322703667">
       <screen x="0" y="23" width="2541" height="1057" />
     </state>

src/components/Qrcode.css

@@ -18,10 +18,11 @@
 
 .Qr-subtitle {
     margin-top: -1em;
+    margin-bottom: 0;
 }
 
 .Qr-s-subtitle {
-    margin-top: 0;
+    margin-top: 0.25em;
     margin-bottom: 0;
 }
 
@@ -49,7 +50,7 @@
 .Qr-box {
     white-space: nowrap;
     display: flex;
-    padding: 10px 13px 0px 23px;
+    padding: 0px 13px 0px 23px;
 }
 
 @media (min-width: 1000px) {
@@ -117,27 +118,44 @@
     transition-duration: 0.2s;
 }
 
+tr {
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between ;
+}
+
 td:nth-child(1) {
-    font-size: 0.8em;
+    font-size: 1em;
+    white-space: nowrap;
 }
 
 td:nth-child(2) {
-    font-size: 0.8em;
+    white-space: nowrap;
+    font-size: 1em;
+}
+
+td {
+    padding-bottom: 10px;
 }
 
 .big-input {
     font-size: calc(10px + 2vmin);
+    margin-top: calc((10px + 2vmin) * 2);
     margin-bottom: calc((10px + 2vmin) * 2);
     border: rgba(0,0,0,0.12) solid 3px;
+    width: 20em;
+}
+
+.small-input {
+    font-size: 0.8em;
+    border: rgba(0,0,0,0.12) solid 2px;
 }
 
 .Qr-input {
-    font-size: 0.6em;
     caret-color: #44D7B6;
     padding: 0;
     line-height: 2em;
     box-sizing: border-box;
-    border: rgba(0,0,0,0.12) solid 2px;
     border-radius: 3em;
     outline: none;
     text-indent: 1em;

src/components/Qrcode.js

@@ -1,11 +1,16 @@
 import React from "react";
 import QrItem from './QrItem'
 import {getQrcodeData} from "../utils/qrcodeHandler";
-import './Qrcode.css'
+import './Qrcode.css';
+import { InputNumber } from 'antd';
 
 import QrRendererBase from './QrRendererBase'
 import QrRendererRound from './QrRendererRound'
 
+function onChange(value) {
+    console.log('changed', value);
+}
+
 function QrBoxList(props) {
     return (
         <React.Fragment>
@@ -79,13 +84,13 @@ class Qrcode extends React.Component {
                                 <tbody>
                                     <tr>
                                         <td>圆点大小</td>
-                                        <td><input className="Qr-input"
+                                        <td><input className="Qr-input small-input"
-                                                   placeholder="10" />&ensp;px</td>
+                                                   placeholder="10" /></td>
                                     </tr>
                                     <tr>
                                         <td>随机种</td>
-                                        <td><input className="Qr-input"
+                                        <td><input className="Qr-input small-input"
-                                                   placeholder="1" /></td>
+                                                   placeholder="10" /></td>
                                     </tr>
                                 </tbody>