@liuzengwei/element-ui 2.15.5-xn.51 → 2.15.5-xn.53

package/lib/time-picker.js

@@ -323,7 +323,7 @@ render._withStripped = true
 var date_util_ = __webpack_require__(1);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // EXTERNAL MODULE: ./packages/date-picker/src/basic/time-spinner.vue + 4 modules
@@ -784,7 +784,7 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=template&id=79ae069f&
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(7);
+var external_vue_ = __webpack_require__(6);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/utils/clickoutside"
@@ -2483,14 +2483,14 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/vue-popper");
 /***/ 6:
 /***/ (function(module, exports) {
 
-module.exports = require("@liuzengwei/element-ui/lib/mixins/locale");
+module.exports = require("vue");
 
 /***/ }),
 
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("vue");
+module.exports = require("@liuzengwei/element-ui/lib/mixins/locale");
 
 /***/ }),
 
@@ -2646,7 +2646,7 @@ render._withStripped = true
 var date_util_ = __webpack_require__(1);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // EXTERNAL MODULE: ./packages/date-picker/src/basic/time-spinner.vue + 4 modules

package/lib/time-select.js

@@ -410,7 +410,7 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/date-picker/src/picker.vue?vue&type=template&id=79ae069f&
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(7);
+var external_vue_ = __webpack_require__(6);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/utils/clickoutside"
@@ -1405,7 +1405,7 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/vue-popper");
 
 /***/ }),
 
-/***/ 7:
+/***/ 6:
 /***/ (function(module, exports) {
 
 module.exports = require("vue");

package/lib/timeline-item.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 132);
+/******/ 	return __webpack_require__(__webpack_require__.s = 133);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -189,7 +189,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 132:
+/***/ 133:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/tooltip.js

@@ -108,7 +108,7 @@ var dom_ = __webpack_require__(2);
 var util_ = __webpack_require__(3);
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(7);
+var external_vue_ = __webpack_require__(6);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // CONCATENATED MODULE: ./packages/tooltip/src/main.js
@@ -414,7 +414,7 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/vue-popper");
 
 /***/ }),
 
-/***/ 7:
+/***/ 6:
 /***/ (function(module, exports) {
 
 module.exports = require("vue");

package/lib/transfer.js

@@ -231,7 +231,7 @@ module.exports = require("@liuzengwei/element-ui/lib/checkbox-group");
 
 /***/ }),
 
-/***/ 6:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = require("@liuzengwei/element-ui/lib/mixins/locale");
@@ -369,7 +369,7 @@ var emitter_ = __webpack_require__(4);
 var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/transfer/src/transfer-panel.vue?vue&type=template&id=2ddab8bd&

package/lib/trigger.js

@@ -275,7 +275,7 @@ var vue_popper_default = /*#__PURE__*/__webpack_require__.n(vue_popper_);
 var dom_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(7);
+var external_vue_ = __webpack_require__(6);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/trigger/src/main.vue?vue&type=script&lang=js&
@@ -907,17 +907,17 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/vue-popper");
 
 /***/ }),
 
-/***/ 64:
+/***/ 6:
 /***/ (function(module, exports) {
 
-module.exports = require("@liuzengwei/element-ui/lib/utils/popper");
+module.exports = require("vue");
 
 /***/ }),
 
-/***/ 7:
+/***/ 64:
 /***/ (function(module, exports) {
 
-module.exports = require("vue");
+module.exports = require("@liuzengwei/element-ui/lib/utils/popper");
 
 /***/ })
 

package/lib/upload.js

