gallery
This commit is contained in:
CPunisher
parent
37cdeff5f9
commit
bf7ab74905
|
|
@ -14,6 +14,7 @@
|
|||
"react-ga": "^3.0.0",
|
||||
"react-github-btn": "^1.2.0",
|
||||
"react-indiana-drag-scroll": "^1.6.1",
|
||||
"react-lazy-load": "^3.0.13",
|
||||
"react-redux": "^7.2.0",
|
||||
"react-scripts": "3.4.1",
|
||||
"redux": "^4.0.5"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ 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 }) {
|
||||
|
|
@ -39,6 +40,7 @@ function App({ dispatch }) {
|
|||
<PartStylesViewer/>
|
||||
<PartParams/>
|
||||
<PartDownloadViewer updateDownloadData={updateDownloadData}/>
|
||||
<PartGallery/>
|
||||
<PartMore/>
|
||||
<PartFooter/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
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;
|
||||
27
yarn.lock
27
yarn.lock
|
|
@ -4268,6 +4268,11 @@ eventemitter3@^4.0.0:
|
|||
resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.4.tgz?cache=0&sync_timestamp=1589283150629&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
|
||||
integrity sha1-tUY6zmNaCD0Bi9x8kXtMXxCoU4Q=
|
||||
|
||||
eventlistener@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.npm.taobao.org/eventlistener/download/eventlistener-0.0.1.tgz#ed2baabb852227af2bcf889152c72c63ca532eb8"
|
||||
integrity sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg=
|
||||
|
||||
events@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npm.taobao.org/events/download/events-3.1.0.tgz?cache=0&sync_timestamp=1578498298945&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fevents%2Fdownload%2Fevents-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
|
||||
|
|
@ -6567,6 +6572,11 @@ lodash.clonedeep@4.5.0:
|
|||
resolved "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
|
||||
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
|
||||
|
||||
lodash.debounce@^4.0.0:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
||||
|
||||
lodash.memoize@^4.1.2:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
||||
|
|
@ -6597,6 +6607,11 @@ lodash.templatesettings@^4.0.0:
|
|||
dependencies:
|
||||
lodash._reinterpolate "^3.0.0"
|
||||
|
||||
lodash.throttle@^4.0.0:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
|
||||
|
||||
lodash.uniq@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
|
|
@ -8495,7 +8510,7 @@ prompts@^2.0.1:
|
|||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.4"
|
||||
|
||||
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
|
||||
|
|
@ -8744,6 +8759,16 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i
|
|||
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
|
||||
|
||||
react-lazy-load@^3.0.13:
|
||||
version "3.0.13"
|
||||
resolved "https://registry.npm.taobao.org/react-lazy-load/download/react-lazy-load-3.0.13.tgz#3b0a92d336d43d3f0d73cbe6f35b17050b08b824"
|
||||
integrity sha1-OwqS0zbUPT8Nc8vm81sXBQsIuCQ=
|
||||
dependencies:
|
||||
eventlistener "0.0.1"
|
||||
lodash.debounce "^4.0.0"
|
||||
lodash.throttle "^4.0.0"
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-redux@^7.2.0:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npm.taobao.org/react-redux/download/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
|
||||
|
|
|
|||
Loading…
Reference in New Issue