@whitesev/pops 2.0.10 → 2.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/index.amd.js +1632 -1570
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +1632 -1570
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +1632 -1570
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +1632 -1570
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +1632 -1570
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +1632 -1570
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +50 -30
  14. package/dist/types/src/PopsAnimation.d.ts +14 -0
  15. package/dist/types/src/PopsCSS.d.ts +34 -0
  16. package/dist/types/src/PopsIcon.d.ts +25 -0
  17. package/dist/types/src/PopsLayer.d.ts +3 -0
  18. package/dist/types/src/components/panel/buttonType.d.ts +2 -2
  19. package/dist/types/src/components/rightClickMenu/index.d.ts +1 -2
  20. package/dist/types/src/components/rightClickMenu/indexType.d.ts +2 -2
  21. package/dist/types/src/types/button.d.ts +3 -3
  22. package/dist/types/src/types/icon.d.ts +1 -1
  23. package/dist/types/src/utils/PopsDOMUtils.d.ts +12 -0
  24. package/dist/types/src/utils/PopsInstanceUtils.d.ts +0 -6
  25. package/dist/types/src/utils/PopsUtils.d.ts +5 -6
  26. package/package.json +1 -1
  27. package/src/Pops.ts +12 -152
  28. package/src/PopsAnimation.ts +32 -0
  29. package/src/PopsCSS.ts +51 -0
  30. package/src/PopsIcon.ts +93 -0
  31. package/src/PopsLayer.ts +17 -0
  32. package/src/components/alert/index.ts +8 -8
  33. package/src/components/confirm/index.ts +8 -8
  34. package/src/components/drawer/index.ts +8 -8
  35. package/src/components/folder/index.ts +15 -15
  36. package/src/components/iframe/index.ts +9 -12
  37. package/src/components/loading/index.ts +5 -5
  38. package/src/components/panel/PanelHandleContentDetails.ts +28 -25
  39. package/src/components/panel/buttonType.ts +2 -2
  40. package/src/components/panel/config.ts +4 -0
  41. package/src/components/panel/index.css +33 -0
  42. package/src/components/panel/index.ts +9 -9
  43. package/src/components/prompt/index.ts +8 -8
  44. package/src/components/rightClickMenu/config.ts +7 -7
  45. package/src/components/rightClickMenu/index.ts +9 -10
  46. package/src/components/rightClickMenu/indexType.ts +2 -2
  47. package/src/components/searchSuggestion/index.ts +5 -5
  48. package/src/components/tooltip/index.ts +5 -5
  49. package/src/handler/PopsElementHandler.ts +17 -17
  50. package/src/handler/PopsHandler.ts +22 -19
  51. package/src/types/button.d.ts +3 -3
  52. package/src/types/icon.d.ts +1 -1
  53. package/src/utils/PopsDOMUtils.ts +34 -1
  54. package/src/utils/PopsInstanceUtils.ts +13 -31
  55. package/src/utils/PopsUtils.ts +7 -16