@@ -210,13 +210,6 @@ module.exports = require("@liuzengwei/element-ui/lib/progress");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@liuzengwei/element-ui/lib/mixins/locale");
-
-/***/ }),
-
 /***/ 69:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -387,7 +380,7 @@ upload_listvue_type_template_id_173fedf5_render._withStripped = true
 // CONCATENATED MODULE: ./packages/upload/src/upload-list.vue?vue&type=template&id=173fedf5&
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/progress"
@@ -1393,6 +1386,13 @@ src.install = function (Vue) {
 
 /* harmony default export */ var packages_upload = __webpack_exports__["default"] = (src);
 
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@liuzengwei/element-ui/lib/mixins/locale");
+
 /***/ })
 
 /******/ });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liuzengwei/element-ui",
-  "version": "2.15.5-xn.51",
+  "version": "2.15.5-xn.53",
   "description": "A Component Library for Vue.js (Fork of Element UI).",
   "main": "lib/element-ui.common.js",
   "files": [

package/packages/drawer/src/main.vue

@@ -4,12 +4,13 @@
     @after-enter="afterEnter"
     @after-leave="afterLeave">
     <div
-      class="el-drawer__wrapper"
+      :class="referenceMode ? 'el-drawer__wrapper-reference' : 'el-drawer__wrapper'"
+      :style="wrapperStyle"
       tabindex="-1"
       v-show="visible">
       <div
         class="el-drawer__container"
-        :class="visible && 'el-drawer__open'"
+        :class="[visible && 'el-drawer__open', referenceMode && 'el-drawer__reference-mode']"
         @click.self="handleWrapperClick"
         role="document"
         tabindex="-1">
@@ -18,8 +19,8 @@
           aria-labelledby="el-drawer__title"
           :aria-label="title"
           class="el-drawer"
-          :class="[direction, customClass]"
-          :style="isHorizontal ? `width: ${drawerSize}` : `height: ${drawerSize}`"
+          :class="[effectiveDirection, customClass, referenceMode && 'is-reference']"
+          :style="drawerStyle"
           ref="drawer"
           role="dialog"
           tabindex="-1"
@@ -48,6 +49,8 @@
 
 <script>
 import Popup from 'element-ui/src/utils/popup';
+import PopupManager from 'element-ui/src/utils/popup/popup-manager';
+import { getStyle } from 'element-ui/src/utils/dom';
 import emitter from 'element-ui/src/mixins/emitter';
 
 export default {
@@ -110,6 +113,21 @@ export default {
     withHeader: {
       type: Boolean,
       default: true
+    },
+    reference: {
+      type: [String, Object, typeof window !== 'undefined' ? window.HTMLElement : Object],
+      default: null
+    },
+    placement: {
+      type: String,
+      default: 'right',
+      validator(val) {
+        return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1;
+      }
+    },
+    offset: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -118,12 +136,51 @@ export default {
     },
     drawerSize() {
       return typeof this.size === 'number' ? `${this.size}px` : this.size;
+    },
+    referenceMode() {
+      return !!this.reference;
+    },
+    effectiveDirection() {
+      // 在 reference 模式下，根据 placement 映射到对应的 direction
+      if (this.referenceMode) {
+        const placementToDirection = {
+          'top': 'btt',
+          'bottom': 'ttb',
+          'left': 'ltr',
+          'right': 'rtl'
+        };
+        return placementToDirection[this.placement] || 'rtl';
+      }
+      return this.direction;
+    },
+    wrapperStyle() {
+      // 在 reference 模式下，将 z-index 设置在 wrapper 上，与全局模式保持一致
+      if (this.referenceMode && this.drawerZIndex) {
+        return { zIndex: this.drawerZIndex };
+      }
+      return null;
+    },
+    drawerStyle() {
+      if (this.referenceMode) {
+        const style = { ...this.position };
+        if (this.placement === 'left' || this.placement === 'right') {
+          style.width = this.drawerSize;
+        } else {
+          style.height = this.drawerSize;
+        }
+        return style;
+      } else {
+        return this.isHorizontal ? `width: ${this.drawerSize}` : `height: ${this.drawerSize}`;
+      }
     }
   },
   data() {
     return {
       closed: false,
-      prevActiveElement: null
+      prevActiveElement: null,
+      position: {},
+      drawerZIndex: null,
+      modalZIndex: null
     };
   },
   watch: {
@@ -131,7 +188,34 @@ export default {
       if (val) {
         this.closed = false;
         this.$emit('open');
-        if (this.appendToBody) {
+        if (this.referenceMode) {
+          // z-index 已经通过 drawerStyle computed 属性设置
+          const referenceEl = this.getReferenceElement();
+          if (referenceEl) {
+            referenceEl.appendChild(this.$el);
+          }
+          // 在 drawer 挂载后创建 modal
+          this.$nextTick(() => {
+            // drawer 的 z-index 已经在 appendChild 前设置
+
+            // 创建/显示 modal（使用预分配的较低值）
+            if (this.modal) {
+              this.createReferenceModal({
+                modalClass: this.modalClass,
+                modalFade: this.modalFade
+              });
+            }
+
+            // 更新位置
+            this.updatePosition();
+
+            // 清理可能被 PopupManager 创建的全局 modal
+            // 延迟执行，确保全局 modal 已经被创建后再移除
+            setTimeout(() => {
+              this.removeGlobalModal();
+            }, 300);
+          });
+        } else if (this.appendToBody) {
           document.body.appendChild(this.$el);
         }
         this.prevActiveElement = document.activeElement;
@@ -142,6 +226,10 @@ export default {
             this.rendered = false;
           }
         }
+        // 关闭 reference 模式的 modal
+        if (this.referenceMode) {
+          this.closeReferenceModal();
+        }
         this.$nextTick(() => {
           if (this.prevActiveElement) {
             this.prevActiveElement.focus();
@@ -151,6 +239,118 @@ export default {
     }
   },
   methods: {
+    doOpen(props) {
+      // 在 reference 模式下，需要让遮罩层挂载到参考元素而不是 body
+      if (this.referenceMode) {
+        // 手动实现 doOpen 的逻辑，但将 modal 挂载到 reference 元素
+        if (this.$isServer) return;
+        if (this.willOpen && !this.willOpen()) return;
+        if (this.opened) return;
+
+        this._opening = true;
+
+        const dom = this.$el;
+        const zIndex = props.zIndex;
+
+        if (zIndex) {
+          PopupManager.zIndex = zIndex;
+        }
+
+        // modal 的创建已经移到 watch visible 中，在 drawer 挂载后执行
+        // 这里预先分配 z-index，确保 modal 和 drawer 的层级关系正确
+        // 每次打开都重新分配，避免复用时的 z-index 错乱
+        this.modalZIndex = PopupManager.nextZIndex();
+        this.drawerZIndex = PopupManager.nextZIndex();
+
+        if (getStyle(dom, 'position') === 'static') {
+          dom.style.position = 'absolute';
+        }
+
+        // z-index 的设置已经移到 watch visible 中，在 modal 创建后设置
+        this.opened = true;
+
+        this.onOpen && this.onOpen();
+
+        this.doAfterOpen();
+      } else {
+        // 非 reference 模式，使用原始的 doOpen
+        this.$options.mixins[0].methods.doOpen.call(this, props);
+      }
+    },
+    createReferenceModal(props) {
+      // 创建并挂载 modal 到 reference 元素
+      const referenceEl = this.getReferenceElement();
+      if (!referenceEl) return;
+
+      // 创建或复用 modal DOM
+      let modalDom = this._referenceModalDom;
+      if (!modalDom) {
+        modalDom = document.createElement('div');
+        modalDom.className = 'v-modal';
+        modalDom.tabIndex = 0;
+
+        // 使用预先分配的 modal z-index，确保 drawer 已经有更高的 z-index
+        const modalZIndex = this.modalZIndex || PopupManager.nextZIndex();
+        modalDom.style.zIndex = modalZIndex;
+
+        // 关键：在 reference 模式下使用 absolute 定位，而不是 fixed
+        modalDom.style.position = 'absolute';
+        modalDom.style.left = '0';
+        modalDom.style.top = '0';
+        modalDom.style.width = '100%';
+        modalDom.style.height = '100%';
+
+        if (props.modalClass) {
+          const classArr = props.modalClass.trim().split(/\s+/);
+          classArr.forEach(cls => modalDom.classList.add(cls));
+        }
+
+        // 添加淡入动画
+        if (props.modalFade) {
+          modalDom.classList.add('v-modal-enter');
+          setTimeout(() => {
+            modalDom.classList.remove('v-modal-enter');
+          }, 200);
+        }
+
+        // 直接挂载到 reference 元素内部
+        referenceEl.appendChild(modalDom);
+
+        // 点击 modal 时的处理
+        modalDom.addEventListener('click', () => {
+          if (this.closeOnClickModal) {
+            this.closeDrawer();
+          }
+        });
+
+        // 保存引用以便后续清理
+        this._referenceModalDom = modalDom;
+      } else {
+        // 复用 modal 时，使用预分配的 z-index
+        modalDom.style.display = '';
+        modalDom.style.zIndex = this.modalZIndex || PopupManager.nextZIndex();
+      }
+    },
+    closeReferenceModal() {
+      // 关闭 reference 模式的 modal
+      if (this._referenceModalDom) {
+        this._referenceModalDom.style.display = 'none';
+      }
+    },
+    removeGlobalModal() {
+      // 移除 PopupManager 可能创建的全局 modal（在 body 下的）
+      // 只在 reference 模式下调用此方法
+      if (this.referenceMode) {
+        // 查找并移除 body 下与此 drawer 关联的 modal
+        const globalModals = document.body.querySelectorAll('.v-modal');
+        globalModals.forEach(modal => {
+          // 移除 body 下的所有 modal（它们不应该存在）
+          if (modal.parentNode === document.body) {
+            document.body.removeChild(modal);
+          }
+        });
+      }
+    },
     afterEnter() {
       this.$emit('opened');
     },
@@ -184,22 +384,134 @@ export default {
       // pressing `ESC` will call this method, and also close the drawer.
       // This method also calls `beforeClose` if there was one.
       this.closeDrawer();
+    },
+    getReferenceElement() {
+      if (typeof this.reference === 'string') {
+        return document.querySelector(this.reference);
+      } else if (this.reference && this.reference.$el) {
+        return this.reference.$el;
+      } else {
+        return this.reference;
+      }
+    },
+    updatePosition() {
+      if (!this.referenceMode) return;
+
+      const referenceEl = this.getReferenceElement();
+      if (!referenceEl) {
+        console.warn('[ElDrawer] Reference element not found');
+        return;
+      }
+
+      // 确保参考元素有 position 样式
+      const computedStyle = window.getComputedStyle(referenceEl);
+      if (computedStyle.position === 'static') {
+        referenceEl.style.position = 'relative';
+      }
+
+      const { placement, offset } = this;
+      const position = {};
+
+      switch (placement) {
+        case 'top':
+          position.left = '0';
+          position.bottom = `${offset}px`;
+          position.top = 'auto';
+          position.right = '0';
+          break;
+        case 'bottom':
+          position.left = '0';
+          position.top = `${offset}px`;
+          position.bottom = 'auto';
+          position.right = '0';
+          break;
+        case 'left':
+          position.top = '0';
+          position.right = 'auto';
+          position.left = `${offset}px`;
+          position.bottom = '0';
+          break;
+        case 'right':
+          position.top = '0';
+          position.left = 'auto';
+          position.right = `${offset}px`;
+          position.bottom = '0';
+          break;
+      }
+
+      this.position = position;
+    },
+    handleScroll() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    },
+    handleResize() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    }
+  },
+  beforeMount() {
+    // 在 reference 模式下，我们不使用 PopupManager 的 modal
+    // 设置一个内部标志来阻止 PopupManager 创建 modal
+    if (this.referenceMode) {
+      // 保存原始的 modal 属性
+      this._originalModal = this.modal;
+      // 临时将 modal 设为 false，这样 Popup mixin 的逻辑不会调用 PopupManager.openModal
+      // 注意：这个技巧可能不work，因为 modal 是 prop
     }
   },
   mounted() {
     if (this.visible) {
       this.rendered = true;
       this.open();
-      if (this.appendToBody) {
+      if (this.referenceMode) {
+        const referenceEl = this.getReferenceElement();
+        if (referenceEl) {
+          referenceEl.appendChild(this.$el);
+        }
+      } else if (this.appendToBody) {
         document.body.appendChild(this.$el);
       }
     }
-  },
-  destroyed() {
+    if (this.referenceMode) {
+      window.addEventListener('scroll', this.handleScroll, true);
+      window.addEventListener('resize', this.handleResize);
+    }
+  }, beforeDestroy() {
+    // 在 reference 模式下，不使用 PopupManager 管理 modal
+    // 所以需要阻止 Popup mixin 的 beforeDestroy 调用 PopupManager.closeModal
+    if (!this.referenceMode) {
+      // 非 reference 模式，调用 mixin 的 beforeDestroy
+      if (this.$options.mixins && this.$options.mixins[0].beforeDestroy) {
+        this.$options.mixins[0].beforeDestroy.call(this);
+      }
+    } else {
+      // reference 模式，只执行必要的清理
+      if (this._popupId) {
+        PopupManager.deregister(this._popupId);
+        // 不调用 PopupManager.closeModal，因为我们用的是自定义 modal
+      }
+      this.restoreBodyStyle();
+    }
+  }, destroyed() {
     // if appendToBody is true, remove DOM node after destroy
     if (this.appendToBody && this.$el && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
     }
+    if (this.referenceMode && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    // 清理 reference modal
+    if (this.referenceMode && this._referenceModalDom && this._referenceModalDom.parentNode) {
+      this._referenceModalDom.parentNode.removeChild(this._referenceModalDom);
+      this._referenceModalDom = null;
+    }
+    if (this.referenceMode) {
+      window.removeEventListener('scroll', this.handleScroll, true);
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 };
 </script>

package/packages/theme-chalk/lib/drawer.css

@@ -1 +1 @@
-.el-drawer.btt,.el-drawer.ttb,.el-drawer__container{left:0;right:0;width:100%}@-webkit-keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@-webkit-keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@-webkit-keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@-webkit-keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}@keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}.el-drawer{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#FFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);overflow:hidden;outline:0}.el-drawer.rtl{-webkit-animation:rtl-drawer-out .3s;animation:rtl-drawer-out .3s;right:0}.el-drawer__open .el-drawer.rtl{-webkit-animation:rtl-drawer-in .3s 1ms;animation:rtl-drawer-in .3s 1ms}.el-drawer.ltr{-webkit-animation:ltr-drawer-out .3s;animation:ltr-drawer-out .3s;left:0}.el-drawer__open .el-drawer.ltr{-webkit-animation:ltr-drawer-in .3s 1ms;animation:ltr-drawer-in .3s 1ms}.el-drawer.ttb{-webkit-animation:ttb-drawer-out .3s;animation:ttb-drawer-out .3s;top:0}.el-drawer__open .el-drawer.ttb{-webkit-animation:ttb-drawer-in .3s 1ms;animation:ttb-drawer-in .3s 1ms}.el-drawer.btt{-webkit-animation:btt-drawer-out .3s;animation:btt-drawer-out .3s;bottom:0}.el-drawer__open .el-drawer.btt{-webkit-animation:btt-drawer-in .3s 1ms;animation:btt-drawer-in .3s 1ms}.el-drawer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#72767b;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:32px;padding:20px 20px 0}.el-drawer__header>:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.el-drawer__title{margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:inherit;font-size:1rem}.el-drawer__close-btn{border:none;cursor:pointer;font-size:20px;color:inherit;background-color:transparent}.el-drawer__body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto}.el-drawer__body>*{-webkit-box-sizing:border-box;box-sizing:border-box}.el-drawer.ltr,.el-drawer.rtl{height:100%;top:0;bottom:0}.el-drawer__container{position:relative;top:0;bottom:0;height:100%}.el-drawer-fade-enter-active{-webkit-animation:el-drawer-fade-in .3s;animation:el-drawer-fade-in .3s}.el-drawer-fade-leave-active{animation:el-drawer-fade-in .3s reverse}
+@-webkit-keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes el-drawer-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes rtl-drawer-in{0%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@keyframes rtl-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(100%,0);transform:translate(100%,0)}}@-webkit-keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ltr-drawer-in{0%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@keyframes ltr-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}}@-webkit-keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ttb-drawer-in{0%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@keyframes ttb-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,-100%);transform:translate(0,-100%)}}@-webkit-keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes btt-drawer-in{0%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}@keyframes btt-drawer-out{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}100%{-webkit-transform:translate(0,100%);transform:translate(0,100%)}}.el-drawer{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#FFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);overflow:hidden;outline:0}.el-drawer.rtl{-webkit-animation:rtl-drawer-out .3s;animation:rtl-drawer-out .3s;right:0}.el-drawer__open .el-drawer.rtl{-webkit-animation:rtl-drawer-in .3s 1ms;animation:rtl-drawer-in .3s 1ms}.el-drawer.ltr{-webkit-animation:ltr-drawer-out .3s;animation:ltr-drawer-out .3s;left:0}.el-drawer__open .el-drawer.ltr{-webkit-animation:ltr-drawer-in .3s 1ms;animation:ltr-drawer-in .3s 1ms}.el-drawer.ttb{-webkit-animation:ttb-drawer-out .3s;animation:ttb-drawer-out .3s;top:0}.el-drawer__open .el-drawer.ttb{-webkit-animation:ttb-drawer-in .3s 1ms;animation:ttb-drawer-in .3s 1ms}.el-drawer.btt{-webkit-animation:btt-drawer-out .3s;animation:btt-drawer-out .3s;bottom:0}.el-drawer__open .el-drawer.btt{-webkit-animation:btt-drawer-in .3s 1ms;animation:btt-drawer-in .3s 1ms}.el-drawer__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__wrapper-reference{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0}.el-drawer__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#72767b;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:32px;padding:20px 20px 0}.el-drawer__header>:first-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.el-drawer__title{margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1;line-height:inherit;font-size:1rem}.el-drawer__close-btn{border:none;cursor:pointer;font-size:20px;color:inherit;background-color:transparent}.el-drawer__body{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto}.el-drawer__body>*{-webkit-box-sizing:border-box;box-sizing:border-box}.el-drawer.ltr,.el-drawer.rtl{height:100%;top:0;bottom:0}.el-drawer.btt,.el-drawer.ttb{width:100%;left:0;right:0}.el-drawer.is-reference{position:absolute}.el-drawer.is-reference.btt,.el-drawer.is-reference.ltr,.el-drawer.is-reference.rtl,.el-drawer.is-reference.ttb{height:auto;width:auto;top:auto;bottom:auto;left:auto;right:auto}.el-drawer__container{position:relative;left:0;right:0;top:0;bottom:0;height:100%;width:100%}.el-drawer__container.el-drawer__reference-mode{position:absolute;background-color:transparent;pointer-events:none}.el-drawer__container.el-drawer__reference-mode .el-drawer{pointer-events:auto}.el-drawer-fade-enter-active{-webkit-animation:el-drawer-fade-in .3s;animation:el-drawer-fade-in .3s}.el-drawer-fade-leave-active{animation:el-drawer-fade-in .3s reverse}