Gallery 更新

This commit is contained in:
ciaochaos 2020-06-30 20:52:51 +08:00
parent 9867c842e3
commit bcbef2b69f
4 changed files with 69 additions and 60 deletions

View File

@ -141,12 +141,28 @@
transition-duration: 0.2s;
}
.Qr-gallery-image {
box-sizing: border-box;
height: calc((100vw - 56px) / 2);
margin-right: 10px;
border: var(--border-color) solid 1px;
font-size: 18px;
margin-top: 0.5em;
}
.Qr-s-gallery {
margin-bottom: 0;
}
@media (min-width: 500px) {
.Qr-item-image {
border: rgba(0,0,0,0.12) solid 3px;
width: 200px;
height: 200px;
}
.Qr-gallery-image {
height: 200px;
}
}
#dl-image {

View File

@ -12,7 +12,6 @@ import {connect} from 'react-redux';
import {loadDownloadData} from "../../actions";
import ReactGA from 'react-ga';
import {setScrollbarWidthProp} from "../../utils/util"
import PartGallery from "./PartGallery";
ReactGA.initialize('UA-165845289-1');
function App({ dispatch }) {
@ -40,7 +39,6 @@ function App({ dispatch }) {
<PartStylesViewer/>
<PartParams/>
<PartDownloadViewer updateDownloadData={updateDownloadData}/>
<PartGallery/>
<PartMore/>
<PartFooter/>
</div>

View File

@ -1,37 +0,0 @@
import React from 'react';
import './App.css';
import {isPC} from "../../utils/navigatorUtils";
import ScrollContainer from "react-indiana-drag-scroll";
import LazyLoad from 'react-lazy-load';
const pictures = [
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268'
]
const PartGallery = () => {
return (<div className="Qr-titled-nobg" id="Qr-style">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">Gallery</div>
<div className="Qr-s-subtitle Qr-rel">
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
</div>
</div>
<ScrollContainer
className="Qr-s"
hideScrollbars={false}
horizontal={true}
vertical={false}>
{
pictures.map((url) => (
<LazyLoad offsetVertical={200}>
<img src={url} width={800} height={300}/>
</LazyLoad>
)
)
}
</ScrollContainer>
</div>)
}
export default PartGallery;

View File

@ -3,35 +3,67 @@ import './App.css';
import LinkButton from "../link/LinkButton";
import GitHubButton from 'react-github-btn'
import LinkTrace from "../link/LinkTrace";
import {isPC} from "../../utils/navigatorUtils";
import ScrollContainer from "react-indiana-drag-scroll";
import LazyLoad from "react-lazy-load";
const pictures = [
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268',
'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253',
]
const PartMore = () => (
<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 className="Qr-article">
<p><GitHubButton href="https://github.com/ciaochaos/qrbtf" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
<h2>最新消息</h2>
<p><b>2020.6.29</b><br/>新的反馈渠道我们开始征集好玩的二维码设计啦可以是推送尾图海报等等快来上传吧<LinkTrace href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer" target="_blank">点击提交</LinkTrace></p>
<p><b>2020.6.24</b><br/>新增深色模式新增 SP 3 样式</p>
<p><b>2020.6.22</b><br/>新增 A a1A a2A b1A b2 样式添加样式描述新增桌面端横向拖拽滑动</p>
<p><b>2020.6.11</b><br/>QRBTF React 组件发布快在你的应用中引入 react-qrbtf <LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace></p>
<p><b>2020.5.23</b><br/>网站开源啦<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发给个 Star 支持一下不?查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦来写个二维码样式吧</LinkTrace></p>
<p><b>2020.5.22</b><br/>新增 C2 样式下载计数好像还不太稳定普通二维码上传颜色选择背景图片上传输入提示桌面端横向滚动提示</p>
<h2>为什么要做一个二维码生成器</h2>
<p>看这里<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</LinkTrace> </p>
<h2>这个生成器的特别之处在哪里</h2>
<p>普通的二维码样式单一不能与环境较好的融合这一个生成器有着 <b>丰富的参数化样式基于 SVG 的二维码生成能力</b> SVG </p>
<h2>如何使用</h2>
<p>从输入 URL 开始别忘了 http://)。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。</p>
<h2>我应该下载 SVG 还是 JPG</h2>
<p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中SVG 是一个优秀的标准的矢量图片格式各大设计软件如 Adobe IllustratorSketch 等都对 SVG 有着很好的支持用户可以在下载 SVG 后导入这些软件进行二次加工如删除中央的信息点 <b>放入自己的 Logo</b> JPG </p>
<h2>使用遇到了问题怎么反馈</h2>
<p>我们是两位大一的学生忙于学业可能在设计与开发的过程中有一些疏漏敬请谅解如果遇到浏览器兼容问题请暂时选择更换软件或设备尝试</p>
<p>请注意应用并不能保证二维码时刻可被识别需要多加测试</p>
<p>编写二维码样式是一个锻炼设计与开发JavaScript能力的绝佳机会如果你有兴趣和我们一起玩这个项目欢迎添加我的微信微信号<span style={{userSelect: "text"}}>nhciao</span> <LinkTrace href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> </p>
<div className="Qr-s-subtitle Qr-rel">
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
</div>
</div>
<ScrollContainer
className="Qr-s Qr-s-gallery"
hideScrollbars={false}
horizontal={true}
vertical={false}>
<div className="Qr-box">
{
pictures.map((url) => (
<LazyLoad offsetVertical={200}>
<img className="Qr-gallery-image" src={url} />
</LazyLoad>
)
)
}
</div>
</ScrollContainer>
<div className="title-margin">
<div className="Qr-article">
<div className="Qr-Centered">
<p><GitHubButton href="https://github.com/ciaochaos/qrbtf" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
<h2>最新消息</h2>
<p><b>2020.6.29</b><br/>新的反馈渠道我们开始征集好玩的二维码设计啦可以是推送尾图海报等等快来上传吧<LinkTrace href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer" target="_blank">点击提交</LinkTrace></p>
<p><b>2020.6.24</b><br/>新增深色模式新增 SP 3 样式</p>
<p><b>2020.6.22</b><br/>新增 A a1A a2A b1A b2 样式添加样式描述新增桌面端横向拖拽滑动</p>
<p><b>2020.6.11</b><br/>QRBTF React 组件发布快在你的应用中引入 react-qrbtf <LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace></p>
<p><b>2020.5.23</b><br/>网站开源啦<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发给个 Star 支持一下不?查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦来写个二维码样式吧</LinkTrace></p>
<p><b>2020.5.22</b><br/>新增 C2 样式下载计数好像还不太稳定普通二维码上传颜色选择背景图片上传输入提示桌面端横向滚动提示</p>
<h2>为什么要做一个二维码生成器</h2>
<p>看这里<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</LinkTrace> </p>
<h2>这个生成器的特别之处在哪里</h2>
<p>普通的二维码样式单一不能与环境较好的融合这一个生成器有着 <b>丰富的参数化样式基于 SVG 的二维码生成能力</b> SVG </p>
<h2>如何使用</h2>
<p>从输入 URL 开始别忘了 http://)。没有确认框,没有额外的页面,选择样式后自动更新,调整参数后下载即可。</p>
<h2>我应该下载 SVG 还是 JPG</h2>
<p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中SVG 是一个优秀的标准的矢量图片格式各大设计软件如 Adobe IllustratorSketch 等都对 SVG 有着很好的支持用户可以在下载 SVG 后导入这些软件进行二次加工如删除中央的信息点 <b>放入自己的 Logo</b> JPG </p>
<h2>使用遇到了问题怎么反馈</h2>
<p>我们是两位大一的学生忙于学业可能在设计与开发的过程中有一些疏漏敬请谅解如果遇到浏览器兼容问题请暂时选择更换软件或设备尝试</p>
<p>请注意应用并不能保证二维码时刻可被识别需要多加测试</p>
<p>编写二维码样式是一个锻炼设计与开发JavaScript能力的绝佳机会如果你有兴趣和我们一起玩这个项目欢迎添加我的微信微信号<span style={{userSelect: "text"}}>nhciao</span> <LinkTrace href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> </p>
</div>
</div>
</div>
<div className="Qr-Centered btn-row">
<div className="div-btn">
<LinkButton href={"https://www.yuque.com/qrbtf/docs/donate"} value={"打赏"} />