diff --git a/src/actions/index.js b/src/actions/index.js
index 5b8296f..16271c7 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -10,9 +10,9 @@ export const changeStyle = index => ({
     index
 })
 
-export const createParam = (rendererIndex, params) => ({
+export const createParam = (paramInfo, paramValue) => ({
     type: actionTypes.CREATE_PARAM,
-    rendererIndex, params
+    paramInfo, paramValue
 })
 
 export const changeParam = (rendererIndex, paramIndex, value) => ({
diff --git a/src/components/QrRendererBlank.js b/src/components/QrRendererBlank.js
deleted file mode 100644
index be3c819..0000000
--- a/src/components/QrRendererBlank.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import './Qrcode.css'
-import {defaultRenderer} from "../utils/util";
-
-export default class QrRendererBlank extends React.Component {
-    render() {
-        return defaultRenderer(this.props.qrcode);
-    }
-}
-
diff --git a/src/components/QrRendererRandRound.js b/src/components/QrRendererRandRound.js
deleted file mode 100644
index 109122f..0000000
--- a/src/components/QrRendererRandRound.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from "react";
-import './Qrcode.css'
-import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {rand, defaultRenderer} from "../utils/util";
-
-function listPoint(props) {
-    if (!props.qrcode) return []
-
-    const qrcode = props.qrcode;
-    const nCount = qrcode.getModuleCount();
-    const typeTable = getTypeTable(qrcode);
-    const pointList = new Array(nCount);
-
-    let type = props.params[0];
-    let size = props.params[1] / 100;
-    let opacity = props.params[2] / 100;
-    let posType = props.params[3];
-    let id = 0;
-
-    const vw = [3, -3];
-    const vh = [3, -3];
-
-    if (size <= 0) size = 1.0
-
-    for (let x = 0; x < nCount; x++) {
-        for (let y = 0; y < nCount; y++) {
-            if (qrcode.isDark(x, y) == false) continue;
-
-            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
-            }
-            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
-                } else if (posType == 1) {
-                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                } else if (posType == 2) {
-                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                    for (let w = 0; w < vw.length; w++) {
-                        pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
-                    }
-                    for (let h = 0; h < vh.length; h++) {
-                        pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
-                    }
-                }
-            }
-            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
-                }
-            }
-            else {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
-            }
-        }
-    }
-
-    return pointList;
-}
-
-export default class QrRendererRandRound extends React.Component {
-    constructor(props) {
-        super(props);
-        if (this.props.setParamInfo) {
-            this.props.setParamInfo([
-                    {
-                        key: '信息点样式',
-                        default: 2,
-                        choices: [
-                            "矩形",
-                            "圆形",
-                            "随机"
-                        ]
-                    },
-                    {
-                        key: '信息点缩放',
-                        default: 80
-                    },
-                    {
-                        key: '信息点不透明度',
-                        default: 100,
-                    },
-                    {
-                        key: '定位点样式',
-                        default: 2,
-                        choices: [
-                            "矩形",
-                            "圆形",
-                            "行星",
-                        ]
-                    },
-                ]
-            );
-        }
-    }
-
-    render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
-    }
-}
-
diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js
index 39a8f74..b0c42dc 100644
--- a/src/components/Qrcode.js
+++ b/src/components/Qrcode.js
@@ -17,70 +17,7 @@ import QrRendererBlank from "./QrRendererBlank";
 import QrRendererRandRect from "./QrRendererRandRect";
 import QrRendererDSJ from "./QrRendererDSJ";
 
-
-const styleList = [
-    {value: "A1", renderer: QrRendererBase},
-    {value: "A2", renderer: QrRendererRound},
-    {value: "A3", renderer: QrRendererRandRound},
-    {value: "SP — 1", renderer: QrRendererDSJ},
-    {value: "SP — 2", renderer: QrRendererRandRect},
-    {value: "C2", renderer: QrRendererBlank},
-    {value: "D1", renderer: QrRendererBlank},
-    {value: "D2", renderer: QrRendererBlank},
-];
-
-
 class Qrcode extends React.Component {
-    paramInfoBuffer;
-    paramValueBuffer;
-    constructor(props) {
-        super(props);
-        this.state = {
-            text: '',
-            selectedIndex: 0,
-            options: {text: ''},
-            qrcode: null,
-            paramInfo: [],
-            paramValue: [],
-            correctLevel: 0
-        };
-        this.paramInfoBuffer = new Array(16).fill(new Array(16));
-        this.paramValueBuffer = new Array(16).fill(new Array(16));
-    }
-
-    componentDidMount() {
-        const text = 'https://qrbtf.com/';
-        this.setState({
-            paramInfo: this.paramInfoBuffer,
-            paramValue: this.paramValueBuffer,
-            text: text,
-            options: {text: text},
-            qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})
-        });
-    }
-
-    setParamInfo = (index) => {
-        const _this = this;
-        return function (params) {
-            _this.paramInfoBuffer[index] = params;
-            _this.paramValueBuffer[index] = params.map(p => {
-                return p.default
-            });
-        }
-    }
-
-    setParamValue = (valueIndex, value) => {
-        const newValue = this.state.paramValue.slice();
-        newValue[this.state.selectedIndex][valueIndex] = value;
-        this.setState({paramValue: newValue});
-    }
-
-    handleCreate = (e) => {
-        let text = this.state.text
-        if (text.length <= 0) text = 'https://qrbtf.com/';
-        this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})});
-        if (e) e.target.blur();
-    }
 
     downloadSvg = (e) => {
         const style = styleList[this.state.selectedIndex]
@@ -93,75 +30,6 @@ class Qrcode extends React.Component {
         const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]})
         saveImg(style.value, ReactDOMServer.renderToString(el), 1500, 1500)
     }
-
-    renderParamEditor = (info, index) => {
-        if (info.choices) {
-            return (
-                <select
-                    className="Qr-select"
-                    key={"select_" + this.state.selectedIndex + "_" + index}
-                    value={this.state.paramValue[this.state.selectedIndex][index]}
-                    onChange={(e) => this.setParamValue(index, e.target.value)}>
-                    {
-                        info.choices.map((choice, index) => {
-                            return (
-                                <option key={"option_" + this.state.selectedIndex + "_" + index}
-                                        value={index}>
-                                    {choice}
-                                </option>
-                            );
-                        })
-                    }
-                </select>
-            );
-        }
-        else {
-            return (
-                <input
-                    type="number"
-                    key={"input_" + this.state.selectedIndex + "_" + index}
-                    className="Qr-input small-input"
-                    placeholder="10"
-                    defaultValue={this.state.paramValue[this.state.selectedIndex][index]}
-                    onBlur={(e) => this.setParamValue(index, e.target.value)}
-                    onKeyPress={(e) => {if(e.key === 'Enter') {this.setParamValue(index, e.target.value); e.target.blur()}}}/>
-            );
-        }
-    }
-
-    renderAdjustment = () => {
-        const target = this.state.paramInfo[this.state.selectedIndex];
-        if (target instanceof Array) {
-            return target.map((info, index) => {
-                return (
-                    <tr key={"tr_" + index}>
-                        <td key={"title_" + index}>{info.key}</td>
-                        <td key={"editor_" + index}>{this.renderParamEditor(info, index)}</td>
-                    </tr>
-                )
-            })
-        }
-    }
-
-    render() {
-        return (
-            <div></div>
-                // <div className="Qr-titled">
-                //     <div className="Qr-Centered title-margin">
-                //         <div className="Qr-s-title">Downloads</div>
-                //         <p className="Qr-s-subtitle">下载二维码 — {styleList[this.state.selectedIndex].value}</p>
-                //     </div>
-                //     <div className="Qr-Centered">
-                //         <div className="div-btn">
-                //             <button className="dl-btn" onClick={this.downloadSvg}>SVG</button>
-                //             <button className="dl-btn" onClick={this.downloadImg}>JPG</button>
-                //         </div>
-                //         <div id="wx-message"></div>
-                //     </div>
-                //
-                // </div>
-        );
-    }
 }
 
 export default Qrcode;
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 66b14ba..884c6a2 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,6 +6,8 @@ import Header from "../header/Header";
 import PartInput from "./PartInput";
 import PartStyles from "./PartStyles";
 import PartMore from "./PartMore";
