zan-layer 1.0.3 → 1.0.6

package/README.md

@@ -1,197 +1,356 @@
-# ZanLayer
-
-一个功能完整的 Vue 3 弹层组件库，基于 layui-vue layer 架构开发。
-
-## ✨ 特性
-
-- 🎯 **7种弹窗类型** - Dialog、Page、Iframe、Loading、Drawer、Photos、Notify、Prompt
-- 🎨 **6种动画效果** - 缩放、掉落、飞入、旋转、渐显、抖动
-- 🖱️ **拖拽和调整** - 支持拖拽移动和右下角拉伸调整大小
-- 📐 **最大化/最小化** - 完整的窗口控制功能
-- 🎭 **图标系统** - 7种内置图标（成功、失败、警告、信息等）
-- 🔔 **通知消息** - 4个位置（右上、右下、左上、左下）
-- 🖼️ **图片预览** - 支持单图和相册模式
-- ⌨️ **输入层** - 支持文本、密码、文本域输入
-- 🎛️ **完整API** - open、close、msg、confirm、load、drawer、notify、photos、prompt
-
-## 📦 安装
-
-```bash
-npm install @zan-ui/layer
-```
-
-## 🚀 快速开始
-
-### 全局注册
-
-```js
-import { createApp } from 'vue'
-import ZanLayer from '@zan-ui/layer'
-import '@zan-ui/layer/dist/style.css'
-
-const app = createApp(App)
-app.use(ZanLayer)
-app.mount('#app')
-```
-
-### 基础使用
-
-```js
-import { zanLayer } from '@zan-ui/layer'
-
-// 消息提示
-zanLayer.msg('操作成功', { icon: 1, time: 2000 })
-
-// 确认框
-zanLayer.confirm('确定要删除吗？', {
-  yes: (id) => {
-    console.log('确认')
-    zanLayer.close(id)
-  }
-})
-
-// 加载动画
-const loadId = zanLayer.load(0, { time: 3000 })
-
-// 打开弹层
-zanLayer.open({
-  type: 1,
-  title: '标题',
-  content: '内容',
-  area: ['500px', '400px']
-})
-
-// 抽屉
-zanLayer.drawer({
-  title: '抽屉',
-  content: '内容',
-  offset: 'r' // 右侧
-})
-
-// 通知
-zanLayer.notify({
-  title: '通知标题',
-  content: '通知内容',
-  icon: 1,
-  offset: 'rt' // 右上角
-})
-
-// 图片预览
-zanLayer.photos({
-  imgList: [
-    { src: 'image1.jpg', alt: '图片1' },
-    { src: 'image2.jpg', alt: '图片2' }
-  ]
-})
-
-// 输入层
-zanLayer.prompt({
-  title: '请输入',
-  formType: 'text',
-  yes: (id, value) => {
-    console.log('输入值：', value)
-    zanLayer.close(id)
-  }
-})
-```
-
-## 📖 API
-
-### 基础方法
-
-| 方法 | 说明 | 参数 |
-|------|------|------|
-| `open(options)` | 打开弹层 | LayerProps |
-| `close(id)` | 关闭指定弹层 | string |
-| `closeAll()` | 关闭所有弹层 | - |
-| `msg(message, options)` | 消息提示 | string, LayerProps |
-| `confirm(message, options)` | 确认框 | string, LayerProps |
-| `load(type, options)` | 加载动画 | number, LayerProps |
-| `drawer(options)` | 抽屉 | LayerProps |
-| `notify(options)` | 通知 | LayerProps |
-| `photos(options)` | 图片预览 | LayerProps |
-| `prompt(options)` | 输入层 | LayerProps |
-
-### 控制方法
-
-| 方法 | 说明 | 参数 |
-|------|------|------|
-| `reset(id)` | 重置位置 | string |
-| `min(id)` | 最小化 | string |
-| `full(id)` | 最大化 | string |
-| `revert(id)` | 复原 | string |
-
-### LayerProps
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| type | 弹层类型 | 0-7 / 'dialog' / 'page' / 'iframe' / 'loading' / 'drawer' / 'photos' / 'notify' / 'prompt' | 1 |
-| title | 标题 | string / VNode / boolean | '标题' |
-| content | 内容 | string / VNode | - |
-| area | 宽高 | string / string[] | 'auto' |
-| offset | 位置 | string / string[] | 'auto' |
-| shade | 显示遮罩 | boolean | true |
-| shadeClose | 点击遮罩关闭 | boolean | true |
-| shadeOpacity | 遮罩透明度 | string | '0.1' |
-| move | 允许拖拽 | boolean | true |
-| resize | 允许调整大小 | boolean | false |
-| maxmin | 显示最大化/最小化按钮 | boolean | false |
-| closeBtn | 显示关闭按钮 | boolean / string | '1' |
-| btn | 自定义按钮 | BtnType[] | - |
-| btnAlign | 按钮对齐 | 'l' / 'c' / 'r' | 'r' |
-| anim | 动画类型 | 0-6 | 0 |
-| icon | 图标 | number / string | - |
-| time | 自动关闭时间(ms) | number | 0 |
-| zIndex | 层级 | number | - |
-
-## 🎨 弹层类型
-
-- **0 (dialog)** - 对话框
-- **1 (page)** - 页面层
-- **2 (iframe)** - iframe层
-- **3 (loading)** - 加载层
-- **4 (drawer)** - 抽屉
-- **5 (photos)** - 图片层
-- **6 (notify)** - 通知
-- **7 (prompt)** - 输入层
-
-## 🎭 图标类型
-
-- **1** - 成功 ✓
-- **2** - 失败 ✕
-- **3** - 疑问 ?
-- **4** - 信息 ℹ
-- **5** - 哭脸 ☹
-- **6** - 笑脸 ☺
-- **7** - 警告 !
-
-## 🎬 动画效果
-
-- **0** - 默认缩放
-- **1** - 从上掉落
-- **2** - 从下飞入
-- **3** - 从左飞入
-- **4** - 旋转飞入
-- **5** - 渐显
-- **6** - 抖动
-
-## 📝 开发
-
-```bash
-# 安装依赖
-npm install
-
-# 启动开发服务器
-npm run dev
-
-# 构建
-npm run build
-```
-
-## 📄 License
-
-MIT
-
-## 🙏 致谢
-
-本项目基于 [layui-vue](https://github.com/layui-vue/layui-vue) 的 layer 组件架构开发。
+# zan-layer
+
+Vue 3 弹层组件库，提供函数式弹层 API 和组件能力，适合中后台常见的消息、确认框、页面层、抽屉、通知、图片预览和输入层。
+
+## 适用范围
+
+- 通用确认框、消息、加载层
+- 需要承载 Vue 组件内容的页面层 / 抽屉
+- 图片预览、通知消息、输入弹层
+- 希望用统一 API 管理打开、关闭、最大化、最小化、恢复等动作
+
+## 安装
+
+```bash
+npm install zan-layer
+```
+
+样式需要显式引入：
+
+```ts
+import 'zan-layer/lib/index.css'
+```
+
+## 快速开始
+
+### 全局安装
+
+```ts
+import { createApp } from 'vue'
+import ZanLayer from 'zan-layer'
+import 'zan-layer/lib/index.css'
+
+const app = createApp(App)
+app.use(ZanLayer)
+app.mount('#app')
+```
+
+安装后：
+
+- 注册组件：`<ZanLayer />`
+- 挂载全局方法：`app.config.globalProperties.$layer`
+- 可直接导入函数式 API：`import { layer, zanLayer } from 'zan-layer'`
+
+### 直接使用函数式 API
+
+```ts
+import { layer } from 'zan-layer'
+
+layer.msg('操作成功')
+
+layer.confirm('确定要删除吗？', {
+  yes: (id: string) => {
+    console.log('confirmed')
+    layer.close(id)
+  }
+})
+```
+
+## 导出内容
+
+包对外提供：
+
+- 默认导出：`ZanLayerPlugin`
+- 命名导出：`layer`
+- 命名导出：`zanLayer`，与 `layer` 等价
+- 命名导出：`ZanLayer`
+- 类型导出：`LayerProps`、`BtnType`、`ImgListType` 等
+
+## 常用方法
+
+### `layer.open(options)`
+
+通用页面层入口，几乎所有复杂弹层场景都从这里开始。
+
+```ts
+const id = layer.open({
+  type: 'page',
+  title: '编辑商品',
+  content: '这里可以放字符串、VNode 或返回 VNode 的函数',
+  area: ['720px', '560px'],
+  shadeClose: false,
+  maxmin: true,
+  resize: true
+})
+```
+
+### `layer.msg(message, options?)`
+
+```ts
+layer.msg('保存成功', {
+  icon: 1,
+  time: 2000
+})
+```
+
+### `layer.confirm(message, options?)`
+
+```ts
+layer.confirm('确定提交吗？', {
+  yes: (id: string) => {
+    submit()
+    layer.close(id)
+  }
+})
+```
+
+### `layer.load(type?, options?)`
+
+```ts
+const loadingId = layer.load(0, {
+  shade: true,
+  shadeOpacity: '0.3'
+})
+
+setTimeout(() => {
+  layer.close(loadingId)
+}, 1500)
+```
+
+### `layer.drawer(options)`
+
+```ts
+layer.drawer({
+  title: '筛选条件',
+  content: '这里是抽屉内容',
+  offset: 'r',
+  area: ['420px', '100%']
+})
+```
+
+### `layer.notify(options)`
+
+```ts
+layer.notify({
+  title: '新消息',
+  content: '订单已完成支付',
+  icon: 1,
+  offset: 'rt',
+  time: 3000
+})
+```
+
+### `layer.photos(options)`
+
+```ts
+layer.photos({
+  imgList: [
+    { src: '/img/1.jpg', alt: '图片1' },
+    { src: '/img/2.jpg', alt: '图片2' }
+  ],
+  startIndex: 0
+})
+```
+
+### `layer.prompt(options)`
+
+```ts
+layer.prompt({
+  title: '请输入备注',
+  formType: 'textarea',
+  value: '默认内容',
+  maxLength: 100,
+  yes: (id: string, value: string) => {
+    console.log(value)
+    layer.close(id)
+  }
+})
+```
+
+## `LayerProps` 核心字段
+
+最常用字段如下：
+
+| 字段 | 说明 |
+| --- | --- |
+| `type` | 弹层类型，支持数字和字符串别名 |
+| `title` | 标题，可传字符串、VNode、返回 VNode 的函数，传 `false` 可隐藏 |
+| `footer` | 底部区域内容 |
+| `content` | 主体内容，支持字符串、VNode、函数 |
+| `area` | 宽高，如 `'560px'` 或 `['720px', '560px']` |
+| `offset` | 位置，如 `'r'`、`'rt'`、`'auto'` 或坐标数组 |
+| `shade` | 是否显示遮罩 |
+| `shadeClose` | 点击遮罩是否关闭 |
+| `shadeOpacity` | 遮罩透明度 |
+| `move` | 是否允许拖拽 |
+| `resize` | 是否允许右下角拉伸 |
+| `maxmin` | 是否显示最大化/最小化按钮 |
+| `closeBtn` | 是否显示关闭按钮 |
+| `btn` | 自定义底部按钮 |
+| `btnAlign` | 底部按钮对齐方式 |
+| `anim` | 入场动画 |
+| `isOutAnim` | 是否启用退场动画 |
+| `icon` | 消息/通知图标 |
+| `time` | 自动关闭时间，毫秒 |
+| `zIndex` | 层级 |
+| `appContext` | 函数式渲染时复用宿主 Vue app 上下文 |
+
+## 弹层类型
+
+`type` 支持数字和字符串两套写法：
+
+- `0` / `'dialog'`
+- `1` / `'page'`
+- `2` / `'iframe'`
+- `3` / `'loading'`
+- `4` / `'drawer'`
+- `5` / `'photos'`
+- `6` / `'notify'`
+- `7` / `'prompt'`
+
+## 在 Vue 组件中承载真实组件内容
+
+这是中后台里最常见的用法。`content` 推荐直接传 VNode，且把 `appContext` 一起带上，避免丢失注入、全局组件或 UI 库上下文。
+
+```ts
+import { getCurrentInstance, h } from 'vue'
+import { layer } from 'zan-layer'
+import EditForm from './EditForm.vue'
+
+const instance = getCurrentInstance()
+
+layer.open({
+  type: 'page',
+  title: '编辑商品',
+  area: ['880px', '620px'],
+  resize: true,
+  maxmin: true,
+  appContext: instance?.appContext,
+  content: h(EditForm, {
+    productId: 1001
+  })
+})
+```
+
+如果你需要在关闭时拿到实例 ID，推荐先接住 `open()` 返回值：
+
+```ts
+const layerId = layer.open({
+  title: '详情',
+  appContext: instance?.appContext,
+  content: h(DetailPanel, {
+    onClose: () => layer.close(layerId)
+  })
+})
+```
+
+## 自定义按钮
+
+```ts
+layer.open({
+  title: '批量操作',
+  content: '确认执行吗？',
+  btnAlign: 'r',
+  btn: [
+    {
+      text: '取消',
+      callback: id => layer.close(id)
+    },
+    {
+      text: '确认',
+      type: 'primary',
+      callback: id => {
+        runAction()
+        layer.close(id)
+      }
+    }
+  ]
+})
+```
+
+`BtnType` 支持：
+
+- `text`
+- `type`
+- `style`
+- `class`
+- `disabled`
+- `callback`
+
+## 生命周期和交互回调
+
+### 常用业务回调
+
+- `success`
+- `end`
+- `yes`
+- `beforeClose`
+- `close`
+
+### 拖拽 / 缩放回调
+
+- `moveStart`
+- `moving`
+- `moveEnd`
+- `resizeStart`
+- `resizing`
+- `resizeEnd`
+
+示例：
+
+```ts
+layer.open({
+  title: '可拖拽窗口',
+  content: '拖动后记录位置',
+  move: true,
+  resize: true,
+  moveEnd: (id, options) => {
+    console.log(id, options.left, options.top)
+  },
+  resizeEnd: (id, options) => {
+    console.log(id, options.width, options.height)
+  }
+})
+```
+
+## 控制方法
+
+打开后可通过实例 ID 做控制：
+
+- `layer.close(id)`
+- `layer.closeAll()`
+- `layer.reset(id)`
+- `layer.min(id)`
+- `layer.full(id)`
+- `layer.revert(id)`
+
+## 安装选项
+
+插件安装时支持传入自定义 `zIndex`：
+
+```ts
+app.use(ZanLayer, {
+  zIndex: 3000
+})
+```
+
+## 使用建议
+
+- 页面层、抽屉、复杂表单弹层优先走 `layer.open()` / `layer.drawer()`
+- 函数式打开 Vue 组件时，优先传 `appContext`
+- 通知和消息属于短生命周期，不要把复杂交互塞进 `notify` / `msg`
+- 如果你有统一视觉规范，建议在宿主项目里覆盖 `layerClasses` 或 `contentClass`
+
+## 边界与限制
+
+- 当前主打浏览器端函数式弹层，不是 SSR 优先组件
+- `content` 是字符串时只做内容渲染，不会自动编译成 Vue 模板
+- 需要复杂表单、表格、图表内容时，推荐传真实 VNode，而不是大段 HTML 字符串
+
+## 开发命令
+
+```bash
+npm run dev
+npm run build
+npm run acceptance:smoke
+```

package/lib/index.css

@@ -1 +1 @@
-.zan-icon-btn[data-v-8d683fcb]{position:relative;width:20px;height:20px;display:inline-block;cursor:pointer;color:#333;font-style:normal;text-align:center;padding:2px}.zan-icon-btn[data-v-8d683fcb]:hover{color:var(--global-primary-color)}.zan-tooltip[data-v-8d683fcb]{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-8d683fcb]: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-8d683fcb]{opacity:1}.zan-icon-min[data-v-8d683fcb]:before{content:"";position:absolute;bottom:8px;left:0;width:16px;height:2px;text-align:center;background-color:currentColor}.zan-icon-max[data-v-8d683fcb]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-full[data-v-8d683fcb]:before{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border:2px solid currentColor}.zan-icon-restore[data-v-8d683fcb]:before{content:"";position:absolute;top:4px;left:4px;width:10px;height:10px;border:2px solid currentColor}.zan-icon-restore[data-v-8d683fcb]:after{content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;border:2px solid currentColor;background:#fff}.zan-icon-close-btn[data-v-8d683fcb]:before,.zan-icon-close-btn[data-v-8d683fcb]:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background-color:currentColor}.zan-icon-close-btn[data-v-8d683fcb]:before{transform:translate(-50%,-50%) rotate(45deg)}.zan-icon-close-btn[data-v-8d683fcb]:after{transform:translate(-50%,-50%) rotate(-45deg)}.zan-layer-close2[data-v-8d683fcb]:before,.zan-layer-close2[data-v-8d683fcb]:after{width:16px;height:2px}:root{--global-primary-color: #16baaa;--global-border-radius: 2px}.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:#fff;border-radius:var(--global-border-radius);padding:0;margin:0;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 #eeeeee;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 #f0f0f0;font-size:14px;color:#333;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:#333;cursor:pointer;transition:color .3s}.zan-layer-setwin i:hover{color:var(--global-primary-color)}.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 #dedede;background-color:#fff;cursor:pointer;color:#333;font-weight:400;margin-left:5px}.zan-layer-btn-disabled{border-color:#eee!important;background-color:#fbfbfb!important;color:#d2d2d2!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:#333}.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:#333;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:#fff;overflow:hidden;border-radius:4px;border:1px solid #ebeef5;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:#303133;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:#606266;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:#909399;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:#333}.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 #ddd;border-radius:var(--global-border-radius);font-size:13px;outline:none;box-sizing:border-box;font-family:inherit}.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-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}