新增更多与 footer 静态组件

.idea/workspace.xml

@@ -12,8 +12,8 @@
   <component name="ChangeListManager">
     <list default="true" id="78c692f3-8e9f-49c7-86c1-0c5e9d711b1f" name="Default Changelist" comment="静态参数调节组件初步完成">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" 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>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -85,7 +85,8 @@
       <updated>1588240852207</updated>
       <workItem from="1588240855414" duration="15673000" />
       <workItem from="1588305721761" duration="31311000" />
-      <workItem from="1588351235673" duration="389000" />
+      <workItem from="1588351235673" duration="578000" />
+      <workItem from="1588418867838" duration="1493000" />
     </task>
     <task id="LOCAL-00001" summary="0.1.0.1">
       <created>1588308749650</created>
@@ -374,7 +375,14 @@
       <option name="project" value="LOCAL" />
       <updated>1588347988345</updated>
     </task>
-    <option name="localTasksCounter" value="42" />
+    <task id="LOCAL-00042" summary="修复按钮动画、添加指针样式、添加桌面端滑动区域右边距">
+      <created>1588351715706</created>
+      <option name="number" value="00042" />
+      <option name="presentableId" value="LOCAL-00042" />
+      <option name="project" value="LOCAL" />
+      <updated>1588351715706</updated>
+    </task>
+    <option name="localTasksCounter" value="43" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -396,17 +404,18 @@
     <MESSAGE value="0.1.0.1" />
     <MESSAGE value="0.1.0.2" />
     <MESSAGE value="静态参数调节组件初步完成" />
-    <option name="LAST_COMMIT_MESSAGE" value="" />
+    <MESSAGE value="修复按钮动画、添加指针样式、添加桌面端滑动区域右边距" />
+    <option name="LAST_COMMIT_MESSAGE" value="修复按钮动画、添加指针样式、添加桌面端滑动区域右边距" />
   </component>
   <component name="WindowStateProjectService">
     <state x="1161" y="421" key="#Notifications" timestamp="1588307553058">
       <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="1588347991892">
+    <state x="870" y="291" key="Vcs.Push.Dialog.v2" timestamp="1588351718130">
       <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="1588347991892" />
+    <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="1588351718130" />
     <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

@@ -1,18 +1,10 @@
 .Qr-titled {
-    background-color: rgba(0,0,0,0.06);
+    background-color: #f5f5f7;
     box-sizing: border-box;
-    border-top: rgba(0,0,0,0.06) solid 2px;
-    border-bottom: rgba(0,0,0,0.06) solid 2px;
     padding-top: calc((10px + 2vmin) * 2);
     padding-bottom: calc((10px + 2vmin) * 2);
 }
 
-@media (min-width: 500px) {
-    .Qr-titled {
-        border-top: rgba(0,0,0,0.06) solid 3px;
-        border-bottom: rgba(0,0,0,0.06) solid 3px;
-    }
-}
 
 .Qr-titled-nobg {
     padding-top: calc((10px + 2vmin) * 2);
@@ -119,12 +111,6 @@
     border-color: #44D7B6;
 }
 
-.Qr-item:active .Qr-item-image {
-    -webkit-transition-duration: 0s; /* Safari */
-    transition-duration: 0s;
-    border-color: #3BBC9F;
-}
-
 .Qr-item:hover .Qr-item-image-inner {
     opacity: 1;
 }
@@ -310,3 +296,21 @@ table {
         height: 2em;
     }
 }
+
+.Qr-footer {
+    font-size: 14px;
+    margin-bottom: -4px;
+}
+
+.Qr-footer div {
+    margin-bottom: 4px;
+}
+
+a {
+    color: currentColor;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

src/components/Qrcode.js

@@ -113,6 +113,23 @@ class Qrcode extends React.Component {
 
                     </div>
                 </div>
+                <div className="Qr-titled-nobg">
+                    <div className="Qr-Centered title-margin">
+                        <div className="Qr-s-title">More</div>
+                        <p className="Qr-s-subtitle">更多</p>
+                    </div>
+                    <div className="Qr-Centered">
+                        <div className="div-btn">
+                            <button className="dl-btn">提交样式</button>
+                        </div>
+                    </div>
+                </div>
+                <div className="Qr-titled">
+                    <div className="Qr-Centered Qr-footer">
+                        <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener" target="_blank" data-pjax-state="">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener" target="_blank" data-pjax-state="">CPunisher</a></div>
+                        <div><a href="http://www.beian.miit.gov.cn/" rel="noopener" target="_blank" data-pjax-state="">浙 ICP 备 19005869 号 </a></div>
+                    </div>
+                </div>
             </div>
         );
     }