+import PartParams from "./PartParams";
+import PartDownload from "./PartDownload";
 
 function App() {
     return (
@@ -15,6 +17,8 @@ function App() {
                     <Header/>
                     <PartInput/>
                     <PartStyles/>
+                    <PartParams/>
+                    <PartDownload/>
                     <PartMore/>
                     <Footer/>
                 </div>
diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
new file mode 100644
index 0000000..74db3bc
--- /dev/null
+++ b/src/components/app/PartDownload.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+
+const PartDownload = () => (
+    <div className="Qr-titled">
+        <div className="Qr-Centered title-margin">
+            <div className="Qr-s-title">Downloads</div>
+            <p className="Qr-s-subtitle">下载二维码</p>
+        </div>
+        <div className="Qr-Centered">
+            <div className="div-btn">
+                <button className="dl-btn">SVG</button>
+                <button className="dl-btn">JPG</button>
+            </div>
+            <div id="wx-message"></div>
+        </div>
+
+    </div>
+)
+
+export default PartDownload;
diff --git a/src/components/app/PartParams.js b/src/components/app/PartParams.js
new file mode 100644
index 0000000..262f107
--- /dev/null
+++ b/src/components/app/PartParams.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import './App.css';
+import ParamListViewer from "../../containers/param/ParamListViewer";
+
+const PartParams = () => (
+    <div className="Qr-titled-nobg">
+        <div className="Qr-Centered title-margin">
+            <div className="Qr-s-title">Parameters</div>
+            <p className="Qr-s-subtitle">参数调整</p>
+        </div>
+        <div className="Qr-Centered">
+            <div className="Qr-div-table">
+                <table className="Qr-table">
+                    <tbody>
+                    {/*<tr>*/}
+                    {/*    <td>容错率</td>*/}
+                    {/*    <td>*/}
+                    {/*        <select*/}
+                    {/*            className="Qr-select"*/}
+                    {/*            value={this.state.correctLevel}*/}
+                    {/*            onChange={(e) => {*/}
+                    {/*                this.setState({correctLevel: parseInt(e.target.value)}, () => this.handleCreate())*/}
+                    {/*            }}>*/}
+                    {/*            <option value={1}>7%</option>*/}
+                    {/*            <option value={0}>15%</option>*/}
+                    {/*            <option value={3}>25%</option>*/}
+                    {/*            <option value={2}>30%</option>*/}
+                    {/*        </select>*/}
+                    {/*    </td>*/}
+                    {/*</tr>*/}
+                    <ParamListViewer/>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+)
+
+export default PartParams;
diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js
index f58c5df..96b03b3 100644
--- a/src/components/app/PartStyles.js
+++ b/src/components/app/PartStyles.js
@@ -9,7 +9,7 @@ const PartStyles = () => (
             <p className="Qr-s-subtitle">点击选择样式</p>
         </div>
         <div className="Qr-s">
-            <StyleListViewer/>
+            {React.createElement(StyleListViewer())}
         </div>
     </div>
 )
diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js
new file mode 100644
index 0000000..8e37652
--- /dev/null
+++ b/src/components/param/ParamList.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import {ParamTypes} from "../../constant/ParamTypes";
+import PropTypes from "prop-types"
+import ParamTextViewer from "../../containers/param/ParamTextViewer";
+import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
+
+const ParamList = ({ rendererIndex, paramInfo }) => (
+    paramInfo.map((item, paramIndex) => {
+        switch (item.type) {
+            case ParamTypes.TEXT_EDITOR: {
+                return (
+                    <tr>
+                        <td>{item.key}</td>
+                        <td>
+                            <ParamTextViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
+                        </td>
+                    </tr>
+                )
+            }
+            case ParamTypes.SELECTOR: {
+                return (
+                    <tr>
+                        <td>{item.key}</td>
+                        <td>
+                            <ParamSelectViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
+                        </td>
+                    </tr>
+                )
+            }
+        }
+    })
+)
+
+ParamList.propTypes = {
+    rendererIndex: PropTypes.number.isRequired,
+    paramInfo: PropTypes.array
+}
+
+export default ParamList;
diff --git a/src/components/param/ParamSelect.js b/src/components/param/ParamSelect.js
new file mode 100644
index 0000000..fb145e6
--- /dev/null
+++ b/src/components/param/ParamSelect.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../Qrcode.css';
+
+const ParamList = ({ rendererIndex, paramIndex, value, info, onChange }) => (
+    <select
+        className="Qr-select"
+        key={"select_" + rendererIndex + "_" + paramIndex}
+        value={value}
+        onChange={onChange}>
+        {
+            info.choices.map((choice, index) => {
+                return (
+                    <option key={"option_" + rendererIndex + "_" + paramIndex + "_" + index } value={index}>
+                        {choice}
+                    </option>
+                );
+            })
+        }
+    </select>
+)
+
+ParamList.propTypes = {
+    rendererIndex: PropTypes.number.isRequired,
+    paramIndex: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired,
+    info: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamList;
diff --git a/src/components/param/ParamText.js b/src/components/param/ParamText.js
new file mode 100644
index 0000000..50e486d
--- /dev/null
+++ b/src/components/param/ParamText.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../Qrcode.css';
+
+const ParamText = ({ rendererIndex, paramIndex, value, onBlur, onKeyPress }) => (
+    <input
+        type="number"
+        key={"input_" + rendererIndex + "_" + paramIndex}
+        className="Qr-input small-input"
+        placeholder="10"
+        defaultValue={value}
+        onBlur={onBlur}
+        onKeyPress={onKeyPress}
+        />
+)
+
+ParamText.propTypes = {
+    rendererIndex: PropTypes.number.isRequired,
+    paramIndex: PropTypes.number.isRequired,
+    value: PropTypes.string.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    onKeyPress: PropTypes.func.isRequired
+}
+
+export default ParamText;
diff --git a/src/components/renderer/Renderer25D.js b/src/components/renderer/Renderer25D.js
new file mode 100644
index 0000000..8f8af43
--- /dev/null
+++ b/src/components/renderer/Renderer25D.js
@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import {defaultViewBox} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
+
+    const nCount = qrcode.getModuleCount();
+    const typeTable = getTypeTable(qrcode);
+    const pointList = new Array(nCount);
+
+    let size = 1.001;
+    let size2 = 1.001;
+    let height = params[0];
+    let height2 = params[1];
+    let id = 0;
+
+    const X = [-Math.sqrt(3)/2, 1/2];
+    const Y = [ Math.sqrt(3)/2, 1/2];
+    const Z = [0, 0];
+
+    const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
+
+    if (height <= 0) height = 1.0;
+    if (height2 <= 0) height2 = 1.0;
+
+    for (let x = 0; x < nCount; x++) {
+        for (let y = 0; y < nCount; y++) {
+            if (qrcode.isDark(x, y) == false) continue;
+            else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) {
+                pointList.push(<rect width={size2} height={size2} key={id++} fill="#FF7F89" x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
+                pointList.push(<rect width={height2} height={size2} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size2} height={height2} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
+            }
+            else {
+                pointList.push(<rect width={size} height={size} key={id++} fill="#FF7F89" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
+                pointList.push(<rect width={height} height={size} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size} height={height} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
+            }
+        }
+    }
+
+    return pointList;
+}
+
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '柱体高度',
+            default: 0.5,
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '定位点柱体高度',
+            default: 0.5,
+        },
+    ];
+}
+
+const Renderer25D = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+
+export default Renderer25D
diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js
index d908704..18df062 100644
--- a/src/components/renderer/RendererBase.js
+++ b/src/components/renderer/RendererBase.js
@@ -1,22 +1,71 @@
-import React from "react";
-import {defaultViewBox} from "../../utils/util";
+import React, { useEffect } from "react";
+import {defaultViewBox, rand} from "../../utils/util";
 import {ParamTypes} from "../../constant/ParamTypes";
-import {createParam} from "../../actions";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
 function listPoints(qrcode, params) {
-    if (!qrcode) return[]
+    if (!qrcode) return []
 
     const nCount = qrcode.getModuleCount();
-    const pointList = []
-    let id = 0
+    const typeTable = getTypeTable(qrcode);
+    const pointList = new Array(nCount);
+
+    let type = params[0];
+    let size = params[1] / 100;
+    let opacity = params[2] / 100;
+    let posType = params[3];
+    let id = 0;
+
+    const vw = [3, -3];
+    const vh = [3, -3];
+
+    if (size <= 0) size = 1.0
 
     for (let x = 0; x < nCount; x++) {
         for (let y = 0; y < nCount; y++) {
-            if (qrcode.isDark(x, y)) {
-                pointList.push(<rect key={id++} width={1} height={1} fill={"black"} x={x} y={y}/>)
+            if (qrcode.isDark(x, y) == false) continue;
+
+            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
+            }
+            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                } else if (posType == 1) {
+                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                } else if (posType == 2) {
+                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                    for (let w = 0; w < vw.length; w++) {
+                        pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
+                    }
+                    for (let h = 0; h < vh.length; h++) {
+                        pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                    }
+                }
+            }
+            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                }
+            }
+            else {
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
+
     return pointList;
 }
 
@@ -55,23 +104,17 @@ function getParamInfo() {
     ];
 }
 
-export default class RendererBase extends React.Component {
+const RendererBase = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
 
-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-        this.props.setParamInfo(this.props.rendererIndex, getParamInfo())
-    }
-
-    render() {
-        return (
-            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
-                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-                {listPoints(this.props.qrcode, this.props.params)}
-            </svg>
-        )
-    }
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
 }
 
+export default RendererBase
diff --git a/src/components/renderer/RendererBlank.js b/src/components/renderer/RendererBlank.js
index 2865485..ab7f08b 100644
--- a/src/components/renderer/RendererBlank.js
+++ b/src/components/renderer/RendererBlank.js
@@ -1,31 +1,25 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {defaultViewBox} from "../../utils/util";
 
 function listPoints(qrcode, params) {
-    if (!qrcode) return[]
     return []
 }
 
 function getParamInfo() {
-    return []
+    return [];
 }
 
-export default class RendererBlank extends React.Component {
+const RenderBlank = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
 
-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-    }
-
-    render() {
-        return (
-            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
-                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-                {listPoints(this.props.qrcode, this.props.params)}
-            </svg>
-        )
-    }
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
 }
 
+export default RenderBlank
diff --git a/src/components/QrRendererDSJ.js b/src/components/renderer/RendererDSJ.js
similarity index 85%
rename from src/components/QrRendererDSJ.js
rename to src/components/renderer/RendererDSJ.js
index 25ec196..8bdff45 100644
--- a/src/components/QrRendererDSJ.js
+++ b/src/components/renderer/RendererDSJ.js
@@ -1,21 +1,20 @@
-import React from "react";
-import './Qrcode.css'
-import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import React, { useEffect } from "react";
+import {defaultViewBox} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
-function listPoint(props) {
-    if (!props.qrcode) return []
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
 
-    const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
     const typeTable = getTypeTable(qrcode);
     const pointList = [];
     const g1 = [];
     const g2 = [];
 
-    let width2 = props.params[0] / 100;
-    let width1 = props.params[1] / 100;
-    let posType = props.params[2];
+    let width2 = params[0] / 100;
+    let width1 = params[1] / 100;
+    let posType = params[2];
     let id = 0;
 
     if (width2 <= 0) width2 = 80;
@@ -158,34 +157,41 @@ function listPoint(props) {
     return pointList;
 }
 
-export default class QrRendererDSJ extends React.Component {
-    constructor(props) {
-        super(props);
-        if (this.props.setParamInfo) {
-            this.props.setParamInfo([
-                {
-                    key: '信息点缩放',
-                    default: 70,
-                },
-                {
-                    key: 'x 宽度',
-                    default: 70,
-                },
-                {
-                    key: '定位点样式',
-                    default: 1,
-                    choices: [
-                        "矩形",
-                        "DSJ",
-                    ]
-                },
-                ]
-            );
-        }
-    }
-
-    render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
-    }
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 70,
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: 'x 宽度',
+            default: 70,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 1,
+            choices: [
+                "矩形",
+                "DSJ",
+            ]
+        },
+    ]
 }
 
