Gallery 更新

src/components/Qrcode.css

@@ -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 {

src/components/app/App.js

@@ -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>

src/components/app/PartGallery.js

@@ -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;

src/components/app/PartMore.js

@@ -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">