We pursue minimalist and warm design, but we are more concerned about the value presentation of design in financial business, an important part of which is how to improve the efficiency of production collaboration.\nWith the expansion of Didi\u2019s financial business line, the product lines are very different in form, with many branches and complex models. In the collaborative construction of design and R&D, sorting out and extracting stable and highly reuse controls, components and pages has become a Our shared goal. We hope that through componentized solutions, standards can be quickly aligned, production costs can be reduced, and designers can better focus on the growth and innovative design experience beyond efficiency.
\n2021 Didi Financial Design Team Work ShowSee\n![\"FD+](\"https://pt-starimg.didistatic.com/static/starimg/img/4PJN8s5DLq1643105615244.png\")
Join us#
We are looking for excellent UX/UI designer resumes and portfolios please submit: FDplus@didiglobal.com
\n\n\n
\n\nOpinion collection#
We welcome contributions of any kind, any suggestions or comments, please send us a question QQ group: 651090003\n![\"QQ](\"https://pt-starimg.didistatic.com/static/starimg/img/ofygINx3GX1643105614635.png\")
\n\n
\n",i=o.toc="Join usOpinion collectionFollow WeChat Official Accounts"},"ukR+":function(e,o,t){(function(e){var o;(function(){function e(e){this.mode=s.MODE_8BIT_BYTE,this.data=e,this.parsedData=[];for(var o=0,t=this.data.length;oFollow WeChat Official Accounts#
Follow Manhattan Fin Design+ WeChat Official Accounts to learn more about our stories.\n![\"Manhattan](\"https://pt-starimg.didistatic.com/static/starimg/img/Fu6XSglAoE1643105615044.png\")
We pursue minimalist and warm design, but we are more concerned about the value presentation of design in financial business, an important part of which is how to improve the efficiency of production collaboration.\nWith the expansion of Didi\u2019s financial business line, the product lines are very different in form, with many branches and complex models. In the collaborative construction of design and R&D, sorting out and extracting stable and highly reuse controls, components and pages has become a Our shared goal. We hope that through componentized solutions, standards can be quickly aligned, production costs can be reduced, and designers can better focus on the growth and innovative design experience beyond efficiency.
\n2021 Didi Financial Design Team Work ShowSee\n
Join us#
We are looking for excellent UX/UI designer resumes and portfolios please submit: FDplus@didiglobal.com
\n\n\n
\n\nOpinion collection#
We welcome contributions of any kind, any suggestions or comments, please send us a question QQ group: 651090003\n
\n\n
\n",i=o.toc="Join usOpinion collectionFollow WeChat Official Accounts"},"ukR+":function(e,o,t){(function(e){var o;(function(){function e(e){this.mode=s.MODE_8BIT_BYTE,this.data=e,this.parsedData=[];for(var o=0,t=this.data.length;oFollow WeChat Official Accounts#
Follow Manhattan Fin Design+ WeChat Official Accounts to learn more about our stories.\n
\n
\n",i=o.toc=""},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),A=l(i.a,a.a,!1,null,null,null);o["default"]=A.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/9DWaGIdBMX1643190639714.png\")
\n
\n \n \n
\n The target
\n To become an experience designer deeply integrated and bound with the business, and effectively help the business realize data growth and experience jump by maximizing the design value.
\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/gmiERfISUE1643190639730.png\")
\n
\n \n \n
\n To promote
\n I have a sense of ownership, responsibility and responsibility, and regard business and team affairs as my own business.
\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/dXT7QFSA3Q1643190639878.png\")
\n
\n \n \n
\n advocate
\n Breaking boundary awareness, deep integration, proactive step forward, efficient collaboration.
\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/Hf0EGJR9sc1643190639890.png\")
\n
\n \n \n
\n claim
\n Have the right values, in the face of conflict, deal with the situation as it is, and actively solve.
\n\n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/QUoX8r0bBp1643190640044.png\")
\n
\n \n \n
\n boycott
\n Passing the buck, taking sides, spreading negative information among the team.
\n\n
\n",i=o.toc=""},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),A=l(i.a,a.a,!1,null,null,null);o["default"]=A.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n \n
\n \n \n
\n The target
\n To become an experience designer deeply integrated and bound with the business, and effectively help the business realize data growth and experience jump by maximizing the design value.
\n\n
\n \n \n
\n \n \n
\n To promote
\n I have a sense of ownership, responsibility and responsibility, and regard business and team affairs as my own business.
\n\n
\n \n \n
\n \n \n
\n advocate
\n Breaking boundary awareness, deep integration, proactive step forward, efficient collaboration.
\n\n
\n \n \n
\n \n \n
\n claim
\n Have the right values, in the face of conflict, deal with the situation as it is, and actively solve.
\n\n
\n\n \n
\n \n \n
\n boycott
\n Passing the buck, taking sides, spreading negative information among the team.
\nMore resources are being developed
\n\n\n\n\n",i=o.toc=""},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),A=t("VU/8"),l=A(i.a,a.a,!1,null,null,null);o["default"]=l.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},rcZg:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),A=d(a);o.default={components:{"qr-code":n.default,MdDemo:A.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1![](\"http://manhattan.didistatic.com/static/manhattan/mand/docs/mand-doc-resource.svg\")
\n More resources are being developed
\n\n\n\n\n",i=o.toc=""},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),A=t("VU/8"),l=A(i.a,a.a,!1,null,null,null);o["default"]=l.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},rcZg:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),A=d(a);o.default={components:{"qr-code":n.default,MdDemo:A.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1Finance is a serious and experienced industry. In terms of design attitude, we should grasp the principles of moderation, objectivity and neutrality, and reflect industry standards and business expertise
\nIndustry standard#
Financial products have their own industry standard forms. They should be designed appropriately and neutrally to represent the industry standard forms and innovate cautiously
\n\n
\n\n\n\n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/PJMafnzgcO1644396012789.png\")
\n
\n \n Restore difference#
The difference of product form is the external manifestation of business difference. On the premise of unified experience, reasonable difference display will make users feel professional
\n\n
\n\n\n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/JEnklVFvI81643257076799.png\")
\n
\n \n Service touch#
When users are in the scene of negative emotions, it is the embodiment of service awareness to provide possible solutions and service entrances that can be consulted at any time
\n\n
\n",i=o.toc="Industry standardRestore differenceService touch"},WDQn:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/8nemUxUtoY1643257119700.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/w7VbD0uhwN1643263939043.png\")
\n
\n \n Finance is a serious and experienced industry. In terms of design attitude, we should grasp the principles of moderation, objectivity and neutrality, and reflect industry standards and business expertise
\nIndustry standard#
Financial products have their own industry standard forms. They should be designed appropriately and neutrally to represent the industry standard forms and innovate cautiously
\n\n
\n\n\n\n
\n\n \n
\n \n Restore difference#
The difference of product form is the external manifestation of business difference. On the premise of unified experience, reasonable difference display will make users feel professional
\n\n
\n\n\n
\n\n \n
\n \n Service touch#
When users are in the scene of negative emotions, it is the embodiment of service awareness to provide possible solutions and service entrances that can be consulted at any time
\n\n
\n",i=o.toc="Industry standardRestore differenceService touch"},WDQn:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n \n
\n \n \n
\n\n \n
\n \n The user should be given the right to know and independent control. The user can clearly know the results of the action to be carried out, and can understand the current position and free return in operation.
\n\n\nInformation transparency#
The financial scenario involves the signing of various agreements. In order to facilitate users' understanding, the display of the agreement should be clear and simple, and users' active authorization is required.
\n\n
\n\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/1308n7PCET1643189771407.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/heBwyAI0eY1643189771378.png\")
\n
\n \n Clear progress#
When the user is carrying out complex tasks, try to inform the user of the current task progress and the remaining tasks to be completed.
\n\n
\n\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/spdlGlphym1643189799024.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/dIdjNT6c2i1643189799025.png\")
\n
\n \n For capital flow and business handling, it is necessary to clearly convey the concept of time to users through reasonable progress nodes or waiting design to avoid users' anxiety.
\n\n
\n\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/6hOAMmnvby1643189839058.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/hPTB2n5vQM1643189839196.png\")
\n
\n \n Let users decide#
For operations that affect the user's attention or transaction, the user shall be allowed to revoke / modify the results generated by the operation, and the user shall be given the right to operate at both the source and the end.
\n\n
\n",i=o.toc="Information transparencyClear progressLet users decide"},"WLG+":function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("HNR5"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("XzZd"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},XzZd:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/45u8sLeEBr1643189884365.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/e5ru8rztDF1643189884274.png\")
\n
\n \n The user should be given the right to know and independent control. The user can clearly know the results of the action to be carried out, and can understand the current position and free return in operation.
\n\n\nInformation transparency#
The financial scenario involves the signing of various agreements. In order to facilitate users' understanding, the display of the agreement should be clear and simple, and users' active authorization is required.
\n\n
\n\n\n
\n \n \n
\n \n \n
\n\n \n
\n \n Clear progress#
When the user is carrying out complex tasks, try to inform the user of the current task progress and the remaining tasks to be completed.
\n\n
\n\n\n
\n \n \n
\n \n \n
\n\n \n
\n \n For capital flow and business handling, it is necessary to clearly convey the concept of time to users through reasonable progress nodes or waiting design to avoid users' anxiety.
\n\n
\n\n\n
\n \n \n
\n \n \n
\n\n \n
\n \n Let users decide#
For operations that affect the user's attention or transaction, the user shall be allowed to revoke / modify the results generated by the operation, and the user shall be given the right to operate at both the source and the end.
\n\n
\n",i=o.toc="Information transparencyClear progressLet users decide"},"WLG+":function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("HNR5"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("XzZd"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},XzZd:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n \n
\n \n \n
\n\n \n
\n \n Focus on single task#
A page only focuses on one core task and provides a single operation button; If multiple operations are possible, the primary and secondary operations shall also be distinguished to avoid multiple operation buttons.
\n\n
\n\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/bVh1mXPP9r1643188890070.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/9R7BKLj8ak1643188890067.png\")
\n
\n \n Simplified multi-level#
For complex information that needs to be layered, try to show only the first level information to users by default, and hide the other levels.
\n\n
\n\n\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/29KC3uQhEM1643188923160.png\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/TFoFbaVGHJ1643188923185.png\")
\n
\n \n What you see is what you get#
For the scanning and recognition function of bank cards, driving licenses and other certificates, the recognition results are compared with the corresponding certificate photos. Whether the recognition is correct or not is very intuitive and clear at a glance.
\n\n
\n",i=o.toc="Focus on single taskSimplified multi-levelWhat you see is what you get"},N6ap:function(e,o,t){o=e.exports=t("FZ+f")(!0),o.push([e.i,".default-doc-demo{margin-bottom:20px}.default-doc-demo .doc-demo-box-info{padding:15px}.default-doc-demo .doc-demo-box-info .doc-demo-title{display:flex;align-items:center;font-size:14px;font-weight:500}.default-doc-demo .doc-demo-box-info .doc-demo-describe{margin-top:10px;color:#999;font-size:14px;font-weight:400}.default-doc-demo .doc-demo-box-info .doc-demo-message{display:inline-block;width:100%;box-sizing:border-box;border-left:.3em solid #2f86f6;padding:1em;margin-left:0;margin-top:10px;background:rgba(252,145,83,.05);border-radius:4px;font-weight:400}.doc-demo-box{position:relative;padding-bottom:24px;border:1px solid #efefef;border-radius:2px;transition:all .3s;overflow:hidden}.doc-demo-box:hover .doc-demo-box-toggle span{transform:translateX(0)}.doc-demo-box.active .doc-demo-box-code,.doc-demo-box.active .doc-demo-box-toggle{display:block}.demo-codesandbox{width:16px;height:16px;background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAsCAMAAAAgsQpJAAAAh1BMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwrRDr0AAAALHRSTlMA++Lla1M79+mNGhII793RXTIM2cXCn30grqV0SikjA764smVF81jHhZeVkzsH/ogAAAG8SURBVDjLnZTZloIwDECDsssiIIuioAIuY/7/+wZbUoVWnDP3iQO3TZOGgIx7Siv4TuxoiNrPCuapdRsZXenNefsEBYvLR83c4Ihwr9SKHUqcD4ocUEnmjr3SR0RNZVo3DwSXgGtWmqVCcOgotk45hMhJMtODiGd0X70lFxi9Vm2Rb7fcXniVjQBPQxLrBXLSCIJnGET/VBbiDlsPiFwbNgWfbXh1IlDjZky1YckP3IAair5g4nNN0qq0NmGfSSxYQkcpenTEnm0hRKrErpDvdGMCCPEVxBF9uHLYgfYAExHq5tmKPu9DT/fZndQwFjnxzRr60AjYLccAU5HiZay5ttQ3siiojsg4HgBmROqR0AT4KkKDaIBaHK/Xp6JLIv0bajF2LBKp0kqRVZeLHKusFWIbIAqRWMtifcW/iZD+Q7RnRTFkluDPiPUhwAEfjAU9b9yJ6DY7jSL3b7y8Q46Wv4urvUPn73KP1/5BC5drEr0oDxE1DcfjtzjjwNVkYqWfesdi11tJPxxnlyM+Mn/QUlMeyyEKbBb148zVqaZMo3mnIi67l2blMXzGdagAdxdmoHlJA3KeKExMkPgFSQZ1ZV06NgQAAAAASUVORK5CYII=\") no-repeat;background-size:contain}.demo-codesandbox a{float:left;width:100%;height:100%;margin:0}.doc-demo-box-preview{position:relative;float:left;width:100%;padding:10px 0;box-sizing:border-box;border-top:1px solid #ebebeb;background:#f9fafb}.doc-demo-box-preview .doc-demo-box-preview-box{position:relative;width:100%;max-width:450px;margin:0 auto;overflow:hidden}.doc-demo-box-preview .doc-demo-box-preview-box .md-example-child{zoom:.6}.doc-demo-box-preview .doc-demo-box-preview-box ul>li{list-style:none!important}.doc-demo-box-code{position:relative;display:none;width:100%;overflow:hidden;box-sizing:border-box;border-top:1px dashed #ebebeb}.doc-demo-box-code pre{margin-bottom:0;padding-bottom:0;background:#fff;transition:all .3s}.doc-demo-box-code pre code:after{left:5px;right:auto!important}.doc-demo-box-toggle{position:absolute;bottom:0;left:0;right:0;z-index:1102;width:100%;height:24px;border-top:1px solid #ebebeb;cursor:pointer;text-align:center;line-height:24px;font-size:12px;color:#ccc;transition:background .3s;background:#fff;overflow:hidden}.doc-demo-box-toggle i{font-size:24px;line-height:24px}.doc-demo-box-toggle span{position:absolute;top:0;right:20px;transform:translateX(200%);transition:transform .3s ease-in-out;font-weight:500}.doc-demo-box-toggle:hover{background:#fafafa;i:,span;color:#256fa3}.doc-demo-box-toggle.is-stricky{position:fixed;bottom:0}.doc-demo-box-code-operate{position:absolute;top:0;right:0;z-index:100;padding:10px 0;cursor:pointer}.doc-demo-box-code-operate i{float:right;margin-right:10px;font-size:16px;color:#ccc;transition:all .3s}.doc-demo-box-code-operate i:active,.doc-demo-box-code-operate i:focus,.doc-demo-box-code-operate i:visited{box-shadow:none;outline:none}@media (max-width:1500px){.doc-demo-box-preview-box{max-width:400px!important}.doc-demo-box-preview-box .md-example-child{zoom:.533!important}}@media (max-width:1200px){.doc-demo-box-preview-box{max-width:350px!important}.doc-demo-box-preview-box .md-example-child{zoom:.467!important}}@media (max-width:1000px){.doc-demo-box-preview-box{width:100%!important}.doc-demo-box-code{position:static;float:left;width:100%;border-left:none!important}}","",{version:3,sources:["/Users/huangbingcheng/Work/Code/Github/didi/mand-mobile/site/theme/default/components/Demo.vue"],names:[],mappings:"AACA,kBACE,kBAAoB,CACrB,AACD,qCACE,YAAc,CACf,AACD,qDACE,aAAc,AACd,mBAAoB,AACpB,eAAgB,AAChB,eAAiB,CAClB,AACD,wDACE,gBAAiB,AACjB,WAAY,AACZ,eAAgB,AAChB,eAAiB,CAClB,AACD,uDACE,qBAAsB,AACtB,WAAY,AACZ,sBAAuB,AACvB,+BAAiC,AACjC,YAAa,AACb,cAAe,AACf,gBAAiB,AACjB,gCAAkC,AAClC,kBAAmB,AACnB,eAAiB,CAClB,AACD,cACE,kBAAmB,AACnB,oBAAqB,AACrB,yBAA0B,AAC1B,kBAAmB,AACnB,mBAAqB,AACrB,eAAiB,CAClB,AACD,8CACE,uBAAyB,CAC1B,AACD,kFAEE,aAAe,CAChB,AACD,kBACE,WAAY,AACZ,YAAa,AACb,+9BAAg+B,AACh+B,uBAAyB,CAC1B,AACD,oBACE,WAAY,AACZ,WAAY,AACZ,YAAa,AACb,QAAU,CACX,AACD,sBACE,kBAAmB,AACnB,WAAY,AACZ,WAAY,AACZ,eAAgB,AAChB,sBAAuB,AACvB,6BAA8B,AAC9B,kBAAoB,CACrB,AACD,gDACE,kBAAmB,AACnB,WAAY,AACZ,gBAAiB,AACjB,cAAe,AACf,eAAiB,CAClB,AACD,kEACE,OAAU,CACX,AACD,sDACE,yBAA4B,CAC7B,AACD,mBACE,kBAAmB,AACnB,aAAc,AACd,WAAY,AACZ,gBAAiB,AACjB,sBAAuB,AACvB,6BAA+B,CAChC,AACD,uBACE,gBAAiB,AACjB,iBAAkB,AAClB,gBAAiB,AACjB,kBAAqB,CACtB,AACD,kCACE,SAAU,AACV,oBAAuB,CACxB,AACD,qBACE,kBAAmB,AACnB,SAAU,AACV,OAAQ,AACR,QAAS,AACT,aAAc,AACd,WAAY,AACZ,YAAa,AACb,6BAA8B,AAC9B,eAAgB,AAChB,kBAAmB,AACnB,iBAAkB,AAClB,eAAgB,AAChB,WAAY,AACZ,0BAA4B,AAC5B,gBAAiB,AACjB,eAAiB,CAClB,AACD,uBACE,eAAgB,AAChB,gBAAkB,CACnB,AACD,0BACE,kBAAmB,AACnB,MAAO,AACP,WAAY,AACZ,2BAA4B,AAC5B,qCAAuC,AACvC,eAAiB,CAClB,AACD,2BACE,mBAAoB,AACpB,QAAU,AACV,aAAe,CAChB,AACD,gCACE,eAAgB,AAChB,QAAU,CACX,AACD,2BACE,kBAAmB,AACnB,MAAO,AACP,QAAS,AACT,YAAa,AACb,eAAgB,AAChB,cAAgB,CACjB,AACD,6BACE,YAAa,AACb,kBAAmB,AACnB,eAAgB,AAChB,WAAY,AACZ,kBAAqB,CACtB,AACD,4GAGE,gBAAiB,AACjB,YAAc,CACf,AACD,0BACA,0BACI,yBAA4B,CAC/B,AACD,4CACI,mBAAuB,CAC1B,CACA,AACD,0BACA,0BACI,yBAA4B,CAC/B,AACD,4CACI,mBAAuB,CAC1B,CACA,AACD,0BACA,0BACI,oBAAuB,CAC1B,AACD,mBACI,gBAAiB,AACjB,WAAY,AACZ,WAAY,AACZ,0BAA6B,CAChC,CACA",file:"Demo.vue",sourcesContent:["\n.default-doc-demo {\n margin-bottom: 20px;\n}\n.default-doc-demo .doc-demo-box-info {\n padding: 15px;\n}\n.default-doc-demo .doc-demo-box-info .doc-demo-title {\n display: flex;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n}\n.default-doc-demo .doc-demo-box-info .doc-demo-describe {\n margin-top: 10px;\n color: #999;\n font-size: 14px;\n font-weight: 400;\n}\n.default-doc-demo .doc-demo-box-info .doc-demo-message {\n display: inline-block;\n width: 100%;\n box-sizing: border-box;\n border-left: 0.3em solid #2f86f6;\n padding: 1em;\n margin-left: 0;\n margin-top: 10px;\n background: rgba(252,145,83,0.05);\n border-radius: 4px;\n font-weight: 400;\n}\n.doc-demo-box {\n position: relative;\n padding-bottom: 24px;\n border: solid 1px #efefef;\n border-radius: 2px;\n transition: all 0.3s;\n overflow: hidden;\n}\n.doc-demo-box:hover .doc-demo-box-toggle span {\n transform: translateX(0);\n}\n.doc-demo-box.active .doc-demo-box-code,\n.doc-demo-box.active .doc-demo-box-toggle {\n display: block;\n}\n.demo-codesandbox {\n width: 16px;\n height: 16px;\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAsCAMAAAAgsQpJAAAAh1BMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwrRDr0AAAALHRSTlMA++Lla1M79+mNGhII793RXTIM2cXCn30grqV0SikjA764smVF81jHhZeVkzsH/ogAAAG8SURBVDjLnZTZloIwDECDsssiIIuioAIuY/7/+wZbUoVWnDP3iQO3TZOGgIx7Siv4TuxoiNrPCuapdRsZXenNefsEBYvLR83c4Ihwr9SKHUqcD4ocUEnmjr3SR0RNZVo3DwSXgGtWmqVCcOgotk45hMhJMtODiGd0X70lFxi9Vm2Rb7fcXniVjQBPQxLrBXLSCIJnGET/VBbiDlsPiFwbNgWfbXh1IlDjZky1YckP3IAair5g4nNN0qq0NmGfSSxYQkcpenTEnm0hRKrErpDvdGMCCPEVxBF9uHLYgfYAExHq5tmKPu9DT/fZndQwFjnxzRr60AjYLccAU5HiZay5ttQ3siiojsg4HgBmROqR0AT4KkKDaIBaHK/Xp6JLIv0bajF2LBKp0kqRVZeLHKusFWIbIAqRWMtifcW/iZD+Q7RnRTFkluDPiPUhwAEfjAU9b9yJ6DY7jSL3b7y8Q46Wv4urvUPn73KP1/5BC5drEr0oDxE1DcfjtzjjwNVkYqWfesdi11tJPxxnlyM+Mn/QUlMeyyEKbBb148zVqaZMo3mnIi67l2blMXzGdagAdxdmoHlJA3KeKExMkPgFSQZ1ZV06NgQAAAAASUVORK5CYII=\") no-repeat;\n background-size: contain;\n}\n.demo-codesandbox a {\n float: left;\n width: 100%;\n height: 100%;\n margin: 0;\n}\n.doc-demo-box-preview {\n position: relative;\n float: left;\n width: 100%;\n padding: 10px 0;\n box-sizing: border-box;\n border-top: solid 1px #ebebeb;\n background: #f9fafb;\n}\n.doc-demo-box-preview .doc-demo-box-preview-box {\n position: relative;\n width: 100%;\n max-width: 450px;\n margin: 0 auto;\n overflow: hidden;\n}\n.doc-demo-box-preview .doc-demo-box-preview-box .md-example-child {\n zoom: 0.6;\n}\n.doc-demo-box-preview .doc-demo-box-preview-box ul>li {\n list-style: none !important;\n}\n.doc-demo-box-code {\n position: relative;\n display: none;\n width: 100%;\n overflow: hidden;\n box-sizing: border-box;\n border-top: dashed 1px #ebebeb;\n}\n.doc-demo-box-code pre {\n margin-bottom: 0;\n padding-bottom: 0;\n background: #fff;\n transition: all 0.3s;\n}\n.doc-demo-box-code pre code:after {\n left: 5px;\n right: auto !important;\n}\n.doc-demo-box-toggle {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1102;\n width: 100%;\n height: 24px;\n border-top: solid 1px #ebebeb;\n cursor: pointer;\n text-align: center;\n line-height: 24px;\n font-size: 12px;\n color: #ccc;\n transition: background 0.3s;\n background: #fff;\n overflow: hidden;\n}\n.doc-demo-box-toggle i {\n font-size: 24px;\n line-height: 24px;\n}\n.doc-demo-box-toggle span {\n position: absolute;\n top: 0;\n right: 20px;\n transform: translateX(200%);\n transition: transform 0.3s ease-in-out;\n font-weight: 500;\n}\n.doc-demo-box-toggle:hover {\n background: #fafafa;\n i: , span;\n color: #256fa3;\n}\n.doc-demo-box-toggle.is-stricky {\n position: fixed;\n bottom: 0;\n}\n.doc-demo-box-code-operate {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 100;\n padding: 10px 0;\n cursor: pointer;\n}\n.doc-demo-box-code-operate i {\n float: right;\n margin-right: 10px;\n font-size: 16px;\n color: #ccc;\n transition: all 0.3s;\n}\n.doc-demo-box-code-operate i:active,\n.doc-demo-box-code-operate i:visited,\n.doc-demo-box-code-operate i:focus {\n box-shadow: none;\n outline: none;\n}\n@media (max-width: 1500px) {\n.doc-demo-box-preview-box {\n max-width: 400px !important;\n}\n.doc-demo-box-preview-box .md-example-child {\n zoom: 0.533 !important;\n}\n}\n@media (max-width: 1200px) {\n.doc-demo-box-preview-box {\n max-width: 350px !important;\n}\n.doc-demo-box-preview-box .md-example-child {\n zoom: 0.467 !important;\n}\n}\n@media (max-width: 1000px) {\n.doc-demo-box-preview-box {\n width: 100% !important;\n}\n.doc-demo-box-code {\n position: static;\n float: left;\n width: 100%;\n border-left: none !important;\n}\n}"],sourceRoot:""}])},"Ome+":function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("ukR+"),i=function(e){return e&&e.__esModule?e:{default:e}}(d);o.default={props:{text:{type:String,required:!0},size:{type:Number,required:!1,default:256},color:{type:String,required:!1,default:"#000"},bgColor:{type:String,required:!1,default:"#FFF"},errorLevel:{type:String,validator:function(e){return"L"===e||"M"===e||"Q"===e||"H"===e},required:!1,default:"H"}},watch:{text:function(){this.clear(),this.makeCode(this.text)}},data:function(){return{qrCode:{}}},mounted:function(){this.qrCode=new i.default(this.$el,{text:this.text,width:this.size,height:this.size,colorDark:this.color,colorLight:this.bgColor,correctLevel:i.default.CorrectLevel[this.errorLevel]})},methods:{clear:function(){this.qrCode.clear()},makeCode:function(e){this.qrCode.makeCode(e)}}}},QAM3:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("nkX0"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lPXM"),l=t("VU/8"),c=l(i.a,a.a,!1,function(){t("qDj3")},null,null);o["default"]=c.exports},XbnR:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("LLIv"),i=function(e){return e&&e.__esModule?e:{default:e}}(d),n=t("LyQt"),a=t("Cd0B");o.default={name:"mfe-blog-theme-default-doc-container",data:function(){return{info:n.info,body:n.body,toc:n.toc,demos:a.demos}},components:{MbDocer:i.default}}},Xs4S:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"mfe-blog-theme-default-doc-container"},[t("mb-docer",{attrs:{info:e.info,body:e.body,toc:e.toc,demos:e.demos}})],1)},staticRenderFns:[]}},lPXM:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div",{staticClass:"default-doc-demo"},[t("div",{staticClass:"doc-demo-box",class:[e.codeShow?"active":""]},[t("div",{staticClass:"doc-demo-box-info"},["en-US"===e.lang?[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.titleEnUS||e.demo.component.title||"Basic")}}),e._v(" "),e.demo.component.describeEnUS||e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describeEnUS||e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.messageEnUS||e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.messageEnUS||e.demo.component.message)}}):e._e()]:[t("h4",{staticClass:"doc-demo-title",domProps:{innerHTML:e._s(e.demo.component.title||"\u57FA\u672C")}}),e._v(" "),e.demo.component.describe?t("h5",{staticClass:"doc-demo-describe",domProps:{innerHTML:e._s(e.demo.component.describe)}}):e._e(),e._v(" "),e.demo.component.message?t("h5",{staticClass:"doc-demo-message",domProps:{innerHTML:e._s(e.demo.component.message)}}):e._e()]],2),e._v(" "),t("div",{staticClass:"doc-demo-box-preview",style:{background:e.demo.component.background||"#f9fafb"}},[t("div",{staticClass:"doc-demo-box-preview-box",style:{minHeight:e.demo.component.height+"px"}},[t(e.demo.component,{tag:"component"})],1)]),e._v(" "),t("div",{staticClass:"doc-demo-box-code"},[t("div",{staticClass:"doc-demo-box-code-operate"},[t("i",{staticClass:"icon-hollowError",on:{click:e.toggleDemoBox}}),e._v(" "),"en-US"===e.lang?[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"Copied":"Copy Code",offset:5},expression:"{content: isCopySuccess ? 'Copied' : 'Copy Code', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Open in CodeSandBox",offset:5},expression:"{content: 'Open in CodeSandBox', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"Edit this page on Github",offset:5},expression:"{content: 'Edit this page on Github', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]:[t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:e.isCopySuccess?"\u590D\u5236\u4EE3\u7801\u6210\u529F":"\u590D\u5236\u4EE3\u7801",offset:5},expression:"{content: isCopySuccess ? '\u590D\u5236\u4EE3\u7801\u6210\u529F' : '\u590D\u5236\u4EE3\u7801', offset: 5}"},{name:"clipboard",rawName:"v-clipboard:copy",value:decodeURI(e.demo.raw),expression:"decodeURI(demo.raw)",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:e.onCopySuccess,expression:"onCopySuccess",arg:"success"}],class:e.isCopySuccess?"icon-question":"icon-paper"}),e._v(" "),e.demo.component.codeSandBox?t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728CodeSandBox\u6253\u5F00",offset:5},expression:"{content: '\u5728CodeSandBox\u6253\u5F00', offset: 5}"}],staticClass:"demo-codesandbox"},[t("a",{attrs:{href:e.demo.component.codeSandBox,target:"_blank"}})]):e._e(),e._v(" "),t("i",{directives:[{name:"tooltip",rawName:"v-tooltip",value:{content:"\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875",offset:5},expression:"{content: '\u5728Github\u4E0A\u7F16\u8F91\u6B64\u9875', offset: 5}"}],staticClass:"icon-edit",on:{click:e.goToDemo}})]],2),e._v(" "),t("pre",[e._v(" "),t("code",{staticClass:"lang-vue",domProps:{innerHTML:e._s(e.demo.code)}}),e._v("\n ")])]),e._v(" "),t("div",{staticClass:"doc-demo-box-toggle",on:{click:e.toggleDemoBox}},[e.codeShow?[t("i",{staticClass:"icon-triangle-up"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Hide Code")]):t("span",[e._v("\u4EE3\u7801\u6536\u8D77")])]:[t("i",{staticClass:"icon-triangle-down"}),e._v(" "),"en-US"===e.lang?t("span",[e._v("Show Code")]):t("span",[e._v("\u4EE3\u7801\u5C55\u793A")])]],2)])])},staticRenderFns:[]}},lwwV:function(e,o){"use strict";o.a={render:function(){var e=this,o=e.$createElement,t=e._self._c||o;return t("div")},staticRenderFns:[]}},nkX0:function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.default={props:{lang:{type:String},codeShow:{type:Boolean,default:!1},demo:{type:Object}},data:function(){return{isCopySuccess:!1}},methods:{onCopySuccess:function(){var e=this;this.isCopySuccess=!0,setTimeout(function(){e.isCopySuccess=!1},1e3)},toggleDemoBox:function(){this.$emit("toggle")},goToDemo:function(){this.$emit("edit")}}}},oCGI:function(e,o,t){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var d=t("Ome+"),i=t.n(d);for(var n in d)"default"!==n&&function(e){t.d(o,e,function(){return d[e]})}(n);var a=t("lwwV"),l=t("VU/8"),c=l(i.a,a.a,!1,null,null,null);o["default"]=c.exports},qDj3:function(e,o,t){var d=t("N6ap");"string"==typeof d&&(d=[[e.i,d,""]]),d.locals&&(e.exports=d.locals);t("rjj0")("dd265b6a",d,!0,{})},tyZS:function(e,o,t){"use strict";function d(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(o,"__esModule",{value:!0});var i=t("oCGI"),n=d(i),a=t("QAM3"),l=d(a);o.default={components:{"qr-code":n.default,MdDemo:l.default},props:["info","body","toc","demos"],data:function(){return{demoBoxShowStat:[],activeDemoBoxZoonPos:{},isTocStricky:!1,isQrcodeShow:!1,isCopySuccess:!1}},computed:{bodyHead:function(){return this.body.split("")[0]},bodyTail:function(){return this.body.split("")[1]},demoBox:function(){return $(".doc-demo-box")},previewBox:function(){return $(".doc-demo-box-preview")},codeBox:function(){return $(".doc-demo-box-code")},curRouteIndex:function(){return this.$route.meta.index},prevRoute:function(){return this.findRoute(this.curRouteIndex-1,-1)},nextRoute:function(){return this.findRoute(this.curRouteIndex+1,1)},lang:function(){return~this.$route.path.indexOf("zh-CN")?"zh-CN":"en-US"},hiddenToc:function(){return"hidden"===this.info.toc}},mounted:function(){if(location.hash){var e=location.hash.substr(1);location.hash="",location.hash=e}},methods:{findRoute:function(e){for(var o=1\n
\n \n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/FfSJRAtAsN1545826131586.jpg\")
\n
\n \n \n
\n\n ![](\"https://pt-starimg.didistatic.com/static/starimg/img/P1V5PxTfZJ1545826131541.jpg\")
\n
\n \n