+const RenderDSJ = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+
+export default RenderDSJ
diff --git a/src/components/renderer/RendererImage.js b/src/components/renderer/RendererImage.js
new file mode 100644
index 0000000..1352f2f
--- /dev/null
+++ b/src/components/renderer/RendererImage.js
@@ -0,0 +1,145 @@
+import React, { useEffect } from "react";
+import {defaultViewBox} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
+
+    const nCount = qrcode.getModuleCount();
+    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 id = 0;
+
+    const vw = [3, -3];
+    const vh = [3, -3];
+
+    if (size <= 0) size = 1.0
+
+    pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} xlinkHref={data}/>);
+
+    for (let x = 0; x < nCount; x++) {
+        for (let y = 0; y < nCount; y++) {
+
+            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
+                if (qrcode.isDark(x, y)) {
+                    if (type == 0)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    else if (type == 1)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                } else {
+                    if (type == 0)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    else if (type == 1)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="white" cx={x + 0.5} cy={y + 0.5}/>)
+                }
+            }
+            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                if (qrcode.isDark(x, y)) {
+                    if (posType == 0) {
+                        pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                    } else if (posType == 1) {
+                        pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
+                        pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                        pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                    } else if (posType == 2) {
+                        pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
+                        pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                        pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                        for (let w = 0; w < vw.length; w++) {
+                            pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
+                        }
+                        for (let h = 0; h < vh.length; h++) {
+                            pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                        }
+                    }
+                }
+
+            }
+            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
+                if (qrcode.isDark(x, y)) {
+                    if (posType == 0) {
+                        pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                    }
+                } else {
+                    if (posType == 0) {
+                        pointList.push(<rect width={1} height={1} key={id++} fill="white" x={x} y={y}/>);
+                    }
+                }
+
+            }
+            else {
+                if (qrcode.isDark(x, y)) {
+                    if (type == 0)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    else if (type == 1)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                } else {
+                    if (type == 0)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    else if (type == 1)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="white" cx={x + 0.5} cy={y + 0.5}/>)
+                }
+
+            }
+        }
+    }
+
+    return pointList;
+}
+
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.SELECTOR,
+            key: '信息点样式',
+            default: 0,
+            choices: [
+                "矩形",
+                "圆形",
+                "随机"
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 100
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点不透明度',
+            default: 100,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 0,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+            ]
+        },
+    ];
+}
+
+const RendererImage = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+let data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAEOKADAAQAAAABAAAEOAAAAAD/wAARCAQ4BDgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwACAgICAgIDAgIDBQMDAwUGBQUFBQYIBgYGBgYICggICAgICAoKCgoKCgoKDAwMDAwMDg4ODg4PDw8PDw8PDw8P/9sAQwECAgIEBAQHBAQHEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/90ABABE/9oADAMBAAIRAxEAPwD9IKESiigAooooAKKKKACiiigAoRKKKACiiigAooooAKKKKAChEoooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKESiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//Q/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//R/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//S/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//T/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//U/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//V/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//W/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//X/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//Q/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//R/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//S/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKK0rPSrm8f5E+T+/XVJ4YtvJ2O/7+gDg6K1b/R7mzf503p/frKoAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/0/0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAop6I8z7E+d66fTfDE03768+RP7lAHNw21zcvstk3122m+G4Yf31587/3K6G2tobZNlsmyrdAESQpCmxE2VLRRQBE6JMmx031yupeG4Zv31t8j/3K6+igDyC5s5rZ9kybKrV7BNbW1ynkzJvrjNS8MPD++s/nT+5QByVFPmheF9kybHplABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf//U/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoorSs9Nubx9lsn/A6AM2tuw0G5vPnf5IK6rTfD1tbfPc/PPXR0AZdno9nYJ+5T9//frUoooAKKKKACiiigAooooAKKKKAMi80q2v02TJ8/8AfrjNS0G5s/nT50r0qovv0AeOUV6Lf6DbXnzw/uHrjLzSrmwf98nyf36AM2iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/1f0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiijY7/IlABU1tbTTP5Nsm963tN8NzXP765/cJ/wCP13NtYW1mnkwpsoA5XTfDGz99f/P/ALFdbDbJCmyFNiVYooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACmvDDMmyZN6U9Emd9iJvd67DTfDDzfvr/wCRP7n8dAHktz4MfUpv+JUnz/3K4y/sLnTrh7O/TyZk++lfXSfYNNh8m2RE/wBhK+cviFM83iR3f+4lAHDUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//9b9IKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACirNtYXN4+yFN9dzpvhu2tv31z+/f/AMcoA5Kw0e8v33omxP7713lho9nYfcTfP/fetJPkTYlS0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAN/2KdRRQAUUVdsNNvNSfZbJ8n8b/wUAUq29N8P31987/JD/feuo07w9Y6b++uf38399/uVtTX/APBD/wB90AV7PTdO0pMp9/8Avv8Afpk15NN8kP7tKrO7v87/AH6SgArwbx//AMjFN/uJXvNeEePv+Q8/+4lAHDUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//1/0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAqOpKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoorodN8N3Nz++m/cQ/8Aj9AGDDDNcv5MKb3rsNN8Kv8A66//AO+K6ez022sE2Qp/wP8Ajq9QBFDbQ20Pk2ybEqWiigAooooAKKKKACiiigAooooAKKKKACiiigAoopvzv9ygB1SQwzTTeTCju7/wV0Om+GLm52PefuE/8feuwtobPTYfJtk/+L/4HQBgab4YRP32ov8A8AX/ANnrpBNDCnk2yJ8n937lUZrmab7/ANz+5UdACu7u++Z99JRRQAUUUUAFeDeP/wDkYpv9xK95rwLx5/yHX/3EoA4yiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9D9IKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKmhtrm8fybZN9AENaVho95fv+5TYn9966rTfDFtD++vP37/3P4K6dERE2J8lAGVpuiWdh8+zz5/771tUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRVqzsLm/m2Wyb/8A2Su1sPDdnZp51+/nv/44lAHJ6bot/qT70Ty4P7713dtpWnaUnnfff++/3/8AgFXZr/5P9GrKd3d97vvoAuTXk03yQ/u0qt89JRQAUUUUAFFL/uUlABRRRQAV4R4+/wCQ8/8AuJXvH+/Xgnjz/kPf8AoA4miiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/R/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKeiPM+xPnd629N0G8vPnf8AcQf33rubDSrawT/Rk+f++/36AOV03wrNN++v/kg/ufx12cMMNtD5MKIif7FWKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoore07w/eXJ82b9zB/t/ff/AIBQBz8MM0zpDEju7/wJXa6b4Yd/32ovsT/nin/s9dFDbabpSbIU+f8A8fpk00033/kT+5QBMJrazg8mzjTYn937lU5neb53eo6KACiil+SgBKKKKACiiigAooooAKKX+CkoAK8C+IH/ACHX/wByvfa8F8ef8h7/AIBQBxNFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/0v0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoqaGG5uZvJtk3vXbab4YhT99fvvf+4n3KAOSsNKvNSf/AEZPk/v/AMFdzpvh62s/3037+f8AvvW2iJCiQomxEqWgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKnhtprybZbI7v/sUAQVd03Sr/Un/ANGT5P77/crrdN8Kww/vtSfe/wDc/grb+2IibLNNiJQBn2Gg2Glfvpv38/8Aff8A9kSrs15NN8kP7tKrO7zPvf56SgAopfuUlABRRRQAUUUUAFFFFABRRRQAUv8Av0lFABRRRQAV4L48/wCQ9/wCveq8F8ef8h7/AIBQBxNFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/0/0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAGO6Im966rTfDc1zsmvH8iB/n2J996868Q/JpUm9N+x0/8AQ6oeHvGepaO/k2z+fB/z7zfc/wCAUAfRVtZ21nD5NsmxKt1zOieLdK1vZDC/kXX/ADyf/wBk/v101ABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUqI7vsT53ra03Qb6/wBjbPIh/vv/AOyV2lnpum6Un7lN7/33+/QBzGm+FXuf32o/In9z+P8A+wrrIXsLBPJsESoZruab/YT+5UNAEjzO/wA8z1HRRQAUUUUAFFFFAColJRRQAvyUlFFABS/JSUUAFFFFABRRRQAUUUUAFeC+PP8AkPf8Ar3qvAvHn/IbkoA4yiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//U/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA5/xJ/yB5v8AgH/odeZ16Z4k/wCQPN/wD/0OvL6ANC2v5ofv/P8A+h16j4e+It5Z7Ib/AP0qD+//AMtk/wDi68ipiO6fOlAH2BpWsabrFt51hMk399P40/30rXr5DsNYubOaC5hneCdP40r2PQfiQk2y21tP+3iH/wBnSgD1miq9tcw3MKXNs6TwP9x0qxQAUUUUAFFFFABRRRQAUVJDDLM/k2yO7v8AwJXYWHhjZ++1V/8AgCf+zvQBzFhpt5qL7LdN/wDt/wAFdrYeHrCwTzrx/Pf/AMc/74rWeZLZPJs0RESqG93fe776ALk1+7/InyJVKiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKX5KP46SgAooooAX56SiigArwLxz/yHH/3K99rwLxz/wAhx/8AcoA4yiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//V/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA5/xJ/yB5v8AgH/odeX16h4k/wCQPN/wD/0OvL6ACiiigAqSGZ4fnSio6AOr0HxVf6PNvs5vI/vo/wA6PXuWg+PNN1XZbXn+i3X+39x/9x6+ZqmhvHh/20oA+zqK+cPD3jzUtK2Qo/2q1/54zfwf7j17Zo/ifStbT/Rn2T/xwv8AfoA6OiitbTdHvNS+dE2J/ff7lAGTXRab4bvLzY95+4g/8feums9K03Sk3/fm/vv9/wD+wqea8mm/2EoAlhS20qH7NZx/P/n771Xmlmm++9R0UAFFFFABRRRQAUUUUAFFFFABRRRQAUUqUlABRS/7FJQAUUUUAFFFFABRRRQAUUUUAFFFFABXgXjz/kNyV77XgXjz/kNyUAcZRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH/9b9IKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo6kooAKKKKACiiigAooooAKKKKACiiigAooooA57xL/yB5/8AgFeYV6f4l/5A8/8AwCvMKACipKjoAKKKKAJKjqSo6AJKuW1/NC6P/c/jT76VTooA+tvhNqtvqtt/xPbpJ7p/9Sj/AH9iff3/AN+vdprx/uQ/IlfJfwl/5Cul/wDbb/0B6+pKAF/36SiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKbs9qAHUUUUAFFFFABRRRQAUuykooAKKKKACvAvHn/Ibkr32vAvHn/IYegDjKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//X/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA57xL/yB5/8AgFeYV6h4k/5A83/AP/Q68voAKKKKACiiigAqSo6KAJKKjooA98+Ev/IV0v8A7bf+gPX1JXy58Iv+Qrpf+5N/6A9fUdABRRRQAUUUr0AJRS/JSUAFFFFABRRRQAUUUUAFFFFABRS/JSUAFFFK9ACUUUUAFFFFABRRRQAUUUUAFFFL8lACV4F48/5DD177XgXjz/kMPQBxlFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf//Q/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA5/xJ/yB5v8AgH/odeX16f4l/wCQPP8A8ArzCgAooooAKKKKACipKKAI6KkqOgD334Rf8hXS/wDcm/8AQHr6jr5f+EX/ACEtL/3Jv/QHr6goAKKKKACiiigAooooAX/cpKKKACiiigApfno+/SUAFFFFABRRRQAUUUUAFFKlJQAUUUUAFFFFABRRRQAUUUUAFeBePP8AkMPXvteC+PP+QxQBxNFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/R/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo6kooAKKKKACiiigAooqOgCSiiigAooooAKKKKACio6koAKKKKACiiigAooooA57xL/yB5/8AgFeYV6f4l/5A8/8AwCvMKACpKjooAKkqOigAqSiigCOpKKKAPePhF/yEtL/7bf8AoD19SV8t/CX/AJCul/8Abb/0B6+pKACil/3KSgAooooAKKKX/boASiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKX/YpKKAF30lFFABRRRQAV4N45/5Cte814F45/wCQwKAOMooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//S/SCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiio6AJKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo6kooAKKKKACiiigDnvEv/IHn/wCAV5hXp/iX/kDz/wDAK8woAKKkooAKKjooAkqOpKjoAKkoooA94+Ev/IV0v/tt/wCgPX1JXy38Jf8AkK6X/wBtv/QHr6koAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigApfuUlFABRRRQAUUUUAFFFFABRRRQAUUUUAFeDeOf+QrXvNeDeOf+QrQBxFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/T/SCiiigAooooAKKjqSgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo6kooAKKKKACiiigAooooAKKKKACiiigCOpKKKACiiigAooooAjqSiigAqOpKKACiiigDnvEv/IHn/wCAV5hXp/iX/kDz/wDAK8woAKKKKACpKKKACiiigAooooA94+Ev/IV0v/tt/wCgPX1JXy38Iv8AkJaX/wBtv/QHr6koAKKKKACiiigAooooAKKKKAF/gpKKKAClekooAKKKKACiiigBfv0fwUlL89ACUUUUAL/t0bKSigAooooAKKKKAF/3KSiigArwbxz/AMhWvZb/AFK2sEd7l68E8T6rDqt+80P3KAOeooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9T9HKKKKACiiigAooooAKKKKACiiigAooooAKKKKAJKjoooAkoqOigCSio6KAJKKKKACiiigAooqOgCSiiigAooooAjqSiigAooooAKKjqSgCOpKKKACiiigAooooAjoqSigAooqOgCSiio6AJKjqSigAqOiigDC8S/8gef/gFeYV6f4l/5A8//AACvMKACpKKKACiiigAooooAKKKKAPefhF/yFdL/ANyb/wBAevqOvmH4Rf8AIV0v/cm/9Aevp6gBd9JRRQAUUUUAFFFFABRRRQAUvyUlFABRRS/7FACUv+5SUUAFFFFABRRRQAUUUUAFFFFABRRRQAv+xSUruiJveuM1jxhYaajoj73oA6qaaG2h3zPsrz3W/HkNt+5sPnnrzrWPE+paq/zvsSueoA0r/VbzUn3zPWbRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//9X9HKKjqOgCxRVeigCSio6KAJKKjooAkoqOjfQBJRUe+jfQBZ30lV6N9AFiiq9SUASUVHRQBLvpKjooAkopd9JQBJRUdFAElFR0UAFSVHUlABRRRQBHUlFFABRRUdAElFFFABRUdSUAFFFR0ASVHUlFAEdFFFABRRUlABUdSVHQAUVJUdAElFR0UAYvif8A5BU//AK8tr0/xJ/yCp68woAkooooAKKKKACiiigAooooA9++EX/IV07/ALbf+gPX09Xy98JP+Qpp/wDuTf8AoD19Q0AFFL/t0lABRSpSUAFFFFABRRRQAUUUUAFFL/BSUAFFFFABRRRQAUUUUAFFFFABRRVS81K2sE33L7KALdc/qviGw0pP3z/P/crgNe8eO++203/vuvNJrm5uX86Z98lAHYa342vNSfybb5IK4x3eZ97/ADvTKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//1v0Uoopm+gB9FR0UASUVHRQBJTN9Rb6N9AFimb6i30b6ALFFV99G+gCXfT6r76N9AFiiq++jfQBYoqvvp2/3oAmo31Dv96N/vQBNRvpm+jfQBPRUG+n0AWd9G+q1G+gCxRUdFAElFFLvoAfRTN9JQAVJRRQAUVHRQAVJRRQBHUlFR0ASVHRUlAEdFSVHQAUVJRQAUVHRQAUUVJQBHRRRQBheIf8AkDzV5hXp/iT/AJBU9eYUASUUUUAFFFSUAR0VJRQBHRUlFAHu/wAJP+Qpp/8AuTf+gPX1DXyz8KP+Qrp//bb/ANAevqagAooooAKKKKACiiigAooooAKKKKACiiigBfkpKKKACiiigAoopX+SgBKrzTJCm+b5Erm9Y8W6bpSbN/nz/wByvH9Y8T6lqr/PJsg/uJQB6Rrfjy2tt8Nh8715RqWq3+qvvuX/AOAVlUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//1/0Mo31V3+9TUASb6g30zf70b/egB++jfTN/vTd9ADt/vRv96bvo30AO3+9G/wB6hooAm3+9G/3qGigCbf70b/eoaKAJt/vRv96hooAm3+9G/wB6hooAm3+9P31WooAs76N9Vqk30AXN9G+qe+nb/egC5v8Aejf71T3+9G/3oAv76fVDfRvoAv76N9V99O3+9AFqpKqb6fQBZ30lV99SUASUUu+jfQAlFFFABRRRQAUUUUAFFFFABRRRQBJUdFFABUlR0UAFFFFAGF4h/wCQPNXllep+Jv8AkDz15QlAFipKjqSgAqSo6koAKKkqSgCOipKKAPb/AIU/8hXTv+23/oD19Q18w/Cj5NV07/cm/wDQHr6eoAKKKKACil/2KSgAooooAKVKSigAooooAKKKKACiiigAoqjc3ltZw+dcvsRK80174hffttK/77oA9C1XW7DTYd9y/wDwCvH9b8c3l/vhs/3EFcZc3lzeTedcvveqtAE7u8z73fe9MoooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9D9AN9R0UzfQA+imb6N9AD6KZvpm/3oAfvo30zf70b/AHoAfvo30zf703fQBLvo31FvqDfQBc30zf71W30b6ALO/wB6N/vVbfRvoAs7/ejf71W31FvoAvb/AHp++qe+jfQBc30b6zt9S76ALm+jfVPfRvoAub6fVffTt/vQBNUm+qu/3o3+9AFrfTt/vVbfRvoAub6n31n1JvoAvb/en76ob/ejf70AaVG+qG+p99AFypd9U99G+gC5vo31W31JQBJRS76N9ACUUUUAFFFSUAR0UUUAFSVHRQAUUUUAc/4q/wCQPNXkqPXq/i35NEnrx9HoAubKspWaj1ZR6AL9SVVR6mR6ALKU+mI9PoAKKkooA9u+Ff8AyGNO/wByb/0B6+nq+XvhX/yGNO/7ea+oaAJKjoooAKX/AG6SigAopXpKACiiigAooooAKKK5nWPFWlaOjo775/7iUAdI7pCm+Z9iJXB6345s7DfDZ/v56831vxhqWqvs3+RB/cSuVoA1dV1u/wBVm865n/4BWVUdSUAFFR0UAFSVHRQAUVJRQBHUlFR0ASUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//0fvbf70b/em76g30AWd/vTd9U99G+gC5vqDfUW+o99AEzvTd9V6KALG+jfVeo99AFjfRvqvvo30ASUVHvo30ASUVU30b6ALdFVN9G+gC3RVHf70b/egC9RVHf70b/egC9RVHf70/fQBbqTzXqhvo84UAX/NepPONU/ONG+gC55xqXfVBJqPOoA1t9O86smpPNegDV30b6zvONS76AL9Sb6p+cadv96ALm/3o3+9U/tPvT0moA099O3+9Ud9O86gC/vp9Zu/3p/nCgC/vqSqe+pd9AFzfSVXo30AWKKjqXfQAlFFFABRRRQBzPjN9mgz14ak1e8eKrO5v9EntrNN718zX9zc2Ez21yjwOn9+gDp0uU61ZS5rjEv8AfV+G830AdbDNVyF65uG5rYhmoA3EqxWbC9X0egCdKkqNKkoA9n+FH/IVsv8Acmr6hr5i+F//ACGNO/4HX07QAUUUUAFFL9ykoAKKKKACiiq800NtC80zokaf36ALFZ2parZ6bC815Mif7Fee698QoYd9tpSb3/v15XeX9zfzfabl3d6AO517x/c3m+2039xB/f8A464CaZ5n3zPveoKKACiiigAooooAkqOiigAooqSgAoqOpKACo6KkoAKjqSo6AJKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//S+6N9R76jqPfQBJRUe+jfQBJUe+oN9M3+9AFrfRvqnvqDfQBc30zf71W30b6ALO/3pu+oN9RUAS76N9Vt9M30AXN9G+qe+jfQBc30b6ob/ej7T70AWvtElFU99G+gC59oko+0SVT31B5woA0/tElH2iSszzhR5woA0/tElO86srzhU++gC951P31nb6d9p96AL/nCp/ONZnnCjfQBq/afen+cKx99T/aJKANjzjTvOrH86n76ANPfVjzXrL84077T70Aa3nGpd9Z3nGnedQBqpNT/ADqykekoA1vtPvU2+svzjUqTUAavnUb/AHqgk1CTUAaW+pkes3fU++gDR30+s3zqfvoA06l31nb6ydV8Q2elQ75n3v8A3EoA6R3RE3vXnXif4kaVo++2s/8ASrr/AGPuV5X4n8Ya9rO+FP8ARbX+4ledOj/x0Adt/wALI8Tpf/b/AD/k/wCeP8Fd/Z+JPB/jyH7BrCJa3X9+vAnqq6UAeqeJPh7rGib7yw/02y/2Pv1wcN5sfY/yPXT+GPiRreg7La8/02y/uP8Afr0t9N8E/EK2+06a6Wt7/wCP0AeXW15W9bXlc3rfhXXvDE3+mQeZB/BMn3KrWepUAekW1zWwj1xNneb66S2moA3kqxVGF6tJQB7d8Kv+QxZf8Dr6er5h+FX/ACGLL/gdfT1ABRRRQAUUUUAFLv8Ak3v9yue1XxJpWlJ++fe/9xPv14/rfjbVdV3wwv5Fr/cSgD0vXvG2m6Vvhtv391/sfcrxzVfEOpaxNvuZ/k/ufwVh0UAFFFFABRRRQAUUUUAFFFFABRRRQAUVJUdABUlR0UASVHRRQBJUdSUUAR0UUUASUUVHQBJRUdSUAFFFFABRRRQAVHUlFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/T+3N9Qb6Zv96rb6ALO/3pu+oN9Qu9AE2+h3qtvooAkqPfTN9Rb6AJd9G+qe+mb/egC5v96bvqrv8Aem76AJd9M86oaZ5rUAWd/vR51U9/vRv96ALW+o99V/ONQb6AL++mecKp76N9AFzzhR5rVnecaPONAGj5rUea1Z3nGjzjQBo+a1HmtWd5xo840AaPnCjzhWd5xqXfQBf31JvrM30b6ANXzqPOqnv96N/vQBrb6d9p96x9/vT/ADhQBsecKN9ZW+npNQBs/aJKck1Y/nU/zhQBsecKs/afesdJqmR6ANhJqmSasRJqek1AG2j09JqxPOFWUmoA1vONXPONZKTVNbJNczJDbJvd/wCBKAL6TVch3zfcrpNK8GXLp52pfJ/sV1qaJDCmyFKAPK7m2vHTZD8lclc+Hnmd3f79e6vo+/8AgqnNon+xQB85XPht/wC5XN3nhj/Yr6im0H/YrKufDe/76UAfJ154bmT7iVg3Om3MP8FfWlz4V3/wVzdz4M37/koA+V5rZ0+/UMM1zZzJc2cjwOn8aV79f+Bt+/YlcTf+CblPuJQBseG/i1MkP2DxVB59r9zzf/i66TUvAGieJLb+1fB90iO/z+T/AAV4zeeHr+2/gqtpupax4euftNhM8D/+OUAdJc22paDc/Y9SgeB/9v7lbdhfo+yuq0f4kaD4ntk0rxhaojv8nnfwVW1j4e3lmn2/wxN9qtX+fZ/H/wAAoAv2cyPWqj1wFhfvDN5Nymx0/geu2tpt6UAe9/Cv/kK2P+49fT1fL3wr/wCQrZP/ALD19Q0AFFRTTQ20LzTPsRP79eda98QobbfDpSee/wDz2/goA7y/1Kz02HzrydIEryXXviFNc77bR4/IT/nt/HXB3+pXmpTedeTvO9Z9AE8001y7zTPvd/43qCiigAooooAKKKKACiiigAooooAKKKKACiiigCSo6KKACiiigAqSo6KACpKjqSgCOiipKAI6koooAKKKKACiiigAqOpKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/1PsnfUVR76KADfTN9M3+9Vt9AFnf71W3093qs70AP3+9G/3qGmO9AD6Zvqs71JvoAdv96hd6ZvqF3oAsu9M31W31X30AXPONHnGqe+o3egC5vpm+qDvTfONAF7zqPOqjvqDzhQBp+caPONZm+medQBf84UecKoedT99AFzzhR5wqh51P30AafnGnedWVvo84UAavnUedWV5wqffQBo76N9Z2+jzjQBqb6k841k7/AHp/nCgDVSan76x/OFT+caANdJqej1j+dT99AGx5rU9Jqx99SecaANpJqek1Y++no9AG8k1TI+6sRJq7bwZqtnpVz9pvIUuv/Q0oA6Tw94G1XWNlzc/6La/33++9e06V4e03RIdltB8/99/v1No+t6brEO+wn3/7H8da1AEdM2JT6KAH+UtVnhSpqKAK32aKoXsIXq/RQBlSabbPVabRIXreooA5Kbw3C/8ABWVc+D4X/gr0KmbKAPIrz4ewzfwVxOpfChJv+WFfSVFAHxLqvwcufne2Ssqw03x/4Jm32G+e1/jhf7lfdrwwv9+Oq01hZzffgR6APlGG/wDDfjNPs2q2r6dqP+38j/8AAHpk3h7UtEf/AJ+rX++lfTlz4S0G8/4+bKF/+AVfsPhr9oh8nTd8EP8Afl+5QBxXwo/5Ctj/ALj17LrfjPStH3wo/wBqn/uJXiF/pVz4c1Wazd/JmT5Pk/26of7b0Ab2seJ9V1t/9JfZB/zxT7lYFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBJUdSUUAFFFR0ASUUVHQAVJRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB/9X663+9Md6h30zf70ATO9Q7/eoXemb6AH0x3pjvULvQBJUbvTHemO9AD3eoXemO9VnegCWonel31BvoAn31V3+9NqDfQBM71Dvod6ioAl31FUe+mb6AH76ZvqKigB2/3o3+9Q0UATb/AHo3+9Q0UATb/ejf71DRQBNv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FSUVHQAUUVJQAUVHRQBJRUdFAElFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/0foF6iepXqJ6AIHeoqleqz0AM30b6So6ACio6KACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooqSgCOpNlGynbPagB1Lsp+ypKAI9lPRKm2VPsoAgRKmRKeiVMiUAQ7ParWykRKsolADESpkSpkSnolADEhq/D/AKmmIlPoAKkqOpKACiiigAqSo6koAKKKKANnw9/yFYP+B19veCf+RZsv9x//AEOviHw9/wAhWD/gdfb3gn/kWbL/AHH/APQ6AOpooooAKKKKACiiigAooooA+efHH/IyT1yNdd44/wCRknrkaACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAkooqOgCSiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//S+h3SqzpWk6VWdKAKDpVZ0q+6Ux0oAobKZsq5so2UAUNntTdlXKj2UAU6Ks7KZs9qAIaKk2VHQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFSU7Z7UANp2z2p+yp6AINlT1Lsp6JQAzZT0SnolTIlAEVSolTIlTIlAEKJVlEp6JVlEoAhRKmRKESrKJQAxEqZIamRKmRKABEqu/360USs2X/X0AMooooAkoqOpKACiiigCSio6KAOg8Pf8AIVT/AIHX2x4JT/imLL/cf/0Ovifw9/yFU/4HX234J/5Fux/3H/8AQ6AOpooooAKXfSUUAFFFFABS/wC3R8lJQB88+OP+Rknrka67xr/yMU9cjQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRUlAEdFFFABRRRQAUUUUAFFSVHQAVJUdSUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFSUAR0UUUAFFSVHQAUVJRQB/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R1JRUdABUlR1JQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//9f722e1VnSr9MdKAM10qF0rVdKhdKAKDpVPZWk6VC6UAZTpTHStJ0qs6UAZrpVZ0rSdKrOlAGU6VC6VqulU3SgDNdKpularpVZ0oAx3SqzpWq6VQdKAKb1WerLpVN6AEqOio6ACiiigAooooAKKKKAJN9O3+9Q0UATb/epkeqdM30AaqTUJNWVvqffQBrpNVlLmsH7T70/7TQB0iXNWUua5hLmpkuaAOwS5q+l/XBpeVZS8oA9ChvK0ob+vN0v6spqVAHp0N+laUN/XlaaxVyHWKAPV0vExXlfiF9+pO9XIdY/26568ufOuXkoAKkoShKACpKjqSgCSiiigAqSo6koA3fDf/ISSvt7wT/yLVr/uV8Q+G/8AkJJX294J/wCRatf9ygDqaKKKACiiigAooooAKKKKAPnzxt/yHp65Kut8bf8AIenrkqACiiigAooooAKKKKACiiigCOpKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACipKKAI6KkooAjqSiigAqOpKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Q/QXZTNntWlULpQBm0x0q+6VDs9qAKbpVZ0rSdKhdKAM10qF0rVdKrOlAGU6VWdK1XSmOlAGO6VTdK1XSqzpQBlOlUHhrbdKoPDQBlOlUHSth4apvDQBiOlUHSt54apvDQBiOlQ1sPDVN4aAKdFTOlQ0AFFFFABUdSUUAR0UUUAFFFFABRRRQAUUUUAFFFFADd/vT970lFAEnmvR5r1HRQBP5z0/7Y/rVWigDQS/et62m3w7642umsH/cpQBrJVxKz0qRKALlFCUUAWKKjqSgAqSo6koA3fDf/ISSvuLwZ/yKtr/uV8O+G/8AkJJX294Mf/im7X/coA6miiigAopfnpKACm/cp1FABRRRQB8+eNv+Q9PXJV1vjn/kOT1yVABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUVJQBHRUlFABUdSUUAR0VJRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRUlR0AFFSVHQAUUUUAFFFFABRRRQAUUUUAFFFFABRRUlAEdFFFABRRRQAUUVJQBHRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//R/Rio9lWKKAK7pULpVqo3SgCm6VC6VfdKi2UAUnSqzpWk6VWdKAKDpULpWk6VC6UAZTpVZ4a1XSqzw0AY7w1TdK3nhqs8NAGC8NU3hrbeGoXSgDBdKrPDW88NU3tqAMF4apvDXSPDVN7agDnnhqs8NdC9tVN7agDBeGq2yt50qs8NAGbRVx4ar7KAK9FLspKACiiigAooooAKKKKACiiigAooooAKKKKACiio6ACugtn/AHNc/W7bP+5oA0kerKPVBHqZHoA0kqeqqPUyPQBMlOqOpKAFSn0xKfQB0Phv/kJJX294M/5Fu1T/AG6+HPD3/ISjr7j8GJ/xTdr/ALlAHU0UUUAFFL9+koAKKKKACiiigD588Y/8hqeuSrrfHP8AyHJ65KgAooooAKKkqOgAooooAKKKKACiipKAI6koooAKKKKACiiigAqSiigCOipKKACiiigAooooAKKKKAI6koooAKKKKACiiigCOpKKKACiiigAooooAKKKKACiiigAooooAjoqSo6AJKKKKACiiigAqOipKAI6KkqOgCSo6kqOgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//S/SCo6kooAjpdlJRQBHUdWKXZQBQ2e1MdKs7KKAKbpVfZWjsqF0oAzXSoXhrVdKheGgDKeGoXhrVdKheGgDKdKrPDW28NVnhoAwXhqs8NdC8NQvDQBzzw1Te2rpHtqrPbUAc29tVZ4a6R4arPbUAcw9tUL21dI9tVZ7agDm3tqpvDXVPbVTe2oA557aqzw10j21QvbUAc28NVtldC8NVntqAMaitB7aoXhoAq0UuykoAKKKKACiiigAooooAKjqSo6ACtG2f5KynqZHoA3kerKPWOk1XEegDYR6so9ZSPVxHoA00pyVWR6ej0AXKKjqSgDc8Pf8hKOvubwR/yLdl/uV8M+Hv+QlHX3H4J/wCRatf9ygDrajpf46P4KAEooooAKb81OooAbv8AenUUUAfPnjb/AJDD1yVdV42f/idvXK0AFFFSUAR0VJRQAUUUUAFFFSUAR0VJRQBHUlFFABRRRQAUUUUAFFFFABRRRQAUVJUdABRRRQAUVJUdABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFR1JRQAUUUUAFFFFAEdFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/0/0gooqOgAoqSo6ACipKjoAKXZSUUAR1HsqxRQBU2UzZ7VaooAzNlPdKuUzZQBQ8modlaWz2puygDJeGmPDV/wAmjyaAMd4aheGtt4aheGgDE8mqz21bzw0PDQBzb21QvbV0P2b2qHZQBzbw1We2rp3hqF7agDmHs6rPbV1T2dQvZ0Ack9tVZ7aute2qF7agDj3s6pvbV2D2dQvYUAcS9tUL21dg9nVN7CgDkntn6VW2PXVPYVTezoAwKK2Xs6oPbP0oAq0Uux6SgAqOpKjoAjSqE1z9m+er71z2pI7psSgC/Z63ZzPs37HroYZq+ctYs7+F/Ohd0eptH+It5pT/AGbVU3p/foA+mYZquQzVxOieIbDVYfOs5t9dJDNQB0KPWglYEM1aSPQBfSpqr1KlAG/4e/5CUdfc3gz/AJFu1/3K+GfD3/ISjr7j8E/8i1a/7lAHW0UUUAR0UUUAFFFc/rfifStBhea8nTf/AHKAN53T771yWseLdK0eF037568W1v4l6rrcz22lR+Ra/wB+sG2s7m5+ebe70Aausaq+sX73P9+s3ZVl7N4X2PT9lAEWypKXZRsoASiil2UAJRRRQAUUuykoAKKKKACiipKAI6KkooAjqSiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKjqSigCOipKKAI6KkooAjooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACio6KAJKjqSigCOipKKACo6kqOgAoqSo6ACiiigAooooA//9T9IKKKKACo6KkoAKKKKAI6KkqOgAooooAKKKKAF2UbKSigCOo9lWKKAK9M8kVc2UbKAKH2b2puytHZRsoAx/JFM8mtao9lAGb5NN2VqbKZsoAx/JFMe2rb8kUeSKAOe+y+9Me2rofs3tUP2X3oA557aofs1dP9l96PsvvQByr21Vns66r7NTPsvvQBx72dVns67B7ah7OgDhns6pvZ13j2dVns6AOAewqg9hXor2FU3sKAPN5rCqE1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+5QB2CPV9Kx4Xq/voAsUUqUlAC76SionegAd6zZnq471QuX+TmgDnryuem+/XQ3lYT0AYc1V3q86VTegCrUdS7KSgCOiiigAooooAKKKKACipKbs9qAG1JRRQAUUuyn0AR0uyn1JsoAjoqSpKAK9SbKds9qfsoAip2z2qambKAGbPajZ7U/ZRsoAZs9qhqzspmz2oAbsqN0qxTdntQBVoqxsqB6AIqKkooAr0VJRQBXqOrFR0AR0UUUAFR1JRQBHRRRQAUUUUAFFFFAEdFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVHUlFAEdSUVHQAUUVJQBHRRRQB//Q/SCiiigAooqOgCSiiigAooooAKKKKACiiigAqOipKACiiigCOipKKAI6koooAKjqSigAooooAKKKKAI6KkooAjqSio6ACiipKAI6kqOigAooqSgCOiiigAqSo6koAKKKKACpKKKACpKKKACiiigAooooAKkoqaFKANWzQ767/TfuVwtn9+u0saAOqheriPWVbPWkj0AWakqDfT99AElFR0x6AGO9UZutW3es25oAx7msKbrW7c1iT0AZTpVB6vzdKrPQBTpjpU9QbKAEpuz2qao6ACiiigAooqSgCOipKKAGbKfUlFABsop2z2p+ygCKnbPapqKAGbKfUmynbPagCGirFFAEeyjZUlFAEeynbPajZ7UbPagBuyjZUlFAFembKs7Pam7KAK9R7KlekoAr1HUlMegBKjqSo6ACo6kqOgCOo6sVHQBHRRRQAVHUlR0AFFFFABRRRQAVHUlFAEdFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVHUlFABRUdFAElFR0UAf//R/SCiiigAooooAKKKKACiiigAooooAKKKKAI6koooAKKKKACiiigAooooAKKKKACo6kooAKKKKACiiigAoqOpKACiiigCOpKKjoAKkoooAKKjqSgAooooAKKKKAJKKKkoAKKKKACiiigAqSimJQA+rMPSoqsQ0AattXW2dcra966qzoA6S2er8L1m2z1fgoAtVJVRKnoAsVDv96dTXoArO9U3q49Ztz92gDNuax5ulbFzWVMlAGW9UnSr9z3qm9AFZ6iqw9Q7PagCGipKKAI6KkooAjoqSigCOptntTqXZQAzZ7VNRRQAzZT6m2e1OoAj2U7Z7UbPajZ7UAOpuz2p+yp9lAEGyjZVnZ7U/ZQBFRsqXZT6AK+yirGymbKAItlQbKubKSgCi9PdKm/gqs9ADXqOrFRvQBXqN6c9D0AVaKkqOgCOh6kqOgCOo6sVHQBHUdSVHQAUUUUAR0VJUdABRRRQAUUUUAFR0UUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUVHQAUUUUAf/0v0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKjqSigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigCOpKKKACiiigAooooAKkqOpKACpKjqSgAooooAKkqOpKACiiigCRKtxfdqFKspQBsW3auhtq56Ct62egDoUq+lZtt2q+j0AXEqeqqPU1AElQPU9R0AV3qrc96tPVV6AMq5rHm6VsTdKx5ulAFN6pulab1mOlAET1HVio6AINlJUlFAEOz2o2e1TUUAQ7PapqKkoAjqTZTtntRs9qAG07Z7U6l2UAJRVjZUlAEeynbPan7KfsoAjqSpKKACipdlGygCKk2f3Km2UbKAItiUVLspKAI6jqzsqF0oArPTHSpaa9AFWilekoAr1C9WXSmUAU6Y9WXqGgCOo6kooAjqOpKKAK9FSVHQBHRRRQAVHUlFAEdFFFABRRRQAUUUUAR0UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABUdSUUAR0VJRQB/9P9IKKKKACiiigAooooAKKKKACiiigAooooAjqSiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKkoooAKkqOpKACiiigCSiiigAqSo6koAlSriVWStBKAL0FbcPSsSCtuHpQBvpV5KyoelX0egDQSpKro9SUAS76Y9OqOgAeqb1K71E9AGZN0rNl+7WlN0rNl+7QBUqq9WX/26hegCg9OpXpKAG7Pam1JRQBHTtntTqKAG7PanU3Z7U/ZQAlN2e1P2VboAiRKfs9qfsp+ygBmyn7KkqXZQBFRUuyjZQAbKNlGypkSgCHZU+ykRKloAj2UbKds9qdQBHsqDZVuo6AI3SmbKneoNlAELpUL1PUb0AV3qq9XqqPQBE9R1M9Q0AQ7PamvUlV6AI6KkqOgCOiiigCOo6kooAr0UUUAFFFFAEdFFFABRRRQAUUUUAR0VJUdABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBHUlR1JQBHRUlFAH//1P0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKkoAKKKKAJKKKKACiipKACiiigCShKKEoAuJVxKppVxKAL0FbdtWIlbdtQBq23atZKyUq4lAF9KfUdSUASb6joooAY9U3qy9U3oArTdKoPVp6qvQBWeqz1ZeonoApvUdWKKAKmykqxsooAg2U+pKds9qAG7KkpdlPRKAGbKeiVJRQAUiJU2yjZQAIlPRKeiUqUAGyjZTkSnUANRKdRS7KAEpdlPooAjqSj/booAjoqSo6AI6jdKsVHQBA9RPUlR0AVXptSvUT0AV6jenPTXoAr016e9MegCs9JVh6r0AR0VJUdAEdFFFAEdR1JUdABRRRQAVHUlR0AFFFFABRRRQAVHUlR0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBHRRRQB/9X9IKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACpKjqSgAooooAkooooAKkqOpKACiiigCSpUqJKkoAsJV5KopV5KALkFbaViJWtD1oA2Eq5VNKsJQBcR6sVUSrO/wB6AH76N9M3+9OoAa9UaleoqAKb1Xqw9V6AKj1E9SvUVAEdR1Yeo9lAEdFSbKKAGbKfUlFABRUuyjZQAbKNlGyp9lABsop2z2p1ADUp1Ls/gp9ABUmyo6k2UAGyipKj2UAFSVJRQBXoqSigCPZUdSbKjoAjqOpKjoAgf5KiqV6ioAjeq71YeoXoApvTXpz0PQBWeoqsPUL0AQ1HVh6r0AFRvUlR0AFR1JUdAEdR1JUdABRRRQAVHUlR0AFFFFABRRRQBHUlFR0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABUdSUUAR0VJRQB//9b9IKKKKACiiigAooooAKjqSigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAqSo6koAKKKkoAKKKKAJKKKKACpKjqSgAqwlV0qxQBMlXEqmlXEoAuQVrQ9ayYK0kegDVR6uJWclW0egC+j09KiqSgCxvqN3pm+jfQAx6a9FQPQBE9V6sPVV6AKz0PU71A9AEVFFFABUuyoql2UAGyjZT6ZsoAfUlGypKAIkSpaKXZQAlKiU+pKAI0SpNlSUUAR7KNlSVJQAUUUUAFFFFABUdSfJRQBHUb0UPQBXopXpj/PQBWeh6HoegCJ6pvVx6qvQBVopr0PQBC9R1I9QvQA16r1JUdABUdSVHQAVHUlR0AR1HUlR0AFFFFABUdSVHQAUUUUAFFFFABUdSVHQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAR0VJUdABRUlFAH/1/0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooqSgAooooAKkoooAKKKKAJKKjqSgAqRKjqSgAqxVerCUATJVxKppVxKALkFayVkwVfSgC5D0q+j1QSrdAF1HqffUCPT99AElFR76N9AElQPT6rvQAPVV6e9MegBr1A9T1HQBHRUlFABRUmyigA2UVJTUoAdSolPqTZQBHUlFSUAR7KkqSigCOpNlFSUAR1JRRQAUUUUAFR1JRQBHRRRQBHVerFRvQBHUM/3Ke9JQBUeoqsUx6AInqq9Wnqm9AFV6dTXp1AFd6hepqjoAr0UUUAR1HUlR0AFR1JUdAEdR1JUdABRRRQAVHUlR0AFFFFABRRRQAUUUUAR0UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFR1JRQBHRUlFAH/0P0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAqSiigAooooAKkqOpKACiiigAqSo6koAKkqOpKACrCVXSrCUATJVxKppVxKALiVfSqCVcSgC+j1ZR6o1cSgCwj1JvqBHp9AFiio99G+gA31G/9+pHqvQAUU16bQAUUUUAGyiiigAqSmpTqACpKKKACpKEqSgAqSihKAD/AGKKKkoAKKKKACiiigAooooAKjqSigCOmPT6KAI6jeh6HoAjqu9SVG9AED0PQ9RUAR1XerFV3oAqvQ9D06gCu9V6leoqAB6r1JUdABUdSVG9ABUdSVHQBHUdSVHQAUUUUAFR1JUdABRRRQAUUUUAFFR0UAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRUdABRRRQB//9H9IKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKkoooAKKKKAJKKjqSgAooooAKkqOpKACpKjqSgCSpEqvVhKAJkq4lU0q0lAFxKlSqyVMlAGslSpVNHq4lAEyPT9/vUKPUm+gCSio6N9AElFR76KACiiigAooooAKkpqU6gAoqSigCRKEqOpKAJKkqOpKACiipKACiiigAooooAKKKKACiiigAqOpKjegAqOpKrvQAVHUj1A9ACVG9SVG9AED1FUr1E9AEb1XepXqm9ACVG9SVG9AEdR0r0x6AIajpXpKACo6kqOgCOipKjoAjqOpKjoAKKKKAI6KKKACiiigAooooAjooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiio6ACipKKAP/0v0gooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACpKjqSgAooooAKKKKAJKKKKACiiigAqSo6koAKkqOpKAJUp6UxKelAEyVaSqqVaSgCVKt1USrdAE6PVlHqmlWEoAsVLvqKigCxRRRQBJUdSVHQBJRRRQAUUUUAFSVHUlACpT6YlPoAKsVXqxQBJRRRQAVJUdSUAFFFFABRRRQAUUUUAFFFFAEdFFFAEdR1JUdAEdR1JUdAEb0PQ9D0AU6HooegCq9Vnqy9VnoASo3qSo3oAgeoqleoqAIHpKV6SgCOh6KHoAjpj0+mPQAlR1JUdABRRRQBHRRRQAUUUUAFFFFABUdSVHQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVHUlR0AFFFFABRRRQB//2Q=="
+
+export default RendererImage
diff --git a/src/components/QrRendererRandRect.js b/src/components/renderer/RendererRandRect.js
similarity index 62%
rename from src/components/QrRendererRandRect.js
rename to src/components/renderer/RendererRandRect.js
index 75dfb1d..cf357bf 100644
--- a/src/components/QrRendererRandRect.js
+++ b/src/components/renderer/RendererRandRect.js
@@ -1,11 +1,11 @@
-import React from "react";
-import './Qrcode.css'
-import {defaultRenderer, rand, randRGB} from "../utils/util";
+import React, { useEffect } from "react";
+import {defaultViewBox, rand} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
-function listPoint(props) {
-    if (!props.qrcode) return []
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
 
-    const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
     const pointList = [];
     let id = 0;
@@ -38,9 +38,21 @@ function listPoint(props) {
     return pointList;
 }
 
-export default class QrRendererRandRect extends React.Component {
-    render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
-    }
+function getParamInfo() {
+    return []
 }
 
+const RendererRandRect = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+
+export default RendererRandRect
diff --git a/src/components/QrRendererBase.js b/src/components/renderer/RendererRandRound.js
similarity index 65%
rename from src/components/QrRendererBase.js
rename to src/components/renderer/RendererRandRound.js
index 34ab950..130d7f1 100644
--- a/src/components/QrRendererBase.js
+++ b/src/components/renderer/RendererRandRound.js
@@ -1,20 +1,19 @@
-import React from "react";
-import './Qrcode.css'
-import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import React, { useEffect } from "react";
+import {defaultViewBox, rand} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
-function listPoint(props) {
-    if (!props.qrcode) return []
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
 
-    const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
     const typeTable = getTypeTable(qrcode);
     const pointList = new Array(nCount);
 
-    let type = props.params[0];
-    let size = props.params[1] / 100;
-    let opacity = props.params[2] / 100;
-    let posType = props.params[3];
+    let type = params[0];
+    let size = params[1] / 100;
+    let opacity = params[2] / 100;
+    let posType = params[3];
     let id = 0;
 
     const vw = [3, -3];
@@ -70,44 +69,52 @@ function listPoint(props) {
     return pointList;
 }
 
-export default class QrRendererBase extends React.Component {
-    constructor(props) {
-        super(props);
-        if (this.props.setParamInfo) {
-            this.props.setParamInfo([
-                {
-                    key: '信息点样式',
-                    default: 0,
-                    choices: [
-                        "矩形",
-                        "圆形",
-                        "随机"
-                    ]
-                },
-                {
-                    key: '信息点缩放',
-                    default: 100
-                },
-                {
-                    key: '信息点不透明度',
-                    default: 100,
-                },
-                {
-                    key: '定位点样式',
-                    default: 0,
-                    choices: [
-                        "矩形",
-                        "圆形",
-                        "行星",
-                    ]
-                },
-                ]
-            );
-        }
-    }
-
-    render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
-    }
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.SELECTOR,
+            key: '信息点样式',
+            default: 2,
+            choices: [
+                "矩形",
+                "圆形",
+                "随机"
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 80
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点不透明度',
+            default: 100,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 2,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+            ]
+        },
+    ];
 }
 
