更多处新增介绍

This commit is contained in:
ciaochaos 2020-05-18 17:21:32 +08:00
parent a0c0055c0f
commit 39ff33e1a2
2 changed files with 62 additions and 2 deletions

View File

@ -1,3 +1,4 @@
.Qr-titled { .Qr-titled {
background-color: #f5f5f7; background-color: #f5f5f7;
box-sizing: border-box; box-sizing: border-box;
@ -461,11 +462,57 @@ a:hover {
font-size: 12px; 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) { @media (min-width: 500px) {
.note-font { .note-font {
color: #1D1D1F; color: #1D1D1F;
font-size: 14px; font-size: 14px;
} }
.Qr-article p {
font-size: 16px;
}
.Qr-article h2 {
font-size: 22px;
}
} }
select { select {

View File

@ -7,6 +7,20 @@ const PartMore = () => (
<div className="Qr-Centered title-margin"> <div className="Qr-Centered title-margin">
<div className="Qr-s-title">More</div> <div className="Qr-s-title">More</div>
<p className="Qr-s-subtitle">更多</p> <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 IllustratorSketch 等都对 SVG 有着很好的支持用户可以在下载 SVG 后导入这些软件进行二次加工如删除中央的信息点 <b>放入自己的 Logo</b> JPG </p>
<h2>使用遇到了问题怎么反馈</h2>
<p>我们是两位大一的学生忙于学业可能在设计与开发的过程中有一些疏漏敬请谅解如果遇到浏览器兼容问题请暂时选择更换软件或设备尝试经常有人问怎么把已有的公众号二维码上传很抱歉的是目前我们并没有开发这个功能将来一定实现如有需要请暂时使用第三方软件解码也有人问为什么电脑端右边的样式没显示全不是 bug只是我们懒得做切换滑动按钮目前请按住 Shift 使用滚轮在样式区域滚动一定能行</p>
<p>请注意应用并不能保证二维码时刻可被识别需要多加测试</p>
<p>如果你有兴趣和我们一起玩这个项目<b>设计样式开发应用</b></p>
</div>
</div> </div>
<div className="Qr-Centered btn-row"> <div className="Qr-Centered btn-row">
<div className="div-btn"> <div className="div-btn">
@ -14,8 +28,7 @@ const PartMore = () => (
<LinkButton href={"https://www.yuque.com/qrbtf/topics"} value={"问题反馈"} /> <LinkButton href={"https://www.yuque.com/qrbtf/topics"} value={"问题反馈"} />
</div> </div>
<div className="div-btn"> <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> </div>
</div> </div>