@whitesev/pops 3.0.1 → 3.1.0

package/dist/index.umd.js

@@ -876,22 +876,25 @@
                 }
                 return option;
             }
-            const DOMUtilsContext = this;
+            const that = this;
             // eslint-disable-next-line prefer-rest-params
             const args = arguments;
             if (typeof element === "string") {
-                element = DOMUtilsContext.selectorAll(element);
+                element = that.selectorAll(element);
             }
             if (element == null) {
-                return;
+                return {
+                    off() { },
+                    emit() { },
+                };
             }
-            let elementList = [];
+            let $elList = [];
             if (element instanceof NodeList || Array.isArray(element)) {
                 element = element;
-                elementList = [...element];
+                $elList = [...element];
             }
             else {
-                elementList.push(element);
+                $elList.push(element);
             }
             // 事件名
             let eventTypeList = [];
@@ -933,10 +936,10 @@
              */
             function checkOptionOnceToRemoveEventListener() {
                 if (listenerOption.once) {
-                    DOMUtilsContext.off(element, eventType, selector, callback, option);
+                    that.off(element, eventType, selector, callback, option);
                 }
             }
-            elementList.forEach((elementItem) => {
+            $elList.forEach((elementItem) => {
                 /**
                  * 事件回调
                  * @param event
@@ -956,12 +959,12 @@
                         }
                         const findValue = selectorList.find((selectorItem) => {
                             // 判断目标元素是否匹配选择器
-                            if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
+                            if (that.matches(eventTarget, selectorItem)) {
                                 // 当前目标可以被selector所匹配到
                                 return true;
                             }
                             // 在上层与主元素之间寻找可以被selector所匹配到的
-                            const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
+                            const $closestMatches = that.closest(eventTarget, selectorItem);
                             if ($closestMatches && totalParent?.contains($closestMatches)) {
                                 eventTarget = $closestMatches;
                                 return true;
@@ -1007,6 +1010,23 @@
                     Reflect.set(elementItem, SymbolEvents, elementEvents);
                 });
             });
+            return {
+                /**
+                 * 取消绑定的监听事件
+                 * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
+                 */
+                off: (filter) => {
+                    that.off($elList, eventTypeList, selectorList, listenerCallBack, listenerOption, filter);
+                },
+                /**
+                 * 主动触发事件
+                 * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+                 * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+                 */
+                emit: (details, useDispatchToEmit) => {
+                    that.emit($elList, eventTypeList, details, useDispatchToEmit);
+                },
+            };
         }
         off(element, eventType, selector, callback, option, filter) {
             /**
@@ -1184,11 +1204,11 @@
          * 等待文档加载完成后执行指定的函数
          * @param callback 需要执行的函数
          * @example
-         * DOMUtils.ready(function(){
+         * DOMUtils.onReady(function(){
          *   console.log("文档加载完毕")
          * })
          */
-        ready(callback) {
+        onReady(callback) {
             const that = this;
             if (typeof callback !== "function") {
                 return;
@@ -1261,16 +1281,16 @@
          * @param element 需要触发的元素|元素数组|window
          * @param eventType 需要触发的事件
          * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-         * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+         * @param useDispatchToEmitEvent 是否使用dispatchEvent来触发事件,默认true
          * @example
          * // 触发元素a.xx的click事件
-         * DOMUtils.trigger(document.querySelector("a.xx"),"click")
-         * DOMUtils.trigger("a.xx","click")
+         * DOMUtils.emit(document.querySelector("a.xx"),"click")
+         * DOMUtils.emit("a.xx","click")
          * // 触发元素a.xx的click、tap、hover事件
-         * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
-         * DOMUtils.trigger("a.xx",["click","tap","hover"])
+         * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
+         * DOMUtils.emit("a.xx",["click","tap","hover"])
          */
-        trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
+        emit(element, eventType, details, useDispatchToEmitEvent = true) {
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
             }
@@ -1308,7 +1328,7 @@
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && _eventType_ in events) {
+                    if (useDispatchToEmitEvent == false && _eventType_ in events) {
                         events[_eventType_].forEach((eventsItem) => {
                             eventsItem.callback(event);
                         });
@@ -1324,7 +1344,7 @@
          * @param element 目标元素
          * @param handler （可选）事件处理函数
          * @param details （可选）赋予触发的Event的额外属性
-         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
          * @example
          * // 触发元素a.xx的click事件
          * DOMUtils.click(document.querySelector("a.xx"))
@@ -1333,7 +1353,7 @@
          *  console.log("触发click事件成功")
          * })
          * */
-        click(element, handler, details, useDispatchToTriggerEvent) {
+        click(element, handler, details, useDispatchToEmitEvent) {
             const DOMUtilsContext = this;
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
@@ -1342,7 +1362,7 @@
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "click", null, handler);
@@ -1353,7 +1373,7 @@
          * @param element 目标元素
          * @param handler （可选）事件处理函数
          * @param details （可选）赋予触发的Event的额外属性
-         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
          * @example
          * // 触发元素a.xx的blur事件
          * DOMUtils.blur(document.querySelector("a.xx"))
@@ -1362,7 +1382,7 @@
          *  console.log("触发blur事件成功")
          * })
          * */
-        blur(element, handler, details, useDispatchToTriggerEvent) {
+        blur(element, handler, details, useDispatchToEmitEvent) {
             const DOMUtilsContext = this;
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
@@ -1371,7 +1391,7 @@
                 return;
             }
             if (handler === null) {
-                DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "blur", null, handler);
@@ -1382,7 +1402,7 @@
          * @param element 目标元素
          * @param handler （可选）事件处理函数
          * @param details （可选）赋予触发的Event的额外属性
-         * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+         * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
          * @example
          * // 触发元素a.xx的focus事件
          * DOMUtils.focus(document.querySelector("a.xx"))
@@ -1391,7 +1411,7 @@
          *  console.log("触发focus事件成功")
          * })
          * */
-        focus(element, handler, details, useDispatchToTriggerEvent) {
+        focus(element, handler, details, useDispatchToEmitEvent) {
             const DOMUtilsContext = this;
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
@@ -1400,7 +1420,7 @@
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "focus", null, handler);
@@ -1420,7 +1440,7 @@
          *   console.log("移入/移除");
          * })
          */
-        hover(element, handler, option) {
+        onHover(element, handler, option) {
             const DOMUtilsContext = this;
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
@@ -1446,7 +1466,7 @@
          *   console.log("按键松开");
          * })
          */
-        keyup(target, handler, option) {
+        onKeyup(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -1471,7 +1491,7 @@
          *   console.log("按键按下");
          * })
          */
-        keydown(target, handler, option) {
+        onKeydown(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -1496,7 +1516,7 @@
          *   console.log("按键按下");
          * })
          */
-        keypress(target, handler, option) {
+        onKeypress(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -2555,6 +2575,9 @@
          * 监input、textarea的输入框值改变的事件
          */
         onInput($el, callback, option) {
+            /**
+             * 是否正在输入中
+             */
             let isComposite = false;
             const __callback = async (event) => {
                 if (isComposite)
@@ -2566,18 +2589,18 @@
             };
             const __composition_end_callback = () => {
                 isComposite = false;
-                this.trigger($el, "input", {
+                this.emit($el, "input", {
                     isComposite,
                 });
             };
-            this.on($el, "input", __callback, option);
-            this.on($el, "compositionstart", __composition_start_callback, option);
-            this.on($el, "compositionend", __composition_end_callback, option);
+            const inputListener = this.on($el, "input", __callback, option);
+            const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
+            const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
             return {
                 off: () => {
-                    this.off($el, "input", __callback, option);
-                    this.off($el, "compositionstart", __composition_start_callback, option);
-                    this.off($el, "compositionend", __composition_end_callback, option);
+                    inputListener.off();
+                    compositionStartListener.off();
+                    compositionEndListener.off();
                 },
             };
         }
@@ -2854,7 +2877,7 @@
 
     var buttonCSS = ".pops {\r\n  --button-font-size: 14px;\r\n  --button-height: 32px;\r\n  --button-color: rgb(51, 51, 51);\r\n  --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n  --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n  --button-margin-top: 0px;\r\n  --button-margin-bottom: 0px;\r\n  --button-margin-left: 5px;\r\n  --button-margin-right: 5px;\r\n  --button-padding-top: 6px;\r\n  --button-padding-bottom: 6px;\r\n  --button-padding-left: 12px;\r\n  --button-padding-right: 12px;\r\n  --button-radius: 4px;\r\n\r\n  --container-title-height: 55px;\r\n  --container-bottom-btn-height: 55px;\r\n\r\n  /* default按钮 */\r\n  --button-default-color: #333333;\r\n  --button-default-bd-color: #dcdfe6;\r\n  --button-default-bg-color: #ffffff;\r\n  --button-default-active-color: #409eff;\r\n  --button-default-active-bd-color: #409eff;\r\n  --button-default-active-bg-color: #ecf5ff;\r\n  --button-default-hover-color: #409eff;\r\n  --button-default-hover-bd-color: #c6e2ff;\r\n  --button-default-hover-bg-color: #ecf5ff;\r\n  --button-default-focus-visible-outline-color: #a0cfff;\r\n  --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n  --button-default-focus-visible-outline-offset: 1px;\r\n  --button-default-disabled-color: #a8abb2;\r\n  --button-default-disabled-bd-color: #ffffff;\r\n  --button-default-disabled-bg-color: #e4e7ed;\r\n\r\n  /* primary按钮 */\r\n  --button-primary-color: #ffffff;\r\n  --button-primary-bd-color: #409eff;\r\n  --button-primary-bg-color: #409eff;\r\n  --button-primary-active-color: #ffffff;\r\n  --button-primary-active-bd-color: #337ecc;\r\n  --button-primary-active-bg-color: #337ecc;\r\n  --button-primary-hover-color: #ffffff;\r\n  --button-primary-hover-bd-color: #79bbff;\r\n  --button-primary-hover-bg-color: #79bbff;\r\n  --button-primary-focus-visible-outline-color: #a0cfff;\r\n  --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n  --button-primary-focus-visible-outline-offset: 1px;\r\n  --button-primary-disabled-color: #ffffff80;\r\n  --button-primary-disabled-bd-color: #a0cfff;\r\n  --button-primary-disabled-bg-color: #a0cfff;\r\n\r\n  /* success按钮 */\r\n  --button-success-color: #ffffff;\r\n  --button-success-bd-color: #4cae4c;\r\n  --button-success-bg-color: #5cb85c;\r\n  --button-success-active-color: #ffffff;\r\n  --button-success-active-bd-color: #529b2e;\r\n  --button-success-active-bg-color: #529b2e;\r\n  --button-success-hover-color: #ffffff;\r\n  --button-success-hover-bd-color: #95d475;\r\n  --button-success-hover-bg-color: #95d475;\r\n  --button-success-focus-visible-outline-color: #b3e19d;\r\n  --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n  --button-success-focus-visible-outline-offset: 1px;\r\n  --button-success-disabled-color: #ffffff80;\r\n  --button-success-disabled-bd-color: #b3e19d;\r\n  --button-success-disabled-bg-color: #b3e19d;\r\n\r\n  /* info按钮 */\r\n  --button-info-color: #ffffff;\r\n  --button-info-bd-color: #909399;\r\n  --button-info-bg-color: #909399;\r\n  --button-info-active-color: #ffffff;\r\n  --button-info-active-bd-color: #73767a;\r\n  --button-info-active-bg-color: #73767a;\r\n  --button-info-hover-color: #ffffff;\r\n  --button-info-hover-bd-color: #b1b3b8;\r\n  --button-info-hover-bg-color: #b1b3b8;\r\n  --button-info-focus-visible-outline-color: #c8c9cc;\r\n  --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n  --button-info-focus-visible-outline-offset: 1px;\r\n  --button-info-disabled-color: #ffffff80;\r\n  --button-info-disabled-bd-color: #c8c9cc;\r\n  --button-info-disabled-bg-color: #c8c9cc;\r\n\r\n  /* warning按钮 */\r\n  --button-warning-color: #ffffff;\r\n  --button-warning-bd-color: #e6a23c;\r\n  --button-warning-bg-color: #e6a23c;\r\n  --button-warning-active-color: #ffffff;\r\n  --button-warning-active-bd-color: #b88230;\r\n  --button-warning-active-bg-color: #b88230;\r\n  --button-warning-hover-color: #ffffff80;\r\n  --button-warning-hover-bd-color: #eebe77;\r\n  --button-warning-hover-bg-color: #eebe77;\r\n  --button-warning-focus-visible-outline-color: #f3d19e;\r\n  --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n  --button-warning-focus-visible-outline-offset: 1px;\r\n  --button-warning-disabled-color: #ffffff80;\r\n  --button-warning-disabled-bd-color: #f3d19e;\r\n  --button-warning-disabled-bg-color: #f3d19e;\r\n\r\n  /* danger按钮 */\r\n  --button-danger-color: #ffffff;\r\n  --button-danger-bd-color: #f56c6c;\r\n  --button-danger-bg-color: #f56c6c;\r\n  --button-danger-active-color: #ffffff;\r\n  --button-danger-active-bd-color: #c45656;\r\n  --button-danger-active-bg-color: #c45656;\r\n  --button-danger-hover-color: #ffffff;\r\n  --button-danger-hover-bd-color: #f89898;\r\n  --button-danger-hover-bg-color: #f89898;\r\n  --button-danger-focus-visible-outline-color: #fab6b6;\r\n  --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n  --button-danger-focus-visible-outline-offset: 1px;\r\n  --button-danger-disabled-color: #ffffff80;\r\n  --button-danger-disabled-bd-color: #fab6b6;\r\n  --button-danger-disabled-bg-color: #fab6b6;\r\n\r\n  /* xiaomi-primary按钮 */\r\n  --button-xiaomi-primary-color: #ffffff;\r\n  --button-xiaomi-primary-bd-color: #ff5c00;\r\n  --button-xiaomi-primary-bg-color: #ff5c00;\r\n  --button-xiaomi-primary-active-color: #ffffff;\r\n  --button-xiaomi-primary-active-bd-color: #da4f00;\r\n  --button-xiaomi-primary-active-bg-color: #da4f00;\r\n  --button-xiaomi-primary-hover-color: #ffffff;\r\n  --button-xiaomi-primary-hover-bd-color: #ff7e29;\r\n  --button-xiaomi-primary-hover-bg-color: #ff7e29;\r\n  --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\r\n  --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\r\n  --button-xiaomi-primary-focus-visible-outline-offset: 1px;\r\n  --button-xiaomi-primary-disabled-color: #ffffff80;\r\n  --button-xiaomi-primary-disabled-bd-color: #fad5b6;\r\n  --button-xiaomi-primary-disabled-bg-color: #fad5b6;\r\n\r\n  /* violet按钮 */\r\n  --button-violet-color: #ffffff;\r\n  --button-violet-bd-color: #626aef;\r\n  --button-violet-bg-color: #626aef;\r\n  --button-violet-active-color: #ffffff;\r\n  --button-violet-active-bd-color: #8188f2;\r\n  --button-violet-active-bg-color: #8188f2;\r\n  --button-violet-hover-color: #ffffff;\r\n  --button-violet-hover-bd-color: #4b50ad;\r\n  --button-violet-hover-bg-color: #4b50ad;\r\n  --button-violet-focus-visible-outline-color: #2a598a;\r\n  --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\r\n  --button-violet-focus-visible-outline-offset: 1px;\r\n  --button-violet-disabled-color: #ffffff80;\r\n  --button-violet-disabled-bd-color: #3b3f82;\r\n  --button-violet-disabled-bg-color: #3b3f82;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops {\r\n    /* default按钮 */\r\n    --button-default-color: #cfd3dc;\r\n    --button-default-bd-color: #4c4d4f;\r\n    --button-default-bg-color: transparent;\r\n    --button-default-active-color: #409eff;\r\n    --button-default-active-bd-color: #409eff;\r\n    --button-default-active-bg-color: #18222c;\r\n    --button-default-hover-color: #409eff;\r\n    --button-default-hover-bd-color: #213d5b;\r\n    --button-default-hover-bg-color: #18222c;\r\n    --button-default-focus-visible-outline-color: #2a598a;\r\n    --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n    --button-default-focus-visible-outline-offset: 1px;\r\n    --button-default-disabled-color: #ffffff80;\r\n    --button-default-disabled-bd-color: #414243;\r\n    --button-default-disabled-bg-color: transparent;\r\n\r\n    /* primary按钮 */\r\n    --button-primary-color: #ffffff;\r\n    --button-primary-bd-color: #409eff;\r\n    --button-primary-bg-color: #409eff;\r\n    --button-primary-active-color: #ffffff;\r\n    --button-primary-active-bd-color: #66b1ff;\r\n    --button-primary-active-bg-color: #66b1ff;\r\n    --button-primary-hover-color: #ffffff;\r\n    --button-primary-hover-bd-color: #3375b9;\r\n    --button-primary-hover-bg-color: #3375b9;\r\n    --button-primary-focus-visible-outline-color: #2a598a;\r\n    --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n    --button-primary-focus-visible-outline-offset: 1px;\r\n    --button-primary-disabled-color: #ffffff80;\r\n    --button-primary-disabled-bd-color: #2a598a;\r\n    --button-primary-disabled-bg-color: #2a598a;\r\n\r\n    /* success按钮 */\r\n    --button-success-color: #ffffff;\r\n    --button-success-bd-color: #67c23a;\r\n    --button-success-bg-color: #67c23a;\r\n    --button-success-active-color: #ffffff;\r\n    --button-success-active-bd-color: #85ce61;\r\n    --button-success-active-bg-color: #85ce61;\r\n    --button-success-hover-color: #ffffff;\r\n    --button-success-hover-bd-color: #4e8e2f;\r\n    --button-success-hover-bg-color: #4e8e2f;\r\n    --button-success-focus-visible-outline-color: #3e6b27;\r\n    --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n    --button-success-focus-visible-outline-offset: 1px;\r\n    --button-success-disabled-color: #ffffff80;\r\n    --button-success-disabled-bd-color: #3e6b27;\r\n    --button-success-disabled-bg-color: #3e6b27;\r\n\r\n    /* info按钮 */\r\n    --button-info-color: #ffffff;\r\n    --button-info-bd-color: #909399;\r\n    --button-info-bg-color: #909399;\r\n    --button-info-active-color: #ffffff;\r\n    --button-info-active-bd-color: #a6a9ad;\r\n    --button-info-active-bg-color: #a6a9ad;\r\n    --button-info-hover-color: #ffffff;\r\n    --button-info-hover-bd-color: #6b6d71;\r\n    --button-info-hover-bg-color: #6b6d71;\r\n    --button-info-focus-visible-outline-color: #525457;\r\n    --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n    --button-info-focus-visible-outline-offset: 1px;\r\n    --button-info-disabled-color: #ffffff80;\r\n    --button-info-disabled-bd-color: #525457;\r\n    --button-info-disabled-bg-color: #525457;\r\n\r\n    /* warning按钮 */\r\n    --button-warning-color: #ffffff;\r\n    --button-warning-bd-color: #e6a23c;\r\n    --button-warning-bg-color: #e6a23c;\r\n    --button-warning-active-color: #ffffff;\r\n    --button-warning-active-bd-color: #ebb563;\r\n    --button-warning-active-bg-color: #ebb563;\r\n    --button-warning-hover-color: #ffffff80;\r\n    --button-warning-hover-bd-color: #a77730;\r\n    --button-warning-hover-bg-color: #a77730;\r\n    --button-warning-focus-visible-outline-color: #7d5b28;\r\n    --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n    --button-warning-focus-visible-outline-offset: 1px;\r\n    --button-warning-disabled-color: #ffffff80;\r\n    --button-warning-disabled-bd-color: #7d5b28;\r\n    --button-warning-disabled-bg-color: #7d5b28;\r\n\r\n    /* danger按钮 */\r\n    --button-danger-color: #ffffff;\r\n    --button-danger-bd-color: #f56c6c;\r\n    --button-danger-bg-color: #f56c6c;\r\n    --button-danger-active-color: #ffffff;\r\n    --button-danger-active-bd-color: #f78989;\r\n    --button-danger-active-bg-color: #f78989;\r\n    --button-danger-hover-color: #ffffff;\r\n    --button-danger-hover-bd-color: #b25252;\r\n    --button-danger-hover-bg-color: #b25252;\r\n    --button-danger-focus-visible-outline-color: #854040;\r\n    --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n    --button-danger-focus-visible-outline-offset: 1px;\r\n    --button-danger-disabled-color: #ffffff80;\r\n    --button-danger-disabled-bd-color: #854040;\r\n    --button-danger-disabled-bg-color: #854040;\r\n  }\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n  --container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n  white-space: nowrap;\r\n  float: right;\r\n  display: inline-block;\r\n  margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\r\n  padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\r\n  outline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n  display: none;\r\n}\r\n.pops button {\r\n  border-radius: var(--button-radius);\r\n  box-shadow: none;\r\n  font-weight: 400;\r\n  font-size: var(--button-font-size);\r\n  cursor: pointer;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n  display: flex;\r\n  align-items: center;\r\n  height: var(--button-height);\r\n  line-height: normal;\r\n  box-sizing: border-box;\r\n  border: 1px solid var(--button-bd-color);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops button {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n  outline: 0;\r\n}\r\n.pops button:hover {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n  cursor: not-allowed;\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n  --button-height: 32px;\r\n  --button-padding-top: 12px;\r\n  --button-padding-bottom: 12px;\r\n  --button-padding-left: 19px;\r\n  --button-padding-right: 19px;\r\n  --button-font-size: 14px;\r\n  --button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n  --button-height: 24px;\r\n  --button-padding-top: 5px;\r\n  --button-padding-bottom: 5px;\r\n  --button-padding-left: 11px;\r\n  --button-padding-right: 11px;\r\n  --button-font-size: 12px;\r\n  --button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n  display: none;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n  flex-direction: row-reverse;\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n  margin-right: 6px;\r\n}\r\n\r\n.pops button[data-type=\"default\"] {\r\n  --button-color: var(--button-default-color);\r\n  --button-bd-color: var(--button-default-bd-color);\r\n  --button-bg-color: var(--button-default-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:active {\r\n  --button-color: var(--button-default-active-color);\r\n  --button-bd-color: var(--button-default-active-bd-color);\r\n  --button-bg-color: var(--button-default-active-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:hover {\r\n  --button-color: var(--button-default-hover-color);\r\n  --button-bd-color: var(--button-default-hover-bd-color);\r\n  --button-bg-color: var(--button-default-hover-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:focus-visible {\r\n  outline: var(--button-default-focus-visible-outline);\r\n  outline-offset: var(--button-default-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"default\"]:disabled {\r\n  --button-color: var(--button-default-disabled-color);\r\n  --button-bd-color: var(--button-default-disabled-bd-color);\r\n  --button-bg-color: var(--button-default-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"primary\"] {\r\n  --button-color: var(--button-primary-color);\r\n  --button-bd-color: var(--button-primary-bd-color);\r\n  --button-bg-color: var(--button-primary-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:active {\r\n  --button-color: var(--button-primary-active-color);\r\n  --button-bd-color: var(--button-primary-active-bd-color);\r\n  --button-bg-color: var(--button-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:hover {\r\n  --button-color: var(--button-primary-hover-color);\r\n  --button-bd-color: var(--button-primary-hover-bd-color);\r\n  --button-bg-color: var(--button-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:focus-visible {\r\n  outline: var(--button-primary-focus-visible-outline);\r\n  outline-offset: var(--button-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"primary\"]:disabled {\r\n  --button-color: var(--button-primary-disabled-color);\r\n  --button-bd-color: var(--button-primary-disabled-bd-color);\r\n  --button-bg-color: var(--button-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"success\"] {\r\n  --button-color: var(--button-success-color);\r\n  --button-bd-color: var(--button-success-bd-color);\r\n  --button-bg-color: var(--button-success-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:active {\r\n  --button-color: var(--button-success-active-color);\r\n  --button-bd-color: var(--button-success-active-bd-color);\r\n  --button-bg-color: var(--button-success-active-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:hover {\r\n  --button-color: var(--button-success-hover-color);\r\n  --button-bd-color: var(--button-success-hover-bd-color);\r\n  --button-bg-color: var(--button-success-hover-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:focus-visible {\r\n  outline: var(--button-success-focus-visible-outline);\r\n  outline-offset: var(--button-success-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"success\"]:disabled {\r\n  --button-color: var(--button-success-disabled-color);\r\n  --button-bd-color: var(--button-success-disabled-bd-color);\r\n  --button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"info\"] {\r\n  --button-color: var(--button-info-color);\r\n  --button-bd-color: var(--button-info-bd-color);\r\n  --button-bg-color: var(--button-info-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:active {\r\n  --button-color: var(--button-info-active-color);\r\n  --button-bd-color: var(--button-info-active-bd-color);\r\n  --button-bg-color: var(--button-info-active-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:hover {\r\n  --button-color: var(--button-info-hover-color);\r\n  --button-bd-color: var(--button-info-hover-bd-color);\r\n  --button-bg-color: var(--button-info-hover-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:focus-visible {\r\n  outline: var(--button-info-focus-visible-outline);\r\n  outline-offset: var(--button-info-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"info\"]:disabled {\r\n  --button-color: var(--button-info-disabled-color);\r\n  --button-bd-color: var(--button-info-disabled-bd-color);\r\n  --button-bg-color: var(--button-info-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"warning\"] {\r\n  --button-color: var(--button-warning-color);\r\n  --button-bd-color: var(--button-warning-bd-color);\r\n  --button-bg-color: var(--button-warning-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:active {\r\n  --button-color: var(--button-warning-active-color);\r\n  --button-bd-color: var(--button-warning-active-bd-color);\r\n  --button-bg-color: var(--button-warning-active-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:hover {\r\n  --button-color: var(--button-warning-hover-color);\r\n  --button-bd-color: var(--button-warning-hover-bd-color);\r\n  --button-bg-color: var(--button-warning-hover-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:focus-visible {\r\n  outline: var(--button-warning-focus-visible-outline);\r\n  outline-offset: var(--button-warning-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"warning\"]:disabled {\r\n  --button-color: var(--button-warning-disabled-color);\r\n  --button-bd-color: var(--button-warning-disabled-bd-color);\r\n  --button-bg-color: var(--button-warning-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"danger\"] {\r\n  --button-color: var(--button-danger-color);\r\n  --button-bd-color: var(--button-danger-bd-color);\r\n  --button-bg-color: var(--button-danger-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:active {\r\n  --button-color: var(--button-danger-active-color);\r\n  --button-bd-color: var(--button-danger-active-bd-color);\r\n  --button-bg-color: var(--button-danger-active-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:hover {\r\n  --button-color: var(--button-danger-hover-color);\r\n  --button-bd-color: var(--button-danger-hover-bd-color);\r\n  --button-bg-color: var(--button-danger-hover-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:focus-visible {\r\n  outline: var(--button-danger-focus-visible-outline);\r\n  outline-offset: var(--button-danger-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"danger\"]:disabled {\r\n  --button-color: var(--button-danger-disabled-color);\r\n  --button-bd-color: var(--button-danger-disabled-bd-color);\r\n  --button-bg-color: var(--button-danger-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"xiaomi-primary\"] {\r\n  --button-color: var(--button-xiaomi-primary-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:active {\r\n  --button-color: var(--button-xiaomi-primary-active-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:hover {\r\n  --button-color: var(--button-xiaomi-primary-hover-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\r\n  outline: var(--button-xiaomi-primary-focus-visible-outline);\r\n  outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\r\n  --button-color: var(--button-xiaomi-primary-disabled-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"violet\"] {\r\n  --button-color: var(--button-violet-color);\r\n  --button-bd-color: var(--button-violet-bd-color);\r\n  --button-bg-color: var(--button-violet-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:active {\r\n  --button-color: var(--button-violet-active-color);\r\n  --button-bd-color: var(--button-violet-active-bd-color);\r\n  --button-bg-color: var(--button-violet-active-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:hover {\r\n  --button-color: var(--button-violet-hover-color);\r\n  --button-bd-color: var(--button-violet-hover-bd-color);\r\n  --button-bg-color: var(--button-violet-hover-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:focus-visible {\r\n  outline: var(--button-violet-focus-visible-outline);\r\n  outline-offset: var(--button-violet-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"violet\"]:disabled {\r\n  --button-color: var(--button-violet-disabled-color);\r\n  --button-bd-color: var(--button-violet-disabled-bd-color);\r\n  --button-bg-color: var(--button-violet-disabled-bg-color);\r\n}\r\n";
 
-    var commonCSS = ".pops-flex-items-center {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n  display: flex;\r\n  align-content: center;\r\n}\r\n.pops-hide {\r\n  display: none;\r\n}\r\n.pops-hide-important {\r\n  display: none !important;\r\n}\r\n.pops-no-border {\r\n  border: 0;\r\n}\r\n.pops-no-border-important {\r\n  border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-line-height-center {\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n.pops-width-fill {\r\n  width: 100%;\r\n  width: -webkit-fill-available;\r\n  width: -moz-available;\r\n}\r\n.pops-height-fill {\r\n  height: 100%;\r\n  height: -webkit-fill-available;\r\n  height: -moz-available;\r\n}\r\n.pops-text-is-disabled {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  color: var(--pops-text-is-disabled-color);\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  color: var(--pops-text-is-disabled-color) !important;\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
+    var commonCSS = ".pops-flex-items-center {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n  display: flex;\r\n  align-content: center;\r\n}\r\n.pops-hide {\r\n  display: none;\r\n}\r\n.pops-hide-important {\r\n  display: none !important;\r\n}\r\n.pops-no-border {\r\n  border: 0;\r\n}\r\n.pops-no-border-important {\r\n  border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-line-height-center {\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n.pops-width-fill {\r\n  width: 100%;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n}\r\n.pops-height-fill {\r\n  height: 100%;\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n}\r\n.pops-text-is-disabled {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n  color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n  color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
 
     var animCSS = "@keyframes rotating {\r\n  0% {\r\n    transform: rotate(0);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n  0% {\r\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n  }\r\n  20% {\r\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n  }\r\n  40% {\r\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n  }\r\n  60% {\r\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n  }\r\n  80% {\r\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n  }\r\n  100% {\r\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n  }\r\n  from {\r\n    width: 75%;\r\n  }\r\n  to {\r\n    width: 100%;\r\n  }\r\n}\r\n@keyframes iframeLoadingChange {\r\n  0% {\r\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n  }\r\n  20% {\r\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n  }\r\n  40% {\r\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n  }\r\n  60% {\r\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n  }\r\n  80% {\r\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n  }\r\n  100% {\r\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n  }\r\n  from {\r\n    width: 0;\r\n  }\r\n  to {\r\n    width: 75%;\r\n  }\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n  from {\r\n    opacity: 0;\r\n    display: none;\r\n  }\r\n  to {\r\n    display: block;\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes searchSelectFalOut {\r\n  from {\r\n    display: block;\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    display: none;\r\n  }\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n  form {\r\n    transform: rotate(0);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes pops-anim-spread {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n@keyframes pops-anim-shake {\r\n  0%,\r\n  100% {\r\n    transform: translateX(0);\r\n  }\r\n  10%,\r\n  30%,\r\n  50%,\r\n  70%,\r\n  90% {\r\n    transform: translateX(-10px);\r\n  }\r\n  20%,\r\n  40%,\r\n  60%,\r\n  80% {\r\n    transform: translateX(10px);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(-100%) rotate(-120deg);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%) rotate(120deg);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-top {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-left {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(-200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-right {\r\n  0% {\r\n    transform: translateX(200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(0.5);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n  0% {\r\n    transform: scale(0.5);\r\n  }\r\n  45% {\r\n    transform: scale(1.05);\r\n  }\r\n  80% {\r\n    transform: scale(0.95);\r\n  }\r\n  100% {\r\n    transform: scale(1);\r\n  }\r\n}\r\n@keyframes pops-anim-don {\r\n  0% {\r\n    opacity: 0;\r\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  2.08333% {\r\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  4.16667% {\r\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  6.25% {\r\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  8.33333% {\r\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  10.4167% {\r\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  12.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  14.5833% {\r\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  16.6667% {\r\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  18.75% {\r\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  20.8333% {\r\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  22.9167% {\r\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  25% {\r\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  27.0833% {\r\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  29.1667% {\r\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  31.25% {\r\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  33.3333% {\r\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  35.4167% {\r\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  37.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  39.5833% {\r\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  41.6667% {\r\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  43.75% {\r\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  45.8333% {\r\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  47.9167% {\r\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  50% {\r\n    opacity: 1;\r\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  52.0833% {\r\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  54.1667% {\r\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  56.25% {\r\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  58.3333% {\r\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  60.4167% {\r\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  62.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  64.5833% {\r\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  66.6667% {\r\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  68.75% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  70.8333% {\r\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  72.9167% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  75% {\r\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  77.0833% {\r\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  79.1667% {\r\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  81.25% {\r\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  83.3333% {\r\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  85.4167% {\r\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  87.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  89.5833% {\r\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  91.6667% {\r\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  93.75% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  95.8333% {\r\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  97.9167% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-roll {\r\n  0% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n  }\r\n  100% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n  }\r\n}\r\n@keyframes pops-anim-sandra {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale3d(1.1, 1.1, 1);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-gather {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n  0%,\r\n  100% {\r\n    transform: translateX(10px);\r\n  }\r\n  10%,\r\n  30%,\r\n  50%,\r\n  70%,\r\n  90% {\r\n    transform: translateX(-10px);\r\n  }\r\n  20%,\r\n  40%,\r\n  60%,\r\n  80% {\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(-100%) rotate(-120deg);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(100%) rotate(120deg);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(-200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(-200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(200%);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n  0% {\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale(0.5);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n  0% {\r\n    transform: scale(1);\r\n  }\r\n  45% {\r\n    transform: scale(0.95);\r\n  }\r\n  80% {\r\n    transform: scale(1.05);\r\n  }\r\n  100% {\r\n    transform: scale(0.5);\r\n  }\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n  100% {\r\n    opacity: 0;\r\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  97.9167% {\r\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  95.8333% {\r\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  93.75% {\r\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  91.6667% {\r\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  89.5833% {\r\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  87.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  85.4167% {\r\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  83.3333% {\r\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  81.25% {\r\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  79.1667% {\r\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  77.0833% {\r\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  75% {\r\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  72.9167% {\r\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  70.8333% {\r\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  68.75% {\r\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  66.6667% {\r\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  64.5833% {\r\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  62.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  60.4167% {\r\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  58.3333% {\r\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  56.25% {\r\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  54.1667% {\r\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  52.0833% {\r\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  50% {\r\n    opacity: 1;\r\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  47.9167% {\r\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  45.8333% {\r\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  43.75% {\r\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  41.6667% {\r\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  39.5833% {\r\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  37.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  35.4167% {\r\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  33.3333% {\r\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  31.25% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  29.1667% {\r\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  27.0833% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  25% {\r\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  22.9167% {\r\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  20.8333% {\r\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  18.75% {\r\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  16.6667% {\r\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  14.5833% {\r\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  12.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  10.4167% {\r\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  8.33333% {\r\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  6.25% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  4.16667% {\r\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  2.08333% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  0% {\r\n    opacity: 1;\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n  0% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n  }\r\n  100% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n  }\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale3d(1.1, 1.1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(-30px);\r\n    transform: translateY(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-30px);\r\n    -ms-transform: translateY(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n  0% {\r\n    opacity: 10;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(-30px);\r\n    transform: translateY(-30px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(-30px);\r\n    -ms-transform: translateY(-30px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n    -ms-transform: translateY(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n    -ms-transform: translateY(20px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-20px);\r\n    transform: translateX(-20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-30px);\r\n    transform: translateX(-30px);\r\n    -ms-transform: translateX(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-30px);\r\n    transform: translateX(-30px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-20px);\r\n    transform: translateX(-20px);\r\n    -ms-transform: translateX(-20px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n    -ms-transform: translateX(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n    -ms-transform: translateX(20px);\r\n  }\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n  animation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n  animation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n  animation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n  animation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n  animation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n  animation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n  animation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n  animation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n  animation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n  animation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n  animation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n  animation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n  animation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n  animation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n  animation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n  animation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n  animation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n  animation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n  animation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n  animation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n  animation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n  animation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n  animation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n  animation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n  animation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n  animation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n  animation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n  animation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n  animation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n  animation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
 
@@ -2874,9 +2897,9 @@
 
     var folderCSS = ".pops-folder-list {\r\n  --folder-arrow-fill-color: #d4d7de;\r\n  --folder-arrow-active-fill-color: #06a7ff;\r\n  --header-breadcrumb-text-color: #06a7ff;\r\n  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n  --header-breadcrumb-all-files-last-text-color: #999999;\r\n  --table-header-row-text-color: #818999;\r\n  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n  --table-body-row-text-color: #05082c;\r\n  --table-body-row-file-name-text-color: #05082c;\r\n  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n  --table-body-row-file-name-hover-text-color: #06a7ff;\r\n  --table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n  cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n  background: 0 0;\r\n  text-decoration: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  color: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n  width: 100%;\r\n  table-layout: fixed;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n  padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n  height: 100%;\r\n  background: 0 0;\r\n  overflow: hidden;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  -ms-flex-direction: column;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n  height: 100%;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n  height: 50px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  color: var(--table-header-row-text-color);\r\n  text-align: left;\r\n  font-size: 12px;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n  height: 50px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  color: var(--table-body-row-text-color);\r\n  font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n  background-color: var(--table-body-row-hover-bg-color);\r\n  border-color: var(--table-body-row-hover-bd-color);\r\n  border: 0;\r\n  outline: none;\r\n}\r\n.pops-folder-list table th {\r\n  border: 0;\r\n  border-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n  border: 0;\r\n  border-bottom: 1px solid var(--table-body-td-text-color);\r\n  position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n  display: inline-block;\r\n  padding-left: 12px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  padding: 6px 0px;\r\n  flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n  width: 45px;\r\n  height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n  padding-left: unset;\r\n  max-width: 250px;\r\n  overflow-x: hidden;\r\n  font-weight: 400;\r\n  line-height: unset;\r\n  margin-bottom: 4px;\r\n  white-space: normal;\r\n  text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n  overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n  height: 100%;\r\n  flex: 1 auto;\r\n  overflow: auto;\r\n  padding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n  height: 100%;\r\n  flex: 1 auto;\r\n  overflow: auto;\r\n  padding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n  overflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n  flex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n  display: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n  color: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n  text-decoration: none;\r\n  color: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n  color: var(--table-body-row-content-text-color);\r\n  position: relative;\r\n  width: 100%;\r\n  text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n  line-height: normal;\r\n  align-content: center;\r\n  position: relative;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n  flex: 1;\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n  -webkit-align-items: center;\r\n  -ms-flex-align: center;\r\n  align-items: center;\r\n  -webkit-box-orient: horizontal;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: row;\r\n  -ms-flex-direction: row;\r\n  flex-direction: row;\r\n  min-height: 17px;\r\n  flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n  display: inline-flex;\r\n  margin-left: 4px;\r\n  flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n  width: 10px;\r\n  height: 10px;\r\n  fill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n  fill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n  padding: 4px 20px;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n  -webkit-align-items: center;\r\n  -ms-flex-align: center;\r\n  align-items: center;\r\n  -webkit-box-orient: horizontal;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: row;\r\n  -ms-flex-direction: row;\r\n  flex-direction: row;\r\n  -webkit-box-pack: start;\r\n  -webkit-justify-content: start;\r\n  -ms-flex-pack: start;\r\n  justify-content: flex-start;\r\n  min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n  font-size: 12px;\r\n  color: var(--header-breadcrumb-all-files-text-color);\r\n  line-height: normal;\r\n  align-content: center;\r\n  font-weight: 700;\r\n  display: inline-block;\r\n  max-width: 140px;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n  color: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n  font-size: 14px;\r\n  color: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n    55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"folder\"] {\r\n    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n  }\r\n  .pops-folder-list {\r\n    --header-breadcrumb-text-color: #06a7ff;\r\n    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n    --header-breadcrumb-all-files-last-text-color: #818999;\r\n    --table-body-row-text-color: #f7f8fa;\r\n    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --table-body-td-text-color: #495366;\r\n    --table-body-row-hover-bd-color: #1f2022;\r\n    --table-body-row-hover-bg-color: #1f2022;\r\n    --table-body-row-file-name-text-color: #f7f8fa;\r\n  }\r\n}\r\n";
 
-    var panelCSS = ".pops[type-value=\"panel\"] {\r\n  --pops-bg-color: #f2f2f2;\r\n  --pops-color: #333333;\r\n  --panel-title-bg-color: #ffffff;\r\n\r\n  --panel-aside-bg-color: #ffffff;\r\n  --panel-aside-hover-color: rgb(64, 158, 255);\r\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n  --pops-panel-forms-margin-top-bottom: 10px;\r\n  --pops-panel-forms-margin-left-right: 20px;\r\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n  --pops-panel-forms-header-padding-top-bottom: 15px;\r\n  --pops-panel-forms-header-padding-left-right: 10px;\r\n  --pops-panel-forms-container-item-left-text-gap: 6px;\r\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n  --pops-panel-forms-container-item-bg-color: #ffffff;\r\n  --pops-panel-forms-container-item-title-color: #333;\r\n  --pops-panel-forms-container-item-border-radius: 6px;\r\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n  --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n  color: var(--pops-color);\r\n  background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n  background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  max-width: 200px;\r\n  min-width: 100px;\r\n  height: 100%;\r\n  background: var(--panel-aside-bg-color);\r\n  border-right: 1px solid var(--panel-aside-bg-color);\r\n  font-size: 0.9em;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n  overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n  background: var(--panel-aside-bg-color);\r\n  border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n  border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n  list-style-type: none;\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex: 1;\r\n  overflow: auto;\r\n  flex-basis: auto;\r\n  box-sizing: border-box;\r\n  min-width: 0;\r\n  bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n  flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n  display: flex;\r\n  justify-content: flex-start !important;\r\n  margin: 0px !important;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n  text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n  overflow: auto;\r\n  /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin: var(--pops-panel-forms-margin-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n  gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n  margin: 10px;\r\n  margin-left: calc(\r\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n  );\r\n  font-size: 0.9em;\r\n  text-align: left;\r\n  color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n  /* 去除<li>左侧的圆点 */\r\n  display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px 0px;\r\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n  text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n  .pops-panel-forms-container-item\r\n  ul.pops-panel-forms-container-item-formlist\r\n  li:last-child {\r\n  border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n  display: flex;\r\n  align-items: center;\r\n  fill: #6c6c6c;\r\n  justify-content: space-between;\r\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n  transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n  transform: rotate(-90deg);\r\n  transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n  height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n  margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n  transition: height 0.3s;\r\n  overflow: hidden;\r\n  border-radius: unset;\r\n  background: unset;\r\n  margin: 0;\r\n  height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n  /* 兼容移动端CSS */\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-panel-forms-margin-left-right: 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] {\r\n    width: 92%;\r\n    width: 92vw;\r\n    width: 92dvw;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n    max-width: 20%;\r\n    min-width: auto;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n    text-align: left;\r\n    --pops-panel-forms-margin-left-right: 0px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n    margin: 0px !important;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n    margin: 10px 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n    max-width: 55%;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n    padding: 0 4px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n    min-width: 88px !important;\r\n    width: -webkit-fill-available;\r\n    width: -moz-available;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n    font-size: 16px;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n    font-size: 14px;\r\n  }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n  --panel-switch-circle-color: #dcdfe6;\r\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --panel-switch-checked-circle-color: #409eff;\r\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n  display: inline-flex;\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  position: relative;\r\n  font-size: 14px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  height: 32px;\r\n  vertical-align: middle;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n  margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n  cursor: not-allowed;\r\n  opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n  display: inline-flex;\r\n  position: relative;\r\n  align-items: center;\r\n  min-width: 40px;\r\n  height: 20px;\r\n  border: 1px solid var(--panel-switch-core-bd-color);\r\n  outline: 0;\r\n  border-radius: 10px;\r\n  box-sizing: border-box;\r\n  background: var(--panel-switch-core-bg-color);\r\n  cursor: pointer;\r\n  transition:\r\n    border-color 0.3s,\r\n    background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n  position: absolute;\r\n  left: 1px;\r\n  border-radius: 100%;\r\n  transition: all 0.3s;\r\n  width: 16px;\r\n  height: 16px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: var(--panel-switch-circle-bg-color);\r\n  color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n  border-color: var(--panel-switch-checked-core-bd-color);\r\n  background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n  left: calc(100% - 17px);\r\n  color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n  overflow: hidden;\r\n  height: 25px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n  height: 6px;\r\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n  outline: 0;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n  height: 6px;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n  --pops-slider-color-white: #ffffff;\r\n  --pops-slider-color-primary: #409eff;\r\n  --pops-slider-color-info: #909399;\r\n  --pops-slider-text-color-placeholder: #a8abb2;\r\n  --pops-slider-border-color-light: #e4e7ed;\r\n  --pops-slider-border-radius-circle: 100%;\r\n  --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n  --pops-slider-border-radius: 3px;\r\n  --pops-slider-height: 6px;\r\n  --pops-slider-button-size: 20px;\r\n  --pops-slider-button-wrapper-size: 36px;\r\n  --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n  width: 100%;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n  flex: 0 0 52%;\r\n  margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n  flex: 1;\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-runway-bg-color);\r\n  border-radius: var(--pops-slider-border-radius);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n  margin-right: 30px;\r\n  width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n  cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n  background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n  border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n  flex-shrink: 0;\r\n  width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-main-bg-color);\r\n  border-top-left-radius: var(--pops-slider-border-radius);\r\n  border-bottom-left-radius: var(--pops-slider-border-radius);\r\n  position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n  height: var(--pops-slider-button-wrapper-size);\r\n  width: var(--pops-slider-button-wrapper-size);\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: var(--pops-slider-button-wrapper-offset);\r\n  transform: translate(-50%);\r\n  background-color: transparent;\r\n  text-align: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  line-height: normal;\r\n  outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n  display: inline-block;\r\n  content: \"\";\r\n  height: 100%;\r\n  vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n  display: inline-block;\r\n  width: var(--pops-slider-button-size);\r\n  height: var(--pops-slider-button-size);\r\n  vertical-align: middle;\r\n  border: solid 2px var(--pops-slider-main-bg-color);\r\n  background-color: var(--pops-slider-color-white);\r\n  border-radius: 50%;\r\n  box-sizing: border-box;\r\n  transition: var(--pops-slider-transition-duration-fast);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n  transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n  cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n  position: absolute;\r\n  height: var(--pops-slider-height);\r\n  width: var(--pops-slider-height);\r\n  border-radius: var(--pops-slider-border-radius-circle);\r\n  background-color: var(--pops-slider-stop-bg-color);\r\n  transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n  top: 0;\r\n  left: 12px;\r\n  width: 18px;\r\n  height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n  position: absolute;\r\n  transform: translate(-50%);\r\n  font-size: 14px;\r\n  color: var(--pops-slider-color-info);\r\n  margin-top: 15px;\r\n  white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n  position: relative;\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: 100%;\r\n  flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n  width: var(--pops-slider-height);\r\n  height: 100%;\r\n  margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n  width: var(--pops-slider-height);\r\n  height: auto;\r\n  border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n  top: auto;\r\n  left: var(--pops-slider-button-wrapper-offset);\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n  margin-top: 0;\r\n  left: 15px;\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n  height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n  height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n  --el-disabled-text-color: #a8abb2;\r\n  --el-disabled-bg-color: #f5f7fa;\r\n  --el-disabled-border-color: #e4e7ed;\r\n  --el-color-danger: #f56c6c;\r\n\r\n  --pops-panel-components-input-text-color: #000000;\r\n  --pops-panel-components-input-text-bg-color: transparent;\r\n  --pops-panel-components-input-text-default-padding: 8px;\r\n  --pops-panel-components-input-bd-color: #dcdfe6;\r\n  --pops-panel-components-input-bg-color: #ffffff;\r\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-input-focus-bd-color: #409eff;\r\n  --pops-panel-components-input-suffix-color: #a8abb2;\r\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  position: relative;\r\n  box-shadow: none;\r\n  width: 200px;\r\n  border: 0px;\r\n}\r\n.pops-panel-input_inner {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  border: 1px solid var(--pops-panel-components-input-bd-color);\r\n  border-radius: 4px;\r\n  background-color: var(--pops-panel-components-input-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input_inner:hover {\r\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input_inner:has(input:focus) {\r\n  outline: 0;\r\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n  border-radius: 4px;\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  text-align: start;\r\n  align-items: center;\r\n  align-content: center;\r\n  white-space: nowrap;\r\n  cursor: text;\r\n  box-sizing: border-box;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  color: var(--pops-panel-components-input-text-color);\r\n  background-color: var(--pops-panel-components-input-text-bg-color);\r\n  outline: 0;\r\n  transition: 0.1s;\r\n  border: 0;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: normal;\r\n  height: 32px;\r\n  width: 100%;\r\n  flex: 1;\r\n  /*margin-right: calc(1em + 8px);*/\r\n  margin: 0px;\r\n  padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\r\n  -webkit-appearance: none;\r\n  display: none;\r\n}\r\n/* 颜色选择器不需要那么宽 */\r\n.pops-panel-input:has(input[type=\"color\"]) {\r\n  width: 50px;\r\n}\r\n.pops-panel-input input[type=\"color\"] {\r\n  padding: 0px;\r\n}\r\n.pops-panel-input_inner:has(input[type=\"file\"]) {\r\n  border: 0px;\r\n  background: transparent;\r\n}\r\n.pops-panel-input input[type=\"file\"] {\r\n  padding: 0px;\r\n  line-height: 32px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n  display: inline-flex;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n  height: 100%;\r\n  height: -webkit-fill-available;\r\n  height: -moz-available;\r\n  text-align: center;\r\n  color: var(--pops-panel-components-input-suffix-color);\r\n  background: var(--pops-panel-components-input-suffix-bg-color);\r\n  transition: all 0.3s;\r\n  pointer-events: none;\r\n  padding: 0 8px;\r\n  position: relative;\r\n  right: 0px;\r\n  border-top-right-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n  border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n  pointer-events: all;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n  padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  height: inherit;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n  background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-disabled-text-color);\r\n  -webkit-text-fill-color: var(--el-disabled-text-color);\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  display: none;\r\n}\r\n/* 校验样式 */\r\n.pops-panel-input:has(.pops-panel-input-valid-error) {\r\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input .pops-panel-input-valid-error {\r\n  width: 100%;\r\n  color: var(--el-color-danger);\r\n  font-weight: 500;\r\n  font-size: 0.8em;\r\n  box-sizing: border-box;\r\n  vertical-align: middle;\r\n  display: inline-flex;\r\n  position: relative;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n  --pops-panel-components-textarea-text-color: #000000;\r\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n  width: 100%;\r\n  /*vertical-align: bottom;*/\r\n  position: relative;\r\n  display: block;\r\n  resize: none;\r\n  padding: 5px 11px;\r\n  /*line-height: 1;*/\r\n  box-sizing: border-box;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: var(--pops-panel-components-textarea-text-color);\r\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n  background-image: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  box-shadow: none;\r\n  border-radius: 0;\r\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n  outline: 0;\r\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n  --pops-panel-components-select-text-color: #000000;\r\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n  border: 0;\r\n}\r\n.pops-panel-select select {\r\n  height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  min-width: 200px;\r\n  border: 1px solid var(--pops-panel-components-select-bd-color);\r\n  border-radius: 5px;\r\n  text-align: center;\r\n  outline: 0;\r\n  color: var(--pops-panel-components-select-text-color);\r\n  background-color: var(--pops-panel-components-select-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n  box-shadow: none;\r\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select useDialog的CSS */\r\n.pops-panel-select {\r\n}\r\n/* select useDialog的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple,\r\n.pops-panel-select {\r\n  --el-border-radius-base: 4px;\r\n  --el-fill-color-blank: #ffffff;\r\n  --el-transition-duration: 0.3s;\r\n  --el-border-color: #cbcbcb;\r\n  --el-text-color-placeholder: #a8abb2;\r\n  --color: inherit;\r\n  --el-select-input-color: #a8abb2;\r\n  --el-select-input-font-size: 14px;\r\n  --el-text-color-regular: #606266;\r\n  --el-color-info: #909399;\r\n  --el-color-info-light-9: #f4f4f5;\r\n  --el-color-info-light-8: #e9e9eb;\r\n  --el-color-primary-light-9: #ecf5ff;\r\n  --el-color-primary-light-8: #d9ecff;\r\n  --el-color-primary: #409eff;\r\n  --el-color-white: #ffffff;\r\n  width: 200px;\r\n}\r\n.pops-panel-select .el-select__wrapper,\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  text-align: left;\r\n  font-size: 14px;\r\n  padding: 4px 12px;\r\n  gap: 6px;\r\n  min-height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-radius: var(--el-border-radius-base);\r\n  background-color: var(--el-fill-color-blank);\r\n  transition: var(--el-transition-duration);\r\n  transform: translateZ(0);\r\n  border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select .el-select__wrapper.is-focused,\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n  --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select .el-select__selection,\r\n.pops-panel-select-multiple .el-select__selection {\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  flex: 1;\r\n  min-width: 0;\r\n  gap: 6px;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\r\n  justify-content: left;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\r\n  justify-content: center;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\r\n  justify-content: right;\r\n}\r\n.pops-panel-select .el-select__selected-item,\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-select .el-select__selected-item span {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n  max-width: 200px;\r\n}\r\n.pops-panel-select .el-select__input-wrapper,\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n  max-width: 100%;\r\n}\r\n.pops-panel-select .el-select__selection.is-near,\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n  margin-left: -8px;\r\n}\r\n.pops-panel-select .el-select__placeholder,\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n  position: absolute;\r\n  display: block;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select .el-select__placeholder.is-transparent,\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select .el-select__prefix,\r\n.pops-panel-select .el-select__suffix,\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  gap: 6px;\r\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select .el-icon,\r\n.pops-panel-select-multiple .el-icon {\r\n  --color: inherit;\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: var(--color);\r\n  font-size: inherit;\r\n}\r\n.pops-panel-select .el-icon svg,\r\n.pops-panel-select-multiple .el-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n.pops-panel-select .el-select__caret,\r\n.pops-panel-select-multiple .el-select__caret {\r\n  color: var(--el-select-input-color);\r\n  font-size: var(--el-select-input-font-size);\r\n  transition: transform var(--el-transition-duration);\r\n  transform: rotate(0);\r\n  cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select[data-show-option] .el-select__caret,\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n  transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  --el-tag-font-size: 12px;\r\n  --el-tag-border-radius: 4px;\r\n  --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  background-color: var(--el-tag-bg-color);\r\n  border-color: var(--el-tag-border-color);\r\n  color: var(--el-tag-text-color);\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  height: 24px;\r\n  padding: 0 9px;\r\n  font-size: var(--el-tag-font-size);\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: var(--el-tag-border-radius);\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n  --el-icon-size: 14px;\r\n  --el-tag-bg-color: var(--el-color-primary-light-9);\r\n  --el-tag-border-color: var(--el-color-primary-light-8);\r\n  --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n  cursor: pointer;\r\n  border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-bg-color: var(--el-color-info-light-9);\r\n  --el-tag-border-color: var(--el-color-info-light-8);\r\n  --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n  padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n  min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  flex-shrink: 0;\r\n  color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n  color: var(--el-color-white);\r\n  background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  font-size: calc(var(--el-icon-size) - 2px);\r\n  height: var(--el-icon-size);\r\n  width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n  display: block;\r\n  line-height: normal;\r\n  align-content: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* 禁用样式 */\r\n.pops-panel-select-multiple-disable {\r\n  --el-fill-color-blank: #f5f7fa;\r\n  --color: #a8abb2;\r\n  --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n  --el-tag-bg-color: #e7e7e7;\r\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-multiple-disable .el-select__selection .el-tag,\r\n.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-multiple-disable .el-select__wrapper,\r\n.pops-panel-select-multiple-disable .el-select__caret {\r\n  cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n  border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n  display: flex;\r\n  align-items: center;\r\n  color: #6c6c6c;\r\n  fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n  display: flex;\r\n  align-items: center;\r\n  width: -webkit-fill-available;\r\n  width: -moz-available;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(\r\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n        var(--pops-panel-forms-header-icon-size)\r\n    );\r\n  gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n  width: var(--pops-panel-forms-header-icon-size);\r\n  height: var(--pops-panel-forms-header-icon-size);\r\n  display: flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n  width: inherit;\r\n  height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n  display: flex;\r\n  align-items: baseline;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-bg-color: #000000;\r\n    --pops-color: #f2f2f2;\r\n    --panel-title-bg-color: #000000;\r\n    --panel-aside-bg-color: #262626;\r\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n    --pops-panel-forms-container-item-bg-color: #262626;\r\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n    fill: #f2f2f2;\r\n  }\r\n\r\n  /* switch的CSS */\r\n  .pops-panel-switch {\r\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n    --panel-switch-circle-color: #dcdfe6;\r\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n    --panel-switch-checked-circle-color: #409eff;\r\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n  }\r\n  /* select的CSS */\r\n  .pops-panel-select {\r\n    --pops-panel-components-select-text-color: #f2f2f2;\r\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-components-select-bg-color: #141414;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  .pops-panel-select-multiple {\r\n    --el-fill-color-blank: #141414;\r\n    --el-border-color: #4c4d4f;\r\n    --el-text-color-placeholder: #a8abb2;\r\n    --el-select-input-color: #a8abb2;\r\n    --el-text-color-regular: #606266;\r\n    --el-color-info: #909399;\r\n    --el-color-info-light-8: #e9e9eb;\r\n    --el-color-primary-light-9: #ecf5ff;\r\n    --el-color-primary-light-8: #d9ecff;\r\n    --el-color-primary: #409eff;\r\n    --el-color-white: #ffffff;\r\n  }\r\n  .pops-panel-select-multiple .el-tag {\r\n    --el-color-info-light-9: #202121;\r\n  }\r\n  .pops-panel-select-multiple-disable {\r\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n  }\r\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n    --el-tag-bg-color: #2f2f2f;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  /* slider的CSS */\r\n  .pops-slider {\r\n    --pops-slider-border-color-light: #414243;\r\n  }\r\n  /* input的CSS */\r\n  .pops-panel-input {\r\n    --pops-panel-components-input-text-color: #f2f2f2;\r\n    --pops-panel-components-input-bd-color: #4f5052;\r\n    --pops-panel-components-input-bg-color: #141414;\r\n    --pops-panel-components-input-hover-bd-color: #6f7175;\r\n    --pops-panel-components-input-focus-bd-color: #409eff;\r\n    --pops-panel-components-input-suffix-color: #a8abb2;\r\n  }\r\n  /* textarea的CSS */\r\n  .pops-panel-textarea {\r\n    --pops-panel-components-textarea-text-color: #f2f2f2;\r\n    --pops-panel-components-textarea-text-bg-color: #141414;\r\n    --pops-panel-components-textarea-bd-color: #4f5052;\r\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n  }\r\n  .pops-panel-textarea-disable {\r\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n  }\r\n  /* slider */\r\n  .pops-slider {\r\n    --pops-slider-text-color-placeholder: #8d9095;\r\n  }\r\n}\r\n";
+    var panelCSS = ".pops[type-value=\"panel\"] {\r\n  --pops-bg-color: #f2f2f2;\r\n  --pops-color: #333333;\r\n  --panel-title-bg-color: #ffffff;\r\n\r\n  --panel-aside-bg-color: #ffffff;\r\n  --panel-aside-hover-color: rgb(64, 158, 255);\r\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n  --pops-panel-forms-margin-top-bottom: 10px;\r\n  --pops-panel-forms-margin-left-right: 20px;\r\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n  --pops-panel-forms-header-padding-top-bottom: 15px;\r\n  --pops-panel-forms-header-padding-left-right: 10px;\r\n  --pops-panel-forms-container-item-left-text-gap: 6px;\r\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n  --pops-panel-forms-container-item-bg-color: #ffffff;\r\n  --pops-panel-forms-container-item-title-color: #333;\r\n  --pops-panel-forms-container-item-border-radius: 6px;\r\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n  --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n  color: var(--pops-color);\r\n  background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n  background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  max-width: 200px;\r\n  min-width: 100px;\r\n  height: 100%;\r\n  background: var(--panel-aside-bg-color);\r\n  border-right: 1px solid var(--panel-aside-bg-color);\r\n  font-size: 0.9em;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n  overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n  background: var(--panel-aside-bg-color);\r\n  border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n  border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n  list-style-type: none;\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex: 1;\r\n  overflow: auto;\r\n  flex-basis: auto;\r\n  box-sizing: border-box;\r\n  min-width: 0;\r\n  bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n  flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n  display: flex;\r\n  justify-content: flex-start !important;\r\n  margin: 0px !important;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n  text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n  overflow: auto;\r\n  /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin: var(--pops-panel-forms-margin-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n  gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n  margin: 10px;\r\n  margin-left: calc(\r\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n  );\r\n  font-size: 0.9em;\r\n  text-align: left;\r\n  color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n  /* 去除<li>左侧的圆点 */\r\n  display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px 0px;\r\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n  text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n  .pops-panel-forms-container-item\r\n  ul.pops-panel-forms-container-item-formlist\r\n  li:last-child {\r\n  border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n  display: flex;\r\n  align-items: center;\r\n  fill: #6c6c6c;\r\n  justify-content: space-between;\r\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n  transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n  transform: rotate(-90deg);\r\n  transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n  height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n  margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n  transition: height 0.3s;\r\n  overflow: hidden;\r\n  border-radius: unset;\r\n  background: unset;\r\n  margin: 0;\r\n  height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n  /* 兼容移动端CSS */\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-panel-forms-margin-left-right: 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] {\r\n    width: 92%;\r\n    width: 92vw;\r\n    width: 92dvw;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n    max-width: 20%;\r\n    min-width: auto;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n    text-align: left;\r\n    --pops-panel-forms-margin-left-right: 0px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n    margin: 0px !important;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n    margin: 10px 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n    max-width: 55%;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\r\n    max-width: -moz-available;\r\n    max-width: -webkit-fill-available;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n    padding: 0 4px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n    min-width: 88px !important;\r\n    width: -moz-available;\r\n    width: -webkit-fill-available;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n    font-size: 16px;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n    font-size: 14px;\r\n  }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n  --panel-switch-circle-color: #dcdfe6;\r\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --panel-switch-checked-circle-color: #409eff;\r\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n  display: inline-flex;\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  position: relative;\r\n  font-size: 14px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  height: 32px;\r\n  vertical-align: middle;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n  margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n  cursor: not-allowed;\r\n  opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n  display: inline-flex;\r\n  position: relative;\r\n  align-items: center;\r\n  min-width: 40px;\r\n  height: 20px;\r\n  border: 1px solid var(--panel-switch-core-bd-color);\r\n  outline: 0;\r\n  border-radius: 10px;\r\n  box-sizing: border-box;\r\n  background: var(--panel-switch-core-bg-color);\r\n  cursor: pointer;\r\n  transition:\r\n    border-color 0.3s,\r\n    background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n  position: absolute;\r\n  left: 1px;\r\n  border-radius: 100%;\r\n  transition: all 0.3s;\r\n  width: 16px;\r\n  height: 16px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: var(--panel-switch-circle-bg-color);\r\n  color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n  border-color: var(--panel-switch-checked-core-bd-color);\r\n  background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n  left: calc(100% - 17px);\r\n  color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n  overflow: hidden;\r\n  height: 25px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n  height: 6px;\r\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n  outline: 0;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n  height: 6px;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n  --pops-slider-color-white: #ffffff;\r\n  --pops-slider-color-primary: #409eff;\r\n  --pops-slider-color-info: #909399;\r\n  --pops-slider-text-color-placeholder: #a8abb2;\r\n  --pops-slider-border-color-light: #e4e7ed;\r\n  --pops-slider-border-radius-circle: 100%;\r\n  --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n  --pops-slider-border-radius: 3px;\r\n  --pops-slider-height: 6px;\r\n  --pops-slider-button-size: 20px;\r\n  --pops-slider-button-wrapper-size: 36px;\r\n  --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n  width: 100%;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n  flex: 0 0 52%;\r\n  margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n  flex: 1;\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-runway-bg-color);\r\n  border-radius: var(--pops-slider-border-radius);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n  margin-right: 30px;\r\n  width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n  cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n  background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n  border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n  flex-shrink: 0;\r\n  width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-main-bg-color);\r\n  border-top-left-radius: var(--pops-slider-border-radius);\r\n  border-bottom-left-radius: var(--pops-slider-border-radius);\r\n  position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n  height: var(--pops-slider-button-wrapper-size);\r\n  width: var(--pops-slider-button-wrapper-size);\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: var(--pops-slider-button-wrapper-offset);\r\n  transform: translate(-50%);\r\n  background-color: transparent;\r\n  text-align: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  line-height: normal;\r\n  outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n  display: inline-block;\r\n  content: \"\";\r\n  height: 100%;\r\n  vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n  display: inline-block;\r\n  width: var(--pops-slider-button-size);\r\n  height: var(--pops-slider-button-size);\r\n  vertical-align: middle;\r\n  border: solid 2px var(--pops-slider-main-bg-color);\r\n  background-color: var(--pops-slider-color-white);\r\n  border-radius: 50%;\r\n  box-sizing: border-box;\r\n  transition: var(--pops-slider-transition-duration-fast);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n  transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n  cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n  position: absolute;\r\n  height: var(--pops-slider-height);\r\n  width: var(--pops-slider-height);\r\n  border-radius: var(--pops-slider-border-radius-circle);\r\n  background-color: var(--pops-slider-stop-bg-color);\r\n  transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n  top: 0;\r\n  left: 12px;\r\n  width: 18px;\r\n  height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n  position: absolute;\r\n  transform: translate(-50%);\r\n  font-size: 14px;\r\n  color: var(--pops-slider-color-info);\r\n  margin-top: 15px;\r\n  white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n  position: relative;\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: 100%;\r\n  flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n  width: var(--pops-slider-height);\r\n  height: 100%;\r\n  margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n  width: var(--pops-slider-height);\r\n  height: auto;\r\n  border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n  top: auto;\r\n  left: var(--pops-slider-button-wrapper-offset);\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n  margin-top: 0;\r\n  left: 15px;\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n  height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n  height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n  --el-disabled-text-color: #a8abb2;\r\n  --el-disabled-bg-color: #f5f7fa;\r\n  --el-disabled-border-color: #e4e7ed;\r\n  --el-color-danger: #f56c6c;\r\n\r\n  --pops-panel-components-input-text-color: #000000;\r\n  --pops-panel-components-input-text-bg-color: transparent;\r\n  --pops-panel-components-input-text-default-padding: 8px;\r\n  --pops-panel-components-input-bd-color: #dcdfe6;\r\n  --pops-panel-components-input-bg-color: #ffffff;\r\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-input-focus-bd-color: #409eff;\r\n  --pops-panel-components-input-suffix-color: #a8abb2;\r\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  position: relative;\r\n  box-shadow: none;\r\n  width: 200px;\r\n  border: 0px;\r\n}\r\n.pops-panel-input_inner {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  border: 1px solid var(--pops-panel-components-input-bd-color);\r\n  border-radius: 4px;\r\n  background-color: var(--pops-panel-components-input-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input_inner:hover {\r\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input_inner:has(input:focus) {\r\n  outline: 0;\r\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n  border-radius: 4px;\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  text-align: start;\r\n  align-items: center;\r\n  align-content: center;\r\n  white-space: nowrap;\r\n  cursor: text;\r\n  box-sizing: border-box;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  color: var(--pops-panel-components-input-text-color);\r\n  background-color: var(--pops-panel-components-input-text-bg-color);\r\n  outline: 0;\r\n  transition: 0.1s;\r\n  border: 0;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: normal;\r\n  height: 32px;\r\n  width: 100%;\r\n  flex: 1;\r\n  /*margin-right: calc(1em + 8px);*/\r\n  margin: 0px;\r\n  padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\r\n  -webkit-appearance: none;\r\n  display: none;\r\n}\r\n/* 颜色选择器不需要那么宽 */\r\n.pops-panel-input:has(input[type=\"color\"]) {\r\n  width: 50px;\r\n}\r\n.pops-panel-input input[type=\"color\"] {\r\n  padding: 0px;\r\n}\r\n.pops-panel-input_inner:has(input[type=\"file\"]) {\r\n  border: 0px;\r\n  background: transparent;\r\n}\r\n.pops-panel-input input[type=\"file\"] {\r\n  padding: 0px;\r\n  line-height: 32px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n  display: inline-flex;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n  height: 100%;\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n  text-align: center;\r\n  color: var(--pops-panel-components-input-suffix-color);\r\n  background: var(--pops-panel-components-input-suffix-bg-color);\r\n  transition: all 0.3s;\r\n  pointer-events: none;\r\n  padding: 0 8px;\r\n  position: relative;\r\n  right: 0px;\r\n  border-top-right-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n  border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n  pointer-events: all;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n  padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  height: inherit;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n  background-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-disabled-text-color);\r\n  -webkit-text-fill-color: var(--el-disabled-text-color);\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  display: none;\r\n}\r\n/* 校验样式 */\r\n.pops-panel-input:has(.pops-panel-input-valid-error) {\r\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input .pops-panel-input-valid-error {\r\n  width: 100%;\r\n  color: var(--el-color-danger);\r\n  font-weight: 500;\r\n  font-size: 0.8em;\r\n  box-sizing: border-box;\r\n  vertical-align: middle;\r\n  display: inline-flex;\r\n  position: relative;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n  --pops-panel-components-textarea-text-color: #000000;\r\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n  width: 100%;\r\n  /*vertical-align: bottom;*/\r\n  position: relative;\r\n  display: block;\r\n  resize: none;\r\n  padding: 5px 11px;\r\n  /*line-height: 1;*/\r\n  box-sizing: border-box;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: var(--pops-panel-components-textarea-text-color);\r\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n  background-image: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  box-shadow: none;\r\n  border-radius: 0;\r\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n  outline: 0;\r\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n  --pops-panel-components-select-disabled-text-color: #a8abb2;\r\n  --pops-panel-components-select-text-color: #000000;\r\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n  border: 0;\r\n}\r\n.pops-panel-select select {\r\n  height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  min-width: 200px;\r\n  border: 1px solid var(--pops-panel-components-select-bd-color);\r\n  border-radius: 5px;\r\n  text-align: center;\r\n  outline: 0;\r\n  color: var(--pops-panel-components-select-text-color);\r\n  background-color: var(--pops-panel-components-select-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n  box-shadow: none;\r\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select dialog 的CSS */\r\n.pops-panel-select[data-mode=\"dialog\"] {\r\n}\r\n/* select dialog 的CSS */\r\n\r\n/* select horizontal 的CSS */\r\n.pops-panel-select[data-mode=\"horizontal\"] {\r\n  --pops-panel-components-select-horizontal-selected-text-color: #626aef;\r\n  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\r\n  padding: 0;\r\n  gap: 0;\r\n  border: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\r\n  flex: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border: 1px solid var(--el-border-color);\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n  border-left: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\r\n  color: var(--el-color-primary);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\r\n  border-left: 1px solid var(--el-border-color);\r\n  border-top-left-radius: var(--el-border-radius-base);\r\n  border-bottom-left-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\r\n  border-top-right-radius: var(--el-border-radius-base);\r\n  border-bottom-right-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\r\n  color: var(--pops-panel-components-select-horizontal-selected-text-color);\r\n  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\r\n  border-right: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\r\n  color: var(--pops-panel-components-select-disabled-text-color);\r\n  --pops-panel-components-select-horizontal-selected-text-color: var(\r\n    --pops-panel-components-select-disabled-text-color\r\n  );\r\n  cursor: not-allowed;\r\n  background: unset;\r\n}\r\n/* select horizontal 的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple,\r\n.pops-panel-select {\r\n  --el-border-radius-base: 4px;\r\n  --el-fill-color-blank: #ffffff;\r\n  --el-transition-duration: 0.3s;\r\n  --el-border-color: #cbcbcb;\r\n  --el-text-color-placeholder: #a8abb2;\r\n  --color: inherit;\r\n  --el-select-input-color: #a8abb2;\r\n  --el-select-input-font-size: 14px;\r\n  --el-text-color-regular: #606266;\r\n  --el-color-info: #909399;\r\n  --el-color-info-light-9: #f4f4f5;\r\n  --el-color-info-light-8: #e9e9eb;\r\n  --el-color-primary-light-9: #ecf5ff;\r\n  --el-color-primary-light-8: #d9ecff;\r\n  --el-color-primary: #409eff;\r\n  --el-color-white: #ffffff;\r\n  width: 200px;\r\n}\r\n.pops-panel-select .el-select__wrapper,\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  text-align: left;\r\n  font-size: 14px;\r\n  padding: 4px 12px;\r\n  gap: 6px;\r\n  min-height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-radius: var(--el-border-radius-base);\r\n  background-color: var(--el-fill-color-blank);\r\n  transition: var(--el-transition-duration);\r\n  transform: translateZ(0);\r\n  border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select .el-select__wrapper.is-focused,\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n  --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select .el-select__selection,\r\n.pops-panel-select-multiple .el-select__selection {\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  flex: 1;\r\n  min-width: 0;\r\n  gap: 6px;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\r\n  justify-content: left;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\r\n  justify-content: center;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\r\n  justify-content: right;\r\n}\r\n.pops-panel-select .el-select__selected-item,\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-select .el-select__selected-item span {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n  max-width: 200px;\r\n}\r\n.pops-panel-select .el-select__input-wrapper,\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n  max-width: 100%;\r\n}\r\n.pops-panel-select .el-select__selection.is-near,\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n  margin-left: -8px;\r\n}\r\n.pops-panel-select .el-select__placeholder,\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n  position: absolute;\r\n  display: block;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select .el-select__placeholder.is-transparent,\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select .el-select__prefix,\r\n.pops-panel-select .el-select__suffix,\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  gap: 6px;\r\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select .el-icon,\r\n.pops-panel-select-multiple .el-icon {\r\n  --color: inherit;\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: var(--color);\r\n  font-size: inherit;\r\n}\r\n.pops-panel-select .el-icon svg,\r\n.pops-panel-select-multiple .el-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n.pops-panel-select .el-select__caret,\r\n.pops-panel-select-multiple .el-select__caret {\r\n  color: var(--el-select-input-color);\r\n  font-size: var(--el-select-input-font-size);\r\n  transition: transform var(--el-transition-duration);\r\n  transform: rotate(0);\r\n  cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select[data-show-option] .el-select__caret,\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n  transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  --el-tag-font-size: 12px;\r\n  --el-tag-border-radius: 4px;\r\n  --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  background-color: var(--el-tag-bg-color);\r\n  border-color: var(--el-tag-border-color);\r\n  color: var(--el-tag-text-color);\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  height: 24px;\r\n  padding: 0 9px;\r\n  font-size: var(--el-tag-font-size);\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: var(--el-tag-border-radius);\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n  --el-icon-size: 14px;\r\n  --el-tag-bg-color: var(--el-color-primary-light-9);\r\n  --el-tag-border-color: var(--el-color-primary-light-8);\r\n  --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n  cursor: pointer;\r\n  border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-bg-color: var(--el-color-info-light-9);\r\n  --el-tag-border-color: var(--el-color-info-light-8);\r\n  --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n  padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n  min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  flex-shrink: 0;\r\n  color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n  color: var(--el-color-white);\r\n  background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  font-size: calc(var(--el-icon-size) - 2px);\r\n  height: var(--el-icon-size);\r\n  width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n  display: block;\r\n  line-height: normal;\r\n  align-content: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* 禁用样式 */\r\n.pops-panel-select-disable {\r\n  --el-fill-color-blank: #f5f7fa;\r\n  --color: #a8abb2;\r\n  --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-disable .el-tag.el-tag--info {\r\n  --el-tag-bg-color: #e7e7e7;\r\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-disable .el-select__selection .el-tag,\r\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-disable .el-select__wrapper,\r\n.pops-panel-select-disable .el-select__caret {\r\n  cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n  border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n  display: flex;\r\n  align-items: center;\r\n  color: #6c6c6c;\r\n  fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n  display: flex;\r\n  align-items: center;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(\r\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n        var(--pops-panel-forms-header-icon-size)\r\n    );\r\n  gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n  width: var(--pops-panel-forms-header-icon-size);\r\n  height: var(--pops-panel-forms-header-icon-size);\r\n  display: flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n  width: inherit;\r\n  height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n  display: flex;\r\n  align-items: baseline;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-bg-color: #000000;\r\n    --pops-color: #f2f2f2;\r\n    --panel-title-bg-color: #000000;\r\n    --panel-aside-bg-color: #262626;\r\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n    --pops-panel-forms-container-item-bg-color: #262626;\r\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n    fill: #f2f2f2;\r\n  }\r\n\r\n  /* switch的CSS */\r\n  .pops-panel-switch {\r\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n    --panel-switch-circle-color: #dcdfe6;\r\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n    --panel-switch-checked-circle-color: #409eff;\r\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n  }\r\n  /* select的CSS */\r\n  .pops-panel-select {\r\n    --pops-panel-components-select-text-color: #f2f2f2;\r\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-components-select-bg-color: #141414;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  .pops-panel-select-multiple {\r\n    --el-fill-color-blank: #141414;\r\n    --el-border-color: #4c4d4f;\r\n    --el-text-color-placeholder: #a8abb2;\r\n    --el-select-input-color: #a8abb2;\r\n    --el-text-color-regular: #606266;\r\n    --el-color-info: #909399;\r\n    --el-color-info-light-8: #e9e9eb;\r\n    --el-color-primary-light-9: #ecf5ff;\r\n    --el-color-primary-light-8: #d9ecff;\r\n    --el-color-primary: #409eff;\r\n    --el-color-white: #ffffff;\r\n  }\r\n  .pops-panel-select-multiple .el-tag {\r\n    --el-color-info-light-9: #202121;\r\n  }\r\n  .pops-panel-select-multiple-disable {\r\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n  }\r\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n    --el-tag-bg-color: #2f2f2f;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  /* slider的CSS */\r\n  .pops-slider {\r\n    --pops-slider-border-color-light: #414243;\r\n  }\r\n  /* input的CSS */\r\n  .pops-panel-input {\r\n    --pops-panel-components-input-text-color: #f2f2f2;\r\n    --pops-panel-components-input-bd-color: #4f5052;\r\n    --pops-panel-components-input-bg-color: #141414;\r\n    --pops-panel-components-input-hover-bd-color: #6f7175;\r\n    --pops-panel-components-input-focus-bd-color: #409eff;\r\n    --pops-panel-components-input-suffix-color: #a8abb2;\r\n  }\r\n  /* textarea的CSS */\r\n  .pops-panel-textarea {\r\n    --pops-panel-components-textarea-text-color: #f2f2f2;\r\n    --pops-panel-components-textarea-text-bg-color: #141414;\r\n    --pops-panel-components-textarea-bd-color: #4f5052;\r\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n  }\r\n  .pops-panel-textarea-disable {\r\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n  }\r\n  /* slider */\r\n  .pops-slider {\r\n    --pops-slider-text-color-placeholder: #8d9095;\r\n  }\r\n}\r\n";
 
-    var rightClickMenuCSS = ".pops-rightClickMenu {\r\n  --pops-right-context-color: #000000;\r\n  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n  --pops-right-context-backdrop-filter: blur(10px);\r\n  --pops-right-context-z-index: 10000;\r\n  --pops-right-context-bd-radius: 6px;\r\n  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n  --pops-right-context-menu-row-bd-radius: 6px;\r\n  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n  scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n  position: fixed;\r\n  z-index: var(--pops-right-context-z-index);\r\n  text-align: center;\r\n  border-radius: var(--pops-right-context-bd-radius);\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: var(--pops-right-context-color);\r\n  background: var(--pops-right-context-bg-color);\r\n  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n  backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n  position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n  transition:\r\n    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n  transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n  transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n  opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n  display: grid;\r\n  transition: 0.3s;\r\n  grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n  grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n  background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: inherit;\r\n  font-size: inherit;\r\n  margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n  animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n  background: var(--pops-right-context-menu-row-hover-color);\r\n  cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n  padding: 5px 10px;\r\n  margin: 5px 5px;\r\n  border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n  display: flex;\r\n  width: -webkit-fill-available;\r\n  width: -moz-available;\r\n  text-align: left;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n  .pops-rightClickMenu ul li:active {\r\n    transform: scale(0.98);\r\n  }\r\n}\r\n";
+    var rightClickMenuCSS = ".pops-rightClickMenu {\r\n  --pops-right-context-color: #000000;\r\n  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n  --pops-right-context-backdrop-filter: blur(10px);\r\n  --pops-right-context-z-index: 10000;\r\n  --pops-right-context-bd-radius: 6px;\r\n  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n  --pops-right-context-menu-row-bd-radius: 6px;\r\n  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n  scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n  position: fixed;\r\n  z-index: var(--pops-right-context-z-index);\r\n  text-align: center;\r\n  border-radius: var(--pops-right-context-bd-radius);\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: var(--pops-right-context-color);\r\n  background: var(--pops-right-context-bg-color);\r\n  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n  backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n  position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n  transition:\r\n    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n  transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n  transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n  opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n  display: grid;\r\n  transition: 0.3s;\r\n  grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n  grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n  background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: inherit;\r\n  font-size: inherit;\r\n  margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n  animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n  background: var(--pops-right-context-menu-row-hover-color);\r\n  cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n  padding: 5px 10px;\r\n  margin: 5px 5px;\r\n  border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n  display: flex;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n  text-align: left;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n  .pops-rightClickMenu ul li:active {\r\n    transform: scale(0.98);\r\n  }\r\n}\r\n";
 
     var panelComponents_Select_CSS = ".pops {\r\n  max-height: 300px;\r\n}\r\n.select-container {\r\n  --el-font-size-base: 14px;\r\n  --el-text-color-regular: #606266;\r\n  --el-color-primary: #409eff;\r\n  --el-fill-color-light: #f5f7fa;\r\n  --el-disable-color: #a8abb2;\r\n}\r\n.select-item {\r\n  cursor: pointer;\r\n  font-size: var(--el-font-size-base);\r\n  padding: 0 20px 0 20px;\r\n  position: relative;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: var(--el-text-color-regular);\r\n  min-height: 34px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  box-sizing: border-box;\r\n}\r\n.select-item[aria-disabled],\r\n.select-item[disabled] {\r\n  cursor: not-allowed;\r\n  color: var(--el-disable-color);\r\n  background: unset;\r\n}\r\n.select-item:hover {\r\n  background-color: var(--el-fill-color-light);\r\n}\r\n.select-item.select-item-is-selected:has(.pops-panel-input input) {\r\n  background-color: #e7e7e7;\r\n}\r\n.select-item.select-item-is-selected {\r\n  color: var(--el-color-primary);\r\n  font-weight: 700;\r\n}\r\n.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  right: 12px;\r\n  border-top: none;\r\n  border-right: none;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  background-color: var(--el-color-primary);\r\n  mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n    no-repeat;\r\n  mask-size: 100% 100%;\r\n  -webkit-mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n    no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  transform: translateY(-50%);\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n.select-item .pops-panel-input {\r\n  width: 100%;\r\n  margin: 5px 0px;\r\n}\r\n.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {\r\n  margin-bottom: 0px;\r\n}\r\n\r\n.select-item .select-item-text {\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .select-container {\r\n    --el-text-color-regular: #f2f2f2;\r\n    --el-disable-color: #8d9095;\r\n    --el-fill-color-light: #262727;\r\n  }\r\n}\r\n";
 
@@ -3314,7 +3337,7 @@
                     popsDOMUtils.on($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
                     const popsTransForm = getComputedStyle($pops).transform;
                     if (popsTransForm !== "none") {
-                        popsDOMUtils.trigger($pops, popsDOMUtils.getTransitionEndNameList(), void 0, true);
+                        popsDOMUtils.emit($pops, popsDOMUtils.getTransitionEndNameList(), void 0, true);
                         return;
                     }
                     if (["top"].includes(drawerConfig.direction)) {
@@ -3357,7 +3380,7 @@
                 limit: true,
                 extraDistance: 3,
                 container: PopsCore.globalThis,
-                triggerClick: true,
+                emitClick: true,
             }, options);
             let isMove = false;
             // 点击元素，left偏移
@@ -3508,11 +3531,11 @@
                     }
                 }
             });
-            if (options.triggerClick) {
+            if (options.emitClick) {
                 // 因为会覆盖上面的点击事件，主动触发一下
                 anyTouchElement.on(["tap"], function (event) {
                     event.changedPoints.forEach((item) => {
-                        popsDOMUtils.trigger(item.target, "click", void 0, true);
+                        popsDOMUtils.emit(item.target, "click", void 0, true);
                     });
                 });
             }
@@ -5248,17 +5271,17 @@
                     });
                     // 设置默认触发的arrow
                     if (config.sort.name === "fileName") {
-                        popsDOMUtils.trigger(folderListSortFileNameElement, "click", {
+                        popsDOMUtils.emit(folderListSortFileNameElement, "click", {
                             notChangeSortRule: true,
                         });
                     }
                     else if (config.sort.name === "latestTime") {
-                        popsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
+                        popsDOMUtils.emit(folderListSortLatestTimeElement, "click", {
                             notChangeSortRule: true,
                         });
                     }
                     else if (config.sort.name === "fileSize") {
-                        popsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
+                        popsDOMUtils.emit(folderListSortFileSizeElement, "click", {
                             notChangeSortRule: true,
                         });
                     }
@@ -6454,267 +6477,318 @@
                             placeholder: "请输入内容",
                         },
                         {
-                            className: "panel-select-disabled",
-                            text: "select-disabled",
-                            type: "select",
-                            disabled: true,
-                            getValue() {
-                                return "text";
-                            },
-                            callback(isSelectedInfo) {
-                                if (isSelectedInfo == null)
-                                    return;
-                                console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
-                            },
-                            data: [
-                                {
-                                    value: "all",
-                                    text: "所有",
-                                    disable() {
-                                        return false;
-                                    },
-                                },
+                            type: "container",
+                            text: "",
+                            views: [
                                 {
-                                    value: "text",
-                                    text: "文本",
-                                    disable() {
-                                        return false;
+                                    className: "panel-select-disabled",
+                                    text: "select-disabled",
+                                    type: "select",
+                                    disabled: true,
+                                    getValue() {
+                                        return "text";
                                     },
-                                },
-                                {
-                                    value: "html",
-                                    text: "超文本",
-                                    disable() {
-                                        return false;
+                                    callback(isSelectedInfo) {
+                                        if (isSelectedInfo == null)
+                                            return;
+                                        console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
                                     },
+                                    data: [
+                                        {
+                                            value: "all",
+                                            text: "所有",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "text",
+                                            text: "文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "html",
+                                            text: "超文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                    ],
                                 },
-                            ],
-                        },
-                        {
-                            className: "panel-select-multiple-disabled",
-                            type: "select-multiple",
-                            text: "select-multiple-disabled",
-                            disabled: true,
-                            placeholder: "请至少选择一个选项",
-                            getValue() {
-                                return ["select-1", "select-2"];
-                            },
-                            callback(selectInfo) {
-                                console.log(`select值改变，多选信息`, selectInfo);
-                            },
-                            clickCallBack(event, isSelectedInfo) {
-                                console.log("点击", event, isSelectedInfo);
-                            },
-                            closeIconClickCallBack(event, data) {
-                                console.log("点击关闭图标的事件", data);
-                            },
-                            data: [
-                                {
-                                    value: "select-1",
-                                    text: "单选1",
-                                    isHTML: false,
-                                },
-                                {
-                                    value: "select-2",
-                                    text: "单选2",
-                                    isHTML: false,
-                                },
-                                {
-                                    value: "select-3",
-                                    text: "单选3",
-                                    isHTML: false,
-                                },
-                                {
-                                    value: "select-4",
-                                    text: "单选4",
-                                    isHTML: false,
-                                },
-                            ],
-                        },
-                        {
-                            className: "panel-select",
-                            text: "select",
-                            type: "select",
-                            getValue() {
-                                return "all";
-                            },
-                            callback(isSelectedInfo) {
-                                if (isSelectedInfo == null)
-                                    return;
-                                console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
-                            },
-                            data: [
                                 {
-                                    value: "all",
-                                    text: "所有",
-                                    disable() {
-                                        return false;
+                                    className: "panel-select-multiple-disabled",
+                                    type: "select-multiple",
+                                    text: "select-multiple-disabled",
+                                    disabled: true,
+                                    placeholder: "请至少选择一个选项",
+                                    getValue() {
+                                        return ["select-1", "select-2"];
                                     },
-                                },
-                                {
-                                    value: "text",
-                                    text: "文本",
-                                    disable() {
-                                        return false;
+                                    callback(selectInfo) {
+                                        console.log(`select值改变，多选信息`, selectInfo);
                                     },
-                                },
-                                {
-                                    value: "html",
-                                    text: "超文本",
-                                    disable() {
-                                        return false;
+                                    clickCallBack(event, isSelectedInfo) {
+                                        console.log("点击", event, isSelectedInfo);
                                     },
-                                },
-                            ],
-                        },
-                        {
-                            className: "panel-select-dialog",
-                            text: "select-dialog",
-                            type: "select",
-                            getValue() {
-                                return window.localStorage.getItem("select-dialog-customInput") || "";
-                            },
-                            callback(isSelectedInfo) {
-                                if (isSelectedInfo == null) {
-                                    console.warn(`select当前选项为空`);
-                                    return;
-                                }
-                                if (isSelectedInfo.addCustomInput) {
-                                    if (isSelectedInfo.value === "") {
-                                        // 空值，不存储
-                                        if (isSelectedInfo.customInputStoreKey) {
-                                            console.log(`select删除自定义输入的值`);
-                                            window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
-                                        }
-                                    }
-                                    else {
-                                        console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
-                                        if (isSelectedInfo.customInputStoreKey) {
-                                            window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
-                                        }
-                                    }
-                                }
-                                else {
-                                    console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
-                                }
-                            },
-                            data: [
-                                {
-                                    value: "all",
-                                    text: "所有",
-                                    disable() {
-                                        return false;
+                                    closeIconClickCallBack(event, data) {
+                                        console.log("点击关闭图标的事件", data);
                                     },
+                                    data: [
+                                        {
+                                            value: "select-1",
+                                            text: "单选1",
+                                            isHTML: false,
+                                        },
+                                        {
+                                            value: "select-2",
+                                            text: "单选2",
+                                            isHTML: false,
+                                        },
+                                        {
+                                            value: "select-3",
+                                            text: "单选3",
+                                            isHTML: false,
+                                        },
+                                        {
+                                            value: "select-4",
+                                            text: "单选4",
+                                            isHTML: false,
+                                        },
+                                    ],
                                 },
                                 {
-                                    value: "text",
-                                    text: "文本",
-                                    disable(value, selectInfo) {
-                                        if (selectInfo?.value === "all")
-                                            return true;
-                                        return false;
+                                    className: "panel-select-native",
+                                    text: "select-native",
+                                    type: "select",
+                                    mode: "native",
+                                    getValue() {
+                                        return "all";
                                     },
-                                },
-                                {
-                                    value: "html",
-                                    text: "超文本",
-                                    disable(value, selectInfo) {
-                                        if (selectInfo?.value === "all")
-                                            return true;
-                                        return false;
+                                    callback(isSelectedInfo) {
+                                        if (isSelectedInfo == null)
+                                            return;
+                                        console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
                                     },
+                                    data: [
+                                        {
+                                            value: "all",
+                                            text: "所有",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "text",
+                                            text: "文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "html",
+                                            text: "超文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                    ],
                                 },
                                 {
-                                    value: "own",
-                                    text: "自定义",
-                                    disable(value, selectInfo) {
-                                        if (selectInfo?.value === "all")
-                                            return true;
-                                        return false;
+                                    className: "panel-select-dialog",
+                                    text: "select-dialog",
+                                    type: "select",
+                                    mode: "dialog",
+                                    getValue() {
+                                        return window.localStorage.getItem("select-dialog-customInput") || "";
                                     },
-                                },
-                                {
-                                    value: window.localStorage.getItem("select-dialog-customInput") || "",
-                                    text: window.localStorage.getItem("select-dialog-customInput") || "",
-                                    addCustomInput: true,
-                                    customInputStoreKey: "select-dialog-customInput",
-                                    onValid(dataOption) {
-                                        if (dataOption.value === "123") {
-                                            console.error("非规范值");
-                                            return {
-                                                valid: false,
-                                                message: "非规范值",
-                                            };
+                                    callback(isSelectedInfo) {
+                                        if (isSelectedInfo == null) {
+                                            console.warn(`select当前选项为空`);
+                                            return;
+                                        }
+                                        if (isSelectedInfo.addCustomInput) {
+                                            if (isSelectedInfo.value === "") {
+                                                // 空值，不存储
+                                                if (isSelectedInfo.customInputStoreKey) {
+                                                    console.log(`select删除自定义输入的值`);
+                                                    window.localStorage.removeItem(isSelectedInfo.customInputStoreKey);
+                                                }
+                                            }
+                                            else {
+                                                console.log(`select当前自定义输入框内容：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
+                                                if (isSelectedInfo.customInputStoreKey) {
+                                                    window.localStorage.setItem(isSelectedInfo.customInputStoreKey, isSelectedInfo.value);
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            console.log(`select当前选项：${isSelectedInfo.value}，当前选项显示文本：${isSelectedInfo.text}`);
                                         }
-                                        return {
-                                            valid: true,
-                                        };
                                     },
+                                    data: [
+                                        {
+                                            value: "all",
+                                            text: "所有",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "text",
+                                            text: "文本",
+                                            disable(value, selectInfo) {
+                                                if (selectInfo?.value === "all")
+                                                    return true;
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "html",
+                                            text: "超文本",
+                                            disable(value, selectInfo) {
+                                                if (selectInfo?.value === "all")
+                                                    return true;
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "own",
+                                            text: "自定义",
+                                            disable(value, selectInfo) {
+                                                if (selectInfo?.value === "all")
+                                                    return true;
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: window.localStorage.getItem("select-dialog-customInput") || "",
+                                            text: window.localStorage.getItem("select-dialog-customInput") || "",
+                                            addCustomInput: true,
+                                            customInputStoreKey: "select-dialog-customInput",
+                                            onValid(dataOption) {
+                                                if (dataOption.value === "123") {
+                                                    console.error("非规范值");
+                                                    return {
+                                                        valid: false,
+                                                        message: "非规范值",
+                                                    };
+                                                }
+                                                return {
+                                                    valid: true,
+                                                };
+                                            },
+                                        },
+                                    ],
                                 },
-                            ],
-                            useDialog: true,
-                        },
-                        {
-                            className: "panel-select-multiple",
-                            type: "select-multiple",
-                            text: "select-multiple",
-                            placeholder: "请至少选择一个选项",
-                            getValue() {
-                                return ["select-1", "select-2"];
-                            },
-                            callback(selectInfo) {
-                                console.log(`select值改变，多选信息`, selectInfo);
-                            },
-                            clickCallBack(event, isSelectedInfo) {
-                                console.log("点击", event, isSelectedInfo);
-                            },
-                            closeIconClickCallBack(event, data) {
-                                console.log("点击关闭图标的事件", data);
-                            },
-                            data: [
                                 {
-                                    value: "select-1",
-                                    text: "单选1",
-                                    isHTML: false,
-                                    disable(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
+                                    className: "panel-select-horizontal",
+                                    text: "select-horizontal",
+                                    type: "select",
+                                    mode: "horizontal",
+                                    getValue() {
+                                        return "text";
                                     },
-                                },
-                                {
-                                    value: "select-2",
-                                    text: "单选2",
-                                    isHTML: false,
-                                    disable(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
+                                    callback(isSelectedInfo) {
+                                        if (isSelectedInfo == null)
+                                            return;
+                                        console.log(`select当前选项：${isSelectedInfo.value}，当前选项文本：${isSelectedInfo.text}`);
                                     },
+                                    data: [
+                                        {
+                                            value: "all",
+                                            text: "所有",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "text",
+                                            text: "文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "html",
+                                            text: "超文本",
+                                            disable() {
+                                                return false;
+                                            },
+                                        },
+                                        {
+                                            value: "own",
+                                            text: "自定义",
+                                            disable() {
+                                                return true;
+                                            },
+                                        },
+                                    ],
                                 },
                                 {
-                                    value: "select-3",
-                                    text: "单选3",
-                                    isHTML: false,
-                                    disable(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
+                                    className: "panel-select-multiple",
+                                    type: "select-multiple",
+                                    text: "select-multiple",
+                                    placeholder: "请至少选择一个选项",
+                                    getValue() {
+                                        return ["select-1", "select-2"];
                                     },
-                                },
-                                {
-                                    value: "select-4",
-                                    text: "单选4",
-                                    isHTML: false,
-                                    disable(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
+                                    callback(selectInfo) {
+                                        console.log(`select值改变，多选信息`, selectInfo);
                                     },
-                                },
-                                {
-                                    value: "select-5",
-                                    text(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
-                                            ? "单选5-禁用"
-                                            : "单选5";
+                                    clickCallBack(event, isSelectedInfo) {
+                                        console.log("点击", event, isSelectedInfo);
                                     },
-                                    isHTML: false,
-                                    disable(value, allSelectedInfo) {
-                                        return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
+                                    closeIconClickCallBack(event, data) {
+                                        console.log("点击关闭图标的事件", data);
                                     },
+                                    data: [
+                                        {
+                                            value: "select-1",
+                                            text: "单选1",
+                                            isHTML: false,
+                                            disable(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
+                                            },
+                                        },
+                                        {
+                                            value: "select-2",
+                                            text: "单选2",
+                                            isHTML: false,
+                                            disable(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-5"].includes(it.value)) !== -1;
+                                            },
+                                        },
+                                        {
+                                            value: "select-3",
+                                            text: "单选3",
+                                            isHTML: false,
+                                            disable(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-2", "select-5"].includes(it.value)) !== -1;
+                                            },
+                                        },
+                                        {
+                                            value: "select-4",
+                                            text: "单选4",
+                                            isHTML: false,
+                                            disable(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-3", "select-5"].includes(it.value)) !== -1;
+                                            },
+                                        },
+                                        {
+                                            value: "select-5",
+                                            text(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1
+                                                    ? "单选5-禁用"
+                                                    : "单选5";
+                                            },
+                                            isHTML: false,
+                                            disable(value, allSelectedInfo) {
+                                                return allSelectedInfo.findIndex((it) => ["select-4"].includes(it.value)) !== -1;
+                                            },
+                                        },
+                                    ],
                                 },
                             ],
                         },
@@ -7003,8 +7077,8 @@
             className: "",
             isFixed: false,
             alwaysShow: false,
-            triggerShowEventName: "mouseenter touchstart",
-            triggerCloseEventName: "mouseleave touchend",
+            onShowEventName: "mouseenter touchstart",
+            onCloseEventName: "mouseleave touchend",
             zIndex: 10000,
             only: false,
             eventOption: {
@@ -7335,13 +7409,13 @@
          * 绑定 显示事件
          */
         onShowEvent() {
-            popsDOMUtils.on(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, this.$data.config.eventOption);
+            popsDOMUtils.on(this.$data.config.$target, this.$data.config.onShowEventName, this.show, this.$data.config.eventOption);
         }
         /**
          * 取消绑定 显示事件
          */
         offShowEvent() {
-            popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, {
+            popsDOMUtils.off(this.$data.config.$target, this.$data.config.onShowEventName, this.show, {
                 capture: true,
             });
         }
@@ -7396,13 +7470,13 @@
          * 绑定 关闭事件
          */
         onCloseEvent() {
-            popsDOMUtils.on(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, this.$data.config.eventOption);
+            popsDOMUtils.on(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, this.$data.config.eventOption);
         }
         /**
          * 取消绑定 关闭事件
          */
         offCloseEvent() {
-            popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, {
+            popsDOMUtils.off(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, {
                 capture: true,
             });
         }
@@ -7951,7 +8025,7 @@
              * 获取中间容器的元素<li>
              * @param viewConfig
              */
-            createSectionContainerItem_slider_new(viewConfig) {
+            createSectionContainerItem_slider(viewConfig) {
                 const $li = popsDOMUtils.createElement("li");
                 Reflect.set($li, this.$data.nodeStoreConfigKey, viewConfig);
                 this.setElementClassName($li, viewConfig.className);
@@ -8811,7 +8885,7 @@
                     /**
                      * 主动触发输入框改变事件
                      */
-                    triggerValueChange() {
+                    emitValueChange() {
                         this.$el.input.dispatchEvent(new Event("input"));
                     },
                     /**
@@ -8953,77 +9027,278 @@
 					<select></select>
 				</div>
 				`);
+                const $itemLeftContainer = $li.querySelector(".pops-panel-item-left-text");
+                const $container = $li.querySelector(".pops-panel-select");
+                const $select = $li.querySelector(".pops-panel-select select");
+                const width = (typeof viewConfig.width === "number" ? `${viewConfig.width}px` : viewConfig.width) ?? "200px";
+                popsDOMUtils.css($container, "width", width);
+                const mode = viewConfig.mode ?? "native";
                 let handler;
-                if (viewConfig.useDialog) {
-                    const PopsPanelSelect = {
-                        [Symbol.toStringTag]: "PopsPanelSelect",
+                if (mode === "native") {
+                    const PopsPanelSelectNative = {
+                        [Symbol.toStringTag]: "PopsPanelSelectNative",
                         $el: {
-                            itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
-                            /** 选择框容器 */
-                            $container: void 0,
-                            /** 选择框包裹的容器 */
-                            $wrapper: void 0,
-                            /** 内容区域 */
-                            $section: void 0,
-                            /** 手动输入 */
-                            $selectedInputWrapper: void 0,
-                            /** 灰色提示语 */
-                            $selectedPlaceHolderWrapper: void 0,
-                            /** 下拉箭头区域 */
-                            $suffix: void 0,
-                            /** 下拉箭头图标 */
-                            $suffixIcon: void 0,
-                            /** 下拉列表弹窗的下拉列表容器 */
-                            $selectDialogContainer: void 0,
+                            itemLeftTextContainer: $itemLeftContainer,
+                            $container: $container,
+                            $select: $select,
+                        },
+                        $eleKey: {
+                            disable: "__disable__",
+                            value: "__value__",
+                            viewConfig: "data-view-config",
                         },
                         $data: {
-                            /**
-                             * 数据
-                             */
                             data: [],
-                            /**
-                             * 默认值
-                             */
                             defaultValue: viewConfig.getValue(),
-                            /**
-                             * 选择的信息
-                             */
-                            selectedData: void 0,
-                            /**
-                             * 是否验证通过
-                             */
-                            isValidSuccess: true,
-                            /**
-                             * 箭头旋转的属性
-                             */
-                            rotateKey: "data-show-option",
                         },
-                        /** 初始化 */
                         init() {
-                            this.initDefault();
-                            this.initEl();
-                            this.initPlaceHolder();
-                            this.renderSelectText();
-                            this.onShowSelectDialogClick();
+                            this.$el.$container.setAttribute("data-mode", mode);
+                            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
+                            popsDOMUtils.addClassName(this.$el.$container, PopsCommonCSSClassName.userSelectNone);
+                            this.initOption();
+                            this.onValueChange();
+                            this.onClick();
                             const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
                             if (disabled) {
                                 this.disable();
                             }
                         },
-                        /** 初始化默认值 */
-                        initDefault() {
-                            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
-                            this.$data.data.forEach((dataItem) => {
-                                if (this.$data.defaultValue.includes(dataItem.value)) {
-                                    // 初始化选中的配置
-                                    this.resetCurrentSelectedInfo();
-                                    this.updateSelectedInfo(dataItem);
-                                }
+                        /**
+                         * 给option元素设置属性
+                         * @param $ele
+                         * @param key
+                         * @param value
+                         */
+                        setNodeValue($ele, key, value) {
+                            Reflect.set($ele, key, value);
+                        },
+                        /**
+                         * 获取option元素上设置的属性
+                         * @param $ele
+                         * @param value
+                         * @param key
+                         */
+                        getNodeValue($ele, key) {
+                            return Reflect.get($ele, key);
+                        },
+                        /**
+                         * 禁用选项
+                         */
+                        disable() {
+                            this.$el.$select.setAttribute("disabled", "true");
+                            popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                        },
+                        /**
+                         * 取消禁用
+                         */
+                        notDisable() {
+                            this.$el.$select.removeAttribute("disabled");
+                            popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                        },
+                        /**
+                         * 判断是否禁用
+                         */
+                        isDisabled() {
+                            return (this.$el.$select.hasAttribute("disabled") ||
+                                popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable"));
+                        },
+                        /**
+                         * 初始化选项
+                         */
+                        initOption() {
+                            this.$data.data.forEach((dataItem) => {
+                                // 初始化默认选中
+                                const optionElement = popsDOMUtils.createElement("option");
+                                this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
+                                this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
+                                this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
+                                if (dataItem.value === this.$data.defaultValue) {
+                                    this.setOptionSelected(optionElement);
+                                }
+                                if (typeof dataItem.text === "function") {
+                                    optionElement.innerText = dataItem.text(dataItem.value, dataItem);
+                                }
+                                else {
+                                    optionElement.innerText = dataItem.text;
+                                }
+                                this.$el.$select.appendChild(optionElement);
+                            });
+                        },
+                        /**
+                         * 设置选项选中
+                         * @param $option
+                         */
+                        setOptionSelected($option) {
+                            $option.setAttribute("selected", "true");
+                        },
+                        /**
+                         * 检测所有option并设置禁用状态
+                         */
+                        setSelectOptionsDisableStatus() {
+                            if (this.$el.$select.options && this.$el.$select.options.length) {
+                                Array.from(this.$el.$select.options).forEach((optionItem) => {
+                                    this.setOptionDisableStatus(optionItem);
+                                });
+                            }
+                        },
+                        /**
+                         * 设置禁用状态
+                         * @param $option
+                         */
+                        setOptionDisableStatus($option) {
+                            let disable = false;
+                            const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
+                            if (optionDisableAttr === "function") {
+                                const value = this.getNodeValue($option, this.$eleKey.value);
+                                disable = Boolean(optionDisableAttr(value));
+                            }
+                            if (disable) {
+                                $option.setAttribute("disabled", "true");
+                            }
+                            else {
+                                $option.removeAttribute("disabled");
+                            }
+                        },
+                        /**
+                         * 获取option上的信息
+                         * @param $option
+                         */
+                        getSelectOptionInfo($option) {
+                            const optionValue = this.getNodeValue($option, this.$eleKey.value);
+                            const optionText = $option.innerText || $option.textContent;
+                            const views = this.getNodeValue($option, this.$eleKey.viewConfig);
+                            return {
+                                value: optionValue,
+                                text: optionText,
+                                views: views,
+                                $option: $option,
+                            };
+                        },
+                        /**
+                         * 监听选择内容改变
+                         */
+                        onValueChange() {
+                            popsDOMUtils.on(this.$el.$select, "change", () => {
+                                const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
+                                const selectInfo = this.getSelectOptionInfo($isSelectedElement);
+                                this.setSelectOptionsDisableStatus();
+                                if (typeof viewConfig.callback === "function") {
+                                    viewConfig.callback(selectInfo);
+                                }
+                                const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
+                                if (Array.isArray(views)) {
+                                    // 如果成功创建，加入到中间容器中
+                                    const childUListClassName = "pops-panel-select-child-forms";
+                                    // 移除旧的元素
+                                    while ($li.nextElementSibling) {
+                                        if ($li.nextElementSibling.classList.contains(childUListClassName)) {
+                                            $li.nextElementSibling.remove();
+                                        }
+                                        else {
+                                            break;
+                                        }
+                                    }
+                                    const $childUList = popsDOMUtils.createElement("ul");
+                                    $childUList.className = childUListClassName;
+                                    popsDOMUtils.after($li, $childUList);
+                                    that.uListContainerAddItem(viewConfig, {
+                                        ulElement: $childUList,
+                                    });
+                                }
+                            });
+                        },
+                        /**
+                         * 监听点击事件
+                         */
+                        onClick() {
+                            popsDOMUtils.on(this.$el.$select, "click", void 0, (event) => {
+                                this.setSelectOptionsDisableStatus();
+                                if (typeof viewConfig.clickCallBack === "function") {
+                                    const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex];
+                                    const selectInfo = this.getSelectOptionInfo($isSelectedElement);
+                                    viewConfig.clickCallBack(event, selectInfo);
+                                }
+                            });
+                        },
+                    };
+                    PopsPanelSelectNative.init();
+                    Reflect.set($li, "data-select", PopsPanelSelectNative);
+                    handler = PopsPanelSelectNative;
+                }
+                else if (mode === "dialog") {
+                    const PopsPanelSelect = {
+                        [Symbol.toStringTag]: "PopsPanelSelect",
+                        $el: {
+                            $itemLeftContainer: $itemLeftContainer,
+                            /** 选择框容器 */
+                            $container: void 0,
+                            /** 选择框包裹的容器 */
+                            $wrapper: void 0,
+                            /** 内容区域 */
+                            $section: void 0,
+                            /** 手动输入 */
+                            $selectedInputWrapper: void 0,
+                            /** 灰色提示语 */
+                            $selectedPlaceHolderWrapper: void 0,
+                            /** 下拉箭头区域 */
+                            $suffix: void 0,
+                            /** 下拉箭头图标 */
+                            $suffixIcon: void 0,
+                            /** 下拉列表弹窗的下拉列表容器 */
+                            $selectDialogContainer: void 0,
+                        },
+                        $data: {
+                            /**
+                             * 数据
+                             */
+                            data: [],
+                            /**
+                             * 默认值
+                             */
+                            defaultValue: viewConfig.getValue(),
+                            /**
+                             * 选择的信息
+                             */
+                            selectedData: void 0,
+                            /**
+                             * 是否验证通过
+                             */
+                            isValidSuccess: true,
+                            /**
+                             * 箭头旋转的属性
+                             */
+                            rotateKey: "data-show-option",
+                        },
+                        /** 初始化 */
+                        init() {
+                            this.initDefault();
+                            this.initEl();
+                            this.initPlaceHolder();
+                            this.renderSelectText();
+                            this.onShowSelectDialogClick();
+                            const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
+                            if (disabled) {
+                                this.disable();
+                            }
+                        },
+                        /** 初始化默认值 */
+                        initDefault() {
+                            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
+                            this.$data.data.forEach((dataItem) => {
+                                const flag = this.$data.defaultValue.includes(dataItem.value);
+                                if (flag) {
+                                    // 初始化选中的配置
+                                    this.resetCurrentSelectedInfo();
+                                    this.updateSelectedInfo(dataItem);
+                                }
                             });
                         },
                         /** 初始化$ele变量 */
                         initEl() {
-                            this.$el.$container = $li.querySelector(".pops-panel-select");
+                            this.$el.$container = $container;
+                            this.$el.$container.setAttribute("data-mode", mode);
                             PopsSafeUtils.setSafeHTML(this.$el.$container, 
                             /*html*/ `
               <div class="el-select__wrapper">
@@ -9119,22 +9394,22 @@
                          * 禁用选项容器
                          */
                         disable() {
-                            popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
-                            popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                            popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
                         },
                         /**
                          * 取消禁用选项容器
                          */
                         cancleDisable() {
-                            popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
-                            popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                            popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
                         },
                         /**
                          * 判断当前是否已禁用选项容器
                          */
                         isDisabled() {
-                            return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable") ||
-                                popsDOMUtils.containsClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled));
+                            return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
+                                popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
                         },
                         /**
                          * 设置选择列表的点击事件
@@ -9370,23 +9645,22 @@
                         isItemSelected($el) {
                             return $el.classList.contains("select-item-is-selected");
                         },
+                        /**
+                         * 获取项上存储的信息
+                         * @param $el 选项元素
+                         */
+                        getItemDataOption($el) {
+                            return Reflect.get($el, "data-info");
+                        },
                         /**
                          * 添加选中信息
                          * @param data 选择项的数据
-                         * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                          */
                         addSelectedItemInfo(data) {
                             this.resetCurrentSelectedInfo();
                             this.updateSelectedInfo(data);
                             this.onValueChangeCallback(data);
                         },
-                        /**
-                         * 获取项上存储的信息
-                         * @param $el 选项元素
-                         */
-                        getItemDataOption($el) {
-                            return Reflect.get($el, "data-info");
-                        },
                         /**
                          * 移除选中信息
                          * @param data 选择项的数据
@@ -9550,218 +9824,372 @@
                                 }
                             });
                         },
-                        /** 显示输入框 */
-                        showInputWrapper() {
-                            popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
-                        },
-                        /** 隐藏输入框 */
-                        hideInputWrapper() {
-                            popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
-                        },
-                        /** 显示palceholder */
-                        showPlaceHolderWrapper() {
-                            popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
-                        },
-                        /** 隐藏palceholder */
-                        hidePlaceHolderWrapper() {
-                            popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
-                        },
-                    };
-                    PopsPanelSelect.init();
-                    Reflect.set($li, "data-select", PopsPanelSelect);
-                    handler = PopsPanelSelect;
-                }
-                else {
-                    const PopsPanelSelectNative = {
-                        [Symbol.toStringTag]: "PopsPanelSelectNative",
-                        $el: {
-                            itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
-                            panelSelect: $li.querySelector(".pops-panel-select"),
-                            select: $li.querySelector(".pops-panel-select select"),
-                        },
-                        $eleKey: {
-                            disable: "__disable__",
-                            value: "__value__",
-                            viewConfig: "data-view-config",
-                        },
-                        $data: {
-                            data: [],
-                            defaultValue: viewConfig.getValue(),
-                        },
-                        init() {
-                            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
-                            popsDOMUtils.addClassName(this.$el.panelSelect, PopsCommonCSSClassName.userSelectNone);
-                            this.initOption();
-                            this.onValueChange();
-                            this.onClick();
-                            const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
-                            if (disabled) {
-                                this.disable();
+                        /** 显示输入框 */
+                        showInputWrapper() {
+                            popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
+                        },
+                        /** 隐藏输入框 */
+                        hideInputWrapper() {
+                            popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
+                        },
+                        /** 显示palceholder */
+                        showPlaceHolderWrapper() {
+                            popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
+                        },
+                        /** 隐藏palceholder */
+                        hidePlaceHolderWrapper() {
+                            popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
+                        },
+                    };
+                    PopsPanelSelect.init();
+                    Reflect.set($li, "data-select", PopsPanelSelect);
+                    handler = PopsPanelSelect;
+                }
+                else if (mode === "horizontal") {
+                    const PopsPanelSelectHorizontal = {
+                        [Symbol.toStringTag]: "PopsPanelSelectHorizontal",
+                        $el: {
+                            $itemLeftContainer: $itemLeftContainer,
+                            /** 选择框容器 */
+                            $container: $container,
+                            /** 选择框包裹的容器 */
+                            $wrapper: void 0,
+                        },
+                        $data: {
+                            /**
+                             * 数据
+                             */
+                            data: [],
+                            /**
+                             * 默认值
+                             */
+                            defaultValue: viewConfig.getValue(),
+                            /**
+                             * 选择的信息
+                             */
+                            selectedData: void 0,
+                            /**
+                             * 箭头旋转的属性
+                             */
+                            rotateKey: "data-show-option",
+                        },
+                        /** 初始化 */
+                        init() {
+                            this.initDefault();
+                            this.initEl();
+                            const disabled = typeof viewConfig.disabled === "function" ? viewConfig.disabled() : viewConfig.disabled;
+                            if (disabled) {
+                                this.disable();
+                            }
+                        },
+                        /** 初始化默认值 */
+                        initDefault() {
+                            this.$data.data = typeof viewConfig.data === "function" ? viewConfig.data() : viewConfig.data;
+                            if (!this.$data.data.length) {
+                                throw new Error("PopsPanelSelect: data is empty");
+                            }
+                        },
+                        /** 初始化$ele变量 */
+                        initEl() {
+                            this.$el.$container.setAttribute("data-mode", mode);
+                            PopsSafeUtils.setSafeHTML(this.$el.$container, 
+                            /*html*/ `
+              <div class="el-select__wrapper">
+              </div>`);
+                            this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
+                            this.$data.data.forEach((dataItem) => {
+                                const $item = this.createSelectItemElement(dataItem);
+                                this.onSelectItemClick(dataItem, $item);
+                                if (this.$data.defaultValue === dataItem.value) {
+                                    this.addSelectedItemInfo(dataItem);
+                                }
+                                this.$el.$wrapper.appendChild($item);
+                            });
+                            this.updateAllSelectItemStatus();
+                        },
+                        /**
+                         * 禁用选项容器
+                         */
+                        disable() {
+                            popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
+                        },
+                        /**
+                         * 取消禁用选项容器
+                         */
+                        cancleDisable() {
+                            popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
+                            popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
+                        },
+                        /**
+                         * 判断当前是否已禁用选项容器
+                         */
+                        isDisabled() {
+                            return (popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable") ||
+                                popsDOMUtils.containsClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled));
+                        },
+                        /**
+                         * 创建选择项
+                         * @param data 数据
+                         */
+                        createSelectItemElement(data) {
+                            const $select = popsDOMUtils.createElement("div", {
+                                className: "select-item",
+                                innerHTML: /*html*/ `
+                <span class="select-item-text"></span>
+              `,
+                            });
+                            this.setSelectItemText(data, $select);
+                            Reflect.set($select, "data-info", data);
+                            return $select;
+                        },
+                        /**
+                         * 设置选择项的文字
+                         * @param data 选择项的数据
+                         * @param $select 选择项元素
+                         */
+                        setSelectItemText(data, $select) {
+                            const text = typeof data.text === "function" ? data.text(data.value, this.$data.selectedData) : data.text;
+                            const $selectSpan = $select.querySelector(".select-item-text");
+                            if (!$selectSpan)
+                                return;
+                            if (data.isHTML) {
+                                PopsSafeUtils.setSafeHTML($selectSpan, text);
+                            }
+                            else {
+                                $selectSpan.innerText = text;
+                            }
+                        },
+                        /**
+                         * 设置选择项点击事件
+                         */
+                        onSelectItemClick(data, $el) {
+                            popsDOMUtils.on($el, "click", (event) => {
+                                popsDOMUtils.preventEvent(event);
+                                if (this.isDisabled()) {
+                                    return;
+                                }
+                                if (this.isSelectItemDisabled($el)) {
+                                    // 被禁用了
+                                    return;
+                                }
+                                if (typeof viewConfig.clickCallBack === "function") {
+                                    const clickResult = viewConfig.clickCallBack(event, this.$data.selectedData);
+                                    if (typeof clickResult === "boolean" && !clickResult) {
+                                        return;
+                                    }
+                                } // 修改选中状态
+                                if (this.isItemSelected($el)) {
+                                    // 移除选中
+                                    this.removeItemSelected($el);
+                                    this.removeSelectedItemInfo();
+                                }
+                                else {
+                                    // 添加选中
+                                    this.setItemSelected($el);
+                                    this.addSelectedItemInfo(data);
+                                }
+                            });
+                        },
+                        /**
+                         * 选中的值改变的回调
+                         * @param data 当前的选中信息
+                         */
+                        onValueChangeCallback(data, isUpdateSelectItem = true) {
+                            // 动态更新禁用状态、选中状态
+                            isUpdateSelectItem && this.updateAllSelectItemStatus();
+                            // 触发回调
+                            if (typeof viewConfig.callback === "function") {
+                                viewConfig.callback(data || this.$data.selectedData);
+                            }
+                        },
+                        /**
+                         * 更新选项弹窗内的所有选项元素的状态
+                         *
+                         * + 更新禁用状态
+                         * + 更新选中状态
+                         */
+                        updateAllSelectItemStatus() {
+                            const allSelectItems = this.getAllSelectItems(false);
+                            allSelectItems.forEach(($selectInfo) => {
+                                const { data, $select } = $selectInfo;
+                                // 更新文字
+                                this.setSelectItemText(data, $selectInfo.$select);
+                                if (typeof data.disable === "function" && data.disable(data.value, this.$data.selectedData)) {
+                                    // 移除选中状态
+                                    this.removeItemSelected($select);
+                                    // 禁用
+                                    this.setSelectItemDisabled($select);
+                                }
+                                else {
+                                    // 移除禁用状态
+                                    this.removeSelectItemDisabled($select);
+                                }
+                                // 根据当前已选择的信息，判断并更新选中状态
+                                if (this.$data.selectedData != null && this.$data.selectedData.value === data.value) {
+                                    // 就是这个项
+                                    // 设置选中
+                                    this.setItemSelected($select);
+                                }
+                                else {
+                                    // 不是这个项
+                                    // 移除选中状态
+                                    this.removeItemSelected($select);
+                                }
+                            });
+                        },
+                        /**
+                         * 重置所有已选中的项以下状态
+                         *
+                         * + 更新选项显示的文字
+                         * + 移除禁用状态
+                         * + 移除选中状态
+                         */
+                        resetAllSelectedItemStatus() {
+                            const allSelectedItems = this.getAllSelectItems(true);
+                            if (allSelectedItems.length) {
+                                // 移除选中信息
+                                this.resetCurrentSelectedInfo();
                             }
+                            allSelectedItems.forEach(($selectInfo) => {
+                                const { data, $select } = $selectInfo;
+                                // 更新文字
+                                this.setSelectItemText(data, $selectInfo.$select);
+                                // 移除选中状态
+                                this.removeItemSelected($select);
+                                // 取消禁用
+                                this.removeSelectItemDisabled($select);
+                            });
                         },
                         /**
-                         * 给option元素设置属性
-                         * @param $ele
-                         * @param key
-                         * @param value
+                         * 添加选中信息
+                         * @param data 选择项的数据
                          */
-                        setNodeValue($ele, key, value) {
-                            Reflect.set($ele, key, value);
+                        addSelectedItemInfo(data) {
+                            this.resetCurrentSelectedInfo();
+                            this.updateSelectedInfo(data);
+                            this.onValueChangeCallback(data);
                         },
                         /**
-                         * 获取option元素上设置的属性
-                         * @param $ele
-                         * @param value
-                         * @param key
+                         * 移除选中信息
+                         * @param data 选择项的数据
                          */
-                        getNodeValue($ele, key) {
-                            return Reflect.get($ele, key);
+                        removeSelectedItemInfo() {
+                            // 删除
+                            this.updateSelectedInfo();
+                            this.onValueChangeCallback();
                         },
                         /**
-                         * 禁用选项
+                         * 更新选中信息
+                         * @param data 数据
                          */
-                        disable() {
-                            this.$el.select.setAttribute("disabled", "true");
-                            popsDOMUtils.addClassName(this.$el.panelSelect, "pops-panel-select-disable");
-                            popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                        updateSelectedInfo(data) {
+                            // 先删除再赋值
+                            this.$data.selectedData = void 0;
+                            if (data) {
+                                if (data.addCustomInput && data.value.toString() === "") {
+                                    // 自定义输入框，但是内容是空字符串
+                                    // 不更新选中信息
+                                    return;
+                                }
+                                this.$data.selectedData = data;
+                            }
                         },
                         /**
-                         * 取消禁用
+                         * 从保存的已选中的信息列表中移除目标信息
                          */
-                        notDisable() {
-                            this.$el.select.removeAttribute("disabled");
-                            popsDOMUtils.removeClassName(this.$el.panelSelect, "pops-panel-select-disable");
-                            popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
+                        resetCurrentSelectedInfo() {
+                            this.updateSelectedInfo();
                         },
                         /**
-                         * 判断是否禁用
+                         * 设置选择项禁用
+                         * @param $select 选择项元素
                          */
-                        isDisabled() {
-                            return (this.$el.select.hasAttribute("disabled") ||
-                                popsDOMUtils.containsClassName(this.$el.panelSelect, "pops-panel-select-disable"));
+                        setSelectItemDisabled($select) {
+                            $select.setAttribute("aria-disabled", "true");
+                            $select.setAttribute("disabled", "true");
                         },
                         /**
-                         * 初始化选项
+                         * 移除选择项的禁用状态
+                         * @param $select 选择项元素
                          */
-                        initOption() {
-                            this.$data.data.forEach((dataItem) => {
-                                // 初始化默认选中
-                                const optionElement = popsDOMUtils.createElement("option");
-                                this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
-                                this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
-                                this.setNodeValue(optionElement, this.$eleKey.viewConfig, dataItem.views);
-                                if (dataItem.value === this.$data.defaultValue) {
-                                    this.setOptionSelected(optionElement);
-                                }
-                                if (typeof dataItem.text === "function") {
-                                    optionElement.innerText = dataItem.text(dataItem.value, dataItem);
-                                }
-                                else {
-                                    optionElement.innerText = dataItem.text;
-                                }
-                                this.$el.select.appendChild(optionElement);
-                            });
+                        removeSelectItemDisabled($select) {
+                            $select.removeAttribute("aria-disabled");
+                            $select.removeAttribute("disabled");
                         },
                         /**
-                         * 设置选项选中
-                         * @param $option
+                         * 判断选择项是否禁用
+                         * @param $select 选择项元素
                          */
-                        setOptionSelected($option) {
-                            $option.setAttribute("selected", "true");
+                        isSelectItemDisabled($select) {
+                            return $select.hasAttribute("disabled") || $select.ariaDisabled;
                         },
                         /**
-                         * 检测所有option并设置禁用状态
+                         * 设置选择项选中
+                         * @param $select 选择项元素（.select-item）
                          */
-                        setSelectOptionsDisableStatus() {
-                            if (this.$el.select.options && this.$el.select.options.length) {
-                                Array.from(this.$el.select.options).forEach((optionItem) => {
-                                    this.setOptionDisableStatus(optionItem);
-                                });
-                            }
+                        setItemSelected($select) {
+                            if (this.isItemSelected($select))
+                                return;
+                            $select.classList.add("select__selected-item");
                         },
                         /**
-                         * 设置禁用状态
-                         * @param $option
+                         * 移除选择项选中
+                         * @param $select 选择项元素（.select-item）
                          */
-                        setOptionDisableStatus($option) {
-                            let disable = false;
-                            const optionDisableAttr = this.getNodeValue($option, this.$eleKey.disable);
-                            if (optionDisableAttr === "function") {
-                                const value = this.getNodeValue($option, this.$eleKey.value);
-                                disable = Boolean(optionDisableAttr(value));
-                            }
-                            if (disable) {
-                                $option.setAttribute("disabled", "true");
-                            }
-                            else {
-                                $option.removeAttribute("disabled");
-                            }
+                        removeItemSelected($select) {
+                            $select.classList.remove("select__selected-item");
                         },
                         /**
-                         * 获取option上的信息
-                         * @param $option
+                         * 判断选择项是否选中
+                         * @param $select 选择项元素（.select-item）
                          */
-                        getSelectOptionInfo($option) {
-                            const optionValue = this.getNodeValue($option, this.$eleKey.value);
-                            const optionText = $option.innerText || $option.textContent;
-                            const views = this.getNodeValue($option, this.$eleKey.viewConfig);
-                            return {
-                                value: optionValue,
-                                text: optionText,
-                                views: views,
-                                $option: $option,
-                            };
+                        isItemSelected($select) {
+                            return $select.classList.contains("select__selected-item");
                         },
                         /**
-                         * 监听选择内容改变
+                         * 获取所有选项的信息
+                         * @param [onlySelected=true] 是否仅获取选中的项的信息
+                         * + true （默认）仅获取选中项的信息
+                         * + false 获取所有选择项的信息
                          */
-                        onValueChange() {
-                            popsDOMUtils.on(this.$el.select, "change", () => {
-                                const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
-                                const selectInfo = this.getSelectOptionInfo($isSelectedElement);
-                                this.setSelectOptionsDisableStatus();
-                                if (typeof viewConfig.callback === "function") {
-                                    viewConfig.callback(selectInfo);
-                                }
-                                const views = typeof selectInfo.views === "function" ? selectInfo.views() : selectInfo.views;
-                                if (Array.isArray(views)) {
-                                    // 如果成功创建，加入到中间容器中
-                                    const childUListClassName = "pops-panel-select-child-forms";
-                                    // 移除旧的元素
-                                    while ($li.nextElementSibling) {
-                                        if ($li.nextElementSibling.classList.contains(childUListClassName)) {
-                                            $li.nextElementSibling.remove();
-                                        }
-                                        else {
-                                            break;
-                                        }
+                        getAllSelectItems(onlySelected = true) {
+                            return Array.from(this.$el.$wrapper?.querySelectorAll(".select-item") ?? [])
+                                .map(($select) => {
+                                const data = this.getItemDataOption($select);
+                                const result = {
+                                    /** 选项信息数据 */
+                                    data: data,
+                                    /** 选项元素 */
+                                    $select: $select,
+                                };
+                                if (onlySelected) {
+                                    // 仅选中
+                                    const isSelected = this.isItemSelected($select);
+                                    if (isSelected) {
+                                        return result;
                                     }
-                                    const $childUList = popsDOMUtils.createElement("ul");
-                                    $childUList.className = childUListClassName;
-                                    popsDOMUtils.after($li, $childUList);
-                                    that.uListContainerAddItem(viewConfig, {
-                                        ulElement: $childUList,
-                                    });
+                                    return;
                                 }
+                                else {
+                                    return result;
+                                }
+                            })
+                                .filter((item) => {
+                                return item != null;
                             });
                         },
                         /**
-                         * 监听点击事件
+                         * 获取项上存储的信息
+                         * @param $el 选项元素
                          */
-                        onClick() {
-                            popsDOMUtils.on(this.$el.select, "click", void 0, (event) => {
-                                this.setSelectOptionsDisableStatus();
-                                if (typeof viewConfig.clickCallBack === "function") {
-                                    const $isSelectedElement = this.$el.select[this.$el.select.selectedIndex];
-                                    const selectInfo = this.getSelectOptionInfo($isSelectedElement);
-                                    viewConfig.clickCallBack(event, selectInfo);
-                                }
-                            });
+                        getItemDataOption($el) {
+                            return Reflect.get($el, "data-info");
                         },
                     };
-                    PopsPanelSelectNative.init();
-                    Reflect.set($li, "data-select", PopsPanelSelectNative);
-                    handler = PopsPanelSelectNative;
+                    PopsPanelSelectHorizontal.init();
+                    Reflect.set($li, "data-select", PopsPanelSelectHorizontal);
+                    handler = PopsPanelSelectHorizontal;
                 }
                 return {
                     $el: $li,
@@ -9814,7 +10242,7 @@
                     [Symbol.toStringTag]: "PopsPanelSelectMultiple",
                     $el: {
                         /** 左侧文本容器 */
-                        itemLeftTextContainer: $li.querySelector(".pops-panel-item-left-text"),
+                        $itemLeftContainer: $li.querySelector(".pops-panel-item-left-text"),
                         /** 选择框容器 */
                         $container: void 0,
                         /** 选择框包裹的容器 */
@@ -10346,11 +10774,11 @@
                     /**
                      * 从保存的已选中的信息列表中移除目标信息
                      * @param data 需要移除的信息
-                     * @param [triggerValueChangeCallBack=true] 是否触发值改变的回调
+                     * @param [emitValueChangeCallBack=true] 是否触发值改变的回调
                      * + true （默认）触发值改变的回调
                      * + false 不触发值改变的回调
                      */
-                    removeSelectedInfo(data, triggerValueChangeCallBack = true) {
+                    removeSelectedInfo(data, emitValueChangeCallBack = true) {
                         for (let index = 0; index < this.$data.selectedDataList.length; index++) {
                             const selectInfo = this.$data.selectedDataList[index];
                             if (selectInfo.value === data.value) {
@@ -10358,7 +10786,7 @@
                                 break;
                             }
                         }
-                        triggerValueChangeCallBack && this.onValueChange();
+                        emitValueChangeCallBack && this.onValueChange();
                     },
                     /** 显示输入框 */
                     showInputWrapper() {
@@ -10388,21 +10816,21 @@
                      * 禁用标签
                      */
                     disable() {
-                        popsDOMUtils.addClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
-                        popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-multiple-disable");
+                        popsDOMUtils.addClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
+                        popsDOMUtils.addClassName(this.$el.$container, "pops-panel-select-disable");
                     },
                     /**
                      * 判断是否被禁用
                      */
                     isDisabled() {
-                        return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-multiple-disable");
+                        return popsDOMUtils.containsClassName(this.$el.$container, "pops-panel-select-disable");
                     },
                     /**
                      * 取消禁用标签
                      */
                     cancleDisable() {
-                        popsDOMUtils.removeClassName(this.$el.itemLeftTextContainer, PopsCommonCSSClassName.textIsDisabled);
-                        popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-multiple-disable");
+                        popsDOMUtils.removeClassName(this.$el.$itemLeftContainer, PopsCommonCSSClassName.textIsDisabled);
+                        popsDOMUtils.removeClassName(this.$el.$container, "pops-panel-select-disable");
                     },
                 };
                 PopsPanelSelectMultiple.init();
@@ -10775,7 +11203,7 @@
                                 else {
                                     leaveViewTransition();
                                 }
-                                that.triggerRenderRightContainer($currentSection);
+                                that.emitRenderRightContainer($currentSection);
                             }, {
                                 once: true,
                             });
@@ -10817,7 +11245,7 @@
                                 $sectionBodyContainer: $deepMenuMain,
                             });
                         }
-                        that.triggerRenderRightContainer($deepMenuSection);
+                        that.emitRenderRightContainer($deepMenuSection);
                     },
                     /** 设置项的点击事件 */
                     onLiClick() {
@@ -10866,7 +11294,7 @@
                     return this.createSectionContainerItem_switch(viewConfig);
                 }
                 else if (componentType === "slider") {
-                    return this.createSectionContainerItem_slider_new(viewConfig);
+                    return this.createSectionContainerItem_slider(viewConfig);
                 }
                 else if (componentType === "input") {
                     return this.createSectionContainerItem_input(viewConfig);
@@ -10978,7 +11406,7 @@
              * 主动触发触发渲染右侧容器的事件
              * @param $container 容器
              */
-            triggerRenderRightContainer($container) {
+            emitRenderRightContainer($container) {
                 const dataViewConfig = Reflect.get($container, this.$data.nodeStoreConfigKey);
                 this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
                     detail: {
@@ -11043,7 +11471,7 @@
                             return;
                         }
                     }
-                    this.triggerRenderRightContainer(this.$el.$panelContentSectionContainer);
+                    this.emitRenderRightContainer(this.$el.$panelContentSectionContainer);
                 });
             },
         };
@@ -11977,15 +12405,15 @@
                         }
                         // 鼠标|触摸 移入事件
                         // 在移动端会先触发touchstart再然后mouseenter
-                        let isTriggerTouchEvent = false;
+                        let isEmitTouchEvent = false;
                         /**
                          * 鼠标|触摸 移入事件
                          */
                         function liElementHoverEvent(event) {
                             if (event.type === "touchstart") {
-                                isTriggerTouchEvent = true;
+                                isEmitTouchEvent = true;
                             }
-                            if (isTriggerTouchEvent && event.type === "mouseenter") {
+                            if (isEmitTouchEvent && event.type === "mouseenter") {
                                 return;
                             }
                             Array.from(menuULElement.children).forEach((liElement) => {
@@ -12937,7 +13365,7 @@
         },
     };
 
-    const version = "3.0.1";
+    const version = "3.1.0";
 
     class Pops {
         /** 配置 */