+const RendererRandRound = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+
+export default RendererRandRound
diff --git a/src/components/QrRendererRound.js b/src/components/renderer/RendererRound.js
similarity index 65%
rename from src/components/QrRendererRound.js
rename to src/components/renderer/RendererRound.js
index cf1762b..801f4fa 100644
--- a/src/components/QrRendererRound.js
+++ b/src/components/renderer/RendererRound.js
@@ -1,20 +1,19 @@
-import React from "react";
-import './Qrcode.css'
-import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
-import {defaultRenderer, rand} from "../utils/util";
+import React, { useEffect } from "react";
+import {defaultViewBox, rand} from "../../utils/util";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
-function listPoint(props) {
-    if (!props.qrcode) return []
+function listPoints(qrcode, params) {
+    if (!qrcode) return []
 
-    const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
     const typeTable = getTypeTable(qrcode);
     const pointList = new Array(nCount);
 
-    let type = props.params[0];
-    let size = props.params[1] / 100;
-    let opacity = props.params[2] / 100;
-    let posType = props.params[3];
+    let type = params[0];
+    let size = params[1] / 100;
+    let opacity = params[2] / 100;
+    let posType = params[3];
     let id = 0;
 
     const vw = [3, -3];
@@ -70,44 +69,52 @@ function listPoint(props) {
     return pointList;
 }
 
-export default class QrRendererRound extends React.Component {
-    constructor(props) {
-        super(props);
-        if (this.props.setParamInfo) {
-            this.props.setParamInfo([
-                    {
-                        key: '信息点样式',
-                        default: 1,
-                        choices: [
-                            "矩形",
-                            "圆形",
-                            "随机"
-                        ]
-                    },
-                    {
-                        key: '信息点缩放',
-                        default: 50
-                    },
-                    {
-                        key: '信息点不透明度',
-                        default: 30,
-                    },
-                    {
-                        key: '定位点样式',
-                        default: 1,
-                        choices: [
-                            "矩形",
-                            "圆形",
-                            "行星",
-                        ]
-                    },
-                ]
-            );
-        }
-    }
-
-    render() {
-        return defaultRenderer(this.props.qrcode, listPoint(this.props));
-    }
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.SELECTOR,
+            key: '信息点样式',
+            default: 1,
+            choices: [
+                "矩形",
+                "圆形",
+                "随机"
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 50
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点不透明度',
+            default: 30,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 1,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+            ]
+        },
+    ]
 }
 
