From 39ff33e1a2c09bb3d25a02c7933bb9baa7684352 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Mon, 18 May 2020 17:21:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E5=A4=84=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Qrcode.css      | 47 ++++++++++++++++++++++++++++++++++
 src/components/app/PartMore.js | 17 ++++++++++--
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 97b1289..31a77e0 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -1,3 +1,4 @@
+
 .Qr-titled {
     background-color: #f5f5f7;
     box-sizing: border-box;
@@ -461,11 +462,57 @@ a:hover {
     font-size: 12px;
 }
 
+.Qr-article {
+    word-wrap: break-word;
+    margin-top: calc((10px + 1vmin) * 2);
+    margin-bottom: calc((10px + 2vmin) * 2);
+    border-spacing: 0;
+}
+
+.Qr-article p {
+    font-size: 14px;
+    line-height: 1.7em;
+    color: #636366;
+    letter-spacing: 0.05em;
+}
+
+.Qr-article p b {
+    font-weight: bold;
+    color: #000000;
+}
+
+.Qr-article p a {
+    font-weight: bold;
+    padding: 1px 0;
+    color: #000000;
+    border-bottom: 1px solid #3e4ca3;
+}
+
+.Qr-article p a:hover {
+    color: #000000;
+    border-bottom: 1px solid #3e4ca3;
+    text-decoration: none;
+}
+
+.Qr-article h2 {
+    font-size: 18px;
+    line-height: 2.5em;
+    letter-spacing: 0.05em;
+}
+
 @media (min-width: 500px) {
     .note-font {
         color: #1D1D1F;
         font-size: 14px;
     }
+
+    .Qr-article p {
+        font-size: 16px;
+    }
+
+    .Qr-article h2 {
+        font-size: 22px;
+    }
 }
 
 select {
diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js
index b89b139..ff2a7bf 100644
--- a/src/components/app/PartMore.js
+++ b/src/components/app/PartMore.js
@@ -7,6 +7,20 @@ const PartMore = () => (
         <div className="Qr-Centered title-margin">
             <div className="Qr-s-title">More</div>
             <p className="Qr-s-subtitle">更多</p>
+            <div className="Qr-article">
+                <h2>为什么要做一个二维码生成器？</h2>
+                <p>看这里，我写的 <a href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">文章</a>。</p>
+                <h2>这个生成器的特别之处在哪里？</h2>
+                <p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
+                <h2>如何使用？</h2>
+                <p>从输入 URL 开始。没有确认框，没有额外的页面，选择样式后自动更新，调整参数后下载即可。</p>
+                <h2>我应该下载 SVG 还是 JPG？</h2>
+                <p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG 有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。</p>
+                <h2>使用遇到了问题，怎么反馈？</h2>
+                <p>我们是两位大一的学生，忙于学业，可能在设计与开发的过程中有一些疏漏，敬请谅解。如果遇到浏览器兼容问题，请暂时选择更换软件或设备尝试。经常有人问，怎么把已有的公众号二维码上传，很抱歉的是，目前我们并没有开发这个功能，将来一定实现，如有需要请暂时使用第三方软件解码。也有人问，为什么电脑端右边的样式没显示全，不是 bug，只是我们懒得做切换滑动按钮，目前请按住 Shift 使用滚轮在样式区域滚动，一定能行。</p>
+                <p>请注意，应用并不能保证二维码时刻可被识别，需要多加测试。</p>
+                <p>如果你有兴趣和我们一起玩这个项目，<b>设计样式、开发应用</b>，欢迎点击下方的按钮加微信联系我们！</p>
+            </div>
         </div>
         <div className="Qr-Centered btn-row">
             <div className="div-btn">
@@ -14,8 +28,7 @@ const PartMore = () => (
                 <LinkButton href={"https://www.yuque.com/qrbtf/topics"} value={"问题反馈"} />
             </div>
             <div className="div-btn">
-                <LinkButton href={"https://www.yuque.com/qrbtf/docs/dev"} value={"开发与设计"} />
-                <LinkButton href={"https://www.yuque.com/qrbtf/docs/coop"} value={"商业合作"} />
+                <LinkButton href={"https://www.yuque.com/qrbtf/docs/coop"} value={"合作咨询"} />
             </div>
         </div>
     </div>