zan-layer 1.0.6 → 1.0.8

package/README.md

@@ -178,6 +178,12 @@ layer.prompt({
 | `footer` | 底部区域内容 |
 | `content` | 主体内容，支持字符串、VNode、函数 |
 | `area` | 宽高，如 `'560px'` 或 `['720px', '560px']` |
+| `width` | 单独指定宽度，会覆盖 `area[0]` |
+| `height` | 单独指定高度，会覆盖 `area[1]` |
+| `minWidth` | 最小宽度，支持数字或 CSS 尺寸字符串 |
+| `maxWidth` | 最大宽度，支持数字或 CSS 尺寸字符串 |
+| `minHeight` | 最小高度，支持数字或 CSS 尺寸字符串 |
+| `maxHeight` | 最大高度，支持数字或 CSS 尺寸字符串 |
 | `offset` | 位置，如 `'r'`、`'rt'`、`'auto'` 或坐标数组 |
 | `shade` | 是否显示遮罩 |
 | `shadeClose` | 点击遮罩是否关闭 |
@@ -302,6 +308,12 @@ layer.open({
 layer.open({
   title: '可拖拽窗口',
   content: '拖动后记录位置',
+  width: 720,
+  height: 520,
+  minWidth: 480,
+  minHeight: 320,
+  maxWidth: '90vw',
+  maxHeight: '90vh',
   move: true,
   resize: true,
   moveEnd: (id, options) => {
@@ -323,6 +335,26 @@ layer.open({
 - `layer.min(id)`
 - `layer.full(id)`
 - `layer.revert(id)`
+- `layer.resize(id, { width, height })`
+
+示例：
+
+```ts
+const layerId = layer.open({
+  title: '尺寸可控窗口',
+  content: '支持程序化改大小',
+  width: 640,
+  height: 420,
+  minWidth: 420,
+  minHeight: 260,
+  resize: true
+})
+
+layer.resize(layerId, {
+  width: '80vw',
+  height: '70vh'
+})
+```
 
 ## 安装选项
 

package/lib/index.css

@@ -1 +1 @@
-.zan-icon-btn[data-v-a2b66c03]{position:relative;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--zan-layer-header-icon-color, #333);font-style:normal;text-align:center;padding:2px;border-radius:4px;transition:color .2s ease,background-color .2s ease}.zan-icon-btn[data-v-a2b66c03]:hover{color:var(--zan-layer-header-icon-hover-color, var(--global-primary-color, #2563eb));background-color:var(--zan-layer-header-icon-hover-bg, transparent)}.zan-tooltip[data-v-a2b66c03]{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);padding:4px 8px;background-color:#000000bf;color:#fff;font-size:12px;white-space:nowrap;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:9999}.zan-tooltip[data-v-a2b66c03]:before{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(0,0,0,.75)}.zan-icon-btn:hover .zan-tooltip[data-v-a2b66c03]{opacity:1}.zan-icon-min[data-v-a2b66c03]:before{content:"";position:absolute;bottom:8px;left:0;width:16px;height:2px;text-align:center;background-color:currentColor}.zan-icon-max[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-full[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-restore[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:10px;height:10px;border:2px solid currentColor}.zan-icon-restore[data-v-a2b66c03]:after{content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;border:2px solid currentColor;background:var(--zan-layer-surface-color, white)}.zan-icon-close-btn[data-v-a2b66c03]:before,.zan-icon-close-btn[data-v-a2b66c03]:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background-color:currentColor}.zan-icon-close-btn[data-v-a2b66c03]:before{transform:translate(-50%,-50%) rotate(45deg)}.zan-icon-close-btn[data-v-a2b66c03]:after{transform:translate(-50%,-50%) rotate(-45deg)}.zan-layer-close2[data-v-a2b66c03]:before,.zan-layer-close2[data-v-a2b66c03]:after{width:16px;height:2px}:root{--global-primary-color: rgb(var(--primary-color, 22 186 170));--global-border-radius: 2px;--zan-layer-surface-color: rgb(var(--container-bg-color, 255 255 255));--zan-layer-text-color: rgb(var(--base-text-color, 51 51 51));--zan-layer-muted-text-color: rgba(var(--base-text-color, 51 51 51), .72);--zan-layer-subtle-text-color: rgba(var(--base-text-color, 51 51 51), .58);--zan-layer-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-title-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-button-border-color: rgba(var(--base-text-color, 51 51 51), .12);--zan-layer-button-bg: rgba(var(--base-text-color, 51 51 51), .04);--zan-layer-button-text: rgb(var(--base-text-color, 51 51 51));--zan-layer-button-disabled-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-button-disabled-bg: rgba(var(--base-text-color, 51 51 51), .03);--zan-layer-button-disabled-text: rgba(var(--base-text-color, 51 51 51), .36);--zan-layer-input-bg: rgba(var(--base-text-color, 51 51 51), .04);--zan-layer-input-border-color: rgba(var(--base-text-color, 51 51 51), .12);--zan-layer-notify-bg: rgb(var(--container-bg-color, 255 255 255));--zan-layer-notify-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-notify-title-color: rgb(var(--base-text-color, 48 49 51));--zan-layer-notify-content-color: rgba(var(--base-text-color, 51 51 51), .72);--zan-layer-header-icon-color: rgba(var(--base-text-color, 51 51 51), .68);--zan-layer-header-icon-hover-color: rgb(var(--primary-color, 22 186 170));--zan-layer-header-icon-hover-bg: rgba(var(--primary-color, 22 186 170), .12);--zan-layer-notify-close-color: rgba(var(--base-text-color, 51 51 51), .62);--zan-layer-notify-close-hover-color: rgb(var(--primary-color, 22 186 170))}.zan-layer-imgbar,.zan-layer-imgtit a,.zan-layer-tab .zan-layer-title span,.zan-layer-title{text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.zan-layer,.zan-layer-shade{position:absolute;pointer-events:auto}.zan-layer-shade{top:0;left:0;width:100%;height:100%;background-color:#000}.zan-layer{top:0;left:0;display:flex;flex-direction:column;box-shadow:1px 1px 50px #0000004d;background-color:var(--zan-layer-surface-color);border-radius:var(--global-border-radius);padding:0;margin:0;color:var(--zan-layer-text-color);will-change:transform,width,height;transform:translateZ(0);backface-visibility:hidden}.zan-layer-close{position:absolute}.zan-layer-content{position:relative;flex:1 1 auto}.zan-layer-dialog .zan-layer-content,.zan-layer-page .zan-layer-content{min-width:200px;min-height:100px}.zan-layer-border{border:1px solid var(--zan-layer-border-color);box-shadow:1px 1px 5px #0003}.zan-layer-btn a,.zan-layer-dialog .zan-layer-ico,.zan-layer-setwin a{display:inline-block;vertical-align:top}.zan-layer-resize{z-index:999999999;position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.zan-layer-resizing,.zan-layer-resizing *,.zan-layer-moving,.zan-layer-moving *{pointer-events:none}.zan-layer-anim{animation-fill-mode:both;animation-duration:.3s}.zan-layer-drawer-anim{animation-duration:.3s;animation-timing-function:cubic-bezier(.7,.3,.1,1)}@keyframes zan-layer-rl{0%{transform:translate3d(100%,0,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-rl{animation-name:zan-layer-rl}@keyframes zan-layer-rl-close{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}.zan-layer-anim-rl-close{animation-name:zan-layer-rl-close}@keyframes zan-layer-lr{0%{transform:translate3d(-100%,0,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-lr{animation-name:zan-layer-lr}@keyframes zan-layer-lr-close{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}.zan-layer-anim-lr-close{animation-name:zan-layer-lr-close}@keyframes zan-layer-tb{0%{transform:translate3d(0,-100%,0);opacity:1;animation-timing-function:cubic-bezier(.7,.3,.1,1)}to{transform:translateZ(0);opacity:1;animation-timing-function:cubic-bezier(.7,.3,.1,1)}}.zan-layer-anim-tb{animation-name:zan-layer-tb}@keyframes zan-layer-tb-close{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.zan-layer-anim-tb-close{animation-name:zan-layer-tb-close}@keyframes zan-layer-bt{0%{transform:translate3d(0,100%,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-bt{animation-name:zan-layer-bt}@keyframes zan-layer-bt-close{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}.zan-layer-anim-bt-close{animation-name:zan-layer-bt-close}@keyframes zan-layer-bounceIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.zan-layer-anim-00{animation-name:zan-layer-bounceIn}@keyframes zan-layer-zoomInDown{0%{opacity:0;transform:scale(.1) translateY(-2000px);animation-timing-function:ease-in-out}60%{opacity:1;transform:scale(.475) translateY(60px);animation-timing-function:ease-out}}.zan-layer-anim-01{animation-name:zan-layer-zoomInDown}@keyframes zan-layer-fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}to{opacity:1;transform:translateY(0)}}.zan-layer-anim-02{animation-name:zan-layer-fadeInUpBig}@keyframes zan-layer-zoomInLeft{0%{opacity:0;transform:scale(.1) translate(-2000px);animation-timing-function:ease-in-out}60%{opacity:1;transform:scale(.475) translate(48px);animation-timing-function:ease-out}}.zan-layer-anim-03{animation-name:zan-layer-zoomInLeft}@keyframes zan-layer-rollIn{0%{opacity:0;transform:translate(-100%) rotate(-120deg)}to{opacity:1;transform:translate(0) rotate(0)}}.zan-layer-anim-04{animation-name:zan-layer-rollIn}@keyframes zan-layer-fadeIn{0%{opacity:0}to{opacity:1}}.zan-layer-anim-05{animation-name:zan-layer-fadeIn}@keyframes zan-layer-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.zan-layer-anim-06{animation-name:zan-layer-shake}.zan-layer-title{padding:0 100px 0 5px;height:36px;line-height:36px;border-bottom:1px solid var(--zan-layer-title-border-color);font-size:14px;color:var(--zan-layer-text-color);overflow:hidden;border-radius:2px 2px 0 0;flex-shrink:0}.zan-layer-setwin{position:absolute;right:5px;top:5px;font-size:0;line-height:initial;display:flex;align-items:center;gap:5px}.zan-layer-setwin a{position:relative;width:16px;height:16px;margin-left:0;font-size:12px}.zan-layer-setwin i{position:relative;width:16px;height:16px;margin-left:0;font-size:16px;color:var(--zan-layer-header-icon-color);cursor:pointer;transition:color .3s,background-color .3s}.zan-layer-setwin i:hover{color:var(--zan-layer-header-icon-hover-color);background-color:var(--zan-layer-header-icon-hover-bg)}.zan-layer-btn{text-align:right;padding:0 5px 5px;pointer-events:auto}.zan-layer-btn a{height:28px;line-height:28px;padding:0 5px;border-radius:var(--global-border-radius);border:1px solid var(--zan-layer-button-border-color);background-color:var(--zan-layer-button-bg);cursor:pointer;color:var(--zan-layer-button-text);font-weight:400;margin-left:5px}.zan-layer-btn-disabled{border-color:var(--zan-layer-button-disabled-border-color)!important;background-color:var(--zan-layer-button-disabled-bg)!important;color:var(--zan-layer-button-disabled-text)!important;cursor:not-allowed!important}.zan-layer-btn .zan-layer-btn0{border-color:var(--global-primary-color);background-color:var(--global-primary-color);color:#fff}.zan-layer-btn-l{text-align:left}.zan-layer-btn-c{text-align:center}.zan-layer-dialog{min-width:300px}.zan-layer-dialog .zan-layer-content{position:relative;padding:5px;line-height:22px;word-break:break-all;overflow:hidden;font-size:13px;overflow-x:hidden;overflow-y:auto;color:var(--zan-layer-text-color)}.zan-layer-msg{min-width:180px;border:1px solid rgba(220,220,220,.5);box-shadow:2px 0 8px #1d232908}.zan-layer-msg .zan-layer-content{padding:10px;text-align:center;line-height:22px;font-size:13px}.zan-layer-hui{min-width:100px;background-color:#000;filter:alpha(opacity=60);background-color:#0009;color:#fff;border:none}.zan-layer-hui .zan-layer-content{padding:5px;text-align:center;color:#fff}.zan-layer-dialog .zan-layer-padding{padding:5px 5px 5px 50px;text-align:left}.zan-layer-drawer{border-radius:0}.zan-layer-drawer .zan-layer-content,.zan-layer-page .zan-layer-content{position:relative;overflow:auto;padding:5px;color:var(--zan-layer-text-color);font-size:13px;line-height:1.5}.zan-layer-drawer .zan-layer-btn,.zan-layer-iframe .zan-layer-btn,.zan-layer-page .zan-layer-btn{padding-top:5px}.zan-layer-iframe iframe{display:block;width:100%;height:100%}.zan-layer-loading{border-radius:100%;background:#000000b3;box-shadow:none;border:none}.zan-layer-loading .zan-layer-content{background:transparent;display:flex;align-items:center;justify-content:center;position:relative;min-width:auto;min-height:auto}.zan-layer-loading0{padding:15px}.zan-layer-loading0 .zan-layer-content{width:60px;height:24px;padding:0}.zan-layer-loading0 .zan-layer-content:after{content:"";position:absolute;width:60px;height:24px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2MCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZmZmIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjFzIiB2YWx1ZXM9IjA7MTswIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAiLz48L2NpcmNsZT48Y2lyY2xlIGN4PSIzMCIgY3k9IjEyIiByPSI0Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjFzIiB2YWx1ZXM9IjA7MTswIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAuMzMzIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNDgiIGN5PSIxMiIgcj0iNCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIxcyIgdmFsdWVzPSIwOzE7MCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjY2NiIvPjwvY2lyY2xlPjwvc3ZnPg==) no-repeat center;background-size:contain}.zan-layer-loading1{padding:20px}.zan-layer-loading1 .zan-layer-content{width:40px;height:40px;padding:0}.zan-layer-loading1 .zan-layer-content:after{content:"";position:absolute;width:32px;height:32px;border:3px solid #fff;border-top-color:transparent;border-radius:50%;animation:zan-spin 1s linear infinite}.zan-layer-loading2{padding:20px}.zan-layer-loading2 .zan-layer-content{width:40px;height:40px;padding:0}.zan-layer-loading2 .zan-layer-content:after{content:"";position:absolute;width:32px;height:32px;border:4px solid;border-color:#fff transparent #fff transparent;border-radius:50%;animation:zan-spin 1.2s linear infinite}@keyframes zan-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.zan-layer-photos{background:#000000e6;box-shadow:none;border:none}.zan-layer-photos .zan-layer-content{overflow:hidden;text-align:center;background:transparent}.zan-layer-photos .zan-layer-phimg img{position:relative;width:100%;height:100%;display:inline-block;vertical-align:top;object-fit:contain}.zan-layer-imgnext,.zan-layer-imgprev{position:fixed;top:50%;width:40px;height:60px;margin-top:-30px;outline:0;font-size:40px;color:#fff;text-align:center;line-height:60px;cursor:pointer;text-decoration:none}.zan-layer-imgprev{left:30px}.zan-layer-imgnext{right:30px}.zan-layer-imgbar{position:fixed;left:0;right:0;bottom:0;width:100%;min-height:40px;height:auto;line-height:40px;background-color:#02000059;color:#fff;overflow:hidden;font-size:0;opacity:0;transition:all 1s ease-in-out;display:flex;flex-wrap:wrap;justify-content:center}.zan-layer-imgtit *{display:inline-block;vertical-align:top;font-size:12px}.zan-layer-imgtit a{max-width:65%;overflow:hidden;color:#fff}.zan-layer-imgtit em{padding-left:5px;font-style:normal}.zan-layer-imgbar .thumb-row{width:100%;display:flex;justify-content:center;align-self:center}.zan-layer-imgbar .thumb-box{width:100px;height:100px;margin:0;display:inline-flex;align-items:center;justify-content:center;position:relative}.zan-layer-imgbar .thumb-box-border{position:absolute;top:0;transition:all .2s ease-in-out;width:100px;height:100px;border:1px solid #5fb878;box-sizing:border-box}.zan-layer-imgbar img{max-width:100%;max-height:100%;object-fit:contain}@keyframes zan-layer-bounceOut{to{opacity:0;transform:scale(.7)}30%{transform:scale(1.05)}0%{transform:scale(1)}}.zan-layer-anim-close{animation-name:zan-layer-bounceOut;animation-fill-mode:both;animation-duration:.2s}.zan-layer-notifiy{border:none;box-shadow:none}.zan-layer-notifiy-wrapper{padding:5px 10px 5px 5px;box-sizing:border-box;background-color:var(--zan-layer-notify-bg);overflow:hidden;border-radius:4px;border:1px solid var(--zan-layer-notify-border-color);box-shadow:0 2px 8px #0000001a;min-width:280px;max-width:380px;transition:opacity .3s,transform .3s}.zan-layer-notifiy-wrapper .title{font-weight:600;font-size:14px;color:var(--zan-layer-notify-title-color);margin:0;display:flex;align-items:center;gap:8px;line-height:1.4}.zan-layer-notifiy-wrapper .content{font-size:13px;line-height:1.5;margin:8px 0 0;color:var(--zan-layer-notify-content-color);word-break:break-word}.zan-layer-notifiy-wrapper .content img{max-width:100%}.zan-icon-close{cursor:pointer;width:20px;height:20px;position:absolute;top:10px;right:10px;color:var(--zan-layer-notify-close-color);font-style:normal;font-size:16px;line-height:20px;transition:color .3s;display:flex;align-items:center;justify-content:center}.zan-icon-close svg{width:20px;height:20px}.zan-icon-close:hover{color:var(--zan-layer-notify-close-hover-color)}.zan-layer-notifiy-transition{transition:top .3s ease-in-out,opacity .3s ease-in-out}.zan-layer-notifiy-wrapper .title .zan-icon{display:inline-block;position:inherit;margin:0;transform:scale(1);height:24px!important;width:24px!important;line-height:24px;font-size:16px;flex-shrink:0}.zan-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;text-align:center;line-height:1;font-style:normal;font-size:26px;font-weight:700;flex-shrink:0}.zan-icon-ico1{background-color:#67c23a;color:#fff}.zan-icon-ico1:before{content:"✓"}.zan-icon-ico2{background-color:#f56c6c;color:#fff}.zan-icon-ico2:before{content:"✕"}.zan-icon-ico3{background-color:#e6a23c;color:#fff}.zan-icon-ico3:before{content:"?"}.zan-icon-ico4{background-color:#409eff;color:#fff}.zan-icon-ico4:before{content:"ℹ"}.zan-icon-ico5{background-color:#e6a23c;color:#fff}.zan-icon-ico5:before{content:"☹"}.zan-icon-ico6{background-color:#67c23a;color:#fff}.zan-icon-ico6:before{content:"☺"}.zan-icon-ico7{background-color:#f56c6c;color:#fff}.zan-icon-ico7:before{content:"!"}.zan-icon-ico16{background:transparent}.zan-input,.zan-textarea{width:100%;padding:5px;border:1px solid var(--zan-layer-input-border-color);border-radius:var(--global-border-radius);font-size:13px;outline:none;box-sizing:border-box;font-family:inherit;background-color:var(--zan-layer-input-bg);color:var(--zan-layer-text-color)}.zan-input:focus,.zan-textarea:focus{border-color:var(--global-primary-color)}.zan-textarea{min-height:80px;resize:vertical;line-height:1.5}.zan-layer-dialog .zan-input,.zan-layer-dialog .zan-textarea{margin-top:8px}.zan-layer-dialog .zan-layer-content>.zan-input,.zan-layer-dialog .zan-layer-content>.zan-textarea{display:block;width:100%}.zan-layer-dialog .zan-layer-content .zan-input,.zan-layer-dialog .zan-layer-content .zan-textarea{width:100%}.zan-layer-msg .zan-icon{margin-right:10px;vertical-align:middle}.zan-layer-msg .zan-layer-content{display:flex;align-items:center;justify-content:center;padding:10px;min-height:48px}.zan-layer-dialog .zan-layer-padding .zan-icon{position:absolute;left:10px;top:10px}.zan-layer.zan-layer-min{z-index:99999}.zan-layer.zan-layer-min .zan-layer-title{cursor:default;-webkit-user-select:none;user-select:none}.zan-layer.zan-layer-min:hover{box-shadow:0 2px 8px #0000004d}.zan-layer.zan-layer-tips{background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important}.zan-layer.zan-layer-tips .zan-layer-content{padding:0!important;min-width:auto!important;min-height:auto!important;background:transparent!important;overflow:visible!important}
+.zan-icon-btn[data-v-a2b66c03]{position:relative;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--zan-layer-header-icon-color, #333);font-style:normal;text-align:center;padding:2px;border-radius:4px;transition:color .2s ease,background-color .2s ease}.zan-icon-btn[data-v-a2b66c03]:hover{color:var(--zan-layer-header-icon-hover-color, var(--global-primary-color, #2563eb));background-color:var(--zan-layer-header-icon-hover-bg, transparent)}.zan-tooltip[data-v-a2b66c03]{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);padding:4px 8px;background-color:#000000bf;color:#fff;font-size:12px;white-space:nowrap;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:9999}.zan-tooltip[data-v-a2b66c03]:before{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(0,0,0,.75)}.zan-icon-btn:hover .zan-tooltip[data-v-a2b66c03]{opacity:1}.zan-icon-min[data-v-a2b66c03]:before{content:"";position:absolute;bottom:8px;left:0;width:16px;height:2px;text-align:center;background-color:currentColor}.zan-icon-max[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-full[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-restore[data-v-a2b66c03]:before{content:"";position:absolute;top:4px;left:4px;width:10px;height:10px;border:2px solid currentColor}.zan-icon-restore[data-v-a2b66c03]:after{content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;border:2px solid currentColor;background:var(--zan-layer-surface-color, white)}.zan-icon-close-btn[data-v-a2b66c03]:before,.zan-icon-close-btn[data-v-a2b66c03]:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background-color:currentColor}.zan-icon-close-btn[data-v-a2b66c03]:before{transform:translate(-50%,-50%) rotate(45deg)}.zan-icon-close-btn[data-v-a2b66c03]:after{transform:translate(-50%,-50%) rotate(-45deg)}.zan-layer-close2[data-v-a2b66c03]:before,.zan-layer-close2[data-v-a2b66c03]:after{width:16px;height:2px}:root{--global-primary-color: rgb(var(--primary-color, 22 186 170));--global-border-radius: 2px;--zan-layer-surface-color: rgb(var(--container-bg-color, 255 255 255));--zan-layer-text-color: rgb(var(--base-text-color, 51 51 51));--zan-layer-muted-text-color: rgba(var(--base-text-color, 51 51 51), .72);--zan-layer-subtle-text-color: rgba(var(--base-text-color, 51 51 51), .58);--zan-layer-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-title-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-button-border-color: rgba(var(--base-text-color, 51 51 51), .12);--zan-layer-button-bg: rgba(var(--base-text-color, 51 51 51), .04);--zan-layer-button-text: rgb(var(--base-text-color, 51 51 51));--zan-layer-button-disabled-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-button-disabled-bg: rgba(var(--base-text-color, 51 51 51), .03);--zan-layer-button-disabled-text: rgba(var(--base-text-color, 51 51 51), .36);--zan-layer-input-bg: rgba(var(--base-text-color, 51 51 51), .04);--zan-layer-input-border-color: rgba(var(--base-text-color, 51 51 51), .12);--zan-layer-notify-bg: rgb(var(--container-bg-color, 255 255 255));--zan-layer-notify-border-color: rgba(var(--base-text-color, 51 51 51), .08);--zan-layer-notify-title-color: rgb(var(--base-text-color, 48 49 51));--zan-layer-notify-content-color: rgba(var(--base-text-color, 51 51 51), .72);--zan-layer-header-icon-color: rgba(var(--base-text-color, 51 51 51), .68);--zan-layer-header-icon-hover-color: rgb(var(--primary-color, 22 186 170));--zan-layer-header-icon-hover-bg: rgba(var(--primary-color, 22 186 170), .12);--zan-layer-notify-close-color: rgba(var(--base-text-color, 51 51 51), .62);--zan-layer-notify-close-hover-color: rgb(var(--primary-color, 22 186 170));--zan-layer-loading-panel-bg: rgba(15, 23, 42, .84);--zan-layer-loading-indicator-color: #fff;--zan-layer-loading-indicator-muted: rgba(255, 255, 255, .32)}.zan-layer-imgbar,.zan-layer-imgtit a,.zan-layer-tab .zan-layer-title span,.zan-layer-title{text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.zan-layer,.zan-layer-shade{position:absolute;pointer-events:auto}.zan-layer-shade{top:0;left:0;width:100%;height:100%;background-color:#000}.zan-layer{top:0;left:0;display:flex;flex-direction:column;box-shadow:1px 1px 50px #0000004d;background-color:var(--zan-layer-surface-color);border-radius:var(--global-border-radius);padding:0;margin:0;color:var(--zan-layer-text-color);will-change:transform,width,height;transform:translateZ(0);backface-visibility:hidden}.zan-layer-close{position:absolute}.zan-layer-content{position:relative;flex:1 1 auto}.zan-layer-dialog .zan-layer-content,.zan-layer-page .zan-layer-content{min-width:200px;min-height:100px}.zan-layer-border{border:1px solid var(--zan-layer-border-color);box-shadow:1px 1px 5px #0003}.zan-layer-btn a,.zan-layer-dialog .zan-layer-ico,.zan-layer-setwin a{display:inline-block;vertical-align:top}.zan-layer-resize{z-index:999999999;position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.zan-layer-resizing,.zan-layer-resizing *,.zan-layer-moving,.zan-layer-moving *{pointer-events:none}.zan-layer-anim{animation-fill-mode:both;animation-duration:.3s}.zan-layer-drawer-anim{animation-duration:.3s;animation-timing-function:cubic-bezier(.7,.3,.1,1)}@keyframes zan-layer-rl{0%{transform:translate3d(100%,0,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-rl{animation-name:zan-layer-rl}@keyframes zan-layer-rl-close{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}.zan-layer-anim-rl-close{animation-name:zan-layer-rl-close}@keyframes zan-layer-lr{0%{transform:translate3d(-100%,0,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-lr{animation-name:zan-layer-lr}@keyframes zan-layer-lr-close{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}.zan-layer-anim-lr-close{animation-name:zan-layer-lr-close}@keyframes zan-layer-tb{0%{transform:translate3d(0,-100%,0);opacity:1;animation-timing-function:cubic-bezier(.7,.3,.1,1)}to{transform:translateZ(0);opacity:1;animation-timing-function:cubic-bezier(.7,.3,.1,1)}}.zan-layer-anim-tb{animation-name:zan-layer-tb}@keyframes zan-layer-tb-close{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.zan-layer-anim-tb-close{animation-name:zan-layer-tb-close}@keyframes zan-layer-bt{0%{transform:translate3d(0,100%,0);opacity:1}to{transform:translateZ(0);opacity:1}}.zan-layer-anim-bt{animation-name:zan-layer-bt}@keyframes zan-layer-bt-close{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}.zan-layer-anim-bt-close{animation-name:zan-layer-bt-close}@keyframes zan-layer-bounceIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.zan-layer-anim-00{animation-name:zan-layer-bounceIn}@keyframes zan-layer-zoomInDown{0%{opacity:0;transform:scale(.1) translateY(-2000px);animation-timing-function:ease-in-out}60%{opacity:1;transform:scale(.475) translateY(60px);animation-timing-function:ease-out}}.zan-layer-anim-01{animation-name:zan-layer-zoomInDown}@keyframes zan-layer-fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}to{opacity:1;transform:translateY(0)}}.zan-layer-anim-02{animation-name:zan-layer-fadeInUpBig}@keyframes zan-layer-zoomInLeft{0%{opacity:0;transform:scale(.1) translate(-2000px);animation-timing-function:ease-in-out}60%{opacity:1;transform:scale(.475) translate(48px);animation-timing-function:ease-out}}.zan-layer-anim-03{animation-name:zan-layer-zoomInLeft}@keyframes zan-layer-rollIn{0%{opacity:0;transform:translate(-100%) rotate(-120deg)}to{opacity:1;transform:translate(0) rotate(0)}}.zan-layer-anim-04{animation-name:zan-layer-rollIn}@keyframes zan-layer-fadeIn{0%{opacity:0}to{opacity:1}}.zan-layer-anim-05{animation-name:zan-layer-fadeIn}@keyframes zan-layer-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.zan-layer-anim-06{animation-name:zan-layer-shake}.zan-layer-title{padding:0 100px 0 5px;height:36px;line-height:36px;border-bottom:1px solid var(--zan-layer-title-border-color);font-size:14px;color:var(--zan-layer-text-color);overflow:hidden;border-radius:2px 2px 0 0;flex-shrink:0}.zan-layer-setwin{position:absolute;right:5px;top:5px;font-size:0;line-height:initial;display:flex;align-items:center;gap:5px}.zan-layer-setwin a{position:relative;width:16px;height:16px;margin-left:0;font-size:12px}.zan-layer-setwin i{position:relative;width:16px;height:16px;margin-left:0;font-size:16px;color:var(--zan-layer-header-icon-color);cursor:pointer;transition:color .3s,background-color .3s}.zan-layer-setwin i:hover{color:var(--zan-layer-header-icon-hover-color);background-color:var(--zan-layer-header-icon-hover-bg)}.zan-layer-btn{text-align:right;padding:0 5px 5px;pointer-events:auto}.zan-layer-btn a{height:28px;line-height:28px;padding:0 5px;border-radius:var(--global-border-radius);border:1px solid var(--zan-layer-button-border-color);background-color:var(--zan-layer-button-bg);cursor:pointer;color:var(--zan-layer-button-text);font-weight:400;margin-left:5px}.zan-layer-btn-disabled{border-color:var(--zan-layer-button-disabled-border-color)!important;background-color:var(--zan-layer-button-disabled-bg)!important;color:var(--zan-layer-button-disabled-text)!important;cursor:not-allowed!important}.zan-layer-btn .zan-layer-btn0{border-color:var(--global-primary-color);background-color:var(--global-primary-color);color:#fff}.zan-layer-btn-l{text-align:left}.zan-layer-btn-c{text-align:center}.zan-layer-dialog{min-width:300px}.zan-layer-dialog .zan-layer-content{position:relative;padding:5px;line-height:22px;word-break:break-all;overflow:hidden;font-size:13px;overflow-x:hidden;overflow-y:auto;color:var(--zan-layer-text-color)}.zan-layer-msg{min-width:180px;border:1px solid rgba(220,220,220,.5);box-shadow:2px 0 8px #1d232908}.zan-layer-msg .zan-layer-content{padding:10px;text-align:center;line-height:22px;font-size:13px}.zan-layer-hui{min-width:100px;background-color:#000;filter:alpha(opacity=60);background-color:#0009;color:#fff;border:none}.zan-layer-hui .zan-layer-content{padding:5px;text-align:center;color:#fff}.zan-layer-dialog .zan-layer-padding{padding:5px 5px 5px 50px;text-align:left}.zan-layer-drawer{border-radius:0}.zan-layer-drawer .zan-layer-content,.zan-layer-page .zan-layer-content{position:relative;overflow:auto;padding:5px;color:var(--zan-layer-text-color);font-size:13px;line-height:1.5}.zan-layer-drawer .zan-layer-btn,.zan-layer-iframe .zan-layer-btn,.zan-layer-page .zan-layer-btn{padding-top:5px}.zan-layer-iframe iframe{display:block;width:100%;height:100%}.zan-layer-loading{border-radius:16px;background:var(--zan-layer-loading-panel-bg);box-shadow:none;border:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.zan-layer-loading .zan-layer-content{background:transparent;display:flex;align-items:center;justify-content:center;position:relative;min-width:auto;min-height:auto;overflow:visible}.zan-layer-content.zan-layer-loading0{padding:18px 20px}.zan-layer-content.zan-layer-loading0{width:12px;height:12px;min-width:12px;min-height:12px;padding:0;border-radius:50%;background:var(--zan-layer-loading-indicator-color);animation:zan-loading-dot-center 1s ease-in-out infinite}.zan-layer-content.zan-layer-loading0:before,.zan-layer-content.zan-layer-loading0:after{content:"";position:absolute;top:0;width:12px;height:12px;border-radius:50%;background:var(--zan-layer-loading-indicator-color)}.zan-layer-content.zan-layer-loading0:before{left:-18px;animation:zan-loading-dot-side 1s ease-in-out infinite}.zan-layer-content.zan-layer-loading0:after{right:-18px;animation:zan-loading-dot-side 1s ease-in-out .5s infinite}.zan-layer-content.zan-layer-loading1{padding:20px}.zan-layer-content.zan-layer-loading1{width:36px;height:36px;min-width:36px;min-height:36px;padding:0}.zan-layer-content.zan-layer-loading1:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid var(--zan-layer-loading-indicator-muted);border-top-color:var(--zan-layer-loading-indicator-color);border-radius:50%;animation:zan-spin 1s linear infinite}.zan-layer-content.zan-layer-loading2{padding:20px}.zan-layer-content.zan-layer-loading2{width:42px;height:42px;min-width:42px;min-height:42px;padding:0}.zan-layer-content.zan-layer-loading2:before,.zan-layer-content.zan-layer-loading2:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.zan-layer-content.zan-layer-loading2:before{border:3px solid var(--zan-layer-loading-indicator-muted);animation:zan-loading-pulse 1.4s ease-in-out infinite}.zan-layer-content.zan-layer-loading2:after{top:4px;right:4px;bottom:4px;left:4px;border:3px solid;border-color:var(--zan-layer-loading-indicator-color) transparent var(--zan-layer-loading-indicator-color) transparent;border-radius:50%;animation:zan-spin 1.2s linear infinite}@keyframes zan-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes zan-loading-dot-center{0%,to{transform:scale(.72);opacity:.5}50%{transform:scale(1);opacity:1}}@keyframes zan-loading-dot-side{0%,to{transform:scale(.58);opacity:.35}50%{transform:scale(.9);opacity:.9}}@keyframes zan-loading-pulse{0%,to{transform:scale(.88);opacity:.45}50%{transform:scale(1);opacity:.9}}.zan-layer-photos{background:#000000e6;box-shadow:none;border:none}.zan-layer-photos .zan-layer-content{overflow:hidden;text-align:center;background:transparent}.zan-layer-photos .zan-layer-phimg img{position:relative;width:100%;height:100%;display:inline-block;vertical-align:top;object-fit:contain}.zan-layer-imgnext,.zan-layer-imgprev{position:fixed;top:50%;width:40px;height:60px;margin-top:-30px;outline:0;font-size:40px;color:#fff;text-align:center;line-height:60px;cursor:pointer;text-decoration:none}.zan-layer-imgprev{left:30px}.zan-layer-imgnext{right:30px}.zan-layer-imgbar{position:fixed;left:0;right:0;bottom:0;width:100%;min-height:40px;height:auto;line-height:40px;background-color:#02000059;color:#fff;overflow:hidden;font-size:0;opacity:0;transition:all 1s ease-in-out;display:flex;flex-wrap:wrap;justify-content:center}.zan-layer-imgtit *{display:inline-block;vertical-align:top;font-size:12px}.zan-layer-imgtit a{max-width:65%;overflow:hidden;color:#fff}.zan-layer-imgtit em{padding-left:5px;font-style:normal}.zan-layer-imgbar .thumb-row{width:100%;display:flex;justify-content:center;align-self:center}.zan-layer-imgbar .thumb-box{width:100px;height:100px;margin:0;display:inline-flex;align-items:center;justify-content:center;position:relative}.zan-layer-imgbar .thumb-box-border{position:absolute;top:0;transition:all .2s ease-in-out;width:100px;height:100px;border:1px solid #5fb878;box-sizing:border-box}.zan-layer-imgbar img{max-width:100%;max-height:100%;object-fit:contain}@keyframes zan-layer-bounceOut{to{opacity:0;transform:scale(.7)}30%{transform:scale(1.05)}0%{transform:scale(1)}}.zan-layer-anim-close{animation-name:zan-layer-bounceOut;animation-fill-mode:both;animation-duration:.2s}.zan-layer-notifiy{border:none;box-shadow:none}.zan-layer-notifiy-wrapper{padding:5px 10px 5px 5px;box-sizing:border-box;background-color:var(--zan-layer-notify-bg);overflow:hidden;border-radius:4px;border:1px solid var(--zan-layer-notify-border-color);box-shadow:0 2px 8px #0000001a;min-width:280px;max-width:380px;transition:opacity .3s,transform .3s}.zan-layer-notifiy-wrapper .title{font-weight:600;font-size:14px;color:var(--zan-layer-notify-title-color);margin:0;display:flex;align-items:center;gap:8px;line-height:1.4}.zan-layer-notifiy-wrapper .content{font-size:13px;line-height:1.5;margin:8px 0 0;color:var(--zan-layer-notify-content-color);word-break:break-word}.zan-layer-notifiy-wrapper .content img{max-width:100%}.zan-icon-close{cursor:pointer;width:20px;height:20px;position:absolute;top:10px;right:10px;color:var(--zan-layer-notify-close-color);font-style:normal;font-size:16px;line-height:20px;transition:color .3s;display:flex;align-items:center;justify-content:center}.zan-icon-close svg{width:20px;height:20px}.zan-icon-close:hover{color:var(--zan-layer-notify-close-hover-color)}.zan-layer-notifiy-transition{transition:top .3s ease-in-out,opacity .3s ease-in-out}.zan-layer-notifiy-wrapper .title .zan-icon{display:inline-block;position:inherit;margin:0;transform:scale(1);height:24px!important;width:24px!important;line-height:24px;font-size:16px;flex-shrink:0}.zan-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;text-align:center;line-height:1;font-style:normal;font-size:26px;font-weight:700;flex-shrink:0}.zan-icon-ico1{background-color:#67c23a;color:#fff}.zan-icon-ico1:before{content:"✓"}.zan-icon-ico2{background-color:#f56c6c;color:#fff}.zan-icon-ico2:before{content:"✕"}.zan-icon-ico3{background-color:#e6a23c;color:#fff}.zan-icon-ico3:before{content:"?"}.zan-icon-ico4{background-color:#409eff;color:#fff}.zan-icon-ico4:before{content:"ℹ"}.zan-icon-ico5{background-color:#e6a23c;color:#fff}.zan-icon-ico5:before{content:"☹"}.zan-icon-ico6{background-color:#67c23a;color:#fff}.zan-icon-ico6:before{content:"☺"}.zan-icon-ico7{background-color:#f56c6c;color:#fff}.zan-icon-ico7:before{content:"!"}.zan-icon-ico16{background:transparent}.zan-input,.zan-textarea{width:100%;padding:5px;border:1px solid var(--zan-layer-input-border-color);border-radius:var(--global-border-radius);font-size:13px;outline:none;box-sizing:border-box;font-family:inherit;background-color:var(--zan-layer-input-bg);color:var(--zan-layer-text-color)}.zan-input:focus,.zan-textarea:focus{border-color:var(--global-primary-color)}.zan-textarea{min-height:80px;resize:vertical;line-height:1.5}.zan-layer-dialog .zan-input,.zan-layer-dialog .zan-textarea{margin-top:8px}.zan-layer-dialog .zan-layer-content>.zan-input,.zan-layer-dialog .zan-layer-content>.zan-textarea{display:block;width:100%}.zan-layer-dialog .zan-layer-content .zan-input,.zan-layer-dialog .zan-layer-content .zan-textarea{width:100%}.zan-layer-msg .zan-icon{margin-right:10px;vertical-align:middle}.zan-layer-msg .zan-layer-content{display:flex;align-items:center;justify-content:center;padding:10px;min-height:48px}.zan-layer-dialog .zan-layer-padding .zan-icon{position:absolute;left:10px;top:10px}.zan-layer.zan-layer-min{z-index:99999}.zan-layer.zan-layer-min .zan-layer-title{cursor:default;-webkit-user-select:none;user-select:none}.zan-layer.zan-layer-min:hover{box-shadow:0 2px 8px #0000004d}.zan-layer.zan-layer-tips{background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important}.zan-layer.zan-layer-tips .zan-layer-content{padding:0!important;min-width:auto!important;min-height:auto!important;background:transparent!important;overflow:visible!important}