From 6870b8b127179c7280c4932b2483c55f19ed9930 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Thu, 14 May 2020 23:10:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=88=86=E6=A0=8F=E3=80=81?=
=?UTF-8?q?=E5=BE=AE=E4=BF=A1=E7=AB=AF=E5=9B=BE=E7=89=87=E4=B8=8B=E8=BD=BD?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Qrcode.css | 56 +++++++++++++++++------
src/components/app/PartDownload.js | 23 ++++++----
src/components/app/PartParams.js | 8 +---
src/components/param/ParamColor.js | 2 +-
src/components/param/ParamCorrectLevel.js | 32 +++++++------
src/components/param/ParamList.js | 22 +++++----
src/components/renderer/RendererImage.js | 20 ++++----
7 files changed, 100 insertions(+), 63 deletions(-)
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 5520677..3f5b84b 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -103,9 +103,38 @@
@media (min-width: 500px) {
.Qr-item-image {
border: rgba(0,0,0,0.12) solid 3px;
+ width: 200px;
+ height: 200px;
}
}
+#dl-image {
+ padding-top: 20px;
+}
+
+#dl-image-inner {
+ overflow: hidden;
+ display: flex;
+ border-radius: 20px;
+ box-sizing: border-box;
+ border: rgba(0,0,0,0.12) solid 2px;
+ width: calc((100vw - 56px) / 2);
+ height: calc((100vw - 56px) / 2);
+}
+
+@media (min-width: 500px) {
+ #dl-image-inner {
+ border: rgba(0,0,0,0.12) solid 3px;
+ width: 200px;
+ height: 200px;
+ }
+}
+
+#dl-image-inner-jpg {
+ width: 100%;
+ height: 100%;
+}
+
.Qr-item-image-inner {
justify-content: center;
-webkit-transition-timing-function: ease-in-out;
@@ -118,13 +147,6 @@
-moz-transform: translateZ(0);
}
-@media (min-width: 500px) {
- .Qr-item-image {
- width: 200px;
- height: 200px;
- }
-}
-
.Qr-item-selected .Qr-item-image {
border-color: #44D7B6 !important;
}
@@ -177,10 +199,6 @@ td {
padding: 0 0 10px 0;
}
-table {
- margin-bottom: -10px;
-}
-
.big-input {
font-size: calc(10px + 2vmin);
margin-top: calc((10px + 2vmin) * 2);
@@ -301,16 +319,26 @@ input[type="number"]{
.Qr-table {
+ max-width: 410px;
width: 100%;
border-spacing: 0;
- margin-top: 23px;
}
.Qr-div-table {
- max-width: 410px;
+ margin-bottom: -10px;
+ display: block;
}
-.btn-row:nth-last-child(1) {
+@media (min-width: 886px) {
+ .Qr-div-table {
+ display: inline-flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: -10px;
+ }
+}
+
+.btn-row {
margin-bottom: -10px;
}
diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
index e0aea5b..719be88 100644
--- a/src/components/app/PartDownload.js
+++ b/src/components/app/PartDownload.js
@@ -5,7 +5,7 @@ import {isWeiXin} from "../../utils/util";
const WxMessage = () => {
if (isWeiXin()) {
- return
当前客户端不支持下载,请长按图片保存。
+ return 当前客户端不支持下载 SVG,
请下载 JPG 并长按二维码保存。
}
return null
}
@@ -20,20 +20,25 @@ const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => {
下载二维码 — {value}
-
-
-
+
+
+
+
+
+
{
- imgData.length > 0 ?
: null
+ imgData.length > 0 ?
{
+ onJpgDownload().then(res => setImgData(res));
+ }}>
: null
}
diff --git a/src/components/app/PartParams.js b/src/components/app/PartParams.js
index 3ed0310..968ecda 100644
--- a/src/components/app/PartParams.js
+++ b/src/components/app/PartParams.js
@@ -11,12 +11,8 @@ const PartParams = () => (
diff --git a/src/components/param/ParamColor.js b/src/components/param/ParamColor.js
index b7ec898..b7231c4 100644
--- a/src/components/param/ParamColor.js
+++ b/src/components/param/ParamColor.js
@@ -33,7 +33,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
return (
{
displayColorPicker ?
diff --git a/src/components/param/ParamCorrectLevel.js b/src/components/param/ParamCorrectLevel.js
index aa2fd19..9f0b75c 100644
--- a/src/components/param/ParamCorrectLevel.js
+++ b/src/components/param/ParamCorrectLevel.js
@@ -3,20 +3,24 @@ import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamCorrectLevel = ({value, onChange}) => (
-
- 容错率 |
-
-
- |
-
+
+
+
+ 容错率 |
+
+
+ |
+
+
+
)
ParamCorrectLevel.propTypes = {
diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js
index 2e0dc1c..9219612 100644
--- a/src/components/param/ParamList.js
+++ b/src/components/param/ParamList.js
@@ -16,15 +16,19 @@ const mapTypeToComponent = ({
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
return (
-
- {item.key} |
-
- {React.createElement(mapTypeToComponent[item.type], {
- rendererIndex: rendererIndex,
- paramIndex: paramIndex
- })}
- |
-
+
+
+
+ {item.key} |
+
+ {React.createElement(mapTypeToComponent[item.type], {
+ rendererIndex: rendererIndex,
+ paramIndex: paramIndex
+ })}
+ |
+
+
+
);
})
)
diff --git a/src/components/renderer/RendererImage.js b/src/components/renderer/RendererImage.js
index c2a5e2f..a34e233 100644
--- a/src/components/renderer/RendererImage.js
+++ b/src/components/renderer/RendererImage.js
@@ -10,10 +10,10 @@ function listPoints(qrcode, params) {
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
- let type = params[0];
- let size = params[1] / 100 / 3;
- let opacity = params[2] / 100;
- let posType = params[3];
+ let type = params[1];
+ let size = params[2] / 100 / 3;
+ let opacity = params[3] / 100;
+ let posType = params[4];
let id = 0;
const vw = [3, -3];
@@ -21,7 +21,7 @@ function listPoints(qrcode, params) {
if (size <= 0) size = 1.0
- pointList.push(
);
+ pointList.push();
for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) {
@@ -95,6 +95,11 @@ function listPoints(qrcode, params) {
function getParamInfo() {
return [
+ {
+ type: ParamTypes.UPLOAD_BUTTON,
+ key: '背景图片',
+ default: data,
+ },
{
type: ParamTypes.SELECTOR,
key: '信息点样式',
@@ -124,11 +129,6 @@ function getParamInfo() {
"行星",
]
},
- {
- type: ParamTypes.UPLOAD_BUTTON,
- key: '背景图片',
- default: data,
- }
];
}