package/dist/index.umd.js CHANGED
@@ -272,9 +272,9 @@
272
272
  const worker = `(()=>{var e={455:function(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),d=t(c);e.addUniqueNumber=d,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const d=r instanceof Promise?await r:r;if(null===a){if(void 0!==d.result)throw s(i)}else{if(void 0===d.result)throw s(i);const{result:e,transferables:r=[]}=d;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,(()=>{n(),t.close(),u.delete(o)})),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise((e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])}))){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),d=(e,t,r=()=>!0)=>{const n=c(d,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},l=e=>t=>{const r=e.get(t);if(void 0===r)return Promise.resolve(!1);const[n,o]=r;return clearTimeout(n),e.delete(t),o(!1),Promise.resolve(!0)},f=(e,t,r)=>(n,o,s)=>{const{expected:a,remainingDelay:i}=e(n,o);return new Promise((e=>{t.set(s,[setTimeout(r,i,a,t,e,s),e])}))},m=(e,t)=>{const r=performance.now(),n=e+t-r-performance.timeOrigin;return{expected:r+n,remainingDelay:n}},p=(e,t,r,n)=>{const o=e-performance.now();o>0?t.set(n,[setTimeout(p,o,e,t,r,n),r]):(t.delete(n),r(!0))},h=new Map,v=l(h),w=new Map,g=l(w),M=f(m,h,p),y=f(m,w,p);d(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?v(e):g(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?M:y)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
273
273
 
274
274
  const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
275
- const clearInterval = (timerId) => loadOrReturnBroker().clearInterval(timerId);
275
+ const clearInterval$1 = (timerId) => loadOrReturnBroker().clearInterval(timerId);
276
276
  const clearTimeout$1 = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
277
- const setInterval = (...args) => loadOrReturnBroker().setInterval(...args);
277
+ const setInterval$1 = (...args) => loadOrReturnBroker().setInterval(...args);
278
278
  const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
279
279
 
280
280
  let t$1 = class t{constructor(){this.__map={};}beforeEach(t){this.__interceptor=t;}on(t,i){const s=Array.isArray(t)?t:[t];for(const t of s){this.__map[t]=this.__map[t]||[];const s=this.__map[t];s&&s.push(i);}return this}emit(t,i,s){ void 0!==this.__interceptor?this.__interceptor(t,(()=>{this.__emit(t,i),s&&s();})):(this.__emit(t,i),s&&s());}__emit(t,i){const s=this.__map[t];if(Array.isArray(s)&&(null==s?void 0:s.length))for(const _ of s)_(i,t);this.event=i;}off(t,i){const s=this.__map[t];if(void 0!==s)if(void 0===i)delete this.__map[t];else {const t=s.findIndex((t=>t===i));s.splice(t,1);}}destroy(){this.__map={};}};
@@ -428,21 +428,6 @@
428
428
  });
429
429
  }
430
430
  }
431
- /**
432
- * 字符串转HTMLElement
433
- * @param elementString
434
- * @returns
435
- */
436
- parseTextToDOM(elementString) {
437
- /* 去除前后的换行和空格 */
438
- elementString = elementString
439
- .replace(/^[\n|\s]*/g, "")
440
- .replace(/[\n|\s]*$/g, "");
441
- let targetElement = popsDOMUtils.createElement("div", {
442
- innerHTML: elementString,
443
- });
444
- return targetElement.firstChild;
445
- }
446
431
  contains(context, target) {
447
432
  if (arguments.length === 1) {
448
433
  // 只判断该页面是否存在该元素
@@ -546,6 +531,13 @@
546
531
  AnyTouch = () => {
547
532
  return i;
548
533
  };
534
+ /**
535
+ * 通过navigator.userAgent判断是否是手机访问
536
+ * @param userAgent
537
+ */
538
+ isPhone(userAgent = PopsCore.globalThis.navigator.userAgent) {
539
+ return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
540
+ }
549
541
  /**
550
542
  * 自动使用 Worker 执行 setTimeout
551
543
  */
@@ -577,7 +569,7 @@
577
569
  */
578
570
  setInterval(callback, timeout = 0) {
579
571
  try {
580
- return setInterval(callback, timeout);
572
+ return setInterval$1(callback, timeout);
581
573
  }
582
574
  catch (error) {
583
575
  return globalThis.setInterval(callback, timeout);
@@ -589,7 +581,7 @@
589
581
  clearInterval(timeId) {
590
582
  try {
591
583
  if (timeId != null) {
592
- clearInterval(timeId);
584
+ clearInterval$1(timeId);
593
585
  }
594
586
  }
595
587
  catch (error) {
@@ -1598,6 +1590,21 @@
1598
1590
  });
1599
1591
  return tempElement;
1600
1592
  }
1593
+ /**
1594
+ * 字符串转HTMLElement
1595
+ * @param elementString
1596
+ * @returns
1597
+ */
1598
+ parseTextToDOM(elementString) {
1599
+ /* 去除前后的换行和空格 */
1600
+ elementString = elementString
1601
+ .replace(/^[\n|\s]*/g, "")
1602
+ .replace(/[\n|\s]*$/g, "");
1603
+ let targetElement = this.createElement("div", {
1604
+ innerHTML: elementString,
1605
+ });
1606
+ return targetElement.firstChild;
1607
+ }
1601
1608
  /**
1602
1609
  * 获取文字的位置信息
1603
1610
  * @param input 输入框
@@ -1981,9 +1988,132 @@
1981
1988
  element.parentElement.insertBefore(content, element.nextSibling);
1982
1989
  }
1983
1990
  }
1991
+ /**
1992
+ * 获取CSS Rule
1993
+ * @param sheet
1994
+ * @returns
1995
+ */
1996
+ getKeyFrames(sheet) {
1997
+ let result = {};
1998
+ Object.keys(sheet.cssRules).forEach((key) => {
1999
+ if (sheet.cssRules[key].type === 7 &&
2000
+ sheet.cssRules[key].name.startsWith("pops-anim-")) {
2001
+ result[sheet.cssRules[key].name] = sheet.cssRules[key];
2002
+ }
2003
+ });
2004
+ return result;
2005
+ }
1984
2006
  }
1985
2007
  const popsDOMUtils = new PopsDOMUtils();
1986
2008
 
2009
+ const PopsLayer = {
2010
+ alert: [],
2011
+ confirm: [],
2012
+ prompt: [],
2013
+ loading: [],
2014
+ iframe: [],
2015
+ tooltip: [],
2016
+ drawer: [],
2017
+ folder: [],
2018
+ panel: [],
2019
+ rightClickMenu: [],
2020
+ };
2021
+
2022
+ var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tborder-radius: 4px;\r\n\tborder: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\tfont-size: var(--pops-font-size);\r\n\tline-height: normal;\r\n\tbox-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^=\"pops\"][class*=\"-title\"] p[pops] {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n";
2023
+
2024
+ var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n\tposition: fixed;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n";
2025
+
2026
+ var scrollbarCSS = "/* firefox上暂不支持::-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n\twidth: 6px;\r\n\theight: 0;\r\n}\r\n\r\n.pops ::-webkit-scrollbar-track {\r\n\twidth: 0;\r\n}\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n\tbackground: rgb(178, 178, 178, var(--pops-bg-opacity));\r\n}\r\n.pops ::-webkit-scrollbar-thumb {\r\n\tmin-height: 28px;\r\n\tborder-radius: 2em;\r\n\tbackground: rgb(204, 204, 204, var(--pops-bg-opacity));\r\n\tbackground-clip: padding-box;\r\n}\r\n";
2027
+
2028
+ var buttonCSS = ".pops {\r\n\t--button-font-size: 14px;\r\n\t--button-height: 32px;\r\n\t--button-color: rgb(51, 51, 51);\r\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--button-margin-top: 0px;\r\n\t--button-margin-bottom: 0px;\r\n\t--button-margin-left: 5px;\r\n\t--button-margin-right: 5px;\r\n\t--button-padding-top: 6px;\r\n\t--button-padding-bottom: 6px;\r\n\t--button-padding-left: 12px;\r\n\t--button-padding-right: 12px;\r\n\t--button-radius: 4px;\r\n\r\n\t--container-title-height: 55px;\r\n\t--container-bottom-btn-height: 55px;\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n\t--container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n\twhite-space: nowrap;\r\n\tfloat: right;\r\n\tdisplay: inline-block;\r\n\tmargin: var(--button-margin-top) var(--button-margin-right)\r\n\t\tvar(--button-margin-bottom) var(--button-margin-left);\r\n\tpadding: var(--button-padding-top) var(--button-padding-right)\r\n\t\tvar(--button-padding-bottom) var(--button-padding-left);\r\n\toutline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n\tdisplay: none;\r\n}\r\n.pops button {\r\n\tborder-radius: var(--button-radius);\r\n\tbox-shadow: none;\r\n\tfont-weight: 400;\r\n\tfont-size: var(--button-font-size);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\theight: var(--button-height);\r\n\tline-height: normal;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tborder: 1px solid var(--button-bd-color);\r\n}\r\n.pops button {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n\toutline: 0;\r\n}\r\n.pops button:hover {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n\tcursor: not-allowed;\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n\t--button-height: 32px;\r\n\t--button-padding-top: 12px;\r\n\t--button-padding-bottom: 12px;\r\n\t--button-padding-left: 19px;\r\n\t--button-padding-right: 19px;\r\n\t--button-font-size: 14px;\r\n\t--button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n\t--button-height: 24px;\r\n\t--button-padding-top: 5px;\r\n\t--button-padding-bottom: 5px;\r\n\t--button-padding-left: 11px;\r\n\t--button-padding-right: 11px;\r\n\t--button-font-size: 12px;\r\n\t--button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n\tdisplay: none;\r\n}\r\n.pops-panel-button-right-icon {\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n\tflex-direction: row-reverse;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner i {\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\tmargin-right: 6px;\r\n}\r\n\r\n.pops button[type=\"default\"] {\r\n\t--button-color: #333333;\r\n\t--button-bd-color: #dcdfe6;\r\n\t--button-bg-color: #ffffff;\r\n}\r\n.pops button[type=\"default\"]:active {\r\n\t--button-color: #409eff;\r\n\t--button-bd-color: #409eff;\r\n\t--button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type=\"default\"]:hover {\r\n\t--button-color: #409eff;\r\n\t--button-bd-color: #c6e2ff;\r\n\t--button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type=\"default\"]:focus-visible {\r\n\toutline: 2px solid #a0cfff;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"default\"]:disabled {\r\n\t--button-color: #a8abb2;\r\n\t--button-bd-color: #fff;\r\n\t--button-bg-color: #e4e7ed;\r\n}\r\n\r\n.pops button[type=\"primary\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #409eff;\r\n\t--button-bg-color: #409eff;\r\n}\r\n.pops button[type=\"primary\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #337ecc;\r\n\t--button-bg-color: #337ecc;\r\n}\r\n.pops button[type=\"primary\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #79bbff;\r\n\t--button-bg-color: #79bbff;\r\n}\r\n.pops button[type=\"primary\"]:focus-visible {\r\n\toutline: 2px solid #a0cfff;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"primary\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #a0cfff;\r\n\t--button-bg-color: #a0cfff;\r\n}\r\n\r\n.pops button[type=\"success\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #4cae4c;\r\n\t--button-bg-color: #5cb85c;\r\n}\r\n.pops button[type=\"success\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #529b2e;\r\n\t--button-bg-color: #529b2e;\r\n}\r\n.pops button[type=\"success\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #95d475;\r\n\t--button-bg-color: #95d475;\r\n}\r\n.pops button[type=\"success\"]:focus-visible {\r\n\toutline: 2px solid #b3e19d;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"success\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b3e19d;\r\n\t--button-bg-color: #b3e19d;\r\n}\r\n\r\n.pops button[type=\"info\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #909399;\r\n\t--button-bg-color: #909399;\r\n}\r\n.pops button[type=\"info\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #73767a;\r\n\t--button-bg-color: #73767a;\r\n}\r\n.pops button[type=\"info\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b1b3b8;\r\n\t--button-bg-color: #b1b3b8;\r\n}\r\n.pops button[type=\"info\"]:focus-visible {\r\n\toutline: 2px solid #c8c9cc;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"info\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #c8c9cc;\r\n\t--button-bg-color: #c8c9cc;\r\n}\r\n\r\n.pops button[type=\"warning\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #e6a23c;\r\n\t--button-bg-color: #e6a23c;\r\n}\r\n.pops button[type=\"warning\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b88230;\r\n\t--button-bg-color: #b88230;\r\n}\r\n.pops button[type=\"warning\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #eebe77;\r\n\t--button-bg-color: #eebe77;\r\n}\r\n.pops button[type=\"warning\"]:focus-visible {\r\n\toutline: 2px solid #f3d19e;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"warning\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f3d19e;\r\n\t--button-bg-color: #f3d19e;\r\n}\r\n\r\n.pops button[type=\"danger\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f56c6c;\r\n\t--button-bg-color: #f56c6c;\r\n}\r\n.pops button[type=\"danger\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #c45656;\r\n\t--button-bg-color: #c45656;\r\n}\r\n.pops button[type=\"danger\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f89898;\r\n\t--button-bg-color: #f89898;\r\n}\r\n.pops button[type=\"danger\"]:focus-visible {\r\n\toutline: 2px solid #fab6b6;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"danger\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #fab6b6;\r\n\t--button-bg-color: #fab6b6;\r\n}\r\n\r\n.pops button[type=\"xiaomi-primary\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #ff5c00;\r\n\t--button-bg-color: #ff5c00;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #da4f00;\r\n\t--button-bg-color: #da4f00;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #ff7e29;\r\n\t--button-bg-color: #ff7e29;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:focus-visible {\r\n\toutline: 2px solid #fab6b6;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #fad5b6;\r\n\t--button-bg-color: #fad5b6;\r\n}\r\n";
2029
+
2030
+ var commonCSS = ".pops-flex-items-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-flex-y-center {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n\tdisplay: flex;\r\n\talign-content: center;\r\n}\r\n.pops-hide {\r\n\tdisplay: none;\r\n}\r\n.pops-hide-important {\r\n\tdisplay: none !important;\r\n}\r\n.pops-no-border {\r\n\tborder: 0;\r\n}\r\n.pops-no-border-important {\r\n\tborder: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-line-height-center {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-width-fill {\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n}\r\n";
2031
+
2032
+ var animCSS = "@keyframes rotating {\r\n\t0% {\r\n\t\ttransform: rotate(0);\r\n\t}\r\n\tto {\r\n\t\ttransform: rotate(360deg);\r\n\t}\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n\t0% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\t}\r\n\t20% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n\t}\r\n\t40% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n\t}\r\n\t60% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n\t}\r\n\t80% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n\t}\r\n\t100% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n\t}\r\n\tfrom {\r\n\t\twidth: 75%;\r\n\t}\r\n\tto {\r\n\t\twidth: 100%;\r\n\t}\r\n}\r\n@keyframes iframeLoadingChange {\r\n\t0% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\t}\r\n\t20% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n\t}\r\n\t40% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n\t}\r\n\t60% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n\t}\r\n\t80% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n\t}\r\n\t100% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n\t}\r\n\tfrom {\r\n\t\twidth: 0;\r\n\t}\r\n\tto {\r\n\t\twidth: 75%;\r\n\t}\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n\tfrom {\r\n\t\topacity: 0;\r\n\t\tdisplay:none;\r\n\t}\r\n\tto {\r\n\t\tdisplay:block;\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes searchSelectFalOut {\r\n\tfrom {\r\n\t\tdisplay:block;\r\n\t\topacity: 1;\r\n\t}\r\n\tto {\r\n\t\topacity: 0;\r\n\t\tdisplay:none;\r\n\t}\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n\tform {\r\n\t\ttransform: rotate(0);\r\n\t}\r\n\tto {\r\n\t\ttransform: rotate(360deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-spread {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scaleX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scaleX(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-shake {\r\n\t0%,\r\n\t100% {\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t10%,\r\n\t30%,\r\n\t50%,\r\n\t70%,\r\n\t90% {\r\n\t\ttransform: translateX(-10px);\r\n\t}\r\n\t20%,\r\n\t40%,\r\n\t60%,\r\n\t80% {\r\n\t\ttransform: translateX(10px);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-100%) rotate(-120deg);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(100%) rotate(120deg);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-top {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-left {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-right {\r\n\t0% {\r\n\t\ttransform: translateX(200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n\t0% {\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n\t45% {\r\n\t\ttransform: scale(1.05);\r\n\t}\r\n\t80% {\r\n\t\ttransform: scale(0.95);\r\n\t}\r\n\t100% {\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-don {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t2.08333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.75266,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.76342,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t4.16667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.81071,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.84545,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t6.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.86808,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.9286,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t8.33333% {\r\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t10.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.96482,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.05202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t12.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t14.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02563,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.09149,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t16.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.04227,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.08453,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t18.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05102,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.06666,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t20.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05334,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.04355,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t22.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05078,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.02012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t25% {\r\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t27.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.03699,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98534,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t29.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02831,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97688,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t31.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01973,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97422,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t33.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01191,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97618,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t35.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00526,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98122,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t37.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t39.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99617,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99433,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t41.6667% {\r\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t43.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99237,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00413,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t45.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00651,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t47.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99241,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00726,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t50% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99329,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00671,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t52.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99447,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00529,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t54.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99577,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00346,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t56.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99705,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.0016,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t58.3333% {\r\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t60.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99921,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99884,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t62.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t64.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00057,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99795,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t66.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00095,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99811,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t68.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99851,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t70.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00119,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99903,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t72.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99955,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t75% {\r\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t77.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00083,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00033,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t79.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00063,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00052,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t81.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00044,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00058,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t83.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00027,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00053,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t85.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00042,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t87.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t89.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00013,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t91.6667% {\r\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t93.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t95.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99982,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99985,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t97.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99984,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-roll {\r\n\t0% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n\t}\r\n\t100% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-sandra {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale3d(1.1, 1.1, 1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(1, 1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-gather {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scaleX(1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scaleX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n\t0%,\r\n\t100% {\r\n\t\ttransform: translateX(10px);\r\n\t}\r\n\t10%,\r\n\t30%,\r\n\t50%,\r\n\t70%,\r\n\t90% {\r\n\t\ttransform: translateX(-10px);\r\n\t}\r\n\t20%,\r\n\t40%,\r\n\t60%,\r\n\t80% {\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-100%) rotate(-120deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(100%) rotate(120deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\ttransform: translateX(200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n\t0% {\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t45% {\r\n\t\ttransform: scale(0.95);\r\n\t}\r\n\t80% {\r\n\t\ttransform: scale(1.05);\r\n\t}\r\n\t100% {\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t97.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.75266,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.76342,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t95.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.81071,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.84545,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t93.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.86808,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.9286,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t91.6667% {\r\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t89.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.96482,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.05202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t87.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t85.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02563,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.09149,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t83.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.04227,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.08453,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t81.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05102,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.06666,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t79.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05334,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.04355,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t77.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05078,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.02012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t75% {\r\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t72.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.03699,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98534,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t70.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02831,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97688,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t68.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01973,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97422,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t66.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01191,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97618,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t64.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00526,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98122,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t62.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t60.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99617,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99433,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t58.3333% {\r\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t56.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99237,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00413,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t54.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00651,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t52.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99241,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00726,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t50% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99329,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00671,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t47.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99447,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00529,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t45.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99577,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00346,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t43.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99705,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.0016,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t41.6667% {\r\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t39.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99921,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99884,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t37.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t35.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00057,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99795,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t33.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00095,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99811,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t31.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99851,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t29.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00119,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99903,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t27.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99955,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t25% {\r\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t22.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00083,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00033,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t20.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00063,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00052,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t18.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00044,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00058,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t16.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00027,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00053,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t14.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00042,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t12.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t10.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00013,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t8.33333% {\r\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t6.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t4.16667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99982,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99985,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t2.08333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99984,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0type=close,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n\t0% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n\t}\r\n\t100% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(1, 1, 1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale3d(1.1, 1.1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(-30px);\r\n\t\ttransform: translateY(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-30px);\r\n\t\t-ms-transform: translateY(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n\t0% {\r\n\t\topacity: 10;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(-30px);\r\n\t\ttransform: translateY(-30px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-30px);\r\n\t\t-ms-transform: translateY(-30px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t\t-ms-transform: translateY(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t\t-ms-transform: translateY(20px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-20px);\r\n\t\ttransform: translateX(-20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-30px);\r\n\t\ttransform: translateX(-30px);\r\n\t\t-ms-transform: translateX(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-30px);\r\n\t\ttransform: translateX(-30px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-20px);\r\n\t\ttransform: translateX(-20px);\r\n\t\t-ms-transform: translateX(-20px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t\t-ms-transform: translateX(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t\t-ms-transform: translateX(20px);\r\n\t}\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n\tanimation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n\tanimation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n\tanimation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n\tanimation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n\tanimation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n\tanimation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n\tanimation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n\tanimation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n\tanimation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n\tanimation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n\tanimation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n\tanimation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n\tanimation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n\tanimation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n\tanimation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n\tanimation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n\tanimation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n\tanimation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n\tanimation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n\tanimation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n\tanimation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n\tanimation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n\tanimation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n\tanimation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n\tanimation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n\tanimation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n\tanimation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n\tanimation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n\tanimation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n\tanimation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
2033
+
2034
+ var alertCSS = ".pops[type-value] .pops-alert-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n";
2035
+
2036
+ var confirmCSS = ".pops[type-value] .pops-confirm-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n";
2037
+
2038
+ var promptCSS = ".pops[type-value] .pops-prompt-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops] {\r\n\tpadding: 5px 10px;\r\n}\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n\tpadding: 5px 10px;\r\n\tresize: none;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops],\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tcolor: rgb(51, 51, 51);\r\n}\r\n";
2039
+
2040
+ var loadingCSS = ".pops[type-value=\"loading\"] {\r\n\tposition: absolute;\r\n\ttop: 272.5px;\r\n\ttop: 50%;\r\n\tleft: 26px;\r\n\tleft: 50%;\r\n\tdisplay: flex;\r\n\toverflow: hidden;\r\n\tpadding: 10px 15px;\r\n\tmax-width: 100%;\r\n\tmax-height: 100%;\r\n\tmin-width: 0;\r\n\tmin-height: 0;\r\n\tborder: 1px solid rgba(0, 0, 0, 0.2);\r\n\tborder-radius: 5px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 5px rgb(0 0 0 / 50%);\r\n\tvertical-align: middle;\r\n\ttransition: all 0.35s;\r\n\ttransform: translate(-50%, -50%);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"loading\"]:before {\r\n\tfloat: left;\r\n\tdisplay: inline-block;\r\n\twidth: 2em;\r\n\theight: 2em;\r\n\tborder: 0.3em solid rgba(100, 149, 237, 0.1);\r\n\tborder-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \" \";\r\n\tvertical-align: middle;\r\n\tfont-size: inherit;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content {\r\n\tposition: static;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tfloat: left;\r\n\toverflow: hidden;\r\n\twidth: auto;\r\n\tfont-size: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content p[pops] {\r\n\tdisplay: inline-block;\r\n\tpadding: 5px 0px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\tfont-size: inherit;\r\n\ttext-align: center;\r\n}\r\n";
2041
+
2042
+ var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n\t--container-title-height: 55px;\r\n\ttransition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title {\r\n\twidth: calc(100% - 0px);\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content {\r\n\twidth: 100%;\r\n\t/*height: calc(100% - var(--container-title-height));*/\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: #333;\r\n\ttext-indent: 15px;\r\n}\r\n.pops-loading {\r\n\tposition: absolute;\r\n\ttop: 40px;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tz-index: 5;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 3;\r\n\tdisplay: block;\r\n\tmargin: -20px 0 0 -20px;\r\n\tpadding: 20px;\r\n\tborder: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \"\";\r\n\tborder-top-color: transparent;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n\tbottom: 0;\r\n\tmax-width: 200px;\r\n\tmax-height: 53px;\r\n\tposition: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"]\r\n\t.pops-header-control[type=\"min\"] {\r\n\tdisplay: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n\ttop: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n\tleft: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n\ttransform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n\ttransition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n\twidth: 100% !important;\r\n\theight: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n\twidth: calc(100% - 4px);\r\n\theight: calc(100% - 4px);\r\n\tborder: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: 999999;\r\n\twidth: 0;\r\n\theight: 4px;\r\n\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\tanimation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n\tposition: unset;\r\n}\r\n";
2043
+
2044
+ var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n\tposition: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n\tposition: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
2045
+
2046
+ var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
2047
+
2048
+ var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: #05082c;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tpadding-bottom: 85px;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tpadding-bottom: 40px;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: rgb(129, 137, 153);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\tmin-height: 17px;\r\n\tflex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n\tdisplay: inline-flex;\r\n\tmargin-left: 4px;\r\n\tflex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tfill: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n\tpadding: 4px 20px;\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-box-pack: start;\r\n\t-webkit-justify-content: start;\r\n\t-ms-flex-pack: start;\r\n\tjustify-content: flex-start;\r\n\tmin-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tfont-weight: 700;\r\n\tdisplay: inline-block;\r\n\tmax-width: 140px;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tword-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n\tcolor: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: rgb(18, 22, 26);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n\tbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n\t\t55% 50%/6px 9px no-repeat;\r\n}\r\n";
2049
+
2050
+ var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333;\r\n\t--title-bg-color: #ffffff;\r\n\t--aside-bg-color: #ffffff;\r\n\t--aside-hover-color: rgb(64, 158, 255);\r\n\t--aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: 20px;\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tbackground: var(--title-bg-color);\r\n}\r\n\r\n.pops[type-value=\"panel\"] .pops-panel-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\toverflow: auto;\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--aside-bg-color);\r\n\tborder-right: 1px solid var(--aside-bg-color);\r\n\tfont-size: 0.9em;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-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\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n\ttext-align: left;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n\toverflow: auto;\r\n\tflex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:hover {\r\n\tcolor: var(--aside-hover-color);\r\n\tbackground: var(--aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\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 rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: left;\r\n}\r\nsection.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)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n\tborder: 0;\r\n}\r\n/* 主文字 */\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\t.pops-panel-item-left-text\r\n\t.pops-panel-item-left-main-text {\r\n\tline-height: 2;\r\n}*/\r\n/* 描述文字 */\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\t.pops-panel-item-left-text\r\n\t.pops-panel-item-left-desc-text {\r\n\tline-height: normal;\r\n\tmargin-top: 6px;\r\n\tfont-size: 0.8em;\r\n\tcolor: rgb(108, 108, 108);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 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\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tcolor: rgb(220, 223, 230);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: rgb(64, 158, 255);\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\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-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\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-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\tcursor: 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\ttransform: 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\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-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\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid #dcdfe6;\r\n\tborder-radius: 4px;\r\n\tbackground-color: #ffffff;\r\n\tposition: relative;\r\n}\r\n.pops-panel-input:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid #409eff;\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbackground-color: transparent;\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: #a8abb2;\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: 0 0 0 1px #dcdfe6 inset;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: none;\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tbox-shadow: 0 0 0 1px #409eff inset;\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tbackground: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n\t/* 左侧内容*/\r\n\t/* 左侧内容*/\r\n\t/* 右侧箭头图标*/\r\n\t/* 右侧箭头图标*/\r\n\t/* tag*/\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* <code> */\r\n.pops[type-value=\"panel\"] code {\r\n\tfont-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\r\n\tfont-size: 0.85em;\r\n\tcolor: #000;\r\n\tbackground-color: #f0f0f0;\r\n\tborder-radius: 3px;\r\n\tborder: 0;\r\n\tpadding: 0.2em 0;\r\n\twhite-space: normal;\r\n\tbackground: #f5f5f5;\r\n\ttext-wrap: wrap;\r\n\ttext-align: left;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n\tline-height: 1.4;\r\n\t-moz-tab-size: 8;\r\n\t-o-tab-size: 8;\r\n\ttab-size: 8;\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n\tdirection: ltr;\r\n}\r\n\r\n.pops[type-value=\"panel\"] code::before,\r\n.pops[type-value=\"panel\"] code::after {\r\n\tletter-spacing: -0.2em;\r\n\tcontent: \"\\00a0\";\r\n}\r\n";
2051
+
2052
+ var rightClickMenuCSS = ".pops-rightClickMenu * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tscrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n\tposition: fixed;\r\n\tz-index: 10000;\r\n\ttext-align: center;\r\n\tborder-radius: 3px;\r\n\tfont-size: 16px;\r\n\tfont-weight: 500;\r\n\tbackground: #fff;\r\n\tbox-shadow: 0px 1px 6px 1px #cacaca;\r\n}\r\n.pops-rightClickMenu-anim-grid {\r\n\tdisplay: grid;\r\n\ttransition: 0.3s;\r\n\tgrid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n\tgrid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n\tbackground: #dfdfdf;\r\n}\r\ni.pops-rightClickMenu-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n\tmargin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n\tbackground: #dfdfdf;\r\n\tcursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: center;\r\n\toverflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n\tpadding: 5px 10px;\r\n\tmargin: 2.5px 5px;\r\n\tborder-radius: 3px;\r\n\tdisplay: flex;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\ttext-align: left;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\talign-items: center;\r\n}\r\n.pops-rightClickMenu ul li:first-child {\r\n\tmargin-top: 5px;\r\n}\r\n.pops-rightClickMenu ul li:last-child {\r\n\tmargin-bottom: 5px;\r\n}\r\n";
2053
+
2054
+ const PopsCSS = {
2055
+ /** 主CSS */
2056
+ index: indexCSS,
2057
+ /** 九宫格位置CSS */
2058
+ ninePalaceGridPosition: ninePalaceGridPositionCSS,
2059
+ /** 滚动条CSS */
2060
+ scrollbar: scrollbarCSS,
2061
+ /** 按钮CSS */
2062
+ button: buttonCSS,
2063
+ /** 通用的CSS */
2064
+ common: commonCSS,
2065
+ /** 动画 */
2066
+ anim: animCSS,
2067
+ /** pops.alert */
2068
+ alertCSS: alertCSS,
2069
+ /** pops.cponfirm */
2070
+ confirmCSS: confirmCSS,
2071
+ /** pops.prompt */
2072
+ promptCSS: promptCSS,
2073
+ /** pops.loading */
2074
+ loadingCSS: loadingCSS,
2075
+ /** pops.iframe */
2076
+ iframeCSS: iframeCSS,
2077
+ /** pops.tooltip */
2078
+ tooltipCSS: tooltipCSS,
2079
+ /** pops.drawer */
2080
+ drawerCSS: drawerCSS,
2081
+ /** pops.folder */
2082
+ folderCSS: folderCSS,
2083
+ /** pops.folder */
2084
+ panelCSS: panelCSS,
2085
+ /** pops.rightClickMenu */
2086
+ rightClickMenu: rightClickMenuCSS,
2087
+ };
2088
+
2089
+ const PopsAnimation = {
2090
+ $data: {},
2091
+ $flag: {
2092
+ /** 是否初始化 */
2093
+ isInit: false,
2094
+ },
2095
+ init() {
2096
+ if (!this.$flag.isInit) {
2097
+ this.$flag.isInit = true;
2098
+ /* 处理获取当前所有的动画名 */
2099
+ let animationStyle = document.createElement("style");
2100
+ PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
2101
+ popsDOMUtils.appendHead(animationStyle);
2102
+ this.$data = null;
2103
+ this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet);
2104
+ popsUtils.setTimeout(() => {
2105
+ animationStyle.remove();
2106
+ }, 50);
2107
+ }
2108
+ },
2109
+ /**
2110
+ * 判断是否存在某个动画名
2111
+ */
2112
+ hasAnim(name) {
2113
+ return this.$data.hasOwnProperty(name);
2114
+ },
2115
+ };
2116
+
1987
2117
  const PopsInstanceUtils = {
1988
2118
  /**
1989
2119
  * 获取页面中最大的z-index的元素信息
@@ -2081,8 +2211,8 @@
2081
2211
  function isVisibleNode($css) {
2082
2212
  return $css.position !== "static" && $css.display !== "none";
2083
2213
  }
2084
- Object.keys(pops.config.layer).forEach((layerName) => {
2085
- let layerList = pops.config.layer[layerName];
2214
+ Object.keys(PopsLayer).forEach((layerName) => {
2215
+ let layerList = PopsLayer[layerName];
2086
2216
  for (let index = 0; index < layerList.length; index++) {
2087
2217
  const layer = layerList[index];
2088
2218
  let nodeStyle = window.getComputedStyle(layer.animElement);
@@ -2116,21 +2246,6 @@
2116
2246
  getMaxZIndex(deviation = 1) {
2117
2247
  return this.getMaxZIndexNodeInfo(deviation).zIndex;
2118
2248
  },
2119
- /**
2120
- * 获取CSS Rule
2121
- * @param sheet
2122
- * @returns
2123
- */
2124
- getKeyFrames(sheet) {
2125
- let result = {};
2126
- Object.keys(sheet.cssRules).forEach((key) => {
2127
- if (sheet.cssRules[key].type === 7 &&
2128
- sheet.cssRules[key].name.startsWith("pops-anim-")) {
2129
- result[sheet.cssRules[key].name] = sheet.cssRules[key];
2130
- }
2131
- });
2132
- return result;
2133
- },
2134
2249
  /**
2135
2250
  * 删除配置中对应的对象
2136
2251
  * @param moreLayerConfigList 配置实例列表
@@ -2159,12 +2274,14 @@
2159
2274
  // 移除全部或者guid相同
2160
2275
  if (isAll || layerConfigItem["guid"] === guid) {
2161
2276
  // 判断是否有动画
2162
- if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.getAttribute("anim"))) {
2277
+ let animName = layerConfigItem.animElement.getAttribute("anim");
2278
+ if (PopsAnimation.hasAnim(animName)) {
2279
+ let reverseAnimName = animName + "-reverse";
2163
2280
  layerConfigItem.animElement.style.width = "100%";
2164
2281
  layerConfigItem.animElement.style.height = "100%";
2165
2282
  layerConfigItem.animElement.style["animation-name"] =
2166
- layerConfigItem.animElement.getAttribute("anim") + "-reverse";
2167
- if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
2283
+ reverseAnimName;
2284
+ if (PopsAnimation.hasAnim(layerConfigItem.animElement.style["animation-name"])) {
2168
2285
  popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), function () {
2169
2286
  removeItem(layerConfigItem);
2170
2287
  }, {
@@ -2221,7 +2338,7 @@
2221
2338
  layerConfigItem.animElement.style.height = "100%";
2222
2339
  layerConfigItem.animElement.style["animation-name"] =
2223
2340
  layerConfigItem.animElement.getAttribute("anim") + "-reverse";
2224
- if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
2341
+ if (PopsAnimation.hasAnim(layerConfigItem.animElement.style["animation-name"])) {
2225
2342
  /**
2226
2343
  * 动画结束的回调
2227
2344
  */
@@ -2290,7 +2407,7 @@
2290
2407
  layerConfigItem
2291
2408
  .animElement.getAttribute("anim")
2292
2409
  .replace("-reverse", "");
2293
- if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
2410
+ if (PopsAnimation.hasAnim(layerConfigItem.animElement.style["animation-name"])) {
2294
2411
  /**
2295
2412
  * 动画结束的回调
2296
2413
  */
@@ -2621,94 +2738,6 @@
2621
2738
  },
2622
2739
  };
2623
2740
 
2624
- var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tborder-radius: 4px;\r\n\tborder: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\tfont-size: var(--pops-font-size);\r\n\tline-height: normal;\r\n\tbox-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^=\"pops\"][class*=\"-title\"] p[pops] {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n";
2625
-
2626
- var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n\tposition: fixed;\r\n\ttop: 50%;\r\n\tright: 0;\r\n\ttransform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n\tposition: fixed;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n";
2627
-
2628
- var scrollbarCSS = "/* firefox上暂不支持::-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n\twidth: 6px;\r\n\theight: 0;\r\n}\r\n\r\n.pops ::-webkit-scrollbar-track {\r\n\twidth: 0;\r\n}\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n\tbackground: rgb(178, 178, 178, var(--pops-bg-opacity));\r\n}\r\n.pops ::-webkit-scrollbar-thumb {\r\n\tmin-height: 28px;\r\n\tborder-radius: 2em;\r\n\tbackground: rgb(204, 204, 204, var(--pops-bg-opacity));\r\n\tbackground-clip: padding-box;\r\n}\r\n";
2629
-
2630
- var buttonCSS = ".pops {\r\n\t--button-font-size: 14px;\r\n\t--button-height: 32px;\r\n\t--button-color: rgb(51, 51, 51);\r\n\t--button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\t--button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\t--button-margin-top: 0px;\r\n\t--button-margin-bottom: 0px;\r\n\t--button-margin-left: 5px;\r\n\t--button-margin-right: 5px;\r\n\t--button-padding-top: 6px;\r\n\t--button-padding-bottom: 6px;\r\n\t--button-padding-left: 12px;\r\n\t--button-padding-right: 12px;\r\n\t--button-radius: 4px;\r\n\r\n\t--container-title-height: 55px;\r\n\t--container-bottom-btn-height: 55px;\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n\t--container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n\twhite-space: nowrap;\r\n\tfloat: right;\r\n\tdisplay: inline-block;\r\n\tmargin: var(--button-margin-top) var(--button-margin-right)\r\n\t\tvar(--button-margin-bottom) var(--button-margin-left);\r\n\tpadding: var(--button-padding-top) var(--button-padding-right)\r\n\t\tvar(--button-padding-bottom) var(--button-padding-left);\r\n\toutline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n\tdisplay: none;\r\n}\r\n.pops button {\r\n\tborder-radius: var(--button-radius);\r\n\tbox-shadow: none;\r\n\tfont-weight: 400;\r\n\tfont-size: var(--button-font-size);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\theight: var(--button-height);\r\n\tline-height: normal;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tborder: 1px solid var(--button-bd-color);\r\n}\r\n.pops button {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n\toutline: 0;\r\n}\r\n.pops button:hover {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n\tcursor: not-allowed;\r\n\tcolor: var(--button-color);\r\n\tborder-color: var(--button-bd-color);\r\n\tbackground-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n\t--button-height: 32px;\r\n\t--button-padding-top: 12px;\r\n\t--button-padding-bottom: 12px;\r\n\t--button-padding-left: 19px;\r\n\t--button-padding-right: 19px;\r\n\t--button-font-size: 14px;\r\n\t--button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n\t--button-height: 24px;\r\n\t--button-padding-top: 5px;\r\n\t--button-padding-bottom: 5px;\r\n\t--button-padding-left: 11px;\r\n\t--button-padding-right: 11px;\r\n\t--button-font-size: 12px;\r\n\t--button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n\tdisplay: none;\r\n}\r\n.pops-panel-button-right-icon {\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n\tflex-direction: row-reverse;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner i {\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\tmargin-right: 6px;\r\n}\r\n\r\n.pops button[type=\"default\"] {\r\n\t--button-color: #333333;\r\n\t--button-bd-color: #dcdfe6;\r\n\t--button-bg-color: #ffffff;\r\n}\r\n.pops button[type=\"default\"]:active {\r\n\t--button-color: #409eff;\r\n\t--button-bd-color: #409eff;\r\n\t--button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type=\"default\"]:hover {\r\n\t--button-color: #409eff;\r\n\t--button-bd-color: #c6e2ff;\r\n\t--button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type=\"default\"]:focus-visible {\r\n\toutline: 2px solid #a0cfff;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"default\"]:disabled {\r\n\t--button-color: #a8abb2;\r\n\t--button-bd-color: #fff;\r\n\t--button-bg-color: #e4e7ed;\r\n}\r\n\r\n.pops button[type=\"primary\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #409eff;\r\n\t--button-bg-color: #409eff;\r\n}\r\n.pops button[type=\"primary\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #337ecc;\r\n\t--button-bg-color: #337ecc;\r\n}\r\n.pops button[type=\"primary\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #79bbff;\r\n\t--button-bg-color: #79bbff;\r\n}\r\n.pops button[type=\"primary\"]:focus-visible {\r\n\toutline: 2px solid #a0cfff;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"primary\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #a0cfff;\r\n\t--button-bg-color: #a0cfff;\r\n}\r\n\r\n.pops button[type=\"success\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #4cae4c;\r\n\t--button-bg-color: #5cb85c;\r\n}\r\n.pops button[type=\"success\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #529b2e;\r\n\t--button-bg-color: #529b2e;\r\n}\r\n.pops button[type=\"success\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #95d475;\r\n\t--button-bg-color: #95d475;\r\n}\r\n.pops button[type=\"success\"]:focus-visible {\r\n\toutline: 2px solid #b3e19d;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"success\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b3e19d;\r\n\t--button-bg-color: #b3e19d;\r\n}\r\n\r\n.pops button[type=\"info\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #909399;\r\n\t--button-bg-color: #909399;\r\n}\r\n.pops button[type=\"info\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #73767a;\r\n\t--button-bg-color: #73767a;\r\n}\r\n.pops button[type=\"info\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b1b3b8;\r\n\t--button-bg-color: #b1b3b8;\r\n}\r\n.pops button[type=\"info\"]:focus-visible {\r\n\toutline: 2px solid #c8c9cc;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"info\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #c8c9cc;\r\n\t--button-bg-color: #c8c9cc;\r\n}\r\n\r\n.pops button[type=\"warning\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #e6a23c;\r\n\t--button-bg-color: #e6a23c;\r\n}\r\n.pops button[type=\"warning\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #b88230;\r\n\t--button-bg-color: #b88230;\r\n}\r\n.pops button[type=\"warning\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #eebe77;\r\n\t--button-bg-color: #eebe77;\r\n}\r\n.pops button[type=\"warning\"]:focus-visible {\r\n\toutline: 2px solid #f3d19e;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"warning\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f3d19e;\r\n\t--button-bg-color: #f3d19e;\r\n}\r\n\r\n.pops button[type=\"danger\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f56c6c;\r\n\t--button-bg-color: #f56c6c;\r\n}\r\n.pops button[type=\"danger\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #c45656;\r\n\t--button-bg-color: #c45656;\r\n}\r\n.pops button[type=\"danger\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #f89898;\r\n\t--button-bg-color: #f89898;\r\n}\r\n.pops button[type=\"danger\"]:focus-visible {\r\n\toutline: 2px solid #fab6b6;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"danger\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #fab6b6;\r\n\t--button-bg-color: #fab6b6;\r\n}\r\n\r\n.pops button[type=\"xiaomi-primary\"] {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #ff5c00;\r\n\t--button-bg-color: #ff5c00;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:active {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #da4f00;\r\n\t--button-bg-color: #da4f00;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:hover {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #ff7e29;\r\n\t--button-bg-color: #ff7e29;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:focus-visible {\r\n\toutline: 2px solid #fab6b6;\r\n\toutline-offset: 1px;\r\n}\r\n.pops button[type=\"xiaomi-primary\"]:disabled {\r\n\t--button-color: #ffffff;\r\n\t--button-bd-color: #fad5b6;\r\n\t--button-bg-color: #fad5b6;\r\n}\r\n";
2631
-
2632
- var commonCSS = ".pops-flex-items-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-flex-y-center {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n\tdisplay: flex;\r\n\talign-content: center;\r\n}\r\n.pops-hide {\r\n\tdisplay: none;\r\n}\r\n.pops-hide-important {\r\n\tdisplay: none !important;\r\n}\r\n.pops-no-border {\r\n\tborder: 0;\r\n}\r\n.pops-no-border-important {\r\n\tborder: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-line-height-center {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-width-fill {\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n}\r\n";
2633
-
2634
- var animCSS = "@keyframes rotating {\r\n\t0% {\r\n\t\ttransform: rotate(0);\r\n\t}\r\n\tto {\r\n\t\ttransform: rotate(360deg);\r\n\t}\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n\t0% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\t}\r\n\t20% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n\t}\r\n\t40% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n\t}\r\n\t60% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n\t}\r\n\t80% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n\t}\r\n\t100% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n\t}\r\n\tfrom {\r\n\t\twidth: 75%;\r\n\t}\r\n\tto {\r\n\t\twidth: 100%;\r\n\t}\r\n}\r\n@keyframes iframeLoadingChange {\r\n\t0% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\t}\r\n\t20% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n\t}\r\n\t40% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n\t}\r\n\t60% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n\t}\r\n\t80% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n\t}\r\n\t100% {\r\n\t\tbackground: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n\t}\r\n\tfrom {\r\n\t\twidth: 0;\r\n\t}\r\n\tto {\r\n\t\twidth: 75%;\r\n\t}\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n\tfrom {\r\n\t\topacity: 0;\r\n\t\tdisplay:none;\r\n\t}\r\n\tto {\r\n\t\tdisplay:block;\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes searchSelectFalOut {\r\n\tfrom {\r\n\t\tdisplay:block;\r\n\t\topacity: 1;\r\n\t}\r\n\tto {\r\n\t\topacity: 0;\r\n\t\tdisplay:none;\r\n\t}\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n\tform {\r\n\t\ttransform: rotate(0);\r\n\t}\r\n\tto {\r\n\t\ttransform: rotate(360deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-spread {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scaleX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scaleX(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-shake {\r\n\t0%,\r\n\t100% {\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t10%,\r\n\t30%,\r\n\t50%,\r\n\t70%,\r\n\t90% {\r\n\t\ttransform: translateX(-10px);\r\n\t}\r\n\t20%,\r\n\t40%,\r\n\t60%,\r\n\t80% {\r\n\t\ttransform: translateX(10px);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-100%) rotate(-120deg);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(100%) rotate(120deg);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-top {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-left {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-right {\r\n\t0% {\r\n\t\ttransform: translateX(200%);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n\t0% {\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n\t45% {\r\n\t\ttransform: scale(1.05);\r\n\t}\r\n\t80% {\r\n\t\ttransform: scale(0.95);\r\n\t}\r\n\t100% {\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n@keyframes pops-anim-don {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t2.08333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.75266,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.76342,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t4.16667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.81071,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.84545,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t6.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.86808,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.9286,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t8.33333% {\r\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t10.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.96482,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.05202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t12.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t14.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02563,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.09149,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t16.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.04227,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.08453,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t18.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05102,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.06666,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t20.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05334,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.04355,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t22.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05078,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.02012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t25% {\r\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t27.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.03699,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98534,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t29.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02831,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97688,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t31.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01973,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97422,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t33.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01191,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97618,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t35.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00526,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98122,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t37.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t39.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99617,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99433,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t41.6667% {\r\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t43.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99237,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00413,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t45.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00651,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t47.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99241,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00726,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t50% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99329,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00671,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t52.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99447,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00529,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t54.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99577,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00346,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t56.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99705,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.0016,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t58.3333% {\r\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t60.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99921,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99884,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t62.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t64.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00057,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99795,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t66.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00095,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99811,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t68.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99851,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t70.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00119,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99903,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t72.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99955,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t75% {\r\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t77.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00083,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00033,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t79.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00063,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00052,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t81.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00044,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00058,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t83.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00027,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00053,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t85.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00042,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t87.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t89.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00013,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t91.6667% {\r\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t93.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t95.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99982,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99985,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t97.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99984,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-roll {\r\n\t0% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n\t}\r\n\t100% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-sandra {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale3d(1.1, 1.1, 1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(1, 1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-gather {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scaleX(1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scaleX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n\t0%,\r\n\t100% {\r\n\t\ttransform: translateX(10px);\r\n\t}\r\n\t10%,\r\n\t30%,\r\n\t50%,\r\n\t70%,\r\n\t90% {\r\n\t\ttransform: translateX(-10px);\r\n\t}\r\n\t20%,\r\n\t40%,\r\n\t60%,\r\n\t80% {\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-100%) rotate(-120deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0) rotate(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(100%) rotate(120deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateX(-200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\ttransform: translateX(200%);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n\t0% {\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t45% {\r\n\t\ttransform: scale(0.95);\r\n\t}\r\n\t80% {\r\n\t\ttransform: scale(1.05);\r\n\t}\r\n\t100% {\r\n\t\ttransform: scale(0.5);\r\n\t}\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t97.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.75266,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.76342,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t95.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.81071,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.84545,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t93.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.86808,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.9286,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t91.6667% {\r\n\t\ttransform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t89.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.96482,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.05202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t87.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t85.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02563,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.09149,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t83.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.04227,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.08453,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t81.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05102,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.06666,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t79.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05334,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.04355,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t77.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.05078,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.02012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t75% {\r\n\t\ttransform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t72.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.03699,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98534,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t70.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.02831,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97688,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t68.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01973,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97422,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t66.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.01191,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.97618,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t64.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00526,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.98122,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t62.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t60.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99617,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99433,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t58.3333% {\r\n\t\ttransform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t56.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99237,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00413,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t54.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99202,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00651,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t52.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99241,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00726,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t50% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99329,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00671,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t47.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99447,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00529,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t45.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99577,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00346,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t43.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99705,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.0016,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t41.6667% {\r\n\t\ttransform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t39.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99921,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99884,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t37.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t35.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00057,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99795,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t33.3333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00095,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99811,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t31.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99851,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t29.1667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00119,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99903,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t27.0833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00114,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99955,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t25% {\r\n\t\ttransform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t22.9167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00083,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00033,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t20.8333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00063,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00052,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t18.75% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00044,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00058,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t16.6667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00027,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00053,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t14.5833% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t1.00012,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00042,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t12.5% {\r\n\t\ttransform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t10.4167% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1.00013,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t8.33333% {\r\n\t\ttransform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n\t}\r\n\t6.25% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99991,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t4.16667% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99982,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99985,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t2.08333% {\r\n\t\ttransform: matrix3d(\r\n\t\t\t0.99983,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0.99984,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: matrix3d(\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t1,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0,\r\n\t\t\t0type=close,\r\n\t\t\t1\r\n\t\t);\r\n\t}\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n\t0% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n\t}\r\n\t100% {\r\n\t\ttransform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n\t}\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(1, 1, 1);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale3d(1.1, 1.1, 1);\r\n\t}\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: scale(5, 0);\r\n\t}\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(-30px);\r\n\t\ttransform: translateY(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-30px);\r\n\t\t-ms-transform: translateY(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n\t0% {\r\n\t\topacity: 10;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(-30px);\r\n\t\ttransform: translateY(-30px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(-30px);\r\n\t\t-ms-transform: translateY(-30px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t\t-ms-transform: translateY(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateY(20px);\r\n\t\ttransform: translateY(20px);\r\n\t\t-ms-transform: translateY(20px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-20px);\r\n\t\ttransform: translateX(-20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-30px);\r\n\t\ttransform: translateX(-30px);\r\n\t\t-ms-transform: translateX(-30px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-30px);\r\n\t\ttransform: translateX(-30px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(-20px);\r\n\t\ttransform: translateX(-20px);\r\n\t\t-ms-transform: translateX(-20px);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n\t0% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t\t-ms-transform: translateX(20px);\r\n\t}\r\n\t100% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t}\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n\t0% {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translateX(0);\r\n\t\ttransform: translateX(0);\r\n\t\t-ms-transform: translateX(0);\r\n\t}\r\n\t100% {\r\n\t\topacity: 0;\r\n\t\t-webkit-transform: translateX(20px);\r\n\t\ttransform: translateX(20px);\r\n\t\t-ms-transform: translateX(20px);\r\n\t}\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n\tanimation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n\tanimation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n\tanimation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n\tanimation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n\tanimation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n\tanimation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n\tanimation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n\tanimation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n\tanimation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n\tanimation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n\tanimation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n\tanimation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n\tanimation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n\tanimation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n\tanimation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n\tanimation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n\tanimation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n\tanimation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n\tanimation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n\tanimation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n\tanimation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n\tanimation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n\tanimation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n\tanimation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n\tanimation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n\tanimation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n\tanimation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n\tanimation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n\tanimation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n\tanimation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
2635
-
2636
- var alertCSS = ".pops[type-value] .pops-alert-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"alert\"] .pops-alert-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n";
2637
-
2638
- var confirmCSS = ".pops[type-value] .pops-confirm-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"confirm\"] .pops-confirm-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n";
2639
-
2640
- var promptCSS = ".pops[type-value] .pops-prompt-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"prompt\"] .pops-prompt-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops] {\r\n\tpadding: 5px 10px;\r\n}\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n\tpadding: 5px 10px;\r\n\tresize: none;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops],\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tcolor: rgb(51, 51, 51);\r\n}\r\n";
2641
-
2642
- var loadingCSS = ".pops[type-value=\"loading\"] {\r\n\tposition: absolute;\r\n\ttop: 272.5px;\r\n\ttop: 50%;\r\n\tleft: 26px;\r\n\tleft: 50%;\r\n\tdisplay: flex;\r\n\toverflow: hidden;\r\n\tpadding: 10px 15px;\r\n\tmax-width: 100%;\r\n\tmax-height: 100%;\r\n\tmin-width: 0;\r\n\tmin-height: 0;\r\n\tborder: 1px solid rgba(0, 0, 0, 0.2);\r\n\tborder-radius: 5px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 5px rgb(0 0 0 / 50%);\r\n\tvertical-align: middle;\r\n\ttransition: all 0.35s;\r\n\ttransform: translate(-50%, -50%);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"loading\"]:before {\r\n\tfloat: left;\r\n\tdisplay: inline-block;\r\n\twidth: 2em;\r\n\theight: 2em;\r\n\tborder: 0.3em solid rgba(100, 149, 237, 0.1);\r\n\tborder-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \" \";\r\n\tvertical-align: middle;\r\n\tfont-size: inherit;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content {\r\n\tposition: static;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tfloat: left;\r\n\toverflow: hidden;\r\n\twidth: auto;\r\n\tfont-size: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content p[pops] {\r\n\tdisplay: inline-block;\r\n\tpadding: 5px 0px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\tfont-size: inherit;\r\n\ttext-align: center;\r\n}\r\n";
2643
-
2644
- var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n\t--container-title-height: 55px;\r\n\ttransition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title {\r\n\twidth: calc(100% - 0px);\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content {\r\n\twidth: 100%;\r\n\t/*height: calc(100% - var(--container-title-height));*/\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: #333;\r\n\ttext-indent: 15px;\r\n}\r\n.pops-loading {\r\n\tposition: absolute;\r\n\ttop: 40px;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tz-index: 5;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 3;\r\n\tdisplay: block;\r\n\tmargin: -20px 0 0 -20px;\r\n\tpadding: 20px;\r\n\tborder: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \"\";\r\n\tborder-top-color: transparent;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n\tbottom: 0;\r\n\tmax-width: 200px;\r\n\tmax-height: 53px;\r\n\tposition: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"]\r\n\t.pops-header-control[type=\"min\"] {\r\n\tdisplay: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n\ttop: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n\tleft: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n\ttransform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n\ttransition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n\twidth: 100% !important;\r\n\theight: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n\twidth: calc(100% - 4px);\r\n\theight: calc(100% - 4px);\r\n\tborder: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: 999999;\r\n\twidth: 0;\r\n\theight: 4px;\r\n\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\tanimation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n\tposition: unset;\r\n}\r\n";
2645
-
2646
- var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n\tposition: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n\tposition: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
2647
-
2648
- var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
2649
-
2650
- var folderCSS = ".pops[type-value] .pops-folder-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"folder\"] .pops-folder-btn {\r\n\t/*position: absolute;\r\n\tbottom: 0;*/\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .cursor-p {\r\n\tcursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n\tbackground: 0 0;\r\n\ttext-decoration: none;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tcolor: #05082c;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\twidth: 100%;\r\n\ttable-layout: fixed;\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n\tpadding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n\theight: 100%;\r\n\tbackground: 0 0;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -ms-flexbox;\r\n\t-ms-flex-direction: column;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n\theight: 100%;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: rgb(129, 137, 153);\r\n\ttext-align: left;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n\theight: 50px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tcolor: #03081a;\r\n\tfont-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n\tbackground: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n\tborder: 0;\r\n\tborder-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n\tposition: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n\tdisplay: inline-block;\r\n\tpadding-left: 12px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmax-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding: 6px 0px;\r\n\tflex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n\twidth: 45px;\r\n\theight: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n\tpadding-left: unset;\r\n\tmax-width: 250px;\r\n\toverflow-x: hidden;\r\n\tfont-weight: 400;\r\n\tline-height: unset;\r\n\tmargin-bottom: 4px;\r\n\twhite-space: normal;\r\n\ttext-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n\toverflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n\theight: 100%;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tpadding-bottom: 85px;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n\theight: 100%;\r\n\tpadding-bottom: 40px;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n\toverflow: auto;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n\tdisplay: none;\r\n}\r\n\r\n.pops-folder-list-file-name-title-text:hover {\r\n\ttext-decoration: none;\r\n\tcolor: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .text-ellip {\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n\tcolor: rgb(129, 137, 153);\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\ttext-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n\tdisplay: inline-block;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n\twidth: 32px;\r\n\theight: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tposition: relative;\r\n\tvertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\tmin-height: 17px;\r\n\tflex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n\tdisplay: inline-flex;\r\n\tmargin-left: 4px;\r\n\tflex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tfill: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n\tfill: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n\tpadding: 4px 20px;\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-box-align: center;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-orient: horizontal;\r\n\t-webkit-box-direction: normal;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-box-pack: start;\r\n\t-webkit-justify-content: start;\r\n\t-ms-flex-pack: start;\r\n\tjustify-content: flex-start;\r\n\tmin-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n\tfont-size: 12px;\r\n\tcolor: #333;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tfont-weight: 700;\r\n\tdisplay: inline-block;\r\n\tmax-width: 140px;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tword-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n\tcolor: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n\tfont-size: 14px;\r\n\tcolor: rgb(18, 22, 26);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n\tbackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n\t\t55% 50%/6px 9px no-repeat;\r\n}\r\n";
2651
-
2652
- var panelCSS = ".pops[type-value=\"panel\"] {\r\n\t--el-disabled-text-color: #a8abb2;\r\n\t--el-disabled-bg-color: #f5f7fa;\r\n\t--el-disabled-border-color: #e4e7ed;\r\n\t--pops-bg-color: #f2f2f2;\r\n\t--pops-color: #333;\r\n\t--title-bg-color: #ffffff;\r\n\t--aside-bg-color: #ffffff;\r\n\t--aside-hover-color: rgb(64, 158, 255);\r\n\t--aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n\t--pops-panel-forms-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-margin-left-right: 20px;\r\n\t--pops-panel-forms-header-icon-size: 20px;\r\n\t--pops-panel-forms-header-padding-top-bottom: 15px;\r\n\t--pops-panel-forms-header-padding-left-right: 10px;\r\n\t--pops-panel-forms-container-item-bg-color: #ffffff;\r\n\t--pops-panel-forms-container-item-title-color: #333;\r\n\t--pops-panel-forms-container-item-border-radius: 6px;\r\n\t--pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n\t--pops-panel-forms-container-item-margin-left-right: var(\r\n\t\t--pops-panel-forms-margin-left-right\r\n\t);\r\n\t--pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n\t--pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n\tcolor: var(--pops-color);\r\n\tbackground: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tbackground: var(--title-bg-color);\r\n}\r\n\r\n.pops[type-value=\"panel\"] .pops-panel-title {\r\n\twidth: 100%;\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-content {\r\n\twidth: 100%;\r\n\t/*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"panel\"] .pops-panel-btn {\r\n\tdisplay: flex;\r\n\tpadding: 10px 10px 10px 10px;\r\n\twidth: 100%;\r\n\theight: var(--container-bottom-btn-height);\r\n\tmax-height: var(--container-bottom-btn-height);\r\n\tline-height: normal;\r\n\tborder-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: right;\r\n\talign-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n\toverflow: auto;\r\n\tbox-sizing: border-box;\r\n\tflex-shrink: 0;\r\n\tmax-width: 200px;\r\n\tmin-width: 100px;\r\n\theight: 100%;\r\n\tbackground: var(--aside-bg-color);\r\n\tborder-right: 1px solid var(--aside-bg-color);\r\n\tfont-size: 0.9em;\r\n}\r\naside.pops-panel-aside {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex: 1;\r\n\toverflow: auto;\r\n\tflex-basis: auto;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 0;\r\n\tbottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tdisplay: flex;\r\n\tflex-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\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\tflex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n\ttext-align: left;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start !important;\r\n\tmargin: 0px !important;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t\t);\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n\toverflow: auto;\r\n\tflex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n\tmargin: 6px 8px;\r\n\tborder-radius: 4px;\r\n\tpadding: 6px 10px;\r\n\tcursor: default;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:hover {\r\n\tcolor: var(--aside-hover-color);\r\n\tbackground: var(--aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-margin-left-right)\r\n\t\t);\r\n\tgap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n\tmargin: 10px;\r\n\tmargin-left: calc(\r\n\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\tvar(--pops-panel-forms-container-li-padding-left-right)\r\n\t);\r\n\tfont-size: 0.9em;\r\n\ttext-align: left;\r\n\tcolor: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n\tdisplay: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\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 rgb(229, 229, 229, var(--pops-bd-opacity));\r\n\ttext-align: left;\r\n}\r\nsection.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)\r\n\t\tvar(--pops-panel-forms-container-li-padding-left-right);\r\n\tmargin: 0px;\r\n\tborder-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n\tborder: 0;\r\n}\r\n/* 主文字 */\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\t.pops-panel-item-left-text\r\n\t.pops-panel-item-left-main-text {\r\n\tline-height: 2;\r\n}*/\r\n/* 描述文字 */\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\t.pops-panel-item-left-text\r\n\t.pops-panel-item-left-desc-text {\r\n\tline-height: normal;\r\n\tmargin-top: 6px;\r\n\tfont-size: 0.8em;\r\n\tcolor: rgb(108, 108, 108);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n\tborder-radius: var(--pops-panel-forms-container-item-border-radius);\r\n\tbackground: var(--pops-panel-forms-container-item-bg-color);\r\n\tmargin: var(--pops-panel-forms-margin-top-bottom)\r\n\t\tvar(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfill: #6c6c6c;\r\n\tjustify-content: space-between;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-fold-container-icon {\r\n\ttransform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-fold-container-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\ttransform: rotate(-90deg);\r\n\ttransition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold[data-fold-enable]\r\n\t.pops-panel-forms-container-item-formlist {\r\n\theight: 0;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-forms-fold\r\n\t.pops-panel-forms-container-item-formlist {\r\n\ttransition: height 0.3s;\r\n\toverflow: hidden;\r\n\tborder-radius: unset;\r\n\tbackground: unset;\r\n\tmargin: 0;\r\n\theight: auto;\r\n\theight: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n\t/* 兼容移动端CSS */\r\n\t.pops[type-value=\"panel\"] {\r\n\t\t--pops-panel-forms-margin-left-right: 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] {\r\n\t\twidth: 92%;\r\n\t\twidth: 92vw;\r\n\t\twidth: 92dvw;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n\t\tmax-width: 20%;\r\n\t\tmin-width: auto;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\t> div {\r\n\t\ttext-align: left;\r\n\t\t--pops-panel-forms-margin-left-right: 0px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-forms-container-item\r\n\t\tul {\r\n\t\tmargin: 0px !important;\r\n\t}\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n\t\tmargin: 10px 10px;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t> ul\r\n\t\t> li\r\n\t\tdiv:nth-child(2) {\r\n\t\tmax-width: 55%;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-select\r\n\t\tselect {\r\n\t\tmin-width: 88px !important;\r\n\t\twidth: -webkit-fill-available;\r\n\t\twidth: -moz-available;\r\n\t}\r\n\t.pops[type-value=\"panel\"]\r\n\t\tsection.pops-panel-container\r\n\t\t.pops-panel-container-header-ul\r\n\t\tli {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\t.pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n\t.pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n\t.pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n\t\tfont-size: 14px;\r\n\t}\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n\tdisplay: inline-flex;\r\n\tflex-direction: row-reverse;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfont-size: 14px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\theight: 32px;\r\n\tvertical-align: middle;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\topacity: 0;\r\n\tmargin: 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\r\n\tinput.pops-panel-switch__input:disabled\r\n\t+ .pops-panel-switch__core {\r\n\tcursor: not-allowed;\r\n\topacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n\tdisplay: inline-flex;\r\n\tposition: relative;\r\n\talign-items: center;\r\n\tmin-width: 40px;\r\n\theight: 20px;\r\n\tborder: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));\r\n\toutline: 0;\r\n\tborder-radius: 10px;\r\n\tbox-sizing: border-box;\r\n\tbackground: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n\tcursor: pointer;\r\n\ttransition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n\tposition: absolute;\r\n\tleft: 1px;\r\n\tborder-radius: 100%;\r\n\ttransition: all 0.3s;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tcolor: rgb(220, 223, 230);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n\tborder-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n\tleft: calc(100% - 17px);\r\n\tcolor: rgb(64, 158, 255);\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\toverflow: hidden;\r\n\theight: 25px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n\theight: 6px;\r\n\tbackground: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n\toutline: 0;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\twidth: 100%;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-webkit-slider-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tborder-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-thumb {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\tborder-radius: 50%;\r\n\tborder: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n\tcursor: pointer;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n}\r\nsection.pops-panel-container\r\n\t.pops-panel-slider\r\n\tinput[type=\"range\"]::-moz-range-progress {\r\n\theight: 6px;\r\n\tborder-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\t--pops-slider-color-white: #ffffff;\r\n\t--pops-slider-color-primary: #409eff;\r\n\t--pops-slider-color-info: #909399;\r\n\t--pops-slider-text-color-placeholder: #a8abb2;\r\n\t--pops-slider-border-color-light: #e4e7ed;\r\n\t--pops-slider-border-radius-circle: 100%;\r\n\t--pops-slider-transition-duration-fast: 0.2s;\r\n\r\n\t--pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n\t--pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n\t--pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n\t--pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n\t--pops-slider-border-radius: 3px;\r\n\t--pops-slider-height: 6px;\r\n\t--pops-slider-button-size: 20px;\r\n\t--pops-slider-button-wrapper-size: 36px;\r\n\t--pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n\twidth: 100%;\r\n\theight: 32px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-ms-user-select: none;\r\n\t-moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n\tflex: 0 0 52%;\r\n\tmargin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n\tflex: 1;\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-runway-bg-color);\r\n\tborder-radius: var(--pops-slider-border-radius);\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n\tmargin-right: 30px;\r\n\twidth: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n\tcursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n\tbackground-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n\tborder-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\tcursor: 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\ttransform: 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\tcursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n\tflex-shrink: 0;\r\n\twidth: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n\theight: var(--pops-slider-height);\r\n\tbackground-color: var(--pops-slider-main-bg-color);\r\n\tborder-top-left-radius: var(--pops-slider-border-radius);\r\n\tborder-bottom-left-radius: var(--pops-slider-border-radius);\r\n\tposition: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n\theight: var(--pops-slider-button-wrapper-size);\r\n\twidth: var(--pops-slider-button-wrapper-size);\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\ttop: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translate(-50%);\r\n\tbackground-color: transparent;\r\n\ttext-align: center;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tline-height: normal;\r\n\toutline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n\tdisplay: inline-block;\r\n\tcontent: \"\";\r\n\theight: 100%;\r\n\tvertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n\tdisplay: inline-block;\r\n\twidth: var(--pops-slider-button-size);\r\n\theight: var(--pops-slider-button-size);\r\n\tvertical-align: middle;\r\n\tborder: solid 2px var(--pops-slider-main-bg-color);\r\n\tbackground-color: var(--pops-slider-color-white);\r\n\tborder-radius: 50%;\r\n\tbox-sizing: border-box;\r\n\ttransition: var(--pops-slider-transition-duration-fast);\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-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\ttransform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n\tcursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n\tcursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n\tposition: absolute;\r\n\theight: var(--pops-slider-height);\r\n\twidth: var(--pops-slider-height);\r\n\tborder-radius: var(--pops-slider-border-radius-circle);\r\n\tbackground-color: var(--pops-slider-stop-bg-color);\r\n\ttransform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n\ttop: 0;\r\n\tleft: 12px;\r\n\twidth: 18px;\r\n\theight: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n\tposition: absolute;\r\n\ttransform: translate(-50%);\r\n\tfont-size: 14px;\r\n\tcolor: var(--pops-slider-color-info);\r\n\tmargin-top: 15px;\r\n\twhite-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\twidth: auto;\r\n\theight: 100%;\r\n\tflex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n\twidth: var(--pops-slider-height);\r\n\theight: 100%;\r\n\tmargin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n\twidth: var(--pops-slider-height);\r\n\theight: auto;\r\n\tborder-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n\ttop: auto;\r\n\tleft: var(--pops-slider-button-wrapper-offset);\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n\tmargin-top: 0;\r\n\tleft: 15px;\r\n\ttransform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n\theight: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n\theight: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tborder: 1px solid #dcdfe6;\r\n\tborder-radius: 4px;\r\n\tbackground-color: #ffffff;\r\n\tposition: relative;\r\n}\r\n.pops-panel-input:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n\toutline: 0;\r\n\tborder: 1px solid #409eff;\r\n\tborder-radius: 4px;\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\ttext-align: start;\r\n\talign-items: center;\r\n\talign-content: center;\r\n\twhite-space: nowrap;\r\n\tcursor: text;\r\n\tbox-sizing: border-box;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tvertical-align: middle;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbackground-color: transparent;\r\n\toutline: 0;\r\n\ttransition: 0.1s;\r\n\tborder: 0;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\theight: 32px;\r\n\twidth: 100%;\r\n\tflex: 1;\r\n\tmargin-right: calc(1em + 8px);\r\n\tpadding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n\tdisplay: inline-flex;\r\n\twhite-space: nowrap;\r\n\tflex-shrink: 0;\r\n\tflex-wrap: nowrap;\r\n\theight: 100%;\r\n\ttext-align: center;\r\n\tcolor: #a8abb2;\r\n\ttransition: all 0.3s;\r\n\tpointer-events: none;\r\n\tmargin: 0 8px;\r\n\tposition: absolute;\r\n\tright: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n\tpointer-events: all;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n\theight: inherit;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n\tbackground-color: var(--el-disabled-bg-color);\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n\tborder: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n\tbox-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tcolor: var(--el-disabled-text-color);\r\n\t-webkit-text-fill-color: var(--el-disabled-text-color);\r\n\tcursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n\tdisplay: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea textarea {\r\n\twidth: 100%;\r\n\t/*vertical-align: bottom;*/\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tresize: none;\r\n\tpadding: 5px 11px;\r\n\t/*line-height: 1;*/\r\n\tbox-sizing: border-box;\r\n\tfont-size: inherit;\r\n\tfont-family: inherit;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbackground-image: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tbox-shadow: 0 0 0 1px #dcdfe6 inset;\r\n\tborder-radius: 0;\r\n\ttransition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n\tborder: none;\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n\toutline: 0;\r\n\tbox-shadow: 0 0 0 1px #409eff inset;\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select select {\r\n\theight: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tmin-width: 200px;\r\n\tborder: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));\r\n\tborder-radius: 5px;\r\n\ttext-align: center;\r\n\toutline: 0;\r\n\tbackground: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n\tbox-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n\tbox-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n\tborder: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n\tbox-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n\t--el-border-radius-base: 4px;\r\n\t--el-fill-color-blank: #ffffff;\r\n\t--el-transition-duration: 0.3s;\r\n\t--el-border-color: #dcdfe6;\r\n\t--el-text-color-placeholder: #a8abb2;\r\n\t--color: inherit;\r\n\t--el-select-input-color: #a8abb2;\r\n\t--el-select-input-font-size: 14px;\r\n\t--el-text-color-regular: #606266;\r\n\t--el-color-info: #909399;\r\n\t--el-color-info-light-9: #f4f4f5;\r\n\t--el-color-info-light-8: #e9e9eb;\r\n\t--el-color-primary-light-9: #ecf5ff;\r\n\t--el-color-primary-light-8: #d9ecff;\r\n\t--el-color-primary: #409eff;\r\n\t--el-color-white: #ffffff;\r\n\twidth: 200px;\r\n\t/* 左侧内容*/\r\n\t/* 左侧内容*/\r\n\t/* 右侧箭头图标*/\r\n\t/* 右侧箭头图标*/\r\n\t/* tag*/\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tbox-sizing: border-box;\r\n\tcursor: pointer;\r\n\ttext-align: left;\r\n\tfont-size: 14px;\r\n\tpadding: 4px 12px;\r\n\tgap: 6px;\r\n\tmin-height: 32px;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-radius: var(--el-border-radius-base);\r\n\tbackground-color: var(--el-fill-color-blank);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: translateZ(0);\r\n\tbox-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n\tbox-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tflex: 1;\r\n\tmin-width: 0;\r\n\tgap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n\t.el-select__selected-item.el-select__choose_tag\r\n\t.el-tag {\r\n\tmax-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n\tmax-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n\tmargin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tcolor: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n\tcolor: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tflex-shrink: 0;\r\n\tgap: 6px;\r\n\tcolor: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n\t--color: inherit;\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: var(--color);\r\n\tfont-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n\tcolor: var(--el-select-input-color);\r\n\tfont-size: var(--el-select-input-font-size);\r\n\ttransition: var(--el-transition-duration);\r\n\ttransform: rotate(0);\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\t--el-tag-font-size: 12px;\r\n\t--el-tag-border-radius: 4px;\r\n\t--el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n\tbackground-color: var(--el-tag-bg-color);\r\n\tborder-color: var(--el-tag-border-color);\r\n\tcolor: var(--el-tag-text-color);\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tvertical-align: middle;\r\n\theight: 24px;\r\n\tpadding: 0 9px;\r\n\tfont-size: var(--el-tag-font-size);\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tborder-width: 1px;\r\n\tborder-style: solid;\r\n\tborder-radius: var(--el-tag-border-radius);\r\n\tbox-sizing: border-box;\r\n\twhite-space: nowrap;\r\n\t--el-icon-size: 14px;\r\n\t--el-tag-bg-color: var(--el-color-primary-light-9);\r\n\t--el-tag-border-color: var(--el-color-primary-light-8);\r\n\t--el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n\tcursor: pointer;\r\n\tborder-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-bg-color: var(--el-color-info-light-9);\r\n\t--el-tag-border-color: var(--el-color-info-light-8);\r\n\t--el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n\t--el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n\tpadding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n\tmin-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tflex-shrink: 0;\r\n\tcolor: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n\tcolor: var(--el-color-white);\r\n\tbackground-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tfont-size: calc(var(--el-icon-size) - 2px);\r\n\theight: var(--el-icon-size);\r\n\twidth: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n\tmargin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n\tdisplay: block;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n\tcursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n\tbackground: #e9e9e9;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcolor: #6c6c6c;\r\n\tfill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n\twidth: 15px;\r\n\theight: 15px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\tpadding: var(--pops-panel-forms-header-padding-top-bottom)\r\n\t\tcalc(\r\n\t\t\tvar(--pops-panel-forms-margin-left-right) +\r\n\t\t\t\tvar(--pops-panel-forms-container-li-padding-left-right) -\r\n\t\t\t\tvar(--pops-panel-forms-header-icon-size)\r\n\t\t);\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n\twidth: var(--pops-panel-forms-header-icon-size);\r\n\theight: var(--pops-panel-forms-header-icon-size);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tcursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n\t.pops-panel-deepMenu-container-left-arrow-icon\r\n\t> svg {\r\n\twidth: inherit;\r\n\theight: inherit;\r\n}\r\n/* deepMenu的css */\r\n";
2653
-
2654
- var rightClickMenuCSS = ".pops-rightClickMenu * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\tscrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n\tposition: fixed;\r\n\tz-index: 10000;\r\n\ttext-align: center;\r\n\tborder-radius: 3px;\r\n\tfont-size: 16px;\r\n\tfont-weight: 500;\r\n\tbackground: #fff;\r\n\tbox-shadow: 0px 1px 6px 1px #cacaca;\r\n}\r\n.pops-rightClickMenu-anim-grid {\r\n\tdisplay: grid;\r\n\ttransition: 0.3s;\r\n\tgrid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n\tgrid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n\tbackground: #dfdfdf;\r\n}\r\ni.pops-rightClickMenu-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n\tmargin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n\tbackground: #dfdfdf;\r\n\tcursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: center;\r\n\toverflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n\tpadding: 5px 10px;\r\n\tmargin: 2.5px 5px;\r\n\tborder-radius: 3px;\r\n\tdisplay: flex;\r\n\twidth: -webkit-fill-available;\r\n\twidth: -moz-available;\r\n\ttext-align: left;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\talign-items: center;\r\n}\r\n.pops-rightClickMenu ul li:first-child {\r\n\tmargin-top: 5px;\r\n}\r\n.pops-rightClickMenu ul li:last-child {\r\n\tmargin-bottom: 5px;\r\n}\r\n";
2655
-
2656
- var SVG_min = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\"></path>\r\n</svg>\r\n";
2657
-
2658
- var SVG_mise = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M885.333333 85.333333H330.410667a53.333333 53.333333 0 0 0-53.333334 53.333334v106.666666H138.666667A53.333333 53.333333 0 0 0 85.333333 298.666667v586.666666a53.333333 53.333333 0 0 0 53.333334 53.333334H725.333333a53.333333 53.333333 0 0 0 53.333334-53.333334V746.154667h106.666666c29.44 0 53.333333-23.893333 53.333334-53.333334V138.666667A53.333333 53.333333 0 0 0 885.333333 85.333333zM725.333333 692.821333v192.512H138.666667V298.666667H725.333333v394.154666z m157.866667 0H778.666667V298.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H330.410667v-106.666666h554.922666l-2.133333 554.154666z\"></path>\r\n</svg>\r\n";
2659
-
2660
- var SVG_max = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z\"></path>\r\n</svg>\r\n";
2661
-
2662
- var SVG_close = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z\"></path>\r\n</svg>\r\n";
2663
-
2664
- var SVG_edit = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z\"></path>\r\n</svg>\r\n";
2665
-
2666
- var SVG_share = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m679.872 348.8-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z\"></path>\r\n</svg>\r\n";
2667
-
2668
- var SVG_delete = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z\"></path>\r\n</svg>\r\n";
2669
-
2670
- var SVG_search = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z\"></path>\r\n</svg>\r\n";
2671
-
2672
- var SVG_upload = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z\"></path>\r\n</svg>\r\n";
2673
-
2674
- var SVG_loading = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z\"></path>\r\n</svg>\r\n";
2675
-
2676
- var SVG_next = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2677
-
2678
- var SVG_prev = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2679
-
2680
- var SVG_eleme = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44 5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72 54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z\"></path>\r\n</svg>\r\n";
2681
-
2682
- var SVG_elemePlus = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\td=\"M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z\"\r\n\t\tfill=\"currentColor\"></path>\r\n</svg>\r\n";
2683
-
2684
- var SVG_chromeFilled = "<svg\r\n\txmlns=\"http://www.w3.org/2000/svg\"\r\n\tviewBox=\"0 0 1024 1024\"\r\n\txml:space=\"preserve\">\r\n\t<path\r\n\t\td=\"M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z\"\r\n\t\tfill=\"currentColor\"></path>\r\n\t<path\r\n\t\td=\"M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z\"\r\n\t\tfill=\"currentColor\"></path>\r\n\t<path\r\n\t\td=\"M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z\"\r\n\t\tfill=\"currentColor\"></path>\r\n</svg>\r\n";
2685
-
2686
- var SVG_cpu = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z\"></path>\r\n</svg>\r\n";
2687
-
2688
- var SVG_videoPlay = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z\"></path>\r\n</svg>\r\n";
2689
-
2690
- var SVG_videoPause = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z\"></path>\r\n</svg>\r\n";
2691
-
2692
- var SVG_headset = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z\"></path>\r\n</svg>\r\n";
2693
-
2694
- var SVG_monitor = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z\"></path>\r\n</svg>\r\n";
2695
-
2696
- var SVG_documentCopy = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z\"></path>\r\n</svg>\r\n";
2697
-
2698
- var SVG_picture = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952L185.408 876.992z\"></path>\r\n</svg>\r\n";
2699
-
2700
- var SVG_circleClose = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896\"></path>\r\n</svg>\r\n";
2701
-
2702
- var SVG_view = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160\"></path>\r\n</svg>\r\n";
2703
-
2704
- var SVG_hide = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z\"></path>\r\n</svg>\r\n";
2705
-
2706
- var SVG_keyboard = "<svg viewBox=\"0 0 1123 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\td=\"M1014.122186 1024H109.753483A109.753483 109.753483 0 0 1 0 914.246517V392.917471a109.753483 109.753483 0 0 1 109.753483-109.753484h904.368703a109.753483 109.753483 0 0 1 109.753484 109.753484v521.329046a109.753483 109.753483 0 0 1-109.753484 109.753483zM109.753483 370.966774a21.950697 21.950697 0 0 0-21.950696 21.950697v521.329046a21.950697 21.950697 0 0 0 21.950696 21.950696h904.368703a21.950697 21.950697 0 0 0 21.950697-21.950696V392.917471a21.950697 21.950697 0 0 0-21.950697-21.950697z\"></path>\r\n\t<path\r\n\t\td=\"M687.056806 891.198285H307.309753a43.901393 43.901393 0 0 1 0-87.802787h379.747053a43.901393 43.901393 0 0 1 0 87.802787zM175.605573 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM432.428725 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM947.172562 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 546.572347a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 803.395498a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 678.276527a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM948.270096 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394z\"></path>\r\n\t<path\r\n\t\td=\"M881.320472 766.079314H689.251876a43.901393 43.901393 0 0 1 0-87.802787h192.068596a21.950697 21.950697 0 0 0 21.950696-21.950696v-65.85209a43.901393 43.901393 0 0 1 87.802787 0v65.85209a109.753483 109.753483 0 0 1-109.753483 109.753483zM305.114684 502.670954H175.605573a43.901393 43.901393 0 0 1 0-87.802787h129.509111a43.901393 43.901393 0 0 1 0 87.802787zM563.03537 365.4791a43.901393 43.901393 0 0 1-43.901394-43.901394v-105.363344A109.753483 109.753483 0 0 1 628.88746 106.460879h61.461951a21.950697 21.950697 0 0 0 21.950696-21.950697V43.901393a43.901393 43.901393 0 0 1 87.802787 0v40.608789a109.753483 109.753483 0 0 1-109.753483 109.753484h-61.461951a21.950697 21.950697 0 0 0-21.950697 21.950696v105.363344a43.901393 43.901393 0 0 1-43.901393 43.901394z\"></path>\r\n</svg>\r\n";
2707
-
2708
- var SVG_arrowRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\td=\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2709
-
2710
- var SVG_arrowLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\td=\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2711
-
2712
2741
  const GlobalConfig = {
2713
2742
  config: {},
2714
2743
  /**
@@ -2771,58 +2800,176 @@
2771
2800
  },
2772
2801
  };
2773
2802
 
2774
- const PopsElementHandler = {
2775
- /**
2776
- * 获取遮罩层HTML
2777
- * @param guid
2778
- * @param zIndex z-index
2779
- * @param style
2780
- */
2781
- getMaskHTML(guid, zIndex = 101, style = "") {
2782
- zIndex = zIndex - 100;
2783
- if (style.startsWith(";")) {
2784
- style = style.replace(";", "");
2785
- }
2786
- return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
2787
- },
2788
- /**
2789
- * 获取动画层HTML
2790
- * @param guid
2791
- * @param type
2792
- * @param config
2793
- * @param html
2794
- * @param bottomBtnHTML
2795
- * @param zIndex
2796
- */
2797
- getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
2798
- let __config = config;
2799
- let popsAnimStyle = "";
2800
- let popsStyle = "";
2801
- let popsPosition = __config.position || "";
2802
- if (config.zIndex != null) {
2803
- popsAnimStyle += `z-index: ${zIndex};`;
2804
- popsStyle += `z-index: ${zIndex};`;
2805
- }
2806
- if (__config.width != null) {
2807
- popsStyle += `width: ${__config.width};`;
2808
- }
2809
- if (__config.height != null) {
2810
- popsStyle += `height: ${__config.height};`;
2811
- }
2812
- let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
2813
- return /*html*/ `
2814
- <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null
2815
- ? `<style tyle="text/css">${config.style}</style>`
2816
- : ""}
2817
- <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2818
- </div>`;
2819
- },
2820
- /**
2821
- * 获取顶部按钮层HTML
2822
- * @param type
2823
- * @param config
2824
- */
2825
- getHeaderBtnHTML(type, config) {
2803
+ var SVG_min = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\"></path>\r\n</svg>\r\n";
2804
+
2805
+ var SVG_mise = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M885.333333 85.333333H330.410667a53.333333 53.333333 0 0 0-53.333334 53.333334v106.666666H138.666667A53.333333 53.333333 0 0 0 85.333333 298.666667v586.666666a53.333333 53.333333 0 0 0 53.333334 53.333334H725.333333a53.333333 53.333333 0 0 0 53.333334-53.333334V746.154667h106.666666c29.44 0 53.333333-23.893333 53.333334-53.333334V138.666667A53.333333 53.333333 0 0 0 885.333333 85.333333zM725.333333 692.821333v192.512H138.666667V298.666667H725.333333v394.154666z m157.866667 0H778.666667V298.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H330.410667v-106.666666h554.922666l-2.133333 554.154666z\"></path>\r\n</svg>\r\n";
2806
+
2807
+ var SVG_max = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z\"></path>\r\n</svg>\r\n";
2808
+
2809
+ var SVG_close = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z\"></path>\r\n</svg>\r\n";
2810
+
2811
+ var SVG_edit = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z\"></path>\r\n</svg>\r\n";
2812
+
2813
+ var SVG_share = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m679.872 348.8-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z\"></path>\r\n</svg>\r\n";
2814
+
2815
+ var SVG_delete = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z\"></path>\r\n</svg>\r\n";
2816
+
2817
+ var SVG_search = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z\"></path>\r\n</svg>\r\n";
2818
+
2819
+ var SVG_upload = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z\"></path>\r\n</svg>\r\n";
2820
+
2821
+ var SVG_loading = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z\"></path>\r\n</svg>\r\n";
2822
+
2823
+ var SVG_next = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2824
+
2825
+ var SVG_prev = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2826
+
2827
+ var SVG_eleme = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M300.032 188.8c174.72-113.28 408-63.36 522.24 109.44 5.76 10.56 11.52 20.16 17.28 30.72v.96a22.4 22.4 0 0 1-7.68 26.88l-352.32 228.48c-9.6 6.72-22.08 3.84-28.8-5.76l-18.24-27.84a54.336 54.336 0 0 1 16.32-74.88l225.6-146.88c9.6-6.72 12.48-19.2 5.76-28.8-.96-1.92-1.92-3.84-3.84-4.8a267.84 267.84 0 0 0-315.84-17.28c-123.84 81.6-159.36 247.68-78.72 371.52a268.096 268.096 0 0 0 370.56 78.72 54.336 54.336 0 0 1 74.88 16.32l17.28 26.88c5.76 9.6 3.84 21.12-4.8 27.84-8.64 7.68-18.24 14.4-28.8 21.12a377.92 377.92 0 0 1-522.24-110.4c-113.28-174.72-63.36-408 111.36-522.24zm526.08 305.28a22.336 22.336 0 0 1 28.8 5.76l23.04 35.52a63.232 63.232 0 0 1-18.24 87.36l-35.52 23.04c-9.6 6.72-22.08 3.84-28.8-5.76l-46.08-71.04c-6.72-9.6-3.84-22.08 5.76-28.8l71.04-46.08z\"></path>\r\n</svg>\r\n";
2828
+
2829
+ var SVG_elemePlus = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\td=\"M839.7 734.7c0 33.3-17.9 41-17.9 41S519.7 949.8 499.2 960c-10.2 5.1-20.5 5.1-30.7 0 0 0-314.9-184.3-325.1-192-5.1-5.1-10.2-12.8-12.8-20.5V368.6c0-17.9 20.5-28.2 20.5-28.2L466 158.6c12.8-5.1 25.6-5.1 38.4 0 0 0 279 161.3 309.8 179.2 17.9 7.7 28.2 25.6 25.6 46.1-.1-5-.1 317.5-.1 350.8zM714.2 371.2c-64-35.8-217.6-125.4-217.6-125.4-7.7-5.1-20.5-5.1-30.7 0L217.6 389.1s-17.9 10.2-17.9 23v297c0 5.1 5.1 12.8 7.7 17.9 7.7 5.1 256 148.5 256 148.5 7.7 5.1 17.9 5.1 25.6 0 15.4-7.7 250.9-145.9 250.9-145.9s12.8-5.1 12.8-30.7v-74.2l-276.5 169v-64c0-17.9 7.7-30.7 20.5-46.1L745 535c5.1-7.7 10.2-20.5 10.2-30.7v-66.6l-279 169v-69.1c0-15.4 5.1-30.7 17.9-38.4l220.1-128zM919 135.7c0-5.1-5.1-7.7-7.7-7.7h-58.9V66.6c0-5.1-5.1-5.1-10.2-5.1l-30.7 5.1c-5.1 0-5.1 2.6-5.1 5.1V128h-56.3c-5.1 0-5.1 5.1-7.7 5.1v38.4h69.1v64c0 5.1 5.1 5.1 10.2 5.1l30.7-5.1c5.1 0 5.1-2.6 5.1-5.1v-56.3h64l-2.5-38.4z\"\r\n\t\tfill=\"currentColor\"></path>\r\n</svg>\r\n";
2830
+
2831
+ var SVG_chromeFilled = "<svg\r\n\txmlns=\"http://www.w3.org/2000/svg\"\r\n\tviewBox=\"0 0 1024 1024\"\r\n\txml:space=\"preserve\">\r\n\t<path\r\n\t\td=\"M938.67 512.01c0-44.59-6.82-87.6-19.54-128H682.67a212.372 212.372 0 0 1 42.67 128c.06 38.71-10.45 76.7-30.42 109.87l-182.91 316.8c235.65-.01 426.66-191.02 426.66-426.67z\"\r\n\t\tfill=\"currentColor\"></path>\r\n\t<path\r\n\t\td=\"M576.79 401.63a127.92 127.92 0 0 0-63.56-17.6c-22.36-.22-44.39 5.43-63.89 16.38s-35.79 26.82-47.25 46.02a128.005 128.005 0 0 0-2.16 127.44l1.24 2.13a127.906 127.906 0 0 0 46.36 46.61 127.907 127.907 0 0 0 63.38 17.44c22.29.2 44.24-5.43 63.68-16.33a127.94 127.94 0 0 0 47.16-45.79v-.01l1.11-1.92a127.984 127.984 0 0 0 .29-127.46 127.957 127.957 0 0 0-46.36-46.91z\"\r\n\t\tfill=\"currentColor\"></path>\r\n\t<path\r\n\t\td=\"M394.45 333.96A213.336 213.336 0 0 1 512 298.67h369.58A426.503 426.503 0 0 0 512 85.34a425.598 425.598 0 0 0-171.74 35.98 425.644 425.644 0 0 0-142.62 102.22l118.14 204.63a213.397 213.397 0 0 1 78.67-94.21zM512.01 938.68H512zM414.76 701.95a213.284 213.284 0 0 1-89.54-86.81L142.48 298.6c-36.35 62.81-57.13 135.68-57.13 213.42 0 203.81 142.93 374.22 333.95 416.55h.04l118.19-204.71a213.315 213.315 0 0 1-122.77-21.91z\"\r\n\t\tfill=\"currentColor\"></path>\r\n</svg>\r\n";
2832
+
2833
+ var SVG_cpu = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z\"></path>\r\n</svg>\r\n";
2834
+
2835
+ var SVG_videoPlay = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z\"></path>\r\n</svg>\r\n";
2836
+
2837
+ var SVG_videoPause = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z\"></path>\r\n</svg>\r\n";
2838
+
2839
+ var SVG_headset = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M896 529.152V512a384 384 0 1 0-768 0v17.152A128 128 0 0 1 320 640v128a128 128 0 1 1-256 0V512a448 448 0 1 1 896 0v256a128 128 0 1 1-256 0V640a128 128 0 0 1 192-110.848zM896 640a64 64 0 0 0-128 0v128a64 64 0 0 0 128 0V640zm-768 0v128a64 64 0 0 0 128 0V640a64 64 0 1 0-128 0z\"></path>\r\n</svg>\r\n";
2840
+
2841
+ var SVG_monitor = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M544 768v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768H192A128 128 0 0 1 64 640V256a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H544zM192 192a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H192z\"></path>\r\n</svg>\r\n";
2842
+
2843
+ var SVG_documentCopy = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M128 320v576h576V320H128zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32zM960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z\"></path>\r\n</svg>\r\n";
2844
+
2845
+ var SVG_picture = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M160 160v704h704V160H160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64zM185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952L185.408 876.992z\"></path>\r\n</svg>\r\n";
2846
+
2847
+ var SVG_circleClose = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896\"></path>\r\n</svg>\r\n";
2848
+
2849
+ var SVG_view = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160\"></path>\r\n</svg>\r\n";
2850
+
2851
+ var SVG_hide = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z\"></path>\r\n\t<path\r\n\t\tfill=\"currentColor\"\r\n\t\td=\"M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z\"></path>\r\n</svg>\r\n";
2852
+
2853
+ var SVG_keyboard = "<svg viewBox=\"0 0 1123 1024\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t<path\r\n\t\td=\"M1014.122186 1024H109.753483A109.753483 109.753483 0 0 1 0 914.246517V392.917471a109.753483 109.753483 0 0 1 109.753483-109.753484h904.368703a109.753483 109.753483 0 0 1 109.753484 109.753484v521.329046a109.753483 109.753483 0 0 1-109.753484 109.753483zM109.753483 370.966774a21.950697 21.950697 0 0 0-21.950696 21.950697v521.329046a21.950697 21.950697 0 0 0 21.950696 21.950696h904.368703a21.950697 21.950697 0 0 0 21.950697-21.950696V392.917471a21.950697 21.950697 0 0 0-21.950697-21.950697z\"></path>\r\n\t<path\r\n\t\td=\"M687.056806 891.198285H307.309753a43.901393 43.901393 0 0 1 0-87.802787h379.747053a43.901393 43.901393 0 0 1 0 87.802787zM175.605573 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM432.428725 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM947.172562 414.868167a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 546.572347a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM690.349411 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 546.572347a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM818.760986 803.395498a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM175.605573 678.276527a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394zM304.017149 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM432.428725 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM561.937835 678.276527a43.901393 43.901393 0 1 0 43.901393 43.901394 43.901393 43.901393 0 0 0-43.901393-43.901394zM948.270096 803.395498a43.901393 43.901393 0 1 0 43.901394 43.901394 43.901393 43.901393 0 0 0-43.901394-43.901394z\"></path>\r\n\t<path\r\n\t\td=\"M881.320472 766.079314H689.251876a43.901393 43.901393 0 0 1 0-87.802787h192.068596a21.950697 21.950697 0 0 0 21.950696-21.950696v-65.85209a43.901393 43.901393 0 0 1 87.802787 0v65.85209a109.753483 109.753483 0 0 1-109.753483 109.753483zM305.114684 502.670954H175.605573a43.901393 43.901393 0 0 1 0-87.802787h129.509111a43.901393 43.901393 0 0 1 0 87.802787zM563.03537 365.4791a43.901393 43.901393 0 0 1-43.901394-43.901394v-105.363344A109.753483 109.753483 0 0 1 628.88746 106.460879h61.461951a21.950697 21.950697 0 0 0 21.950696-21.950697V43.901393a43.901393 43.901393 0 0 1 87.802787 0v40.608789a109.753483 109.753483 0 0 1-109.753483 109.753484h-61.461951a21.950697 21.950697 0 0 0-21.950697 21.950696v105.363344a43.901393 43.901393 0 0 1-43.901393 43.901394z\"></path>\r\n</svg>\r\n";
2854
+
2855
+ var SVG_arrowRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\td=\"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2856
+
2857
+ var SVG_arrowLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\td=\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
2858
+
2859
+ const PopsIcon = {
2860
+ $data: {
2861
+ min: SVG_min,
2862
+ mise: SVG_mise,
2863
+ max: SVG_max,
2864
+ close: SVG_close,
2865
+ edit: SVG_edit,
2866
+ share: SVG_share,
2867
+ delete: SVG_delete,
2868
+ search: SVG_search,
2869
+ upload: SVG_upload,
2870
+ loading: SVG_loading,
2871
+ next: SVG_next,
2872
+ prev: SVG_prev,
2873
+ eleme: SVG_eleme,
2874
+ elemePlus: SVG_elemePlus,
2875
+ chromeFilled: SVG_chromeFilled,
2876
+ cpu: SVG_cpu,
2877
+ videoPlay: SVG_videoPlay,
2878
+ videoPause: SVG_videoPause,
2879
+ headset: SVG_headset,
2880
+ monitor: SVG_monitor,
2881
+ documentCopy: SVG_documentCopy,
2882
+ picture: SVG_picture,
2883
+ circleClose: SVG_circleClose,
2884
+ view: SVG_view,
2885
+ hide: SVG_hide,
2886
+ keyboard: SVG_keyboard,
2887
+ arrowRight: SVG_arrowRight,
2888
+ arrowLeft: SVG_arrowLeft,
2889
+ },
2890
+ /**
2891
+ * 判断是否存在某个icon
2892
+ * @param iconName 图标名
2893
+ */
2894
+ hasIcon(iconName) {
2895
+ return Object.keys(PopsIcon.$data).includes(iconName);
2896
+ },
2897
+ /**
2898
+ * 获取icon
2899
+ * @param iconName 图标名
2900
+ */
2901
+ getIcon(iconName) {
2902
+ return PopsIcon.$data[iconName];
2903
+ },
2904
+ /**
2905
+ * 删除图标
2906
+ * @param iconName 图标名
2907
+ */
2908
+ deleteIcon(iconName) {
2909
+ return Reflect.deleteProperty(PopsIcon.$data, iconName);
2910
+ },
2911
+ /**
2912
+ * 设置图标
2913
+ * @param iconName 图标名
2914
+ * @param iconHTML 图标html
2915
+ */
2916
+ setIcon(iconName, iconHTML) {
2917
+ Reflect.set(PopsIcon.$data, iconName, iconHTML);
2918
+ },
2919
+ };
2920
+
2921
+ const PopsElementHandler = {
2922
+ /**
2923
+ * 获取遮罩层HTML
2924
+ * @param guid
2925
+ * @param zIndex z-index
2926
+ * @param style
2927
+ */
2928
+ getMaskHTML(guid, zIndex = 101, style = "") {
2929
+ zIndex = zIndex - 100;
2930
+ if (style.startsWith(";")) {
2931
+ style = style.replace(";", "");
2932
+ }
2933
+ return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
2934
+ },
2935
+ /**
2936
+ * 获取动画层HTML
2937
+ * @param guid
2938
+ * @param type
2939
+ * @param config
2940
+ * @param html
2941
+ * @param bottomBtnHTML
2942
+ * @param zIndex
2943
+ */
2944
+ getAnimHTML(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
2945
+ let __config = config;
2946
+ let popsAnimStyle = "";
2947
+ let popsStyle = "";
2948
+ let popsPosition = __config.position || "";
2949
+ if (config.zIndex != null) {
2950
+ popsAnimStyle += `z-index: ${zIndex};`;
2951
+ popsStyle += `z-index: ${zIndex};`;
2952
+ }
2953
+ if (__config.width != null) {
2954
+ popsStyle += `width: ${__config.width};`;
2955
+ }
2956
+ if (__config.height != null) {
2957
+ popsStyle += `height: ${__config.height};`;
2958
+ }
2959
+ let hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
2960
+ return /*html*/ `
2961
+ <div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null
2962
+ ? `<style tyle="text/css">${config.style}</style>`
2963
+ : ""}
2964
+ <div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
2965
+ </div>`;
2966
+ },
2967
+ /**
2968
+ * 获取顶部按钮层HTML
2969
+ * @param type
2970
+ * @param config
2971
+ */
2972
+ getHeaderBtnHTML(type, config) {
2826
2973
  if (!config.btn) {
2827
2974
  return "";
2828
2975
  }
@@ -2841,7 +2988,7 @@
2841
2988
  item = item.toLowerCase();
2842
2989
  topRightButtonHTML += /*html*/ `