+const RendererRound = ({ qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            {listPoints(qrcode, params)}
+        </svg>
+    )
+}
+
+export default RendererRound
diff --git a/src/containers/InputText.js b/src/containers/InputText.js
index 2afc708..901d529 100644
--- a/src/containers/InputText.js
+++ b/src/containers/InputText.js
@@ -1,6 +1,6 @@
-import React from "react";
 import { connect } from 'react-redux';
 import { genQRInfo } from "../actions";
+import React from "react";
 
 const InputText = ({ dispatch }) => (
     <div className="Qr-Centered">
diff --git a/src/containers/Renderer.js b/src/containers/Renderer.js
index 183fe55..c33f237 100644
--- a/src/containers/Renderer.js
+++ b/src/containers/Renderer.js
@@ -1,6 +1,4 @@
-import React from "react";
 import { connect } from 'react-redux';
-import {createParam} from "../actions";
 
 const mapStateToProps = (state, ownProps) => ({
     qrcode: state.qrcode,
@@ -8,8 +6,8 @@ const mapStateToProps = (state, ownProps) => ({
     rendererIndex: ownProps.index
 })
 
-const mapDispatchToProps = (dispatch) => ({
-    setParamInfo: (index, params) => dispatch(createParam(index, params)),
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    setParamInfo: (params) => ownProps.setParamInfo(ownProps.index, params)
 })
 
 export default function Renderer(WrappedRenderer) {
diff --git a/src/containers/StyleListViewer.js b/src/containers/StyleListViewer.js
index ac1c3ef..4799965 100644
--- a/src/containers/StyleListViewer.js
+++ b/src/containers/StyleListViewer.js
@@ -1,27 +1,42 @@
-import React from "react";
-import { connect } from 'react-redux';
-import {changeStyle} from "../actions";
+import {connect, useDispatch} from 'react-redux';
+import {changeStyle, createParam} from "../actions";
 import StyleList from "../components/style/StyleList";
 import Renderer from "./Renderer";
 import RendererBlank from "../components/renderer/RendererBlank";
 import RendererBase from "../components/renderer/RendererBase";
+import RendererDSJ from "../components/renderer/RendererDSJ";
+import RendererRound from "../components/renderer/RendererRound";
+import RendererRandRound from "../components/renderer/RendererRandRound";
+import RendererRandRect from "../components/renderer/RendererRandRect";
+import Renderer25D from "../components/renderer/Renderer25D";
+import RendererImage from "../components/renderer/RendererImage";
+import * as React from "react";
 
 const styles = [
-    {value: 'A1', renderer: RendererBase},
-    {value: 'A2', renderer: RendererBlank},
-    {value: 'B1', renderer: RendererBlank},
-    {value: 'B2', renderer: RendererBlank},
-    {value: 'C1', renderer: RendererBlank},
-    {value: 'C2', renderer: RendererBlank},
-    {value: 'D1', renderer: RendererBlank},
+    {value: "A1", renderer: RendererBase},
+    {value: "A2", renderer: RendererRound},
+    {value: "A3", renderer: RendererRandRound},
+    {value: "SP — 1", renderer: RendererDSJ},
+    {value: "SP — 2", renderer: RendererRandRect},
+    {value: "B1", renderer: Renderer25D},
+    {value: "C1", renderer: RendererImage},
+    {value: "D1", renderer: RendererBlank},
 ]
 
+const paramInfoBuffer = new Array(16).fill(new Array(16))
+const paramValueBuffer = new Array(16).fill(new Array(16))
+
+const setParamInfo = (renderIndex, paramInfo) => {
+    paramInfoBuffer[renderIndex] = paramInfo
+    paramValueBuffer[renderIndex] = paramInfo.map(item => item.default)
+}
+
 const mapStateToProps = state => ({
     styles: styles.map((style, index) => {
         return {
             value: style.value,
             selected: state.selectedIndex == index,
-            renderer: React.createElement(Renderer(style.renderer), {index: index})
+            renderer: React.createElement(Renderer(style.renderer), {index: index, setParamInfo: setParamInfo})
         }
     })
 })
@@ -30,7 +45,11 @@ const mapDispatchToProps = dispatch => ({
     onSelected: index => dispatch(changeStyle(index))
 })
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(StyleList)
+const StyleListViewer = () => {
+    let res = connect(mapStateToProps, mapDispatchToProps)(StyleList)
+    const dispatch = useDispatch()
+    dispatch(createParam(paramInfoBuffer, paramValueBuffer))
+    return res;
+}
+
+export default StyleListViewer;
diff --git a/src/containers/param/ParamListViewer.js b/src/containers/param/ParamListViewer.js
new file mode 100644
index 0000000..bd823cc
--- /dev/null
+++ b/src/containers/param/ParamListViewer.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import ParamList from "../../components/param/ParamList";
+
+const mapStateToProps = (state) => ({
+    rendererIndex: state.selectedIndex,
+    paramInfo: state.paramInfo[state.selectedIndex]
+})
+
+export default connect(mapStateToProps, null)(ParamList)
diff --git a/src/containers/param/ParamSelectViewer.js b/src/containers/param/ParamSelectViewer.js
new file mode 100644
index 0000000..3aaabf8
--- /dev/null
+++ b/src/containers/param/ParamSelectViewer.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import {changeParam} from "../../actions";
+import ParamSelect from "../../components/param/ParamSelect";
+
+const mapStateToProps = (state, ownProps) => ({
+    rendererIndex: ownProps.rendererIndex,
+    paramIndex: ownProps.paramIndex,
+    value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex],
+    info: state.paramInfo[ownProps.rendererIndex][ownProps.paramIndex],
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (e) => {
+        dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.value))
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamSelect);
diff --git a/src/containers/param/ParamTextViewer.js b/src/containers/param/ParamTextViewer.js
new file mode 100644
index 0000000..4c39e55
--- /dev/null
+++ b/src/containers/param/ParamTextViewer.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import ParamText from "../../components/param/ParamText";
+import {changeParam} from "../../actions";
+
+const mapStateToProps = (state, ownProps) => ({
+    rendererIndex: ownProps.rendererIndex,
+    paramIndex: ownProps.paramIndex,
+    value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex]
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onBlur: (e) => dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.value)),
+    onKeyPress: (e) => {
+        if(e.key === 'Enter') {
+            dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.value));
+            e.target.blur()
+        }
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamText);
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 8273acf..d1f7715 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,4 +1,3 @@
-import { combineReducers } from "redux";
 import {getQrcodeData} from "../utils/qrcodeHandler";
 import {actionTypes} from "../constant/ActionTypes";
 
@@ -10,6 +9,7 @@ const initialState = {
 }
 
 export default function appReducer(state = initialState, action) {
+    console.log(state)
     switch (action.type) {
         case actionTypes.GENERATE_QR_INFO: {
             return Object.assign({}, state, {
@@ -23,21 +23,20 @@ export default function appReducer(state = initialState, action) {
         }
         case actionTypes.CREATE_PARAM: {
             return Object.assign({}, state, {
-                paramInfo: Object.assign([], [...state.paramInfo], {
-                    [action.rendererIndex]: action.params
-                }),
-                paramValue: Object.assign([], [...state.paramValue], {
-                    [action.rendererIndex]: action.params.map(obj => obj.default)
-                })
-            });
+                paramInfo: action.paramInfo,
+                paramValue: action.paramValue
+            })
         }
         case actionTypes.CHANGE_PARAM: {
             return Object.assign({}, state, {
-                paramValue: Object.assign([], [...state.paramValue], {
-                    [action.rendererIndex]:
-                        Object.assign([], [...state.paramValue[action.rendererIndex]], {
-                        [action.paramIndex]: action.value
-                    })
+                paramValue: state.paramValue.map((item, index) => {
+                    if (index != action.rendererIndex) {
+                        return item;
+                    }
+
+                    const newItem = item.slice();
+                    newItem[action.paramIndex] = action.value;
+                    return newItem;
                 })
             });
         }
diff --git a/src/utils/util.js b/src/utils/util.js
index 4fb8b16..993829d 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -1,5 +1,3 @@
-import React from "react";
-
 let seed = 0;
 
 export function srand(sd) {