Gallery 更新
This commit is contained in:
ciaochaos
parent
9867c842e3
commit
bcbef2b69f
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -3,13 +3,43 @@ 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-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>
|
||||
|
|
@ -30,6 +60,8 @@ const PartMore = () => (
|
|||
<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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue