diff --git a/public/img/dsj.jpg b/public/img/dsj.jpg
new file mode 100644
index 0000000..9400a8c
Binary files /dev/null and b/public/img/dsj.jpg differ
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 1f4b786..02ffd89 100644
--- a/src/components/Qrcode.css
+++ b/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;
diff --git a/src/components/renderer/Renderer25D.js b/src/components/renderer/Renderer25D.js
index d11080a..b9dbe6f 100644
--- a/src/components/renderer/Renderer25D.js
+++ b/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>
+);
\ No newline at end of file
diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js
index 1e0e29c..6cc115b 100644
--- a/src/components/renderer/RendererBase.js
+++ b/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>
 );
diff --git a/src/components/renderer/RendererDSJ.js b/src/components/renderer/RendererDSJ.js
index 90756b5..291da90 100644
--- a/src/components/renderer/RendererDSJ.js
+++ b/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
diff --git a/src/components/renderer/RendererFunc.js b/src/components/renderer/RendererFunc.js
index 2e3db85..dc5cf0f 100644
--- a/src/components/renderer/RendererFunc.js
+++ b/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>
+);
diff --git a/src/components/renderer/RendererImage.js b/src/components/renderer/RendererImage.js
index a0a200b..f2de38b 100644
--- a/src/components/renderer/RendererImage.js
+++ b/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>
+);
\ No newline at end of file
diff --git a/src/components/renderer/RendererLine.js b/src/components/renderer/RendererLine.js
index f1d3b02..ed43b9a 100644
--- a/src/components/renderer/RendererLine.js
+++ b/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>
+);
\ No newline at end of file
diff --git a/src/components/renderer/RendererRandRect.js b/src/components/renderer/RendererRandRect.js
index c7b89b9..fcb8804 100644
--- a/src/components/renderer/RendererRandRect.js
+++ b/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>
+);
\ No newline at end of file
diff --git a/src/components/renderer/RendererResImage.js b/src/components/renderer/RendererResImage.js
index b1491e7..20de22f 100644
--- a/src/components/renderer/RendererResImage.js
+++ b/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>
+);
\ No newline at end of file
diff --git a/src/components/style/Style.js b/src/components/style/Style.js
index fe5683b..0d57717 100644
--- a/src/components/style/Style.js
+++ b/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>
 );