From 3706bd5b9cc549f92df05b64dd5d9760ac84e9fb Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Tue, 23 Jun 2020 21:58:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Qrcode.css        |  7 ++++++-
 src/components/app/PartHeader.js |  3 +--
 src/components/svg/QrbtfLogo.js  | 14 ++++++++++++--
 src/index.css                    |  2 ++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 1b6b48f..7cffe75 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -11,14 +11,19 @@
     padding-bottom: calc((10px + 2vmin) * 2);
 }
 
+.Qr-title-svg {
+    height: 1.4em;
+}
+
 .Qr-title {
+    color: var(--b-w);
     margin-top: 2.25em;
     font-weight: bold;
     font-size: 2.25em;
 }
 
 .Qr-subtitle {
-    margin-top: -1em;
+    margin-top: -1.5em;
     margin-bottom: 0;
     line-height: 2em;
 }
diff --git a/src/components/app/PartHeader.js b/src/components/app/PartHeader.js
index d2319a5..4ba4e0a 100644
--- a/src/components/app/PartHeader.js
+++ b/src/components/app/PartHeader.js
@@ -6,8 +6,7 @@ import QrbtfLogo from "../svg/QrbtfLogo";
 const PartHeader = () => (
     <div className="Qr-Centered">
         <div>
-            <QrbtfLogo />
-            <h1 className="Qr-title">&ensp;</h1>
+            <h1 className="Qr-title"><QrbtfLogo className="Qr-title-svg" /></h1>
         </div>
         <p className="Qr-subtitle">参数化二维码生成器 <sup className="Gray">测试版</sup></p>
         <InputText/>
diff --git a/src/components/svg/QrbtfLogo.js b/src/components/svg/QrbtfLogo.js
index 7ca55bf..be497cb 100644
--- a/src/components/svg/QrbtfLogo.js
+++ b/src/components/svg/QrbtfLogo.js
@@ -150,7 +150,7 @@ function QrbtfLogo(props) {
                     d="M1810.827 342.464a107.986 107.986 0 00-54.74-18.316 108 108 0 1054.74 197.388"
                 />
             </g>
-            <g>
+            <g opacity="0">
                 <animateTransform
                     attributeName="transform"
                     type="translate"
@@ -187,7 +187,17 @@ function QrbtfLogo(props) {
                     dur="1.75s"
                     additive="sum"
                 />
-                <path d="M1553.483 530.172a45.826 45.826 0 00-62.697-42.61 45.823 45.823 0 00-28.959 42.61A45.823 45.823 0 001507.655 576a45.823 45.823 0 0045.828-45.828z" />
+                <animate
+                    attributeType="CSS"
+                    attributeName="opacity"
+                    begin="0.1s"
+                    values="0; 1"
+                    dur="0.1s"
+                    fill="freeze"
+                    calcMode="spline"
+                    keySplines="0.8 0 0.2 1"
+                />
+                <path fill="currentColor" d="M1553.483 530.172a45.826 45.826 0 00-62.697-42.61 45.823 45.823 0 00-28.959 42.61A45.823 45.823 0 001507.655 576a45.823 45.823 0 0045.828-45.828z" />
             </g>
             <g fill="none" strokeWidth={18}>
                 <g strokeDasharray="235,235" strokeDashoffset={235}>
diff --git a/src/index.css b/src/index.css
index 7ee03c6..365c9a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -19,6 +19,7 @@
     --qr-opacity: calc(1);
     --qr-opacity-hover: calc(1);
     --upload-color: rgba(102,102,102,1);
+    --b-w: rgba(0,0,0,1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,6 +37,7 @@
         --qr-opacity: calc(0.5);
         --qr-opacity-hover: calc(0.65);
         --upload-color: rgba(150,150,150,1);
+        --b-w: rgba(255,255,255,1);
     }
 }