2843
2990
  <button class="pops-header-control" type="${item}">
2844
- <i class="pops-icon">${pops.config.iconSVG[item]}</i>
2991
+ <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
2845
2992
  </button>`;
2846
2993
  });
2847
2994
  resultHTML = /*html*/ `
@@ -2852,7 +2999,7 @@
2852
2999
  closeHTML = /*html*/ `
2853
3000
  <div class="pops-header-controls">
2854
3001
  <button class="pops-header-control" type="close" data-header>
2855
- <i class="pops-icon">${pops.config.iconSVG["close"]}</i>
3002
+ <i class="pops-icon">${PopsIcon.getIcon("close")}</i>
2856
3003
  </button>
2857
3004
  </div>`;
2858
3005
  }
@@ -2902,8 +3049,8 @@
2902
3049
  if (okIcon !== "") {
2903
3050
  // 判断图标是否是svg库内的
2904
3051
  let iconHTML = "";
2905
- if (okIcon in pops.config.iconSVG) {
2906
- iconHTML = pops.config.iconSVG[okIcon];
3052
+ if (PopsIcon.hasIcon(okIcon)) {
3053
+ iconHTML = PopsIcon.getIcon(okIcon);
2907
3054
  }
2908
3055
  else {
2909
3056
  iconHTML = okIcon;
@@ -2936,8 +3083,8 @@
2936
3083
  if (cancelIcon !== "") {
2937
3084
  let iconHTML = "";
2938
3085
  // 判断图标是否是svg库内的
2939
- if (cancelIcon in pops.config.iconSVG) {
2940
- iconHTML = pops.config.iconSVG[cancelIcon];
3086
+ if (PopsIcon.hasIcon(cancelIcon)) {
3087
+ iconHTML = PopsIcon.getIcon(cancelIcon);
2941
3088
  }
2942
3089
  else {
2943
3090
  iconHTML = cancelIcon;
@@ -2970,8 +3117,8 @@
2970
3117
  if (otherIcon !== "") {
2971
3118
  let iconHTML = "";
2972
3119
  // 判断图标是否是svg库内的
2973
- if (otherIcon in pops.config.iconSVG) {
2974
- iconHTML = pops.config.iconSVG[otherIcon];
3120
+ if (PopsIcon.hasIcon(otherIcon)) {
3121
+ iconHTML = PopsIcon.getIcon(otherIcon);
2975
3122
  }
2976
3123
  iconHTML = iconHTML || "";
2977
3124
  otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">${iconHTML}</i>`;
@@ -3036,7 +3183,7 @@
3036
3183
  * @param html
3037
3184
  */
3038
3185
  parseElement(html) {
3039
- return popsUtils.parseTextToDOM(html);
3186
+ return popsDOMUtils.parseTextToDOM(html);
3040
3187
  },
3041
3188
  };
3042
3189
 
@@ -3067,7 +3214,7 @@
3067
3214
  * @param cssText 添加进ShadowRoot的CSS
3068
3215
  */
3069
3216
  handleInit($shadowRoot, cssText) {
3070
- pops.init();
3217
+ PopsAnimation.init();
3071
3218
  if (!arguments.length) {
3072
3219
  return;
3073
3220
  }
@@ -3093,7 +3240,7 @@
3093
3240
  */
3094
3241
  handleMask(details = {}) {
3095
3242
  let result = {
3096
- maskElement: popsUtils.parseTextToDOM(details.maskHTML),
3243
+ maskElement: popsDOMUtils.parseTextToDOM(details.maskHTML),
3097
3244
  };
3098
3245
  let isMaskClick = false;
3099
3246
  /**
@@ -3103,7 +3250,7 @@
3103
3250
  function clickEvent(event) {
3104
3251
  popsDOMUtils.preventEvent(event);
3105
3252
  // 获取该类型实例存储列表
3106
- let targetLayer = pops.config.layer[details.type];
3253
+ let targetLayer = PopsLayer[details.type];
3107
3254
  function originalRun() {
3108
3255
  if (details.config.mask.clickEvent.toClose) {
3109
3256
  /* 关闭 */
@@ -3290,13 +3437,13 @@
3290
3437
  mode: mode,
3291
3438
  guid: guid,
3292
3439
  close() {
3293
- return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
3440
+ return PopsInstanceUtils.close(mode, PopsLayer[mode], guid, config, animElement);
3294
3441
  },
3295
3442
  hide() {
3296
- return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
3443
+ return PopsInstanceUtils.hide(mode, PopsLayer[mode], guid, config, animElement, maskElement);
3297
3444
  },
3298
3445
  show() {
3299
- return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
3446
+ return PopsInstanceUtils.show(mode, PopsLayer[mode], guid, config, animElement, maskElement);
3300
3447
  },
3301
3448
  };
3302
3449
  },
@@ -3318,13 +3465,13 @@
3318
3465
  mode: mode,
3319
3466
  guid: guid,
3320
3467
  close() {
3321
- return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
3468
+ return PopsInstanceUtils.close(mode, PopsLayer[mode], guid, config, animElement);
3322
3469
  },
3323
3470
  hide() {
3324
- return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
3471
+ return PopsInstanceUtils.hide(mode, PopsLayer[mode], guid, config, animElement, maskElement);
3325
3472
  },
3326
3473
  show() {
3327
- return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
3474
+ return PopsInstanceUtils.show(mode, PopsLayer[mode], guid, config, animElement, maskElement);
3328
3475
  },
3329
3476
  };
3330
3477
  },
@@ -3436,20 +3583,20 @@
3436
3583
  if (type === "loading" ||
3437
3584
  type === "tooltip" ||
3438
3585
  type === "rightClickMenu") {
3439
- let layer = pops.config.layer[type];
3586
+ let layer = PopsLayer[type];
3440
3587
  if (layer) {
3441
3588
  PopsInstanceUtils.removeInstance([layer], "", true);
3442
3589
  }
3443
3590
  }
3444
3591
  else {
3445
3592
  PopsInstanceUtils.removeInstance([
3446
- pops.config.layer.alert,
3447
- pops.config.layer.confirm,
3448
- pops.config.layer.prompt,
3449
- pops.config.layer.iframe,
3450
- pops.config.layer.drawer,
3451
- pops.config.layer.folder,
3452
- pops.config.layer.panel,
3593
+ PopsLayer.alert,
3594
+ PopsLayer.confirm,
3595
+ PopsLayer.prompt,
3596
+ PopsLayer.iframe,
3597
+ PopsLayer.drawer,
3598
+ PopsLayer.folder,
3599
+ PopsLayer.panel,
3453
3600
  ], "", true);
3454
3601
  }
3455
3602
  }
@@ -3470,7 +3617,7 @@
3470
3617
  * @param value
3471
3618
  */
3472
3619
  handlePush(type, value) {
3473
- pops.config.layer[type].push(value);
3620
+ PopsLayer[type].push(value);
3474
3621
  },
3475
3622
  };
3476
3623
 
@@ -3546,13 +3693,13 @@
3546
3693
  config = PopsHandler.handleOnly(PopsType, config);
3547
3694
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
3548
3695
  PopsHandler.handleInit($shadowRoot, [
3549
- pops.config.cssText.index,
3550
- pops.config.cssText.ninePalaceGridPosition,
3551
- pops.config.cssText.scrollbar,
3552
- pops.config.cssText.button,
3553
- pops.config.cssText.anim,
3554
- pops.config.cssText.common,
3555
- pops.config.cssText.alertCSS,
3696
+ PopsCSS.index,
3697
+ PopsCSS.ninePalaceGridPosition,
3698
+ PopsCSS.scrollbar,
3699
+ PopsCSS.button,
3700
+ PopsCSS.anim,
3701
+ PopsCSS.common,
3702
+ PopsCSS.alertCSS,
3556
3703
  ]);
3557
3704
  // 先把z-index提取出来
3558
3705
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -3729,13 +3876,13 @@
3729
3876
  config = PopsHandler.handleOnly(PopsType, config);
3730
3877
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
3731
3878
  PopsHandler.handleInit($shadowRoot, [
3732
- pops.config.cssText.index,
3733
- pops.config.cssText.ninePalaceGridPosition,
3734
- pops.config.cssText.scrollbar,
3735
- pops.config.cssText.button,
3736
- pops.config.cssText.anim,
3737
- pops.config.cssText.common,
3738
- pops.config.cssText.confirmCSS,
3879
+ PopsCSS.index,
3880
+ PopsCSS.ninePalaceGridPosition,
3881
+ PopsCSS.scrollbar,
3882
+ PopsCSS.button,
3883
+ PopsCSS.anim,
3884
+ PopsCSS.common,
3885
+ PopsCSS.confirmCSS,
3739
3886
  ]);
3740
3887
  // 先把z-index提取出来
3741
3888
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -3917,13 +4064,13 @@
3917
4064
  config = PopsHandler.handleOnly(PopsType, config);
3918
4065
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
3919
4066
  PopsHandler.handleInit($shadowRoot, [
3920
- pops.config.cssText.index,
3921
- pops.config.cssText.ninePalaceGridPosition,
3922
- pops.config.cssText.scrollbar,
3923
- pops.config.cssText.button,
3924
- pops.config.cssText.anim,
3925
- pops.config.cssText.common,
3926
- pops.config.cssText.promptCSS,
4067
+ PopsCSS.index,
4068
+ PopsCSS.ninePalaceGridPosition,
4069
+ PopsCSS.scrollbar,
4070
+ PopsCSS.button,
4071
+ PopsCSS.anim,
4072
+ PopsCSS.common,
4073
+ PopsCSS.promptCSS,
3927
4074
  ]);
3928
4075
  // 先把z-index提取出来
3929
4076
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -4062,13 +4209,13 @@
4062
4209
  /*html*/ `
4063
4210
  <div class="pops-loading-content">${config.addIndexCSS
4064
4211
  ? /*html*/ `
4065
- <style data-model-name="index">${pops.config.cssText.index}</style>
4066
- <style data-model-name="anim">${pops.config.cssText.anim}</style>
4067
- <style data-model-name="common">${pops.config.cssText.common}</style>
4212
+ <style data-model-name="index">${PopsCSS.index}</style>
4213
+ <style data-model-name="anim">${PopsCSS.anim}</style>
4214
+ <style data-model-name="common">${PopsCSS.common}</style>
4068
4215
  `
4069
4216
  : ""}
4070
4217
  <style data-model-name="loadingCSS">
4071
- ${pops.config.cssText.loadingCSS}
4218
+ ${PopsCSS.loadingCSS}
4072
4219
  </style>
4073
4220
  ${config.style != null ? `<style>${config.style}</style>` : ""}
4074
4221
  <p pops style="${contentPStyle}">${config.content.text}</p>
@@ -4192,12 +4339,12 @@
4192
4339
  config = PopsHandler.handleOnly(PopsType, config);
4193
4340
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4194
4341
  PopsHandler.handleInit($shadowRoot, [
4195
- pops.config.cssText.index,
4196
- pops.config.cssText.ninePalaceGridPosition,
4197
- pops.config.cssText.scrollbar,
4198
- pops.config.cssText.anim,
4199
- pops.config.cssText.common,
4200
- pops.config.cssText.iframeCSS,
4342
+ PopsCSS.index,
4343
+ PopsCSS.ninePalaceGridPosition,
4344
+ PopsCSS.scrollbar,
4345
+ PopsCSS.anim,
4346
+ PopsCSS.common,
4347
+ PopsCSS.iframeCSS,
4201
4348
  ]);
4202
4349
  let maskExtraStyle =
4203
4350
  // @ts-ignore
@@ -4392,7 +4539,7 @@
4392
4539
  popsDOMUtils.on(headerCloseBtnElement, "click", (event) => {
4393
4540
  event.preventDefault();
4394
4541
  event.stopPropagation();
4395
- PopsInstanceUtils.removeInstance([pops.config.layer.iframe], guid, false);
4542
+ PopsInstanceUtils.removeInstance([PopsLayer.iframe], guid, false);
4396
4543
  if (typeof config?.btn?.close?.callback === "function") {
4397
4544
  config.btn.close.callback(eventDetails, event);
4398
4545
  }
@@ -4510,13 +4657,13 @@
4510
4657
  config = PopsHandler.handleOnly(PopsType, config);
4511
4658
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4512
4659
  PopsHandler.handleInit($shadowRoot, [
4513
- pops.config.cssText.index,
4514
- pops.config.cssText.ninePalaceGridPosition,
4515
- pops.config.cssText.scrollbar,
4516
- pops.config.cssText.button,
4517
- pops.config.cssText.anim,
4518
- pops.config.cssText.common,
4519
- pops.config.cssText.drawerCSS,
4660
+ PopsCSS.index,
4661
+ PopsCSS.ninePalaceGridPosition,
4662
+ PopsCSS.scrollbar,
4663
+ PopsCSS.button,
4664
+ PopsCSS.anim,
4665
+ PopsCSS.common,
4666
+ PopsCSS.drawerCSS,
4520
4667
  ]);
4521
4668
  // 先把z-index提取出来
4522
4669
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -4837,13 +4984,13 @@
4837
4984
  config = PopsHandler.handleOnly(PopsType, config);
4838
4985
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
4839
4986
  PopsHandler.handleInit($shadowRoot, [
4840
- pops.config.cssText.index,
4841
- pops.config.cssText.ninePalaceGridPosition,
4842
- pops.config.cssText.scrollbar,
4843
- pops.config.cssText.button,
4844
- pops.config.cssText.anim,
4845
- pops.config.cssText.common,
4846
- pops.config.cssText.folderCSS,
4987
+ PopsCSS.index,
4988
+ PopsCSS.ninePalaceGridPosition,
4989
+ PopsCSS.scrollbar,
4990
+ PopsCSS.button,
4991
+ PopsCSS.anim,
4992
+ PopsCSS.common,
4993
+ PopsCSS.folderCSS,
4847
4994
  ]);
4848
4995
  /* 办公几件套 */
4849
4996
  // @ts-ignore
@@ -4923,7 +5070,7 @@
4923
5070
  <div class="pops-folder-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
4924
5071
  ? config.title.text
4925
5072
  : `<p pops style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
4926
- <div class="pops-folder-content ${pops.isPhone() ? "pops-mobile-folder-content" : ""}">
5073
+ <div class="pops-folder-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
4927
5074
  <div class="pops-folder-list">
4928
5075
  <div class="pops-folder-file-list-breadcrumb">
4929
5076
  <div class="pops-folder-file-list-breadcrumb-primary">
@@ -5005,7 +5152,7 @@
5005
5152
  <div class="pops-folder-list-table__body-div">
5006
5153
  <table class="pops-folder-list-table__body">
5007
5154
  <colgroup>
5008
- ${pops.isPhone()
5155
+ ${popsUtils.isPhone()
5009
5156
  ? `<col width="100%">`
5010
5157
  : `
5011
5158
  <col width="52%">
@@ -5267,7 +5414,7 @@
5267
5414
  else {
5268
5415
  console.error("获取导航按钮失败");
5269
5416
  }
5270
- let loadingMask = pops.loading({
5417
+ let loadingMask = PopsLoading.init({
5271
5418
  parent: $content,
5272
5419
  content: {
5273
5420
  text: "获取文件列表中...",
@@ -5291,7 +5438,7 @@
5291
5438
  */
5292
5439
  async function refreshFolderInfoClickEvent(event, _config_) {
5293
5440
  clearFolerRow();
5294
- let loadingMask = pops.loading({
5441
+ let loadingMask = PopsLoading.init({
5295
5442
  parent: $content,
5296
5443
  content: {
5297
5444
  text: "获取文件列表中...",
@@ -5487,7 +5634,7 @@
5487
5634
  sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
5488
5635
  _config_.forEach((item) => {
5489
5636
  if (item["isFolder"]) {
5490
- let { folderELement, fileNameElement } = pops.isPhone()
5637
+ let { folderELement, fileNameElement } = popsUtils.isPhone()
5491
5638
  ? createMobileFolderRowElement(item["fileName"], "", "", true)
5492
5639
  : createFolderRowElement(item["fileName"], "", "", true);
5493
5640
  popsDOMUtils.on(fileNameElement, "click", (event) => {
@@ -5496,7 +5643,7 @@
5496
5643
  folderListBodyElement.appendChild(folderELement);
5497
5644
  }
5498
5645
  else {
5499
- let { folderELement, fileNameElement } = pops.isPhone()
5646
+ let { folderELement, fileNameElement } = popsUtils.isPhone()
5500
5647
  ? createMobileFolderRowElement(item["fileName"], item.latestTime, item.fileSize, false)
5501
5648
  : createFolderRowElement(item["fileName"], item.latestTime, item.fileSize, false);
5502
5649
  setFileClickEvent(fileNameElement, item);
@@ -5744,6 +5891,7 @@
5744
5891
  return "50";
5745
5892
  },
5746
5893
  callback(event, value) {
5894
+ popsDOMUtils.preventEvent(event);
5747
5895
  console.log("输入框内容改变:", value);
5748
5896
  },
5749
5897
  placeholder: "请输入内容",
@@ -5759,6 +5907,7 @@
5759
5907
  return "123456";
5760
5908
  },
5761
5909
  callback(event, value) {
5910
+ popsDOMUtils.preventEvent(event);
5762
5911
  console.log("密码输入框内容改变:", value);
5763
5912
  },
5764
5913
  isPassword: true,
@@ -5775,6 +5924,7 @@
5775
5924
  return "50";
5776
5925
  },
5777
5926
  callback(event, value) {
5927
+ popsDOMUtils.preventEvent(event);
5778
5928
  console.log("textarea输入框内容改变:", value);
5779
5929
  },
5780
5930
  placeholder: "请输入内容",
@@ -6134,401 +6284,954 @@
6134
6284
  },
6135
6285
  };
6136
6286
 
6137
- const PanelHandleContentDetails = () => {
6287
+ const PopsTooltipConfig = () => {
6288
+ // @ts-ignore
6138
6289
  return {
6139
- /**
6140
- * 左侧的ul容器
6141
- */
6142
- asideULElement: null,
6143
- /**
6144
- * 右侧主内容的顶部文字ul容器
6145
- */
6146
- sectionContainerHeaderULElement: null,
6147
- /**
6148
- * 右侧主内容的ul容器
6149
- */
6150
- sectionContainerULElement: null,
6151
- /**
6152
- * 元素
6153
- */
6154
- $el: {
6155
- /** 内容 */
6156
- $content: null,
6157
- /** 左侧容器 */
6158
- $contentAside: null,
6159
- /** 右侧容器 */
6160
- $contentSectionContainer: null,
6161
- },
6162
- /**
6163
- * 初始化
6164
- * @param details
6165
- */
6166
- init(details) {
6167
- // @ts-ignore
6168
- this.$el = null;
6169
- this.$el = {
6170
- ...details.$el,
6171
- };
6172
- this.asideULElement =
6173
- this.$el.$contentAside.querySelector("ul");
6174
- this.sectionContainerHeaderULElement =
6175
- this.$el.$contentSectionContainer.querySelectorAll("ul")[0];
6176
- this.sectionContainerULElement =
6177
- this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
6178
- /**
6179
- * 默认点击的左侧容器项
6180
- */
6181
- let $asideDefaultItemElement = null;
6182
- /** 是否滚动到默认位置(第一个项) */
6183
- let isScrollToDefaultView = false;
6184
- details.config.content.forEach((asideItemConfig) => {
6185
- let $asideLiElement = this.createAsideItem(asideItemConfig);
6186
- this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
6187
- this.asideULElement.appendChild($asideLiElement);
6188
- if ($asideDefaultItemElement == null) {
6189
- let flag = false;
6190
- if (typeof asideItemConfig.isDefault === "function") {
6191
- flag = Boolean(asideItemConfig.isDefault());
6192
- }
6193
- else {
6194
- flag = Boolean(asideItemConfig.isDefault);
6195
- }
6196
- if (flag) {
6197
- $asideDefaultItemElement = $asideLiElement;
6198
- isScrollToDefaultView = Boolean(asideItemConfig.scrollToDefaultView);
6199
- }
6200
- }
6201
- if (typeof asideItemConfig.afterRender === "function") {
6202
- // 执行渲染完毕的回调
6203
- asideItemConfig.afterRender({
6204
- asideConfig: asideItemConfig,
6205
- $asideLiElement: $asideLiElement,
6206
- });
6207
- }
6208
- });
6209
- /* 点击左侧列表 */
6210
- if ($asideDefaultItemElement == null &&
6211
- this.asideULElement.children.length) {
6212
- /* 默认第一个 */
6213
- $asideDefaultItemElement = this.asideULElement
6214
- .children[0];
6215
- }
6216
- if ($asideDefaultItemElement) {
6217
- /* 点击选择的那一项 */
6218
- $asideDefaultItemElement.click();
6219
- if (isScrollToDefaultView) {
6220
- $asideDefaultItemElement?.scrollIntoView();
6221
- }
6222
- }
6223
- else {
6224
- console.error("pops.panel:左侧容器没有项");
6225
- }
6226
- },
6227
- /**
6228
- * 清空container容器的元素
6229
- */
6230
- clearContainer() {
6231
- PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
6232
- PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
6233
- this.$el.$content
6234
- ?.querySelectorAll("section.pops-panel-deepMenu-container")
6235
- .forEach((ele) => ele.remove());
6236
- },
6237
- /**
6238
- * 清空左侧容器已访问记录
6239
- */
6240
- clearAsideItemIsVisited() {
6241
- this.$el.$contentAside
6242
- .querySelectorAll(".pops-is-visited")
6243
- .forEach((element) => {
6244
- popsDOMUtils.removeClassName(element, "pops-is-visited");
6245
- });
6246
- },
6247
- /**
6248
- * 设置左侧容器已访问记录
6249
- * @param element
6250
- */
6251
- setAsideItemIsVisited(element) {
6252
- popsDOMUtils.addClassName(element, "pops-is-visited");
6290
+ useShadowRoot: true,
6291
+ target: null,
6292
+ content: "默认文字",
6293
+ isDiffContent: false,
6294
+ position: "top",
6295
+ className: "",
6296
+ isFixed: false,
6297
+ alwaysShow: false,
6298
+ triggerShowEventName: "mouseenter touchstart",
6299
+ triggerCloseEventName: "mouseleave touchend",
6300
+ zIndex: 10000,
6301
+ only: false,
6302
+ eventOption: {
6303
+ passive: false,
6304
+ capture: true,
6305
+ once: false,
6253
6306
  },
6254
- /**
6255
- * 为元素添加自定义属性
6256
- * @param element
6257
- * @param attributes
6258
- */
6259
- setElementAttributes(element, attributes) {
6260
- if (attributes == null) {
6261
- return;
6262
- }
6263
- if (Array.isArray(attributes)) {
6264
- attributes.forEach((attrObject) => {
6265
- this.setElementAttributes(element, attrObject);
6266
- });
6267
- }
6268
- else {
6269
- Object.keys(attributes).forEach((attributeName) => {
6270
- element.setAttribute(attributeName, attributes[attributeName]);
6271
- });
6272
- }
6273
- },
6274
- /**
6275
- * 为元素设置(自定义)属性
6276
- * @param element
6277
- * @param props
6278
- */
6279
- setElementProps(element, props) {
6280
- if (props == null) {
6281
- return;
6282
- }
6283
- Object.keys(props).forEach((propName) => {
6284
- let value = props[propName];
6285
- if (propName === "innerHTML") {
6286
- PopsSafeUtils.setSafeHTML(element, value);
6307
+ showBeforeCallBack() { },
6308
+ showAfterCallBack() { },
6309
+ closeBeforeCallBack() { },
6310
+ closeAfterCallBack() { },
6311
+ delayCloseTime: 100,
6312
+ showArrow: true,
6313
+ arrowDistance: 12.5,
6314
+ otherDistance: 0,
6315
+ style: "",
6316
+ beforeAppendToPageCallBack() { },
6317
+ };
6318
+ };
6319
+
6320
+ class ToolTip {
6321
+ $el = {
6322
+ $shadowContainer: null,
6323
+ $shadowRoot: null,
6324
+ $toolTip: null,
6325
+ $content: null,
6326
+ $arrow: null,
6327
+ };
6328
+ $data = {
6329
+ config: null,
6330
+ guid: null,
6331
+ timeId_close_TouchEvent: [],
6332
+ timeId_close_MouseEvent: [],
6333
+ };
6334
+ constructor(config, guid, ShadowInfo) {
6335
+ this.$data.config = config;
6336
+ this.$data.guid = guid;
6337
+ this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
6338
+ this.$el.$shadowRoot = ShadowInfo.$shadowRoot;
6339
+ this.show = this.show.bind(this);
6340
+ this.close = this.close.bind(this);
6341
+ this.toolTipAnimationFinishEvent =
6342
+ this.toolTipAnimationFinishEvent.bind(this);
6343
+ this.toolTipMouseEnterEvent = this.toolTipMouseEnterEvent.bind(this);
6344
+ this.toolTipMouseLeaveEvent = this.toolTipMouseLeaveEvent.bind(this);
6345
+ this.init();
6346
+ }
6347
+ init() {
6348
+ let toolTipInfo = this.createToolTip();
6349
+ this.$el.$toolTip = toolTipInfo.$toolTipContainer;
6350
+ this.$el.$content = toolTipInfo.$toolTipContent;
6351
+ this.$el.$arrow = toolTipInfo.$toolTipArrow;
6352
+ this.changeContent();
6353
+ this.changeZIndex();
6354
+ this.changePosition();
6355
+ if (!this.$data.config.alwaysShow) {
6356
+ this.offEvent();
6357
+ this.onEvent();
6358
+ }
6359
+ }
6360
+ /**
6361
+ * 创建提示元素
6362
+ */
6363
+ createToolTip() {
6364
+ let $toolTipContainer = popsDOMUtils.createElement("div", {
6365
+ className: "pops-tip",
6366
+ innerHTML: /*html*/ `
6367
+ <div class="pops-tip-content" style="text-align: center;"></div>
6368
+ <div class="pops-tip-arrow"></div>
6369
+ `,
6370
+ }, {
6371
+ "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
6372
+ "data-guid": this.$data.guid,
6373
+ });
6374
+ /** 内容 */
6375
+ let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
6376
+ /** 箭头 */
6377
+ let $toolTipArrow = $toolTipContainer.querySelector(".pops-tip-arrow");
6378
+ // 处理className
6379
+ if (typeof this.$data.config.className === "string" &&
6380
+ this.$data.config.className.trim() !== "") {
6381
+ popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
6382
+ }
6383
+ // 添加z-index
6384
+ $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
6385
+ if (this.$data.config.style != null) {
6386
+ /* 添加自定义style */
6387
+ let cssNode = popsDOMUtils.createElement("style", {
6388
+ type: "text/css",
6389
+ innerHTML: this.$data.config.style,
6390
+ });
6391
+ $toolTipContainer.appendChild(cssNode);
6392
+ }
6393
+ // 处理是否显示箭头元素
6394
+ if (!this.$data.config.showArrow) {
6395
+ $toolTipArrow.remove();
6396
+ }
6397
+ return {
6398
+ $toolTipContainer: $toolTipContainer,
6399
+ $toolTipArrow: $toolTipArrow,
6400
+ $toolTipContent: $toolTipContent,
6401
+ };
6402
+ }
6403
+ /**
6404
+ * 获取提示的内容
6405
+ */
6406
+ getContent() {
6407
+ return typeof this.$data.config.content === "function"
6408
+ ? this.$data.config.content()
6409
+ : this.$data.config.content;
6410
+ }
6411
+ /**
6412
+ * 修改提示的内容
6413
+ * @param text
6414
+ */
6415
+ changeContent(text) {
6416
+ if (text == null) {
6417
+ text = this.getContent();
6418
+ }
6419
+ if (this.$data.config.isDiffContent) {
6420
+ let contentPropKey = "data-content";
6421
+ // @ts-ignore
6422
+ let originContentText = this.$el.$content[contentPropKey];
6423
+ if (typeof originContentText === "string") {
6424
+ if (originContentText === text) {
6425
+ // 内容未改变,不修改避免渲染
6287
6426
  return;
6288
6427
  }
6289
- Reflect.set(element, propName, value);
6290
- });
6291
- },
6292
- /**
6293
- * 为元素设置classname
6294
- * @param element
6295
- * @param className
6296
- */
6297
- setElementClassName(element, className) {
6298
- if (className == null) {
6299
- return;
6300
6428
  }
6301
- if (typeof className === "function") {
6302
- className = className();
6429
+ // @ts-ignore
6430
+ this.$el.$content[contentPropKey] = text;
6431
+ }
6432
+ PopsSafeUtils.setSafeHTML(this.$el.$content, text);
6433
+ }
6434
+ /**
6435
+ * 获取z-index
6436
+ */
6437
+ getZIndex() {
6438
+ const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
6439
+ return zIndex;
6440
+ }
6441
+ /**
6442
+ * 动态修改z-index
6443
+ */
6444
+ changeZIndex() {
6445
+ const zIndex = this.getZIndex();
6446
+ this.$el.$toolTip.style.setProperty("z-index", zIndex.toString());
6447
+ }
6448
+ /**
6449
+ * 计算 提示框的位置
6450
+ * @param event 触发的事件
6451
+ * @param targetElement 目标元素
6452
+ * @param arrowDistance 箭头和目标元素的距离
6453
+ * @param otherDistance 其它位置的偏移
6454
+ */
6455
+ calcToolTipPosition(targetElement, arrowDistance, otherDistance, event) {
6456
+ let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
6457
+ // 目标 宽
6458
+ let targetElement_width = offsetInfo.width;
6459
+ // 目标 高
6460
+ let targetElement_height = offsetInfo.height;
6461
+ // 目标 顶部距离
6462
+ let targetElement_top = offsetInfo.top;
6463
+ // let targetElement_bottom = offsetInfo.bottom;
6464
+ // 目标 左边距离
6465
+ let targetElement_left = offsetInfo.left;
6466
+ // let targetElement_right = offsetInfo.right;
6467
+ let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
6468
+ let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
6469
+ /* 目标元素的x轴的中间位置 */
6470
+ let targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
6471
+ /* 目标元素的Y轴的中间位置 */
6472
+ let targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
6473
+ let mouseX = 0;
6474
+ let mouseY = 0;
6475
+ if (event != null) {
6476
+ if (event instanceof MouseEvent || event instanceof PointerEvent) {
6477
+ mouseX = event.pageX;
6478
+ mouseY = event.y;
6303
6479
  }
6304
- if (typeof className === "string") {
6305
- let splitClassName = className.split(" ");
6306
- splitClassName.forEach((classNameStr) => {
6307
- element.classList.add(classNameStr);
6308
- });
6480
+ else if (event instanceof TouchEvent) {
6481
+ let touchEvent = event.touches[0];
6482
+ mouseX = touchEvent.pageX;
6483
+ mouseY = touchEvent.pageY;
6309
6484
  }
6310
- else if (Array.isArray(className)) {
6311
- className.forEach((classNameStr) => {
6312
- this.setElementClassName(element, classNameStr);
6313
- });
6485
+ else {
6486
+ // @ts-ignore
6487
+ if (typeof event.clientX === "number") {
6488
+ // @ts-ignore
6489
+ mouseX = event.clientX;
6490
+ }
6491
+ // @ts-ignore
6492
+ if (typeof event.clientY === "number") {
6493
+ // @ts-ignore
6494
+ mouseY = event.clientY;
6495
+ }
6314
6496
  }
6315
- },
6316
- /**
6317
- * 创建左侧容器元素<li>
6318
- * @param asideConfig
6319
- */
6320
- createAsideItem(asideConfig) {
6321
- let liElement = document.createElement("li");
6322
- liElement.id = asideConfig.id;
6323
- // @ts-ignore
6324
- liElement["__forms__"] = asideConfig.forms;
6325
- PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
6326
- /* 处理className */
6327
- this.setElementClassName(liElement, asideConfig.className);
6328
- this.setElementAttributes(liElement, asideConfig.attributes);
6329
- this.setElementProps(liElement, asideConfig.props);
6330
- return liElement;
6331
- },
6332
- /**
6333
- * 创建中间容器的元素<li>
6334
- * type ==> switch
6335
- * @param formConfig
6336
- */
6337
- createSectionContainerItem_switch(formConfig) {
6338
- let liElement = document.createElement("li");
6339
- liElement["__formConfig__"] = formConfig;
6340
- this.setElementClassName(liElement, formConfig.className);
6341
- this.setElementAttributes(liElement, formConfig.attributes);
6342
- this.setElementProps(liElement, formConfig.props);
6343
- /* 左边底部的描述的文字 */
6344
- let leftDescriptionText = "";
6345
- if (Boolean(formConfig.description)) {
6346
- leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
6497
+ }
6498
+ return {
6499
+ TOP: {
6500
+ left: targetElement_X_center_pos - otherDistance,
6501
+ top: targetElement_top - toolTipElement_height - arrowDistance,
6502
+ arrow: "bottom",
6503
+ motion: "fadeInTop",
6504
+ },
6505
+ RIGHT: {
6506
+ left: targetElement_left + targetElement_width + arrowDistance,
6507
+ top: targetElement_Y_center_pos + otherDistance,
6508
+ arrow: "left",
6509
+ motion: "fadeInRight",
6510
+ },
6511
+ BOTTOM: {
6512
+ left: targetElement_X_center_pos - otherDistance,
6513
+ top: targetElement_top + targetElement_height + arrowDistance,
6514
+ arrow: "top",
6515
+ motion: "fadeInBottom",
6516
+ },
6517
+ LEFT: {
6518
+ left: targetElement_left - toolTipElement_width - arrowDistance,
6519
+ top: targetElement_Y_center_pos + otherDistance,
6520
+ arrow: "right",
6521
+ motion: "fadeInLeft",
6522
+ },
6523
+ FOLLOW: {
6524
+ left: mouseX + otherDistance,
6525
+ top: mouseY + otherDistance,
6526
+ arrow: "follow",
6527
+ motion: "",
6528
+ },
6529
+ };
6530
+ }
6531
+ /**
6532
+ * 动态修改tooltip的位置
6533
+ */
6534
+ changePosition(event) {
6535
+ let positionInfo = this.calcToolTipPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance, event);
6536
+ let positionKey = this.$data.config.position.toUpperCase();
6537
+ let positionDetail = positionInfo[positionKey];
6538
+ if (positionDetail) {
6539
+ this.$el.$toolTip.style.left = positionDetail.left + "px";
6540
+ this.$el.$toolTip.style.top = positionDetail.top + "px";
6541
+ this.$el.$toolTip.setAttribute("data-motion", positionDetail.motion);
6542
+ this.$el.$arrow.setAttribute("data-position", positionDetail.arrow);
6543
+ }
6544
+ else {
6545
+ console.error("不存在该位置", this.$data.config.position);
6546
+ }
6547
+ }
6548
+ /**
6549
+ * 事件绑定
6550
+ */
6551
+ onEvent() {
6552
+ // 监听动画结束事件
6553
+ this.onToolTipAnimationFinishEvent();
6554
+ this.onShowEvent();
6555
+ this.onCloseEvent();
6556
+ this.onToolTipMouseEnterEvent();
6557
+ this.onToolTipMouseLeaveEvent();
6558
+ }
6559
+ /**
6560
+ * 取消事件绑定
6561
+ */
6562
+ offEvent() {
6563
+ this.offToolTipAnimationFinishEvent();
6564
+ this.offShowEvent();
6565
+ this.offCloseEvent();
6566
+ this.offToolTipMouseEnterEvent();
6567
+ this.offToolTipMouseLeaveEvent();
6568
+ }
6569
+ /**
6570
+ * 添加关闭的timeId
6571
+ * @param type
6572
+ * @param timeId
6573
+ */
6574
+ addCloseTimeoutId(type, timeId) {
6575
+ if (type === "MouseEvent") {
6576
+ this.$data.timeId_close_MouseEvent.push(timeId);
6577
+ }
6578
+ else {
6579
+ this.$data.timeId_close_TouchEvent.push(timeId);
6580
+ }
6581
+ }
6582
+ /**
6583
+ * 清除延迟的timeId
6584
+ * @param type 事件类型
6585
+ */
6586
+ clearCloseTimeoutId(type, timeId) {
6587
+ let timeIdList = type === "MouseEvent"
6588
+ ? this.$data.timeId_close_MouseEvent
6589
+ : this.$data.timeId_close_TouchEvent;
6590
+ for (let index = 0; index < timeIdList.length; index++) {
6591
+ const currentTimeId = timeIdList[index];
6592
+ if (typeof timeId === "number") {
6593
+ // 只清除一个
6594
+ if (timeId == currentTimeId) {
6595
+ popsUtils.clearTimeout(timeId);
6596
+ timeIdList.splice(index, 1);
6597
+ break;
6598
+ }
6347
6599
  }
6348
- PopsSafeUtils.setSafeHTML(liElement,
6349
- /*html*/ `
6350
- <div class="pops-panel-item-left-text">
6351
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
6352
- <div class="pops-panel-switch">
6353
- <input class="pops-panel-switch__input" type="checkbox">
6354
- <span class="pops-panel-switch__core">
6355
- <div class="pops-panel-switch__action">
6356
- </div>
6357
- </span>
6358
- </div>`);
6359
- const PopsPanelSwitch = {
6360
- [Symbol.toStringTag]: "PopsPanelSwitch",
6361
- $data: {
6362
- value: Boolean(formConfig.getValue()),
6363
- },
6364
- $ele: {
6365
- switch: liElement.querySelector(".pops-panel-switch"),
6366
- input: liElement.querySelector(".pops-panel-switch__input"),
6367
- core: liElement.querySelector(".pops-panel-switch__core"),
6368
- },
6369
- init() {
6370
- this.setStatus(this.$data.value);
6371
- if (formConfig.disabled) {
6372
- this.disable();
6373
- }
6374
- this.setClickEvent();
6375
- },
6376
- setClickEvent() {
6377
- let that = this;
6378
- popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
6379
- if (that.$ele.input.disabled ||
6380
- that.$ele.switch.hasAttribute("data-disabled")) {
6381
- return;
6382
- }
6383
- that.$data.value = that.getStatus();
6384
- that.setStatus(that.$data.value);
6385
- if (typeof formConfig.callback === "function") {
6386
- formConfig.callback(event, that.$data.value);
6387
- }
6388
- });
6389
- },
6390
- /**
6391
- * 设置状态
6392
- */
6393
- setStatus(isChecked = false) {
6394
- isChecked = Boolean(isChecked);
6395
- this.$ele.input.checked = isChecked;
6396
- if (isChecked) {
6397
- popsDOMUtils.addClassName(this.$ele.switch, "pops-panel-switch-is-checked");
6398
- }
6399
- else {
6400
- popsDOMUtils.removeClassName(this.$ele.switch, "pops-panel-switch-is-checked");
6401
- }
6402
- },
6403
- /**
6404
- * 根据className来获取逆反值
6405
- */
6406
- getStatus() {
6407
- let checkedValue = false;
6408
- if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
6409
- checkedValue = true;
6410
- }
6411
- return checkedValue;
6412
- },
6413
- /**
6414
- * 禁用复选框
6415
- */
6416
- disable() {
6417
- this.$ele.input.disabled = true;
6418
- this.$ele.switch.setAttribute("data-disabled", "true");
6419
- },
6420
- /**
6421
- * 启用复选框
6422
- */
6423
- notDisable() {
6424
- this.$ele.input.disabled = false;
6425
- this.$ele.switch.removeAttribute("data-disabled");
6426
- },
6427
- };
6428
- PopsPanelSwitch.init();
6429
- liElement["data-switch"] = PopsPanelSwitch;
6430
- return liElement;
6431
- },
6432
- /**
6433
- * 获取中间容器的元素<li>
6434
- * type ==> slider
6435
- * @param formConfig
6436
- */
6437
- createSectionContainerItem_slider(formConfig) {
6438
- let liElement = document.createElement("li");
6439
- liElement["__formConfig__"] = formConfig;
6440
- this.setElementClassName(liElement, formConfig.className);
6441
- this.setElementAttributes(liElement, formConfig.attributes);
6442
- this.setElementProps(liElement, formConfig.props);
6443
- /* 左边底部的描述的文字 */
6444
- let leftDescriptionText = "";
6445
- if (Boolean(formConfig.description)) {
6446
- leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
6600
+ else {
6601
+ popsUtils.clearTimeout(currentTimeId);
6602
+ timeIdList.splice(index, 1);
6603
+ index--;
6447
6604
  }
6448
- PopsSafeUtils.setSafeHTML(liElement,
6449
- /*html*/ `
6450
- <div class="pops-panel-item-left-text">
6451
- <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
6452
- <div class="pops-panel-slider">
6453
- <input type="range" min="${formConfig.min}" max="${formConfig.max}">
6454
- </div>
6455
- `);
6456
- let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
6457
- if (formConfig.step) {
6458
- rangeInputElement.setAttribute("step", formConfig.step.toString());
6605
+ }
6606
+ }
6607
+ /**
6608
+ * 显示提示框
6609
+ */
6610
+ show(...args) {
6611
+ let event = args[0];
6612
+ let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
6613
+ this.clearCloseTimeoutId(eventType);
6614
+ if (typeof this.$data.config.showBeforeCallBack === "function") {
6615
+ let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
6616
+ if (typeof result === "boolean" && !result) {
6617
+ return;
6459
6618
  }
6460
- rangeInputElement.value = formConfig.getValue().toString();
6461
- /**
6462
- * 获取提示的内容
6463
- * @param value
6464
- */
6465
- let getToolTipContent = function (value) {
6466
- if (typeof formConfig.getToolTipContent === "function") {
6467
- return formConfig.getToolTipContent(value);
6468
- }
6469
- else {
6470
- return value;
6471
- }
6472
- };
6473
- let tooltip = pops.tooltip({
6474
- target: rangeInputElement.parentElement,
6475
- content: () => {
6476
- return getToolTipContent(rangeInputElement.value);
6477
- },
6478
- zIndex: () => {
6479
- return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
6480
- },
6481
- className: "github-tooltip",
6482
- alwaysShow: false,
6483
- only: false,
6484
- position: "top",
6485
- arrowDistance: 10,
6486
- });
6487
- popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
6488
- tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
6489
- if (typeof formConfig.callback === "function") {
6490
- formConfig.callback(event, event.target.value);
6491
- }
6492
- });
6493
- return liElement;
6494
- },
6619
+ }
6620
+ if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
6621
+ // 不在容器中,添加
6622
+ this.init();
6623
+ popsDOMUtils.append(this.$el.$shadowRoot, this.$el.$toolTip);
6624
+ }
6625
+ if (!popsUtils.contains(this.$el.$shadowContainer)) {
6626
+ // 页面不存在Shadow,添加
6627
+ if (typeof this.$data.config.beforeAppendToPageCallBack === "function") {
6628
+ this.$data.config.beforeAppendToPageCallBack(this.$el.$shadowRoot, this.$el.$shadowContainer);
6629
+ }
6630
+ popsDOMUtils.append(document.body, this.$el.$shadowContainer);
6631
+ }
6632
+ // 更新内容
6633
+ this.changeContent();
6634
+ // 更新tip的位置
6635
+ this.changePosition(event);
6636
+ if (typeof this.$data.config.showAfterCallBack === "function") {
6637
+ this.$data.config.showAfterCallBack(this.$el.$toolTip);
6638
+ }
6639
+ }
6640
+ /**
6641
+ * 绑定 显示事件
6642
+ */
6643
+ onShowEvent() {
6644
+ popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, this.$data.config.eventOption);
6645
+ }
6646
+ /**
6647
+ * 取消绑定 显示事件
6648
+ */
6649
+ offShowEvent() {
6650
+ popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, {
6651
+ capture: true,
6652
+ });
6653
+ }
6654
+ /**
6655
+ * 关闭提示框
6656
+ */
6657
+ close(...args) {
6658
+ let event = args[0];
6659
+ let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
6660
+ // 只判断鼠标事件
6661
+ // 其它的如Touch事件不做处理
6662
+ if (event && event instanceof MouseEvent) {
6663
+ let $target = event.composedPath()[0];
6664
+ // 如果是目标元素的子元素/tooltip元素的子元素触发的话,那就不管
6665
+ if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
6666
+ return;
6667
+ }
6668
+ }
6669
+ if (typeof this.$data.config.closeBeforeCallBack === "function") {
6670
+ let result = this.$data.config.closeBeforeCallBack(this.$el.$toolTip);
6671
+ if (typeof result === "boolean" && !result) {
6672
+ return;
6673
+ }
6674
+ }
6675
+ if (this.$data.config.delayCloseTime == null ||
6676
+ (typeof this.$data.config.delayCloseTime === "number" &&
6677
+ this.$data.config.delayCloseTime <= 0)) {
6678
+ this.$data.config.delayCloseTime = 100;
6679
+ }
6680
+ let timeId = popsUtils.setTimeout(() => {
6681
+ // 设置属性触发关闭动画
6682
+ this.clearCloseTimeoutId(eventType, timeId);
6683
+ if (this.$el.$toolTip == null) {
6684
+ // 已清除了
6685
+ return;
6686
+ }
6687
+ let motion = this.$el.$toolTip.getAttribute("data-motion");
6688
+ if (motion == null || motion.trim() === "") {
6689
+ // 没有动画
6690
+ this.toolTipAnimationFinishEvent();
6691
+ }
6692
+ else {
6693
+ // 修改data-motion触发动画关闭
6694
+ this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
6695
+ .getAttribute("data-motion")
6696
+ .replace("fadeIn", "fadeOut"));
6697
+ }
6698
+ }, this.$data.config.delayCloseTime);
6699
+ this.addCloseTimeoutId(eventType, timeId);
6700
+ if (typeof this.$data.config.closeAfterCallBack === "function") {
6701
+ this.$data.config.closeAfterCallBack(this.$el.$toolTip);
6702
+ }
6703
+ }
6704
+ /**
6705
+ * 绑定 关闭事件
6706
+ */
6707
+ onCloseEvent() {
6708
+ popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, this.$data.config.eventOption);
6709
+ }
6710
+ /**
6711
+ * 取消绑定 关闭事件
6712
+ */
6713
+ offCloseEvent() {
6714
+ popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, {
6715
+ capture: true,
6716
+ });
6717
+ }
6718
+ /**
6719
+ * 销毁元素
6720
+ */
6721
+ destory() {
6722
+ if (this.$el.$toolTip) {
6723
+ this.$el.$shadowRoot.removeChild(this.$el.$toolTip);
6724
+ }
6725
+ // @ts-ignore
6726
+ this.$el.$toolTip = null;
6727
+ // @ts-ignore
6728
+ this.$el.$arrow = null;
6729
+ // @ts-ignore
6730
+ this.$el.$content = null;
6731
+ }
6732
+ /**
6733
+ * 动画结束事件
6734
+ */
6735
+ toolTipAnimationFinishEvent() {
6736
+ if (!this.$el.$toolTip) {
6737
+ return;
6738
+ }
6739
+ if (this.$el.$toolTip.getAttribute("data-motion").includes("In")) {
6740
+ return;
6741
+ }
6742
+ this.destory();
6743
+ }
6744
+ /**
6745
+ * 监听tooltip的动画结束
6746
+ */
6747
+ onToolTipAnimationFinishEvent() {
6748
+ popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
6749
+ }
6750
+ /**
6751
+ * 取消tooltip监听动画结束
6752
+ */
6753
+ offToolTipAnimationFinishEvent() {
6754
+ popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
6755
+ }
6756
+ /**
6757
+ * 鼠标|触摸进入事件
6758
+ */
6759
+ toolTipMouseEnterEvent() {
6760
+ this.clearCloseTimeoutId("MouseEvent");
6761
+ this.clearCloseTimeoutId("TouchEvent");
6762
+ // 重置动画状态
6763
+ // this.$el.$toolTip.style.animationPlayState = "paused";
6764
+ // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
6765
+ // toolTipElement.style.animationPlayState = "paused";
6766
+ // }
6767
+ }
6768
+ /**
6769
+ * 监听鼠标|触摸事件
6770
+ */
6771
+ onToolTipMouseEnterEvent() {
6772
+ this.clearCloseTimeoutId("MouseEvent");
6773
+ this.clearCloseTimeoutId("TouchEvent");
6774
+ popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
6775
+ }
6776
+ /**
6777
+ * 取消监听鼠标|触摸事件
6778
+ */
6779
+ offToolTipMouseEnterEvent() {
6780
+ popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
6781
+ }
6782
+ /**
6783
+ * 鼠标|触摸离开事件
6784
+ */
6785
+ toolTipMouseLeaveEvent(event) {
6786
+ this.close(event);
6787
+ // this.$el.$toolTip.style.animationPlayState = "running";
6788
+ }
6789
+ /**
6790
+ * 监听鼠标|触摸离开事件
6791
+ */
6792
+ onToolTipMouseLeaveEvent() {
6793
+ popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
6794
+ }
6795
+ /**
6796
+ * 取消监听鼠标|触摸离开事件
6797
+ */
6798
+ offToolTipMouseLeaveEvent() {
6799
+ popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
6800
+ }
6801
+ }
6802
+ const PopsTooltip = {
6803
+ init(details) {
6804
+ const guid = popsUtils.getRandomGUID();
6805
+ // 设置当前类型
6806
+ const PopsType = "tooltip";
6807
+ let config = PopsTooltipConfig();
6808
+ config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
6809
+ config = popsUtils.assign(config, details);
6810
+ if (!(config.target instanceof HTMLElement)) {
6811
+ throw new TypeError("config.target 必须是HTMLElement类型");
6812
+ }
6813
+ config = PopsHandler.handleOnly(PopsType, config);
6814
+ const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
6815
+ PopsHandler.handleInit($shadowRoot, [
6816
+ PopsCSS.index,
6817
+ PopsCSS.anim,
6818
+ PopsCSS.common,
6819
+ PopsCSS.tooltipCSS,
6820
+ ]);
6821
+ let toolTip = new ToolTip(config, guid, {
6822
+ $shadowContainer,
6823
+ $shadowRoot,
6824
+ });
6825
+ if (config.alwaysShow) {
6826
+ /* 总是显示 */
6827
+ /* 直接显示 */
6828
+ toolTip.show();
6829
+ }
6830
+ return {
6831
+ guid,
6832
+ config,
6833
+ $shadowContainer,
6834
+ $shadowRoot,
6835
+ toolTip,
6836
+ };
6837
+ },
6838
+ };
6839
+
6840
+ const PanelHandleContentDetails = () => {
6841
+ return {
6495
6842
  /**
6496
- * 获取中间容器的元素<li>
6497
- * type ==> slider
6498
- * @param formConfig
6843
+ * 左侧的ul容器
6499
6844
  */
6500
- createSectionContainerItem_slider_new(formConfig) {
6501
- let liElement = document.createElement("li");
6502
- // @ts-ignore
6503
- liElement["__formConfig__"] = formConfig;
6504
- this.setElementClassName(liElement, formConfig.className);
6505
- this.setElementAttributes(liElement, formConfig.attributes);
6506
- this.setElementProps(liElement, formConfig.props);
6507
- /* 左边底部的描述的文字 */
6508
- let leftDescriptionText = "";
6509
- if (Boolean(formConfig.description)) {
6510
- leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
6845
+ asideULElement: null,
6846
+ /**
6847
+ * 右侧主内容的顶部文字ul容器
6848
+ */
6849
+ sectionContainerHeaderULElement: null,
6850
+ /**
6851
+ * 右侧主内容的ul容器
6852
+ */
6853
+ sectionContainerULElement: null,
6854
+ /**
6855
+ * 元素
6856
+ */
6857
+ $el: {
6858
+ /** 内容 */
6859
+ $content: null,
6860
+ /** 左侧容器 */
6861
+ $contentAside: null,
6862
+ /** 右侧容器 */
6863
+ $contentSectionContainer: null,
6864
+ },
6865
+ /**
6866
+ * 初始化
6867
+ * @param details
6868
+ */
6869
+ init(details) {
6870
+ // @ts-ignore
6871
+ this.$el = null;
6872
+ this.$el = {
6873
+ ...details.$el,
6874
+ };
6875
+ this.asideULElement =
6876
+ this.$el.$contentAside.querySelector("ul");
6877
+ this.sectionContainerHeaderULElement =
6878
+ this.$el.$contentSectionContainer.querySelectorAll("ul")[0];
6879
+ this.sectionContainerULElement =
6880
+ this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
6881
+ /**
6882
+ * 默认点击的左侧容器项
6883
+ */
6884
+ let $asideDefaultItemElement = null;
6885
+ /** 是否滚动到默认位置(第一个项) */
6886
+ let isScrollToDefaultView = false;
6887
+ details.config.content.forEach((asideItemConfig) => {
6888
+ let $asideLiElement = this.createAsideItem(asideItemConfig);
6889
+ this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
6890
+ this.asideULElement.appendChild($asideLiElement);
6891
+ if ($asideDefaultItemElement == null) {
6892
+ let flag = false;
6893
+ if (typeof asideItemConfig.isDefault === "function") {
6894
+ flag = Boolean(asideItemConfig.isDefault());
6895
+ }
6896
+ else {
6897
+ flag = Boolean(asideItemConfig.isDefault);
6898
+ }
6899
+ if (flag) {
6900
+ $asideDefaultItemElement = $asideLiElement;
6901
+ isScrollToDefaultView = Boolean(asideItemConfig.scrollToDefaultView);
6902
+ }
6903
+ }
6904
+ if (typeof asideItemConfig.afterRender === "function") {
6905
+ // 执行渲染完毕的回调
6906
+ asideItemConfig.afterRender({
6907
+ asideConfig: asideItemConfig,
6908
+ $asideLiElement: $asideLiElement,
6909
+ });
6910
+ }
6911
+ });
6912
+ /* 点击左侧列表 */
6913
+ if ($asideDefaultItemElement == null &&
6914
+ this.asideULElement.children.length) {
6915
+ /* 默认第一个 */
6916
+ $asideDefaultItemElement = this.asideULElement
6917
+ .children[0];
6918
+ }
6919
+ if ($asideDefaultItemElement) {
6920
+ /* 点击选择的那一项 */
6921
+ $asideDefaultItemElement.click();
6922
+ if (isScrollToDefaultView) {
6923
+ $asideDefaultItemElement?.scrollIntoView();
6924
+ }
6925
+ }
6926
+ else {
6927
+ console.error("pops.panel:左侧容器没有项");
6928
+ }
6929
+ },
6930
+ /**
6931
+ * 清空container容器的元素
6932
+ */
6933
+ clearContainer() {
6934
+ PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
6935
+ PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
6936
+ this.$el.$content
6937
+ ?.querySelectorAll("section.pops-panel-deepMenu-container")
6938
+ .forEach((ele) => ele.remove());
6939
+ },
6940
+ /**
6941
+ * 清空左侧容器已访问记录
6942
+ */
6943
+ clearAsideItemIsVisited() {
6944
+ this.$el.$contentAside
6945
+ .querySelectorAll(".pops-is-visited")
6946
+ .forEach((element) => {
6947
+ popsDOMUtils.removeClassName(element, "pops-is-visited");
6948
+ });
6949
+ },
6950
+ /**
6951
+ * 设置左侧容器已访问记录
6952
+ * @param element
6953
+ */
6954
+ setAsideItemIsVisited(element) {
6955
+ popsDOMUtils.addClassName(element, "pops-is-visited");
6956
+ },
6957
+ /**
6958
+ * 为元素添加自定义属性
6959
+ * @param element
6960
+ * @param attributes
6961
+ */
6962
+ setElementAttributes(element, attributes) {
6963
+ if (attributes == null) {
6964
+ return;
6965
+ }
6966
+ if (Array.isArray(attributes)) {
6967
+ attributes.forEach((attrObject) => {
6968
+ this.setElementAttributes(element, attrObject);
6969
+ });
6970
+ }
6971
+ else {
6972
+ Object.keys(attributes).forEach((attributeName) => {
6973
+ element.setAttribute(attributeName, attributes[attributeName]);
6974
+ });
6975
+ }
6976
+ },
6977
+ /**
6978
+ * 为元素设置(自定义)属性
6979
+ * @param element
6980
+ * @param props
6981
+ */
6982
+ setElementProps(element, props) {
6983
+ if (props == null) {
6984
+ return;
6985
+ }
6986
+ Object.keys(props).forEach((propName) => {
6987
+ let value = props[propName];
6988
+ if (propName === "innerHTML") {
6989
+ PopsSafeUtils.setSafeHTML(element, value);
6990
+ return;
6991
+ }
6992
+ Reflect.set(element, propName, value);
6993
+ });
6994
+ },
6995
+ /**
6996
+ * 为元素设置classname
6997
+ * @param element
6998
+ * @param className
6999
+ */
7000
+ setElementClassName(element, className) {
7001
+ if (className == null) {
7002
+ return;
7003
+ }
7004
+ if (typeof className === "function") {
7005
+ className = className();
7006
+ }
7007
+ if (typeof className === "string") {
7008
+ let splitClassName = className.split(" ");
7009
+ splitClassName.forEach((classNameStr) => {
7010
+ element.classList.add(classNameStr);
7011
+ });
7012
+ }
7013
+ else if (Array.isArray(className)) {
7014
+ className.forEach((classNameStr) => {
7015
+ this.setElementClassName(element, classNameStr);
7016
+ });
7017
+ }
7018
+ },
7019
+ /**
7020
+ * 创建左侧容器元素<li>
7021
+ * @param asideConfig
7022
+ */
7023
+ createAsideItem(asideConfig) {
7024
+ let liElement = document.createElement("li");
7025
+ liElement.id = asideConfig.id;
7026
+ // @ts-ignore
7027
+ liElement["__forms__"] = asideConfig.forms;
7028
+ PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
7029
+ /* 处理className */
7030
+ this.setElementClassName(liElement, asideConfig.className);
7031
+ this.setElementAttributes(liElement, asideConfig.attributes);
7032
+ this.setElementProps(liElement, asideConfig.props);
7033
+ return liElement;
7034
+ },
7035
+ /**
7036
+ * 创建中间容器的元素<li>
7037
+ * type ==> switch
7038
+ * @param formConfig
7039
+ */
7040
+ createSectionContainerItem_switch(formConfig) {
7041
+ let liElement = document.createElement("li");
7042
+ liElement["__formConfig__"] = formConfig;
7043
+ this.setElementClassName(liElement, formConfig.className);
7044
+ this.setElementAttributes(liElement, formConfig.attributes);
7045
+ this.setElementProps(liElement, formConfig.props);
7046
+ /* 左边底部的描述的文字 */
7047
+ let leftDescriptionText = "";
7048
+ if (Boolean(formConfig.description)) {
7049
+ leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
6511
7050
  }
6512
7051
  PopsSafeUtils.setSafeHTML(liElement,
6513
7052
  /*html*/ `
6514
- <div class="pops-panel-item-left-text" style="flex: 1;">
7053
+ <div class="pops-panel-item-left-text">
6515
7054
  <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
6516
- <div class="pops-slider pops-slider-width">
6517
- <div class="pops-slider__runway">
6518
- <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
6519
- <div class="pops-slider__button-wrapper" style="left: 0%">
6520
- <div class="pops-slider__button"></div>
7055
+ <div class="pops-panel-switch">
7056
+ <input class="pops-panel-switch__input" type="checkbox">
7057
+ <span class="pops-panel-switch__core">
7058
+ <div class="pops-panel-switch__action">
6521
7059
  </div>
6522
- </div>
7060
+ </span>
6523
7061
  </div>`);
6524
- const PopsPanelSlider = {
6525
- [Symbol.toStringTag]: "PopsPanelSlider",
7062
+ const PopsPanelSwitch = {
7063
+ [Symbol.toStringTag]: "PopsPanelSwitch",
7064
+ $data: {
7065
+ value: Boolean(formConfig.getValue()),
7066
+ },
7067
+ $ele: {
7068
+ switch: liElement.querySelector(".pops-panel-switch"),
7069
+ input: liElement.querySelector(".pops-panel-switch__input"),
7070
+ core: liElement.querySelector(".pops-panel-switch__core"),
7071
+ },
7072
+ init() {
7073
+ this.setStatus(this.$data.value);
7074
+ if (formConfig.disabled) {
7075
+ this.disable();
7076
+ }
7077
+ this.setClickEvent();
7078
+ },
7079
+ setClickEvent() {
7080
+ let that = this;
7081
+ popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
7082
+ if (that.$ele.input.disabled ||
7083
+ that.$ele.switch.hasAttribute("data-disabled")) {
7084
+ return;
7085
+ }
7086
+ that.$data.value = that.getStatus();
7087
+ that.setStatus(that.$data.value);
7088
+ if (typeof formConfig.callback === "function") {
7089
+ formConfig.callback(event, that.$data.value);
7090
+ }
7091
+ });
7092
+ },
6526
7093
  /**
6527
- *
7094
+ * 设置状态
6528
7095
  */
6529
- value: formConfig.getValue(),
6530
- /**
6531
- * 最小值
7096
+ setStatus(isChecked = false) {
7097
+ isChecked = Boolean(isChecked);
7098
+ this.$ele.input.checked = isChecked;
7099
+ if (isChecked) {
7100
+ popsDOMUtils.addClassName(this.$ele.switch, "pops-panel-switch-is-checked");
7101
+ }
7102
+ else {
7103
+ popsDOMUtils.removeClassName(this.$ele.switch, "pops-panel-switch-is-checked");
7104
+ }
7105
+ },
7106
+ /**
7107
+ * 根据className来获取逆反值
7108
+ */
7109
+ getStatus() {
7110
+ let checkedValue = false;
7111
+ if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
7112
+ checkedValue = true;
7113
+ }
7114
+ return checkedValue;
7115
+ },
7116
+ /**
7117
+ * 禁用复选框
7118
+ */
7119
+ disable() {
7120
+ this.$ele.input.disabled = true;
7121
+ this.$ele.switch.setAttribute("data-disabled", "true");
7122
+ },
7123
+ /**
7124
+ * 启用复选框
7125
+ */
7126
+ notDisable() {
7127
+ this.$ele.input.disabled = false;
7128
+ this.$ele.switch.removeAttribute("data-disabled");
7129
+ },
7130
+ };
7131
+ PopsPanelSwitch.init();
7132
+ liElement["data-switch"] = PopsPanelSwitch;
7133
+ return liElement;
7134
+ },
7135
+ /**
7136
+ * 获取中间容器的元素<li>
7137
+ * type ==> slider
7138
+ * @param formConfig
7139
+ */
7140
+ createSectionContainerItem_slider(formConfig) {
7141
+ let liElement = document.createElement("li");
7142
+ liElement["__formConfig__"] = formConfig;
7143
+ this.setElementClassName(liElement, formConfig.className);
7144
+ this.setElementAttributes(liElement, formConfig.attributes);
7145
+ this.setElementProps(liElement, formConfig.props);
7146
+ /* 左边底部的描述的文字 */
7147
+ let leftDescriptionText = "";
7148
+ if (Boolean(formConfig.description)) {
7149
+ leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7150
+ }
7151
+ PopsSafeUtils.setSafeHTML(liElement,
7152
+ /*html*/ `
7153
+ <div class="pops-panel-item-left-text">
7154
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7155
+ <div class="pops-panel-slider">
7156
+ <input type="range" min="${formConfig.min}" max="${formConfig.max}">
7157
+ </div>
7158
+ `);
7159
+ let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
7160
+ if (formConfig.step) {
7161
+ rangeInputElement.setAttribute("step", formConfig.step.toString());
7162
+ }
7163
+ rangeInputElement.value = formConfig.getValue().toString();
7164
+ /**
7165
+ * 获取提示的内容
7166
+ * @param value
7167
+ */
7168
+ let getToolTipContent = function (value) {
7169
+ if (typeof formConfig.getToolTipContent === "function") {
7170
+ return formConfig.getToolTipContent(value);
7171
+ }
7172
+ else {
7173
+ return value;
7174
+ }
7175
+ };
7176
+ let tooltip = PopsTooltip.init({
7177
+ target: rangeInputElement.parentElement,
7178
+ content: () => {
7179
+ return getToolTipContent(rangeInputElement.value);
7180
+ },
7181
+ zIndex: () => {
7182
+ return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
7183
+ },
7184
+ className: "github-tooltip",
7185
+ alwaysShow: false,
7186
+ only: false,
7187
+ position: "top",
7188
+ arrowDistance: 10,
7189
+ });
7190
+ popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
7191
+ tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
7192
+ if (typeof formConfig.callback === "function") {
7193
+ formConfig.callback(event, event.target.value);
7194
+ }
7195
+ });
7196
+ return liElement;
7197
+ },
7198
+ /**
7199
+ * 获取中间容器的元素<li>
7200
+ * type ==> slider
7201
+ * @param formConfig
7202
+ */
7203
+ createSectionContainerItem_slider_new(formConfig) {
7204
+ let liElement = document.createElement("li");
7205
+ // @ts-ignore
7206
+ liElement["__formConfig__"] = formConfig;
7207
+ this.setElementClassName(liElement, formConfig.className);
7208
+ this.setElementAttributes(liElement, formConfig.attributes);
7209
+ this.setElementProps(liElement, formConfig.props);
7210
+ /* 左边底部的描述的文字 */
7211
+ let leftDescriptionText = "";
7212
+ if (Boolean(formConfig.description)) {
7213
+ leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
7214
+ }
7215
+ PopsSafeUtils.setSafeHTML(liElement,
7216
+ /*html*/ `
7217
+ <div class="pops-panel-item-left-text" style="flex: 1;">
7218
+ <p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
7219
+ <div class="pops-slider pops-slider-width">
7220
+ <div class="pops-slider__runway">
7221
+ <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
7222
+ <div class="pops-slider__button-wrapper" style="left: 0%">
7223
+ <div class="pops-slider__button"></div>
7224
+ </div>
7225
+ </div>
7226
+ </div>`);
7227
+ const PopsPanelSlider = {
7228
+ [Symbol.toStringTag]: "PopsPanelSlider",
7229
+ /**
7230
+ * 值
7231
+ */
7232
+ value: formConfig.getValue(),
7233
+ /**
7234
+ * 最小值
6532
7235
  */
6533
7236
  min: formConfig.min,
6534
7237
  /**
@@ -6618,11 +7321,11 @@
6618
7321
  let isSuccess = false;
6619
7322
  let oldTotalWidth = this.$data.totalWidth;
6620
7323
  let timer = void 0;
6621
- let interval = popsUtils.setInterval(() => {
7324
+ let interval = setInterval(() => {
6622
7325
  if (isSuccess) {
6623
7326
  this.$interval.isCheck = false;
6624
- popsUtils.clearTimeout(timer);
6625
- popsUtils.clearInterval(interval);
7327
+ clearTimeout(timer);
7328
+ clearInterval(interval);
6626
7329
  }
6627
7330
  else {
6628
7331
  this.initTotalWidth();
@@ -6642,8 +7345,8 @@
6642
7345
  }
6643
7346
  }, checkStepTime);
6644
7347
  /* 最长检测时间是10s */
6645
- timer = popsUtils.setTimeout(() => {
6646
- popsUtils.clearInterval(interval);
7348
+ timer = setTimeout(() => {
7349
+ clearInterval(interval);
6647
7350
  }, maxTime);
6648
7351
  },
6649
7352
  /**
@@ -7011,16 +7714,16 @@
7011
7714
  return;
7012
7715
  }
7013
7716
  this.$data.isCheckingStopDragMove = true;
7014
- let interval = popsUtils.setInterval(() => {
7717
+ let interval = setInterval(() => {
7015
7718
  if (!this.$data.isMove) {
7016
7719
  this.$data.isCheckingStopDragMove = false;
7017
7720
  this.closeToolTip();
7018
- popsUtils.clearInterval(interval);
7721
+ clearInterval(interval);
7019
7722
  }
7020
7723
  }, 200);
7021
- popsUtils.setTimeout(() => {
7724
+ setTimeout(() => {
7022
7725
  this.$data.isCheckingStopDragMove = false;
7023
- popsUtils.clearInterval(interval);
7726
+ clearInterval(interval);
7024
7727
  }, 2000);
7025
7728
  },
7026
7729
  /**
@@ -7038,7 +7741,7 @@
7038
7741
  return PopsPanelSlider.value;
7039
7742
  }
7040
7743
  }
7041
- let tooltip = pops.tooltip({
7744
+ let tooltip = PopsTooltip.init({
7042
7745
  target: this.$ele.button,
7043
7746
  content: getToolTipContent,
7044
7747
  zIndex: () => {
@@ -7131,13 +7834,13 @@
7131
7834
  this.setInputValue(this.$data.value);
7132
7835
  /* 如果是密码框,放进图标 */
7133
7836
  if (formConfig.isPassword) {
7134
- this.setCircleIcon(pops.config.iconSVG.view);
7837
+ this.setCircleIcon(PopsIcon.getIcon("view"));
7135
7838
  this.setCircleIconClickEvent();
7136
7839
  }
7137
7840
  else {
7138
7841
  /* 先判断预设值是否为空,不为空添加清空图标按钮 */
7139
7842
  if (this.$ele.input.value != "") {
7140
- this.setCircleIcon(pops.config.iconSVG.circleClose);
7843
+ this.setCircleIcon(PopsIcon.getIcon("circleClose"));
7141
7844
  this.setCircleIconClickEvent();
7142
7845
  }
7143
7846
  }
@@ -7208,9 +7911,9 @@
7208
7911
  },
7209
7912
  /**
7210
7913
  * 添加清空图标按钮
7211
- * @param [svgHTML=pops.config.iconSVG.circleClose] svg图标,默认为清空的图标
7914
+ * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标,默认为清空的图标
7212
7915
  */
7213
- setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
7916
+ setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")) {
7214
7917
  PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
7215
7918
  },
7216
7919
  /**
@@ -7230,14 +7933,14 @@
7230
7933
  this.$data.isView = false;
7231
7934
  /* 显示输入框内容,且更换图标为隐藏图标 */
7232
7935
  this.setInputType("text");
7233
- this.setCircleIcon(pops.config.iconSVG.hide);
7936
+ this.setCircleIcon(PopsIcon.getIcon("hide"));
7234
7937
  }
7235
7938
  else {
7236
7939
  /* 当前不可见 => 点击改变为显示 */
7237
7940
  this.$data.isView = true;
7238
7941
  /* 隐藏输入框内容,且更换图标为显示图标 */
7239
7942
  this.setInputType("password");
7240
- this.setCircleIcon(pops.config.iconSVG.view);
7943
+ this.setCircleIcon(PopsIcon.getIcon("view"));
7241
7944
  }
7242
7945
  }
7243
7946
  else {
@@ -7262,7 +7965,7 @@
7262
7965
  if (this.$ele.input.value !== "" &&
7263
7966
  this.$ele.icon.innerHTML === "") {
7264
7967
  /* 不为空,显示清空图标 */
7265
- this.setCircleIcon(pops.config.iconSVG.circleClose);
7968
+ this.setCircleIcon(PopsIcon.getIcon("circleClose"));
7266
7969
  this.setCircleIconClickEvent();
7267
7970
  }
7268
7971
  else if (this.$ele.input.value === "") {
@@ -8102,7 +8805,7 @@
8102
8805
  ${style || ""}
8103
8806
  `,
8104
8807
  }, userConfirmDetails);
8105
- let $dialog = pops.alert(confirmDetails);
8808
+ let $dialog = PopsAlert.init(confirmDetails);
8106
8809
  let $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
8107
8810
  this.$el.$selectContainer = $selectContainer;
8108
8811
  // 配置选项元素
@@ -8255,8 +8958,8 @@
8255
8958
  if (typeof formConfig.buttonIcon === "string" &&
8256
8959
  formConfig.buttonIcon.trim() !== "") {
8257
8960
  /* 存在icon图标且不为空 */
8258
- if (formConfig.buttonIcon in pops.config.iconSVG) {
8259
- this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
8961
+ if (PopsIcon.hasIcon(formConfig.buttonIcon)) {
8962
+ this.setIconSVG(PopsIcon.getIcon(formConfig.buttonIcon));
8260
8963
  }
8261
8964
  else {
8262
8965
  this.setIconSVG(formConfig.buttonIcon);
@@ -8385,7 +9088,7 @@
8385
9088
  : true;
8386
9089
  let arrowRightIconHTML = "";
8387
9090
  if (arrowRightIcon) {
8388
- arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${pops.config.iconSVG.arrowRight}</i>`;
9091
+ arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${PopsIcon.getIcon("arrowRight")}</i>`;
8389
9092
  }
8390
9093
  let rightText = "";
8391
9094
  if (formConfig.rightText) {
@@ -8515,7 +9218,7 @@
8515
9218
  });
8516
9219
  let $headerLeftArrow = popsDOMUtils.createElement("i", {
8517
9220
  className: "pops-panel-deepMenu-container-left-arrow-icon",
8518
- innerHTML: pops.config.iconSVG.arrowLeft,
9221
+ innerHTML: PopsIcon.getIcon("arrowLeft"),
8519
9222
  });
8520
9223
  popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
8521
9224
  event?.preventDefault();
@@ -8763,13 +9466,13 @@
8763
9466
  config = PopsHandler.handleOnly(PopsType, config);
8764
9467
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
8765
9468
  PopsHandler.handleInit($shadowRoot, [
8766
- pops.config.cssText.index,
8767
- pops.config.cssText.ninePalaceGridPosition,
8768
- pops.config.cssText.scrollbar,
8769
- pops.config.cssText.button,
8770
- pops.config.cssText.anim,
8771
- pops.config.cssText.common,
8772
- pops.config.cssText.panelCSS,
9469
+ PopsCSS.index,
9470
+ PopsCSS.ninePalaceGridPosition,
9471
+ PopsCSS.scrollbar,
9472
+ PopsCSS.button,
9473
+ PopsCSS.anim,
9474
+ PopsCSS.common,
9475
+ PopsCSS.panelCSS,
8773
9476
  ]);
8774
9477
  // 先把z-index提取出来
8775
9478
  let zIndex = PopsHandler.handleZIndex(config.zIndex);
@@ -8796,7 +9499,7 @@
8796
9499
  let $anim = PopsElementHandler.parseElement(animHTML);
8797
9500
  /* 结构元素 */
8798
9501
  let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, titleElement: $title, contentElement: $content, contentAsideElement: $contentAside, contentSectionContainerElement: $contentSectionContainer, } = PopsHandler.handleQueryElement($anim, PopsType);
8799
- if (config.isMobile || pops.isPhone()) {
9502
+ if (config.isMobile || popsUtils.isPhone()) {
8800
9503
  popsDOMUtils.addClassName($pops, config.mobileClassName);
8801
9504
  }
8802
9505
  /**
@@ -8874,7 +9577,7 @@
8874
9577
  targetSelector: null,
8875
9578
  data: [
8876
9579
  {
8877
- icon: pops.config.iconSVG.search,
9580
+ icon: PopsIcon.getIcon("search"),
8878
9581
  iconIsLoading: false,
8879
9582
  text: "搜索",
8880
9583
  item: [],
@@ -8887,7 +9590,7 @@
8887
9590
  },
8888
9591
  },
8889
9592
  {
8890
- icon: pops.config.iconSVG.documentCopy,
9593
+ icon: PopsIcon.getIcon("documentCopy"),
8891
9594
  iconIsLoading: false,
8892
9595
  text: "复制",
8893
9596
  item: [],
@@ -8900,7 +9603,7 @@
8900
9603
  },
8901
9604
  },
8902
9605
  {
8903
- icon: pops.config.iconSVG.delete,
9606
+ icon: PopsIcon.getIcon("delete"),
8904
9607
  text: "删除",
8905
9608
  iconIsLoading: false,
8906
9609
  item: [],
@@ -8913,7 +9616,7 @@
8913
9616
  },
8914
9617
  },
8915
9618
  {
8916
- icon: pops.config.iconSVG.loading,
9619
+ icon: PopsIcon.getIcon("loading"),
8917
9620
  iconIsLoading: true,
8918
9621
  text: "加载",
8919
9622
  item: [],
@@ -8927,7 +9630,7 @@
8927
9630
  },
8928
9631
  },
8929
9632
  {
8930
- icon: pops.config.iconSVG.elemePlus,
9633
+ icon: PopsIcon.getIcon("elemePlus"),
8931
9634
  iconIsLoading: true,
8932
9635
  text: "饿了么",
8933
9636
  callback(clickEvent, contextMenuEvent, liElement) {
@@ -8965,7 +9668,7 @@
8965
9668
  },
8966
9669
  item: [
8967
9670
  {
8968
- icon: pops.config.iconSVG.view,
9671
+ icon: PopsIcon.getIcon("view"),
8969
9672
  iconIsLoading: false,
8970
9673
  text: "查看",
8971
9674
  item: [],
@@ -9011,10 +9714,10 @@
9011
9714
  }
9012
9715
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
9013
9716
  PopsHandler.handleInit($shadowRoot, [
9014
- pops.config.cssText.index,
9015
- pops.config.cssText.anim,
9016
- pops.config.cssText.common,
9017
- pops.config.cssText.rightClickMenu,
9717
+ PopsCSS.index,
9718
+ PopsCSS.anim,
9719
+ PopsCSS.common,
9720
+ PopsCSS.rightClickMenu,
9018
9721
  ]);
9019
9722
  if (config.style != null) {
9020
9723
  let cssNode = popsDOMUtils.createElement("style", {
@@ -9322,11 +10025,11 @@
9322
10025
  let menuEventTarget = menuEvent.target;
9323
10026
  let menuULElement = menuElement.querySelector("ul");
9324
10027
  _config_.forEach((item) => {
9325
- let menuLiElement = popsUtils.parseTextToDOM(`<li></li>`);
10028
+ let menuLiElement = popsDOMUtils.parseTextToDOM(`<li></li>`);
9326
10029
  /* 判断有无图标,有就添加进去 */
9327
10030
  if (typeof item.icon === "string" && item.icon.trim() !== "") {
9328
- let iconSVGHTML = pops.config.iconSVG[item.icon] ?? item.icon;
9329
- let iconElement = popsUtils.parseTextToDOM(
10031
+ let iconSVGHTML = PopsIcon.getIcon(item.icon) ?? item.icon;
10032
+ let iconElement = popsDOMUtils.parseTextToDOM(
9330
10033
  /*html*/ `<i class="pops-${PopsType}-icon" is-loading="${item.iconIsLoading}">${iconSVGHTML}</i>`);
9331
10034
  menuLiElement.appendChild(iconElement);
9332
10035
  }
@@ -9500,9 +10203,9 @@
9500
10203
  }
9501
10204
  const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
9502
10205
  PopsHandler.handleInit($shadowRoot, [
9503
- pops.config.cssText.index,
9504
- pops.config.cssText.anim,
9505
- pops.config.cssText.common,
10206
+ PopsCSS.index,
10207
+ PopsCSS.anim,
10208
+ PopsCSS.common,
9506
10209
  ]);
9507
10210
  if (config.style != null) {
9508
10211
  let cssNode = document.createElement("style");
@@ -9777,801 +10480,248 @@
9777
10480
  /**
9778
10481
  * 隐藏搜索建议框的事件
9779
10482
  * @param event
9780
- */
9781
- hideEvent(event) {
9782
- if (event.target instanceof Node) {
9783
- if ($shadowContainer.contains(event.target)) {
9784
- /* 点击在shadow上的 */
9785
- return;
9786
- }
9787
- if (config.target.contains(event.target)) {
9788
- /* 点击在目标元素内 */
9789
- return;
9790
- }
9791
- if (config.inputTarget.contains(event.target)) {
9792
- /* 点击在目标input内 */
9793
- return;
9794
- }
9795
- SearchSuggestion.hide();
9796
- }
9797
- },
9798
- /**
9799
- * 设置隐藏搜索建议框的事件
9800
- */
9801
- setHideEvent(option = {
9802
- capture: true,
9803
- }) {
9804
- /* 全局点击事件 */
9805
- /* 全局触摸屏点击事件 */
9806
- if (Array.isArray(SearchSuggestion.selfDocument)) {
9807
- SearchSuggestion.selfDocument.forEach(($checkParent) => {
9808
- popsDOMUtils.on($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
9809
- });
9810
- }
9811
- else {
9812
- popsDOMUtils.on(SearchSuggestion.selfDocument, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
9813
- }
9814
- },
9815
- /**
9816
- * 移除隐藏搜索建议框的事件
9817
- */
9818
- removeHideEvent(option = {
9819
- capture: true,
9820
- }) {
9821
- if (Array.isArray(SearchSuggestion.selfDocument)) {
9822
- SearchSuggestion.selfDocument.forEach(($checkParent) => {
9823
- popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
9824
- });
9825
- }
9826
- else {
9827
- popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
9828
- }
9829
- },
9830
- /**
9831
- * 设置所有监听
9832
- */
9833
- setAllEvent(option = {
9834
- capture: true,
9835
- }) {
9836
- SearchSuggestion.setInputChangeEvent(option);
9837
- SearchSuggestion.setHideEvent(option);
9838
- SearchSuggestion.setShowEvent(option);
9839
- },
9840
- /**
9841
- * 移除所有监听
9842
- */
9843
- removeAllEvent(option = {
9844
- capture: true,
9845
- }) {
9846
- SearchSuggestion.removeInputChangeEvent(option);
9847
- SearchSuggestion.removeHideEvent(option);
9848
- SearchSuggestion.removeShowEvent(option);
9849
- },
9850
- /**
9851
- * 获取删除按钮的html
9852
- */
9853
- getDeleteIconHTML(size = 16, fill = "#bababa") {
9854
- return /*html*/ `
9855
- <svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
9856
- <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
9857
- <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
9858
- </svg>
9859
- `;
9860
- },
9861
- /**
9862
- * 设置当前正在搜索中的提示
9863
- */
9864
- setPromptsInSearch() {
9865
- let isSearchingElement = popsDOMUtils.createElement("li", {
9866
- className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
9867
- innerHTML: config.searchingTip,
9868
- });
9869
- SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
9870
- },
9871
- /**
9872
- * 移除正在搜索中的提示
9873
- */
9874
- removePromptsInSearch() {
9875
- SearchSuggestion.$el.$hintULContainer
9876
- .querySelector(`li.pops-${PopsType}-search-suggestion-hint-searching-item`)
9877
- ?.remove();
9878
- },
9879
- /**
9880
- * 清空所有的搜索结果
9881
- */
9882
- clearAllSearchItemLi() {
9883
- PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
9884
- },
9885
- /**
9886
- * 更新搜索建议框的位置(top、left)
9887
- * 因为目标元素可能是动态隐藏的
9888
- */
9889
- changeHintULElementPosition(target = config.target ?? config.inputTarget) {
9890
- let targetRect = null;
9891
- if (config.followPosition === "inputCursor") {
9892
- targetRect = popsDOMUtils.getTextBoundingRect(config.inputTarget, config.inputTarget.selectionStart || 0, config.inputTarget.selectionEnd || 0, false);
9893
- }
9894
- else {
9895
- targetRect = config.isAbsolute
9896
- ? popsDOMUtils.offset(target)
9897
- : target.getBoundingClientRect();
9898
- }
9899
- if (targetRect == null) {
9900
- return;
9901
- }
9902
- // 文档最大高度
9903
- let documentHeight = document.documentElement.clientHeight;
9904
- if (config.isAbsolute) {
9905
- // 绝对定位
9906
- documentHeight = popsDOMUtils.height(document);
9907
- }
9908
- // 文档最大宽度
9909
- let documentWidth = popsDOMUtils.width(document);
9910
- let position = config.position;
9911
- if (config.position === "auto") {
9912
- // 需目标高度+搜索建议框高度大于文档高度,则显示在上面
9913
- let targetBottom = targetRect.bottom;
9914
- let searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
9915
- if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
9916
- // 在上面
9917
- position = "top";
9918
- }
9919
- else {
9920
- // 在下面
9921
- position = "bottom";
9922
- SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
9923
- }
9924
- }
9925
- if (position === "top") {
9926
- if (config.positionTopToReverse) {
9927
- SearchSuggestion.$el.$hintULContainer.setAttribute("data-top-reverse", "true");
9928
- }
9929
- // 在上面
9930
- SearchSuggestion.$el.$hintULContainer.style.top = "";
9931
- SearchSuggestion.$el.$hintULContainer.style.bottom =
9932
- documentHeight - targetRect.top + config.topDistance + "px";
9933
- }
9934
- else if (position === "bottom") {
9935
- // 在下面
9936
- SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top-reverse");
9937
- SearchSuggestion.$el.$hintULContainer.style.bottom = "";
9938
- SearchSuggestion.$el.$hintULContainer.style.top =
9939
- targetRect.height + targetRect.top + config.topDistance + "px";
9940
- }
9941
- let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
9942
- SearchSuggestion.$el.$hintULContainer.style.left =
9943
- (targetRect.left + hintUIWidth > documentWidth
9944
- ? documentWidth - hintUIWidth
9945
- : targetRect.left) + "px";
9946
- },
9947
- /**
9948
- * 更新搜索建议框的width
9949
- * 因为目标元素可能是动态隐藏的
9950
- */
9951
- changeHintULElementWidth(target = config.target ?? config.inputTarget) {
9952
- let targetRect = target.getBoundingClientRect();
9953
- if (config.followTargetWidth) {
9954
- SearchSuggestion.$el.$hintULContainer.style.width =
9955
- targetRect.width + "px";
9956
- }
9957
- else {
9958
- SearchSuggestion.$el.$hintULContainer.style.width = config.width;
9959
- }
9960
- },
9961
- /**
9962
- * 动态更新CSS
9963
- */
9964
- updateDynamicCSS() {
9965
- let cssText = this.getDynamicCSS();
9966
- PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
9967
- },
9968
- /**
9969
- * 更新页面显示的搜索结果
9970
- * @param data
9971
- */
9972
- update(data = []) {
9973
- if (!Array.isArray(data)) {
9974
- throw new TypeError("传入的数据不是数组");
9975
- }
9976
- config.data = data;
9977
- /* 清空已有的搜索结果 */
9978
- if (config.data.length) {
9979
- SearchSuggestion.$data.isEmpty = false;
9980
- if (config.toHideWithNotResult) {
9981
- SearchSuggestion.show();
9982
- }
9983
- SearchSuggestion.clearAllSearchItemLi();
9984
- /* 添加进ul中 */
9985
- config.data.forEach((item, index) => {
9986
- let itemElement = SearchSuggestion.getSearchItemLiElement(item, index);
9987
- SearchSuggestion.setSearchItemClickEvent(itemElement);
9988
- SearchSuggestion.setSearchItemSelectEvent(itemElement);
9989
- SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
9990
- });
9991
- }
9992
- else {
9993
- /* 清空 */
9994
- SearchSuggestion.clear();
9995
- }
9996
- },
9997
- /**
9998
- * 清空当前的搜索结果并显示无结果
9999
- */
10000
- clear() {
10001
- this.$data.isEmpty = true;
10002
- this.clearAllSearchItemLi();
10003
- this.$el.$hintULContainer.appendChild(popsUtils.parseTextToDOM(config.toSearhNotResultHTML));
10004
- if (config.toHideWithNotResult) {
10005
- this.hide();
10006
- }
10007
- },
10008
- /**
10009
- * 隐藏搜索建议框
10010
- */
10011
- hide() {
10012
- this.$el.root.style.display = "none";
10013
- },
10014
- /**
10015
- * 显示搜索建议框
10016
- */
10017
- show() {
10018
- this.$el.root.style.display = "";
10019
- },
10020
- };
10021
- return SearchSuggestion;
10022
- },
10023
- };
10024
-
10025
- const PopsTooltipConfig = () => {
10026
- // @ts-ignore
10027
- return {
10028
- useShadowRoot: true,
10029
- target: null,
10030
- content: "默认文字",
10031
- isDiffContent: false,
10032
- position: "top",
10033
- className: "",
10034
- isFixed: false,
10035
- alwaysShow: false,
10036
- triggerShowEventName: "mouseenter touchstart",
10037
- triggerCloseEventName: "mouseleave touchend",
10038
- zIndex: 10000,
10039
- only: false,
10040
- eventOption: {
10041
- passive: false,
10042
- capture: true,
10043
- once: false,
10044
- },
10045
- showBeforeCallBack() { },
10046
- showAfterCallBack() { },
10047
- closeBeforeCallBack() { },
10048
- closeAfterCallBack() { },
10049
- delayCloseTime: 100,
10050
- showArrow: true,
10051
- arrowDistance: 12.5,
10052
- otherDistance: 0,
10053
- style: "",
10054
- beforeAppendToPageCallBack() { },
10055
- };
10056
- };
10057
-
10058
- class ToolTip {
10059
- $el = {
10060
- $shadowContainer: null,
10061
- $shadowRoot: null,
10062
- $toolTip: null,
10063
- $content: null,
10064
- $arrow: null,
10065
- };
10066
- $data = {
10067
- config: null,
10068
- guid: null,
10069
- timeId_close_TouchEvent: [],
10070
- timeId_close_MouseEvent: [],
10071
- };
10072
- constructor(config, guid, ShadowInfo) {
10073
- this.$data.config = config;
10074
- this.$data.guid = guid;
10075
- this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
10076
- this.$el.$shadowRoot = ShadowInfo.$shadowRoot;
10077
- this.show = this.show.bind(this);
10078
- this.close = this.close.bind(this);
10079
- this.toolTipAnimationFinishEvent =
10080
- this.toolTipAnimationFinishEvent.bind(this);
10081
- this.toolTipMouseEnterEvent = this.toolTipMouseEnterEvent.bind(this);
10082
- this.toolTipMouseLeaveEvent = this.toolTipMouseLeaveEvent.bind(this);
10083
- this.init();
10084
- }
10085
- init() {
10086
- let toolTipInfo = this.createToolTip();
10087
- this.$el.$toolTip = toolTipInfo.$toolTipContainer;
10088
- this.$el.$content = toolTipInfo.$toolTipContent;
10089
- this.$el.$arrow = toolTipInfo.$toolTipArrow;
10090
- this.changeContent();
10091
- this.changeZIndex();
10092
- this.changePosition();
10093
- if (!this.$data.config.alwaysShow) {
10094
- this.offEvent();
10095
- this.onEvent();
10096
- }
10097
- }
10098
- /**
10099
- * 创建提示元素
10100
- */
10101
- createToolTip() {
10102
- let $toolTipContainer = popsDOMUtils.createElement("div", {
10103
- className: "pops-tip",
10104
- innerHTML: /*html*/ `
10105
- <div class="pops-tip-content" style="text-align: center;"></div>
10106
- <div class="pops-tip-arrow"></div>
10107
- `,
10108
- }, {
10109
- "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
10110
- "data-guid": this.$data.guid,
10111
- });
10112
- /** 内容 */
10113
- let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
10114
- /** 箭头 */
10115
- let $toolTipArrow = $toolTipContainer.querySelector(".pops-tip-arrow");
10116
- // 处理className
10117
- if (typeof this.$data.config.className === "string" &&
10118
- this.$data.config.className.trim() !== "") {
10119
- popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
10120
- }
10121
- // 添加z-index
10122
- $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
10123
- if (this.$data.config.style != null) {
10124
- /* 添加自定义style */
10125
- let cssNode = popsDOMUtils.createElement("style", {
10126
- type: "text/css",
10127
- innerHTML: this.$data.config.style,
10128
- });
10129
- $toolTipContainer.appendChild(cssNode);
10130
- }
10131
- // 处理是否显示箭头元素
10132
- if (!this.$data.config.showArrow) {
10133
- $toolTipArrow.remove();
10134
- }
10135
- return {
10136
- $toolTipContainer: $toolTipContainer,
10137
- $toolTipArrow: $toolTipArrow,
10138
- $toolTipContent: $toolTipContent,
10139
- };
10140
- }
10141
- /**
10142
- * 获取提示的内容
10143
- */
10144
- getContent() {
10145
- return typeof this.$data.config.content === "function"
10146
- ? this.$data.config.content()
10147
- : this.$data.config.content;
10148
- }
10149
- /**
10150
- * 修改提示的内容
10151
- * @param text
10152
- */
10153
- changeContent(text) {
10154
- if (text == null) {
10155
- text = this.getContent();
10156
- }
10157
- if (this.$data.config.isDiffContent) {
10158
- let contentPropKey = "data-content";
10159
- // @ts-ignore
10160
- let originContentText = this.$el.$content[contentPropKey];
10161
- if (typeof originContentText === "string") {
10162
- if (originContentText === text) {
10163
- // 内容未改变,不修改避免渲染
10164
- return;
10165
- }
10166
- }
10167
- // @ts-ignore
10168
- this.$el.$content[contentPropKey] = text;
10169
- }
10170
- PopsSafeUtils.setSafeHTML(this.$el.$content, text);
10171
- }
10172
- /**
10173
- * 获取z-index
10174
- */
10175
- getZIndex() {
10176
- const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
10177
- return zIndex;
10178
- }
10179
- /**
10180
- * 动态修改z-index
10181
- */
10182
- changeZIndex() {
10183
- const zIndex = this.getZIndex();
10184
- this.$el.$toolTip.style.setProperty("z-index", zIndex.toString());
10185
- }
10186
- /**
10187
- * 计算 提示框的位置
10188
- * @param event 触发的事件
10189
- * @param targetElement 目标元素
10190
- * @param arrowDistance 箭头和目标元素的距离
10191
- * @param otherDistance 其它位置的偏移
10192
- */
10193
- calcToolTipPosition(targetElement, arrowDistance, otherDistance, event) {
10194
- let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
10195
- // 目标 宽
10196
- let targetElement_width = offsetInfo.width;
10197
- // 目标 高
10198
- let targetElement_height = offsetInfo.height;
10199
- // 目标 顶部距离
10200
- let targetElement_top = offsetInfo.top;
10201
- // let targetElement_bottom = offsetInfo.bottom;
10202
- // 目标 左边距离
10203
- let targetElement_left = offsetInfo.left;
10204
- // let targetElement_right = offsetInfo.right;
10205
- let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
10206
- let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
10207
- /* 目标元素的x轴的中间位置 */
10208
- let targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
10209
- /* 目标元素的Y轴的中间位置 */
10210
- let targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
10211
- let mouseX = 0;
10212
- let mouseY = 0;
10213
- if (event != null) {
10214
- if (event instanceof MouseEvent || event instanceof PointerEvent) {
10215
- mouseX = event.pageX;
10216
- mouseY = event.y;
10217
- }
10218
- else if (event instanceof TouchEvent) {
10219
- let touchEvent = event.touches[0];
10220
- mouseX = touchEvent.pageX;
10221
- mouseY = touchEvent.pageY;
10222
- }
10223
- else {
10224
- // @ts-ignore
10225
- if (typeof event.clientX === "number") {
10226
- // @ts-ignore
10227
- mouseX = event.clientX;
10228
- }
10229
- // @ts-ignore
10230
- if (typeof event.clientY === "number") {
10231
- // @ts-ignore
10232
- mouseY = event.clientY;
10233
- }
10234
- }
10235
- }
10236
- return {
10237
- TOP: {
10238
- left: targetElement_X_center_pos - otherDistance,
10239
- top: targetElement_top - toolTipElement_height - arrowDistance,
10240
- arrow: "bottom",
10241
- motion: "fadeInTop",
10242
- },
10243
- RIGHT: {
10244
- left: targetElement_left + targetElement_width + arrowDistance,
10245
- top: targetElement_Y_center_pos + otherDistance,
10246
- arrow: "left",
10247
- motion: "fadeInRight",
10248
- },
10249
- BOTTOM: {
10250
- left: targetElement_X_center_pos - otherDistance,
10251
- top: targetElement_top + targetElement_height + arrowDistance,
10252
- arrow: "top",
10253
- motion: "fadeInBottom",
10254
- },
10255
- LEFT: {
10256
- left: targetElement_left - toolTipElement_width - arrowDistance,
10257
- top: targetElement_Y_center_pos + otherDistance,
10258
- arrow: "right",
10259
- motion: "fadeInLeft",
10260
- },
10261
- FOLLOW: {
10262
- left: mouseX + otherDistance,
10263
- top: mouseY + otherDistance,
10264
- arrow: "follow",
10265
- motion: "",
10266
- },
10267
- };
10268
- }
10269
- /**
10270
- * 动态修改tooltip的位置
10271
- */
10272
- changePosition(event) {
10273
- let positionInfo = this.calcToolTipPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance, event);
10274
- let positionKey = this.$data.config.position.toUpperCase();
10275
- let positionDetail = positionInfo[positionKey];
10276
- if (positionDetail) {
10277
- this.$el.$toolTip.style.left = positionDetail.left + "px";
10278
- this.$el.$toolTip.style.top = positionDetail.top + "px";
10279
- this.$el.$toolTip.setAttribute("data-motion", positionDetail.motion);
10280
- this.$el.$arrow.setAttribute("data-position", positionDetail.arrow);
10281
- }
10282
- else {
10283
- console.error("不存在该位置", this.$data.config.position);
10284
- }
10285
- }
10286
- /**
10287
- * 事件绑定
10288
- */
10289
- onEvent() {
10290
- // 监听动画结束事件
10291
- this.onToolTipAnimationFinishEvent();
10292
- this.onShowEvent();
10293
- this.onCloseEvent();
10294
- this.onToolTipMouseEnterEvent();
10295
- this.onToolTipMouseLeaveEvent();
10296
- }
10297
- /**
10298
- * 取消事件绑定
10299
- */
10300
- offEvent() {
10301
- this.offToolTipAnimationFinishEvent();
10302
- this.offShowEvent();
10303
- this.offCloseEvent();
10304
- this.offToolTipMouseEnterEvent();
10305
- this.offToolTipMouseLeaveEvent();
10306
- }
10307
- /**
10308
- * 添加关闭的timeId
10309
- * @param type
10310
- * @param timeId
10311
- */
10312
- addCloseTimeoutId(type, timeId) {
10313
- if (type === "MouseEvent") {
10314
- this.$data.timeId_close_MouseEvent.push(timeId);
10315
- }
10316
- else {
10317
- this.$data.timeId_close_TouchEvent.push(timeId);
10318
- }
10319
- }
10320
- /**
10321
- * 清除延迟的timeId
10322
- * @param type 事件类型
10323
- */
10324
- clearCloseTimeoutId(type, timeId) {
10325
- let timeIdList = type === "MouseEvent"
10326
- ? this.$data.timeId_close_MouseEvent
10327
- : this.$data.timeId_close_TouchEvent;
10328
- for (let index = 0; index < timeIdList.length; index++) {
10329
- const currentTimeId = timeIdList[index];
10330
- if (typeof timeId === "number") {
10331
- // 只清除一个
10332
- if (timeId == currentTimeId) {
10333
- popsUtils.clearTimeout(timeId);
10334
- timeIdList.splice(index, 1);
10335
- break;
10336
- }
10337
- }
10338
- else {
10339
- popsUtils.clearTimeout(currentTimeId);
10340
- timeIdList.splice(index, 1);
10341
- index--;
10342
- }
10343
- }
10344
- }
10345
- /**
10346
- * 显示提示框
10347
- */
10348
- show(...args) {
10349
- let event = args[0];
10350
- let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
10351
- this.clearCloseTimeoutId(eventType);
10352
- if (typeof this.$data.config.showBeforeCallBack === "function") {
10353
- let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
10354
- if (typeof result === "boolean" && !result) {
10355
- return;
10356
- }
10357
- }
10358
- if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
10359
- // 不在容器中,添加
10360
- this.init();
10361
- popsDOMUtils.append(this.$el.$shadowRoot, this.$el.$toolTip);
10362
- }
10363
- if (!popsUtils.contains(this.$el.$shadowContainer)) {
10364
- // 页面不存在Shadow,添加
10365
- if (typeof this.$data.config.beforeAppendToPageCallBack === "function") {
10366
- this.$data.config.beforeAppendToPageCallBack(this.$el.$shadowRoot, this.$el.$shadowContainer);
10367
- }
10368
- popsDOMUtils.append(document.body, this.$el.$shadowContainer);
10369
- }
10370
- // 更新内容
10371
- this.changeContent();
10372
- // 更新tip的位置
10373
- this.changePosition(event);
10374
- if (typeof this.$data.config.showAfterCallBack === "function") {
10375
- this.$data.config.showAfterCallBack(this.$el.$toolTip);
10376
- }
10377
- }
10378
- /**
10379
- * 绑定 显示事件
10380
- */
10381
- onShowEvent() {
10382
- popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, this.$data.config.eventOption);
10383
- }
10384
- /**
10385
- * 取消绑定 显示事件
10386
- */
10387
- offShowEvent() {
10388
- popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show, {
10389
- capture: true,
10390
- });
10391
- }
10392
- /**
10393
- * 关闭提示框
10394
- */
10395
- close(...args) {
10396
- let event = args[0];
10397
- let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
10398
- // 只判断鼠标事件
10399
- // 其它的如Touch事件不做处理
10400
- if (event && event instanceof MouseEvent) {
10401
- let $target = event.composedPath()[0];
10402
- // 如果是目标元素的子元素/tooltip元素的子元素触发的话,那就不管
10403
- if ($target != this.$data.config.target && $target != this.$el.$toolTip) {
10404
- return;
10405
- }
10406
- }
10407
- if (typeof this.$data.config.closeBeforeCallBack === "function") {
10408
- let result = this.$data.config.closeBeforeCallBack(this.$el.$toolTip);
10409
- if (typeof result === "boolean" && !result) {
10410
- return;
10411
- }
10412
- }
10413
- if (this.$data.config.delayCloseTime == null ||
10414
- (typeof this.$data.config.delayCloseTime === "number" &&
10415
- this.$data.config.delayCloseTime <= 0)) {
10416
- this.$data.config.delayCloseTime = 100;
10417
- }
10418
- let timeId = popsUtils.setTimeout(() => {
10419
- // 设置属性触发关闭动画
10420
- this.clearCloseTimeoutId(eventType, timeId);
10421
- if (this.$el.$toolTip == null) {
10422
- // 已清除了
10423
- return;
10424
- }
10425
- let motion = this.$el.$toolTip.getAttribute("data-motion");
10426
- if (motion == null || motion.trim() === "") {
10427
- // 没有动画
10428
- this.toolTipAnimationFinishEvent();
10429
- }
10430
- else {
10431
- // 修改data-motion触发动画关闭
10432
- this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
10433
- .getAttribute("data-motion")
10434
- .replace("fadeIn", "fadeOut"));
10435
- }
10436
- }, this.$data.config.delayCloseTime);
10437
- this.addCloseTimeoutId(eventType, timeId);
10438
- if (typeof this.$data.config.closeAfterCallBack === "function") {
10439
- this.$data.config.closeAfterCallBack(this.$el.$toolTip);
10440
- }
10441
- }
10442
- /**
10443
- * 绑定 关闭事件
10444
- */
10445
- onCloseEvent() {
10446
- popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, this.$data.config.eventOption);
10447
- }
10448
- /**
10449
- * 取消绑定 关闭事件
10450
- */
10451
- offCloseEvent() {
10452
- popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close, {
10453
- capture: true,
10454
- });
10455
- }
10456
- /**
10457
- * 销毁元素
10458
- */
10459
- destory() {
10460
- if (this.$el.$toolTip) {
10461
- this.$el.$shadowRoot.removeChild(this.$el.$toolTip);
10462
- }
10463
- // @ts-ignore
10464
- this.$el.$toolTip = null;
10465
- // @ts-ignore
10466
- this.$el.$arrow = null;
10467
- // @ts-ignore
10468
- this.$el.$content = null;
10469
- }
10470
- /**
10471
- * 动画结束事件
10472
- */
10473
- toolTipAnimationFinishEvent() {
10474
- if (!this.$el.$toolTip) {
10475
- return;
10476
- }
10477
- if (this.$el.$toolTip.getAttribute("data-motion").includes("In")) {
10478
- return;
10479
- }
10480
- this.destory();
10481
- }
10482
- /**
10483
- * 监听tooltip的动画结束
10484
- */
10485
- onToolTipAnimationFinishEvent() {
10486
- popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
10487
- }
10488
- /**
10489
- * 取消tooltip监听动画结束
10490
- */
10491
- offToolTipAnimationFinishEvent() {
10492
- popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent);
10493
- }
10494
- /**
10495
- * 鼠标|触摸进入事件
10496
- */
10497
- toolTipMouseEnterEvent() {
10498
- this.clearCloseTimeoutId("MouseEvent");
10499
- this.clearCloseTimeoutId("TouchEvent");
10500
- // 重置动画状态
10501
- // this.$el.$toolTip.style.animationPlayState = "paused";
10502
- // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
10503
- // toolTipElement.style.animationPlayState = "paused";
10504
- // }
10505
- }
10506
- /**
10507
- * 监听鼠标|触摸事件
10508
- */
10509
- onToolTipMouseEnterEvent() {
10510
- this.clearCloseTimeoutId("MouseEvent");
10511
- this.clearCloseTimeoutId("TouchEvent");
10512
- popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
10513
- }
10514
- /**
10515
- * 取消监听鼠标|触摸事件
10516
- */
10517
- offToolTipMouseEnterEvent() {
10518
- popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent, this.$data.config.eventOption);
10519
- }
10520
- /**
10521
- * 鼠标|触摸离开事件
10522
- */
10523
- toolTipMouseLeaveEvent(event) {
10524
- this.close(event);
10525
- // this.$el.$toolTip.style.animationPlayState = "running";
10526
- }
10527
- /**
10528
- * 监听鼠标|触摸离开事件
10529
- */
10530
- onToolTipMouseLeaveEvent() {
10531
- popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
10532
- }
10533
- /**
10534
- * 取消监听鼠标|触摸离开事件
10535
- */
10536
- offToolTipMouseLeaveEvent() {
10537
- popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent, this.$data.config.eventOption);
10538
- }
10539
- }
10540
- const PopsTooltip = {
10541
- init(details) {
10542
- const guid = popsUtils.getRandomGUID();
10543
- // 设置当前类型
10544
- const PopsType = "tooltip";
10545
- let config = PopsTooltipConfig();
10546
- config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
10547
- config = popsUtils.assign(config, details);
10548
- if (!(config.target instanceof HTMLElement)) {
10549
- throw new TypeError("config.target 必须是HTMLElement类型");
10550
- }
10551
- config = PopsHandler.handleOnly(PopsType, config);
10552
- const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
10553
- PopsHandler.handleInit($shadowRoot, [
10554
- pops.config.cssText.index,
10555
- pops.config.cssText.anim,
10556
- pops.config.cssText.common,
10557
- pops.config.cssText.tooltipCSS,
10558
- ]);
10559
- let toolTip = new ToolTip(config, guid, {
10560
- $shadowContainer,
10561
- $shadowRoot,
10562
- });
10563
- if (config.alwaysShow) {
10564
- /* 总是显示 */
10565
- /* 直接显示 */
10566
- toolTip.show();
10567
- }
10568
- return {
10569
- guid,
10570
- config,
10571
- $shadowContainer,
10572
- $shadowRoot,
10573
- toolTip,
10483
+ */
10484
+ hideEvent(event) {
10485
+ if (event.target instanceof Node) {
10486
+ if ($shadowContainer.contains(event.target)) {
10487
+ /* 点击在shadow上的 */
10488
+ return;
10489
+ }
10490
+ if (config.target.contains(event.target)) {
10491
+ /* 点击在目标元素内 */
10492
+ return;
10493
+ }
10494
+ if (config.inputTarget.contains(event.target)) {
10495
+ /* 点击在目标input内 */
10496
+ return;
10497
+ }
10498
+ SearchSuggestion.hide();
10499
+ }
10500
+ },
10501
+ /**
10502
+ * 设置隐藏搜索建议框的事件
10503
+ */
10504
+ setHideEvent(option = {
10505
+ capture: true,
10506
+ }) {
10507
+ /* 全局点击事件 */
10508
+ /* 全局触摸屏点击事件 */
10509
+ if (Array.isArray(SearchSuggestion.selfDocument)) {
10510
+ SearchSuggestion.selfDocument.forEach(($checkParent) => {
10511
+ popsDOMUtils.on($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
10512
+ });
10513
+ }
10514
+ else {
10515
+ popsDOMUtils.on(SearchSuggestion.selfDocument, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
10516
+ }
10517
+ },
10518
+ /**
10519
+ * 移除隐藏搜索建议框的事件
10520
+ */
10521
+ removeHideEvent(option = {
10522
+ capture: true,
10523
+ }) {
10524
+ if (Array.isArray(SearchSuggestion.selfDocument)) {
10525
+ SearchSuggestion.selfDocument.forEach(($checkParent) => {
10526
+ popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
10527
+ });
10528
+ }
10529
+ else {
10530
+ popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
10531
+ }
10532
+ },
10533
+ /**
10534
+ * 设置所有监听
10535
+ */
10536
+ setAllEvent(option = {
10537
+ capture: true,
10538
+ }) {
10539
+ SearchSuggestion.setInputChangeEvent(option);
10540
+ SearchSuggestion.setHideEvent(option);
10541
+ SearchSuggestion.setShowEvent(option);
10542
+ },
10543
+ /**
10544
+ * 移除所有监听
10545
+ */
10546
+ removeAllEvent(option = {
10547
+ capture: true,
10548
+ }) {
10549
+ SearchSuggestion.removeInputChangeEvent(option);
10550
+ SearchSuggestion.removeHideEvent(option);
10551
+ SearchSuggestion.removeShowEvent(option);
10552
+ },
10553
+ /**
10554
+ * 获取删除按钮的html
10555
+ */
10556
+ getDeleteIconHTML(size = 16, fill = "#bababa") {
10557
+ return /*html*/ `
10558
+ <svg class="pops-${PopsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
10559
+ <path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
10560
+ <path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
10561
+ </svg>
10562
+ `;
10563
+ },
10564
+ /**
10565
+ * 设置当前正在搜索中的提示
10566
+ */
10567
+ setPromptsInSearch() {
10568
+ let isSearchingElement = popsDOMUtils.createElement("li", {
10569
+ className: `pops-${PopsType}-search-suggestion-hint-searching-item`,
10570
+ innerHTML: config.searchingTip,
10571
+ });
10572
+ SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
10573
+ },
10574
+ /**
10575
+ * 移除正在搜索中的提示
10576
+ */
10577
+ removePromptsInSearch() {
10578
+ SearchSuggestion.$el.$hintULContainer
10579
+ .querySelector(`li.pops-${PopsType}-search-suggestion-hint-searching-item`)
10580
+ ?.remove();
10581
+ },
10582
+ /**
10583
+ * 清空所有的搜索结果
10584
+ */
10585
+ clearAllSearchItemLi() {
10586
+ PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
10587
+ },
10588
+ /**
10589
+ * 更新搜索建议框的位置(top、left)
10590
+ * 因为目标元素可能是动态隐藏的
10591
+ */
10592
+ changeHintULElementPosition(target = config.target ?? config.inputTarget) {
10593
+ let targetRect = null;
10594
+ if (config.followPosition === "inputCursor") {
10595
+ targetRect = popsDOMUtils.getTextBoundingRect(config.inputTarget, config.inputTarget.selectionStart || 0, config.inputTarget.selectionEnd || 0, false);
10596
+ }
10597
+ else {
10598
+ targetRect = config.isAbsolute
10599
+ ? popsDOMUtils.offset(target)
10600
+ : target.getBoundingClientRect();
10601
+ }
10602
+ if (targetRect == null) {
10603
+ return;
10604
+ }
10605
+ // 文档最大高度
10606
+ let documentHeight = document.documentElement.clientHeight;
10607
+ if (config.isAbsolute) {
10608
+ // 绝对定位
10609
+ documentHeight = popsDOMUtils.height(document);
10610
+ }
10611
+ // 文档最大宽度
10612
+ let documentWidth = popsDOMUtils.width(document);
10613
+ let position = config.position;
10614
+ if (config.position === "auto") {
10615
+ // 需目标高度+搜索建议框高度大于文档高度,则显示在上面
10616
+ let targetBottom = targetRect.bottom;
10617
+ let searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
10618
+ if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
10619
+ // 在上面
10620
+ position = "top";
10621
+ }
10622
+ else {
10623
+ // 在下面
10624
+ position = "bottom";
10625
+ SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
10626
+ }
10627
+ }
10628
+ if (position === "top") {
10629
+ if (config.positionTopToReverse) {
10630
+ SearchSuggestion.$el.$hintULContainer.setAttribute("data-top-reverse", "true");
10631
+ }
10632
+ // 在上面
10633
+ SearchSuggestion.$el.$hintULContainer.style.top = "";
10634
+ SearchSuggestion.$el.$hintULContainer.style.bottom =
10635
+ documentHeight - targetRect.top + config.topDistance + "px";
10636
+ }
10637
+ else if (position === "bottom") {
10638
+ // 在下面
10639
+ SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top-reverse");
10640
+ SearchSuggestion.$el.$hintULContainer.style.bottom = "";
10641
+ SearchSuggestion.$el.$hintULContainer.style.top =
10642
+ targetRect.height + targetRect.top + config.topDistance + "px";
10643
+ }
10644
+ let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
10645
+ SearchSuggestion.$el.$hintULContainer.style.left =
10646
+ (targetRect.left + hintUIWidth > documentWidth
10647
+ ? documentWidth - hintUIWidth
10648
+ : targetRect.left) + "px";
10649
+ },
10650
+ /**
10651
+ * 更新搜索建议框的width
10652
+ * 因为目标元素可能是动态隐藏的
10653
+ */
10654
+ changeHintULElementWidth(target = config.target ?? config.inputTarget) {
10655
+ let targetRect = target.getBoundingClientRect();
10656
+ if (config.followTargetWidth) {
10657
+ SearchSuggestion.$el.$hintULContainer.style.width =
10658
+ targetRect.width + "px";
10659
+ }
10660
+ else {
10661
+ SearchSuggestion.$el.$hintULContainer.style.width = config.width;
10662
+ }
10663
+ },
10664
+ /**
10665
+ * 动态更新CSS
10666
+ */
10667
+ updateDynamicCSS() {
10668
+ let cssText = this.getDynamicCSS();
10669
+ PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
10670
+ },
10671
+ /**
10672
+ * 更新页面显示的搜索结果
10673
+ * @param data
10674
+ */
10675
+ update(data = []) {
10676
+ if (!Array.isArray(data)) {
10677
+ throw new TypeError("传入的数据不是数组");
10678
+ }
10679
+ config.data = data;
10680
+ /* 清空已有的搜索结果 */
10681
+ if (config.data.length) {
10682
+ SearchSuggestion.$data.isEmpty = false;
10683
+ if (config.toHideWithNotResult) {
10684
+ SearchSuggestion.show();
10685
+ }
10686
+ SearchSuggestion.clearAllSearchItemLi();
10687
+ /* 添加进ul中 */
10688
+ config.data.forEach((item, index) => {
10689
+ let itemElement = SearchSuggestion.getSearchItemLiElement(item, index);
10690
+ SearchSuggestion.setSearchItemClickEvent(itemElement);
10691
+ SearchSuggestion.setSearchItemSelectEvent(itemElement);
10692
+ SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
10693
+ });
10694
+ }
10695
+ else {
10696
+ /* 清空 */
10697
+ SearchSuggestion.clear();
10698
+ }
10699
+ },
10700
+ /**
10701
+ * 清空当前的搜索结果并显示无结果
10702
+ */
10703
+ clear() {
10704
+ this.$data.isEmpty = true;
10705
+ this.clearAllSearchItemLi();
10706
+ this.$el.$hintULContainer.appendChild(popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML));
10707
+ if (config.toHideWithNotResult) {
10708
+ this.hide();
10709
+ }
10710
+ },
10711
+ /**
10712
+ * 隐藏搜索建议框
10713
+ */
10714
+ hide() {
10715
+ this.$el.root.style.display = "none";
10716
+ },
10717
+ /**
10718
+ * 显示搜索建议框
10719
+ */
10720
+ show() {
10721
+ this.$el.root.style.display = "";
10722
+ },
10574
10723
  };
10724
+ return SearchSuggestion;
10575
10725
  },
10576
10726
  };
