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:100px;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)}.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}.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)}.demo .target{position:absolute;text-align:center;color:#333;font-size:30px;font-weight:700;border:1px solid #333;box-sizing:border-box}.demo .container{position:relative;width:100%;height:100%}.demo .font16{font-size:16px}.demo .mr10{margin-right:10px}.top{display:flex;margin-bottom:10px;justify-content:center;align-items:center;width:100%;font-size:16px}.button{font-size:18px;margin-right:10px}.wrapper{margin:0 auto;background-size:21px 21px,21px 21px;border:1px solid #dadadc}.imgStyle{width:100%;height:100%}.btns{position:absolute;display:flex;bottom:20px;right:40px;z-index:999}.btn{margin-right:5px}.bigscreen_example{width:100%;height:100%;position:relative;overflow:hidden}.bigscreen_example .description{font-size:16px;padding:5px;width:100%;text-align:center;color:#666;margin-bottom:10px}.bigscreen_example .canvasedit-parent{position:absolute;top:30px;left:0}.bigscreen_example .big-screen-demo{display:flex;background-color:#030409;justify-content:space-between;padding:10px;box-sizing:border-box;gap:10px}.bigscreen_example .big-screen-demo .screen-item{height:100%;background-color:#ffffff0d;border-radius:4px;overflow:hidden}.bigscreen_example .big-screen-demo .screen-item img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}.bigscreen_example .big-screen-demo .screen-item.left,.bigscreen_example .big-screen-demo .screen-item.right{width:25%}.bigscreen_example .big-screen-demo .screen-item.center{flex:1}.eight-k-sketch-ruler{width:100%;height:100%;position:relative;overflow:hidden}.eight-k-sketch-ruler .whitewrapper{background-color:#fafafc;background-image:linear-gradient(#fafafc 20px,transparent 0),linear-gradient(90deg,transparent 20px,#373739 0)}.eight-k-sketch-ruler .blackwrapper{background-color:#18181c;background-image:linear-gradient(#18181c 20px,transparent 0),linear-gradient(90deg,transparent 20px,#86909c 0)}.eight-k-sketch-ruler .wrapper{background-size:21px 21px,21px 21px;border:1px solid #dadadc;width:100%;height:100%}.eight-k-sketch-ruler .description{position:absolute;top:20px;left:0;font-size:16px;padding:5px;width:100%;text-align:center;color:#000;z-index:1000;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.eight-k-sketch-ruler .btns{position:absolute;display:flex;bottom:20px;right:40px;z-index:999}.eight-k-sketch-ruler .btns button{margin-left:10px;padding:4px 10px;cursor:pointer}: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}