样式介绍

src/components/Qrcode.css

@@ -68,6 +68,7 @@
     width: 100vw;
     white-space: nowrap;
     display: flex;
+    margin-bottom: calc((-10px - 2vmin)/2);
 }
 
 .Qr-s::-webkit-scrollbar {
@@ -194,6 +195,10 @@
     color: #000000;
 }
 
+.Qr-item-selected .Qr-item-desc-inner {
+    opacity: 1;
+}
+
 .Qr-item-detail {
     color: rgba(0,0,0,0.3);
     margin-top: 5px;
@@ -207,6 +212,48 @@
     transition-duration: 0.2s;
 }
 
+.Qr-item-desc {
+}
+
+
+.Qr-item-desc-inner {
+    opacity: 0;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: normal;
+        width: calc((100vw - 56px) / 2);
+    text-align: left;
+    font-size: 12px;
+    color: rgba(0,0,0,0.6);
+    -webkit-transition-timing-function: ease-in-out;
+    -moz-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.2s; /* Safari */
+    -moz-animation-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+@media (min-width: 500px) {
+    .Qr-item-desc-inner {
+        width: 200px;
+        font-size: 14px;
+    }
+}
+
+
+.Qr-item-desc a {
+    font-weight: bold;
+    padding: 0px 0;
+    color: #000000;
+    border-bottom: 1px solid #000000;
+}
+
+.Qr-item-desc a:hover {
+    color: #000000;
+    border-bottom: 1px solid #000000;
+    text-decoration: none;
+}
+
 tr {
     width: 100%;
     display: inline-flex;

src/components/renderer/Renderer25D.js

@@ -2,6 +2,7 @@ import React from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
+import RendererResImage from "./RendererResImage";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -91,3 +92,7 @@ const Renderer25D = createRenderer({
 })
 
 export default Renderer25D
+
+Renderer25D.detail = (
+    <div>通向三维的半路。可能有一点点难以识别。</div>
+);

src/components/renderer/RendererBase.js

@@ -232,14 +232,13 @@ export const RendererRandRound = createRenderer({
 });
 
 RendererRect.detail = (
-    <p>生成矩形<LinkTrace href="https://zh.wikipedia.org/wiki/QR%E7%A2%BC">二维码</LinkTrace>。</p>
+    <div>最基本的二维码，也有有趣的玩法。</div>
 );
 
 RendererRound.detail = (
-    <p>生成圆形二维码。</p>
+    <div>大厂喜欢的玩法，非常适合在中间放置 Logo。</div>
 );
 
-
 RendererRandRound.detail = (
-    <p>生成随机点圆形二维码。</p>
+    <div>随机圆点，混乱与秩序。</div>
 );

src/components/renderer/RendererDSJ.js

@@ -2,6 +2,8 @@ import React from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
+import LinkTrace from "../link/LinkTrace";
+import {RendererRect} from "./RendererBase";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -193,4 +195,8 @@ const RenderDSJ = createRenderer({
     getParamInfo: getParamInfo,
 })
 
+RenderDSJ.detail = (
+    <div>复刻了 DSJ 的 <LinkTrace href="https://qrbtf.com/img/dsj.jpg" rel="noopener noreferrer" target="_blank">手工作品</LinkTrace>，向时代致敬！</div>
+);
+
 export default RenderDSJ

src/components/renderer/RendererFunc.js

@@ -2,6 +2,8 @@ import React  from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
+import LinkTrace from "../link/LinkTrace";
+import RenderDSJ from "./RendererDSJ";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -231,3 +233,11 @@ export const RendererFuncB= createRenderer({
     listPoints: listPoints,
     getParamInfo: getParamInfoFuncB,
 });
+
+RendererFuncA.detail = (
+    <div>点干扰。</div>
+);
+
+RendererFuncB.detail = (
+    <div>线干扰。</div>
+);

src/components/renderer/RendererImage.js

@@ -3,6 +3,7 @@ import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
 import {defaultImage} from "../../constant/References";
+import {RendererRandRound} from "./RendererBase";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -158,3 +159,7 @@ const RendererImage = createRenderer({
 
 
 export default RendererImage
+
+RendererImage.detail = (
+    <div>加了背景图，试试看还能扫描吗？</div>
+);

src/components/renderer/RendererLine.js

@@ -2,6 +2,8 @@ import React  from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
+import LinkTrace from "../link/LinkTrace";
+import RenderDSJ from "./RendererDSJ";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -223,3 +225,7 @@ export const RendererLine= createRenderer({
     listPoints: listPoints,
     getParamInfo: getParamInfoLine,
 });
+
+RendererLine.detail = (
+    <div>连连看。可选方向。</div>
+);

src/components/renderer/RendererRandRect.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {rand} from "../../utils/util";
 import {createRenderer} from "../style/Renderer";
+import {RendererLine} from "./RendererLine";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -47,3 +48,7 @@ const RendererRandRect = createRenderer({
 })
 
 export default RendererRandRect
+
+RendererRandRect.detail = (
+    <div>有一点点骚的配色，很适合你。</div>
+);

src/components/renderer/RendererResImage.js

@@ -3,6 +3,7 @@ import {gamma} from "../../utils/imageUtils";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {defaultResImage} from "../../constant/References";
+import RendererRandRect from "./RendererRandRect";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -185,3 +186,8 @@ const RendererResImage = ({qrcode, params, setParamInfo}) => {
 
 
 export default RendererResImage
+
+
+RendererResImage.detail = (
+    <div>满满科技感的重采样二值化像素点阵，有点东西。</div>
+);

src/components/style/Style.js

@@ -17,8 +17,10 @@ const Style = ({ value, renderer, selected, details, onSelected }) => (
         <div className="Qr-item-detail">
             {value}
         </div>
-        <div className="Qr-item-detail">
-            {details}
+        <div className="Qr-item-desc">
+            <div className="Qr-item-desc-inner">
+                {details}
+            </div>
         </div>
     </div>
 );