10577
10727
 
@@ -10579,89 +10729,14 @@
10579
10729
  /** 配置 */
10580
10730
  config = {
10581
10731
  /** 版本号 */
10582
- version: "2025.5.26",
10583
- cssText: {
10584
- /** 主CSS */
10585
- index: indexCSS,
10586
- /** 九宫格位置CSS */
10587
- ninePalaceGridPosition: ninePalaceGridPositionCSS,
10588
- /** 滚动条CSS */
10589
- scrollbar: scrollbarCSS,
10590
- /** 按钮CSS */
10591
- button: buttonCSS,
10592
- /** 通用的CSS */
10593
- common: commonCSS,
10594
- /** 动画 */
10595
- anim: animCSS,
10596
- /** pops.alert */
10597
- alertCSS: alertCSS,
10598
- /** pops.cponfirm */
10599
- confirmCSS: confirmCSS,
10600
- /** pops.prompt */
10601
- promptCSS: promptCSS,
10602
- /** pops.loading */
10603
- loadingCSS: loadingCSS,
10604
- /** pops.iframe */
10605
- iframeCSS: iframeCSS,
10606
- /** pops.tooltip */
10607
- tooltipCSS: tooltipCSS,
10608
- /** pops.drawer */
10609
- drawerCSS: drawerCSS,
10610
- /** pops.folder */
10611
- folderCSS: folderCSS,
10612
- /** pops.folder */
10613
- panelCSS: panelCSS,
10614
- /** pops.rightClickMenu */
10615
- rightClickMenu: rightClickMenuCSS,
10616
- },
10732
+ version: "2025.6.4",
10733
+ cssText: PopsCSS,
10617
10734
  /** icon图标的svg代码 */
10618
- iconSVG: {
10619
- min: SVG_min,
10620
- mise: SVG_mise,
10621
- max: SVG_max,
10622
- close: SVG_close,
10623
- edit: SVG_edit,
10624
- share: SVG_share,
10625
- delete: SVG_delete,
10626
- search: SVG_search,
10627
- upload: SVG_upload,
10628
- loading: SVG_loading,
10629
- next: SVG_next,
10630
- prev: SVG_prev,
10631
- eleme: SVG_eleme,
10632
- elemePlus: SVG_elemePlus,
10633
- chromeFilled: SVG_chromeFilled,
10634
- cpu: SVG_cpu,
10635
- videoPlay: SVG_videoPlay,
10636
- videoPause: SVG_videoPause,
10637
- headset: SVG_headset,
10638
- monitor: SVG_monitor,
10639
- documentCopy: SVG_documentCopy,
10640
- picture: SVG_picture,
10641
- circleClose: SVG_circleClose,
10642
- view: SVG_view,
10643
- hide: SVG_hide,
10644
- keyboard: SVG_keyboard,
10645
- arrowRight: SVG_arrowRight,
10646
- arrowLeft: SVG_arrowLeft,
10647
- },
10735
+ iconSVG: PopsIcon.$data,
10648
10736
  /** 当前已配置的动画@keyframes名字映射(初始化时生成) */
10649
- animation: {},
10650
- /** 是否初始化 */
10651
- isInit: false,
10737
+ animation: PopsAnimation.$data,
10652
10738
  /** 存储已创建的元素 */
10653
- layer: {
10654
- alert: [],
10655
- confirm: [],
10656
- prompt: [],
10657
- loading: [],
10658
- iframe: [],
10659
- tooltip: [],
10660
- drawer: [],
10661
- folder: [],
10662
- panel: [],
10663
- rightClickMenu: [],
10664
- },
10739
+ layer: PopsLayer,
10665
10740
  /** 禁止滚动 */
10666
10741
  forbiddenScroll: {
10667
10742
  event(event) {
@@ -10679,20 +10754,7 @@
10679
10754
  /** pops.panel中用于处理各个类型的工具 */
10680
10755
  panelHandleContentUtils: PanelHandleContentDetails,
10681
10756
  };
10682
- init() {
10683
- if (!this.config.isInit) {
10684
- /* 处理获取当前所有的动画名 */
10685
- this.config.isInit = true;
10686
- let animationStyle = document.createElement("style");
10687
- PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
10688
- popsDOMUtils.appendHead(animationStyle);
10689
- this.config.animation = null;
10690
- this.config.animation = PopsInstanceUtils.getKeyFrames(animationStyle.sheet);
10691
- popsUtils.setTimeout(() => {
10692
- animationStyle.remove();
10693
- }, 50);
10694
- }
10695
- }
10757
+ init() { }
10696
10758
  /**
10697
10759
  * 释放原有的pops控制权
10698
10760
  * @example
@@ -10713,8 +10775,8 @@
10713
10775
  * 通过navigator.userAgent判断是否是手机访问
10714
10776
  * @param userAgent
10715
10777
  */
10716
- isPhone(userAgent = PopsCore.globalThis.navigator.userAgent) {
10717
- return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
10778
+ isPhone(userAgent) {
10779
+ return popsUtils.isPhone(userAgent);
10718
10780
  }
10719
10781
  /**
10720
10782
  * 为所有弹窗设置全局属性