pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#2a2c2d;background:#e6e6e6}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.hljs-comment,.hljs-quote{color:#676b79;font-style:italic}.hljs-params{color:#676b79}.hljs-punctuation,.hljs-attr{color:#2a2c2d}.hljs-selector-tag,.hljs-name,.hljs-meta,.hljs-operator,.hljs-char.escape_{color:#c56200}.hljs-keyword,.hljs-deletion{color:#d92792}.hljs-regexp,.hljs-selector-pseudo,.hljs-selector-attr,.hljs-variable.language_{color:#cc5e91}.hljs-subst,.hljs-property,.hljs-code,.hljs-formula,.hljs-section,.hljs-title.function_{color:#3787c7}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-selector-class,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-meta .hljs-string{color:#0d7d6c}.hljs-variable,.hljs-template-variable,.hljs-number,.hljs-literal,.hljs-type,.hljs-link,.hljs-built_in,.hljs-title,.hljs-selector-id,.hljs-tag,.hljs-doctag,.hljs-attribute,.hljs-template-tag,.hljs-meta .hljs-keyword{color:#7641bb}.es-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--es-header-height);background-color:var(--es-color-bg);z-index:2;padding:0 24px;border-bottom:var(--es-border);transition:border-color .2s,background-color .2s}.es-header .es-logo{display:flex;align-items:center}.es-header .es-logo .es-logo-img{width:30px;margin-right:10px}.es-header h1{font-size:20px;font-weight:600;transition:opacity .25s;cursor:pointer}.es-header h1:hover{opacity:.8}.es-header .es-navbar{display:flex;align-items:center}.es-header .es-navbar a{display:flex;justify-content:center;align-items:center;margin-left:16px;border-radius:50%}.es-header .es-navbar img{width:30px;height:30px;transition:.3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}.es-header .es-navbar img:hover{transform:scale(1.2)}.es-layout-aside{flex-shrink:0;width:var(--es-layout-aside-width);height:100%;border-right:var(--es-border);background-color:var(--es-color-bg)}.el-icon-arrow-down{font-size:12px}.es-header-cube{padding:0 12px;color:var(--es-color);background:var(--es-bg-color-page);font-size:14px;line-height:30px;text-align:center;border:1px solid var(--es-border);border-radius:20px;cursor:pointer;margin-left:16px}.es-header-cube:hover{color:var(--el-color-primary)}.es-header-lang{padding:0 12px;border:none;color:var(--es-color);font-size:14px;cursor:pointer;margin-left:16px}.es-header-lang:hover{color:var(--el-color-primary)}.es-app{width:100vw;height:100vh;color:var(--es-color);font-size:14px;overflow:hidden;background-color:var(--es-color-bg);transition:border-color .2s,background-color .2s}.es-app .es-main{display:flex;position:relative;height:100%;min-width:400px;background-color:var(--es-bg-color-page)}.es-app .es-main .es-sidebar{padding:24px 6px}.es-app .es-main .es-sidebar .es-sidebar-item{display:flex;align-items:center;padding:8px 24px;width:100%;height:36px;margin:8px 0;cursor:pointer;transition:color .2s;font-size:15px}.es-app .es-main .es-sidebar .es-sidebar-item:hover{color:var(--el-color-primary)}.es-app .es-main .es-sidebar .es-sidebar-item.active{background-color:rgba(var(--el-color-primary-rgb),.1);color:var(--el-color-primary);border-radius:36px}.es-app .es-main .es-content{position:relative;flex:1;margin:20px;background-color:var(--es-color-bg);box-shadow:var(--el-box-shadow);height:calc(100% - var(--es-header-height) - 40px)}.demo{width:100%;padding-top:10px;display:flex;flex-direction:column;justify-content:center}.demo .whitewrapper{background-color:#fafafc;background-image:linear-gradient(#fafafc 20px,transparent 0),linear-gradient(90deg,transparent 20px,#373739 0)}.demo .blackwrapper{background-color:#18181c;background-image:linear-gradient(#18181c 20px,transparent 0),linear-gradient(90deg,transparent 20px,#86909c 0)}.imgStyle{width:100%;height:100%}.btn{margin-right:5px}.es-basic-rect{border:var(--el-border)}.es-icon{--color: inherit;--font-size: inherit;height:1em;width:1em;line-height:1em;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:var(--color);font-size:var(--font-size)}.es-editor-area{position:absolute;top:0;left:0;z-index:1000;width:100px;height:100px;border:1px dashed var(--el-color-primary);background-color:rgba(var(--el-color-primary-rgb),.1)}.grid-rect{width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}[class^=es-editor-markline]{position:absolute;z-index:9999;background-color:var(--el-color-primary)}.es-text{width:calc(100% - 1px);height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);word-break:break-all;display:flex;justify-content:center;align-items:center}.es-text.editable{z-index:1;cursor:text}.es-contentmenu{position:absolute;top:0;left:0;z-index:9999;box-shadow:var(--el-box-shadow-light);border-radius:4px}.es-contentmenu ul{background-color:var(--el-bg-color-overlay);border-radius:var(--el-border-radius-base);padding:5px 0}.es-contentmenu ul li{display:flex;align-items:center;white-space:nowrap;list-style:none;line-height:22px;padding:5px 16px;margin:0;font-size:var(--el-font-size-base);color:var(--el-text-color-regular);cursor:pointer;outline:none}.es-contentmenu ul li:hover{background-color:var(--el-color-primary-light-9);color:var(--el-color-primary)}.es-trigger{position:absolute}.es-container .left-btn{margin-right:10px}.es-grid-box{position:relative;width:calc(80% - 40px);height:calc(80% - 148px);margin:20px auto}.es-grid-info{display:flex}.es-info-item{display:flex;align-items:center;height:36px;margin-right:20px;padding:24px 12px}.es-info-item span{margin-right:6px}.es-info-item input{flex-grow:1;outline:none;border-radius:4px;border:1px solid #dcdfe6;width:100%;height:30px;line-height:30px;padding:0 8px}.es-info-item input:focus{border-color:var(--es-doc-color-primary)}.es-info{position:absolute;top:0;right:0;border-left:var(--es-border);width:200px;height:100%}.es-info .es-info-item{display:flex;flex-direction:column;height:36px;margin-bottom:20px;padding:24px 12px}.es-info .es-info-item .es-info-item-label{margin-bottom:6px}.es-info .es-info-item input{flex-grow:1;outline:none;border-radius:4px;border:1px solid #dcdfe6;width:100%;height:30px;line-height:30px;padding:0 8px}.es-info .es-info-item input:focus{border-color:var(--es-doc-color-primary)}.es-container{width:800px;height:600px;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%)}.es-container .es-editor{position:relative;width:800px;height:600px}.es-tools{width:100%;display:flex;justify-content:center;align-items:center}[class^=es-editor-markline]{position:absolute;z-index:9999;background-color:#adff2f}.es-editor-markline-left{height:100%;width:1px;top:0}.es-editor-markline-top{width:100%;height:1px;left:0}.custom-resize{width:6px;height:6px;border:1px solid #0ec3b8}.custom-rotate{font-size:20px;font-weight:700;color:#0ec3b8}.drager-text{font-size:30px}.absolute{position:absolute}.sketch-ruler{position:relative;z-index:3;width:100%;height:100%;overflow:hidden;font-size:12px}.sketch-ruler span{line-height:1}.sketch-ruler .defaultCursor{cursor:default!important}.sketch-ruler .grabCursor{cursor:grab!important}.sketch-ruler .corner{position:absolute;top:0;left:0;pointer-events:auto;cursor:pointer;box-sizing:content-box;transition:all .2s ease-in-out}.sketch-ruler .canvasedit-parent,.sketch-ruler .h-container,.sketch-ruler .v-container{position:absolute}.sketch-ruler .h-container .indicator,.sketch-ruler .v-container .indicator{z-index:4;position:absolute}.sketch-ruler .h-container .line,.sketch-ruler .v-container .line,.sketch-ruler .h-container .action,.sketch-ruler .v-container .action{position:absolute}.sketch-ruler .h-container .value,.sketch-ruler .v-container .value{transform:scale(.83);padding:5px;border-radius:5px;font-size:12px;white-space:nowrap}.sketch-ruler .h-container{top:0}.sketch-ruler .h-container .line{position:absolute;top:0;height:100vh}.sketch-ruler .h-container .line:before,.sketch-ruler .h-container .line:after{content:"";display:inline-block;width:4px;height:100vh;position:absolute}.sketch-ruler .h-container .line:before{left:-3px;top:0}.sketch-ruler .h-container .line:after{right:-3px;top:0}.sketch-ruler .h-container .indicator{position:absolute;left:0;width:100vw}.sketch-ruler .h-container .indicator:before,.sketch-ruler .h-container .indicator:after{content:"";display:inline-block;height:4px;width:100vw;position:absolute}.sketch-ruler .h-container .indicator:before{top:-3px;left:0}.sketch-ruler .h-container .indicator:after{bottom:-3px;left:0}.sketch-ruler .v-container{left:0}.sketch-ruler .v-container .line{position:absolute;left:0;width:100vw}.sketch-ruler .v-container .line:before,.sketch-ruler .v-container .line:after{content:"";display:inline-block;height:4px;width:100vw;position:absolute}.sketch-ruler .v-container .line:before{top:-3px;left:0}.sketch-ruler .v-container .line:after{bottom:-3px;left:0}.sketch-ruler .v-container .indicator{position:absolute;top:0;height:100vh}.sketch-ruler .v-container .indicator:before,.sketch-ruler .v-container .indicator:after{content:"";display:inline-block;width:4px;height:100vh;position:absolute}.sketch-ruler .v-container .indicator:before{left:-3px;top:0}.sketch-ruler .v-container .indicator:after{right:-3px;top:0}.wrapper{margin:0 auto;background-size:21px 21px,21px 21px;border:1px solid #dadadc}.light .canvas{position:relative;background-color:#eff2f5}.light .wrapper{background-color:#fafafc;background-image:linear-gradient(#fafafc 20px,transparent 0),linear-gradient(90deg,transparent 20px,#373739 0)}.dark .canvas{position:relative;background-color:#333}.dark .wrapper{background-color:#18181c;background-image:linear-gradient(#18181c 20px,transparent 0),linear-gradient(90deg,transparent 20px,#86909c 0)}.img-style{width:100%;height:100%}.btns{position:absolute;display:flex;bottom:20px;right:40px;z-index:999}.dragerItem{background:#00f}:root{--el-color-primary: #409eff;--el-color-primary-rgb: 64, 158, 255}html{--es-color-white: #f0f0f0;--es-color-dark: #1a1a1a;--es-header-height: 60px;--es-border: 1px solid var(--es-border-color);--es-layout-aside-width: 240px}html.light{--es-color: #34495e;--es-border-color: rgba(60, 60, 60, .12);--es-color-bg: var(--es-color-white);--es-bg-color-page: #eff2f5}html.dark{--es-color: rgba(255, 255, 255, .75);--es-border-color: #363637;--es-color-bg: var(--es-color-dark);--es-bg-color-page: #202124}body{width:100%;height:100%;margin:0;padding:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif}html{width:100%;height:100%;box-sizing:border-box}#app{width:100%;height:100%}label{font-weight:700}*{margin:0;padding:0;box-sizing:border-box}a:focus,a:active{outline:none}a,a:focus,a:hover{cursor:pointer;color:inherit;text-decoration:none}div:focus{outline:none}ul{margin:0;padding:0;list-style:none}input{outline:none}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.es-drager-rotate{position:absolute;top:0;left:50%;transform:translate(-50%,-200%)}.es-drager-rotate-handle{width:16px;height:16px;font-size:20px;color:var(--es-drager-color)}.es-drager{--es-drager-color: #3a7afe;position:absolute}.es-drager:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;display:none}.es-drager.selected{transition:none}.es-drager.selected:not(.es-drager-text):after{-webkit-user-select:none;user-select:none;display:block;outline:1px dashed var(--es-drager-color)}.es-drager.selected .es-drager-dot{display:block}.es-drager.border{border:1px solid var(--es-drager-color)}.es-drager.disabled{opacity:.4;cursor:not-allowed!important}.es-drager:hover{cursor:move}.es-drager-dot{display:none;position:absolute;z-index:1;transform:translate(-50%,-50%);cursor:se-resize}.es-drager-dot-handle{width:10px;height:10px;border-radius:50%;background-color:var(--es-drager-color)}.es-drager-dot[data-side=left] .es-drager-dot-handle,.es-drager-dot[data-side=right] .es-drager-dot-handle{width:8px;height:16px;border-radius:8px}.es-drager-dot[data-side=top] .es-drager-dot-handle,.es-drager-dot[data-side=bottom] .es-drager-dot-handle{width:16px;height:8px;border-radius:8px}.es-drager-dot[data-side*=right]{transform:translate(50%,-50%)}.es-drager-dot[data-side*=bottom]{transform:translate(-50%,50%)}.es-drager-dot[data-side=bottom-right]{transform:translate(50%,50%)}