@web-utils/component 2.7.20 → 2.7.21

package/dist/components/form-view/index.js

@@ -1,200 +1,201 @@
-import { hasOwn as a, merge as m, toStringArray as h, animate as p, isInContainer as b } from "@web-utils/core";
-import { n as v } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var _ = function() {
-  var t = this, e = t.$createElement, o = t._self._c || e;
-  return o("div", {
-    class: ["form-view", t.className]
-  }, [t.showToolbar ? o("div", {
+import { hasOwn, toStringArray, animate, isInContainer } from "@web-utils/core";
+import { merge } from "@web-utils/integrations/lodash";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
+    class: ["form-view", _vm.className]
+  }, [_vm.showToolbar ? _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !t.isFormLoading,
+      value: !_vm.isFormLoading,
       expression: "!isFormLoading"
     }],
     staticClass: "form-view-toolbar"
-  }, [t._t("form-view-toolbar", function() {
-    return [o("Toolbar", t._g(t._b({
+  }, [_vm._t("form-view-toolbar", function() {
+    return [_c("Toolbar", _vm._g(_vm._b({
       on: {
-        edit: t.onEdit
+        edit: _vm.onEdit
       },
-      scopedSlots: t._u([{
+      scopedSlots: _vm._u([{
         key: "default",
-        fn: function(r) {
-          var s = r.buttons;
-          return [t._t("toolbar-button", null, {
-            buttons: s
+        fn: function(_ref) {
+          var buttons = _ref.buttons;
+          return [_vm._t("toolbar-button", null, {
+            buttons
           })];
         }
-      }, t._l(t.getToolbarSlotKeys(), function(r) {
+      }, _vm._l(_vm.getToolbarSlotKeys(), function(item) {
         return {
-          key: r,
+          key: item,
           fn: function() {
-            return [t._t(r)];
+            return [_vm._t(item)];
           },
           proxy: !0
         };
       }), {
         key: "toolbar-right",
         fn: function() {
-          return [t._t("toolbar-right")];
+          return [_vm._t("toolbar-right")];
         },
         proxy: !0
       }], null, !0)
-    }, "Toolbar", Object.assign({}, t.toolbarProps, {
-      buttons: t.toolbarButtons
-    }), !1), t.toolbarListeners))];
-  })], 2) : t._e(), o("div", {
+    }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+      buttons: _vm.toolbarButtons
+    }), !1), _vm.toolbarListeners))];
+  })], 2) : _vm._e(), _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !t.isFormLoading,
+      value: !_vm.isFormLoading,
       expression: "!isFormLoading"
     }],
     staticClass: "form-scroller-wrapper"
-  }, [o("div", {
+  }, [_c("div", {
     ref: "formScroller",
-    class: ["form-scroller", "absolute-box", t.contentClass],
+    class: ["form-scroller", "absolute-box", _vm.contentClass],
     on: {
-      scroll: t.onFormScroll
+      scroll: _vm.onFormScroll
     }
-  }, [t.notForm ? o("div", {
+  }, [_vm.notForm ? _c("div", {
     staticClass: "not-form",
     style: {
-      width: t.formWidth
+      width: _vm.formWidth
     }
-  }, [t.title ? o("div", {
+  }, [_vm.title ? _c("div", {
     staticClass: "form-view-title"
-  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
-    return [o("EmptyView", {
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
+    return [_c("EmptyView", {
       attrs: {
         "empty-tips": "请添加表单内容"
       }
     })];
-  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
       footer: ""
     },
-    scopedSlots: t._u([{
+    scopedSlots: _vm._u([{
       key: "default",
-      fn: function(r) {
-        var s = r.buttons, n = r.footer;
-        return [t._t("footer-button", null, {
-          buttons: s,
-          footer: n
+      fn: function(_ref2) {
+        var buttons = _ref2.buttons, footer = _ref2.footer;
+        return [_vm._t("footer-button", null, {
+          buttons,
+          footer
         })];
       }
-    }, t._l(t.getFooterSlotKeys(), function(r) {
+    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
       return {
-        key: t.getFooterSlotKey(r),
+        key: _vm.getFooterSlotKey(item),
         fn: function() {
-          return [t._t(r)];
+          return [_vm._t(item)];
         },
         proxy: !0
       };
     })], null, !0)
-  }, "Toolbar", Object.assign({}, t.toolbarProps, {
-    buttons: t.footerBarButtons
-  }), !1), t.toolbarListeners)) : t._e(), t.$scopedSlots["form-bottom"] ? t._t("form-bottom") : t._e()], 2) : o("div", {
+  }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+    buttons: _vm.footerBarButtons
+  }), !1), _vm.toolbarListeners)) : _vm._e(), _vm.$scopedSlots["form-bottom"] ? _vm._t("form-bottom") : _vm._e()], 2) : _c("div", {
     class: ["form-card", {
-      "un-limit": t.unLimit
+      "un-limit": _vm.unLimit
     }],
     style: {
-      width: `calc(${t.formWidth} + 40px)`
+      width: `calc(${_vm.formWidth} + 40px)`
     }
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-content"
-  }, [t.title ? o("div", {
+  }, [_vm.title ? _c("div", {
     staticClass: "form-view-title"
-  }, [t._v(" " + t._s(t.title) + " ")]) : t._e(), t._t("default", function() {
-    return [o("EmptyView", {
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _vm._t("default", function() {
+    return [_c("EmptyView", {
       attrs: {
         "empty-tips": "请添加表单内容"
       }
     })];
-  }), t.footerBarButtons.length ? o("Toolbar", t._g(t._b({
+  }), _vm.footerBarButtons.length ? _c("Toolbar", _vm._g(_vm._b({
     attrs: {
       footer: ""
     },
-    scopedSlots: t._u([{
+    scopedSlots: _vm._u([{
       key: "default",
-      fn: function(r) {
-        var s = r.buttons, n = r.footer;
-        return [t._t("footer-button", null, {
-          buttons: s,
-          footer: n
+      fn: function(_ref3) {
+        var buttons = _ref3.buttons, footer = _ref3.footer;
+        return [_vm._t("footer-button", null, {
+          buttons,
+          footer
         })];
       }
-    }, t._l(t.getFooterSlotKeys(), function(r) {
+    }, _vm._l(_vm.getFooterSlotKeys(), function(item) {
       return {
-        key: t.getFooterSlotKey(r),
+        key: _vm.getFooterSlotKey(item),
         fn: function() {
-          return [t._t(r)];
+          return [_vm._t(item)];
         },
         proxy: !0
       };
     })], null, !0)
-  }, "Toolbar", Object.assign({}, t.toolbarProps, {
-    buttons: t.footerBarButtons
-  }), !1), t.toolbarListeners)) : t._e()], 2)]), t.$scopedSlots["form-bottom"] || t.$parent.$options.flowForm && t.flowContext.logs.length ? o("div", {
+  }, "Toolbar", Object.assign({}, _vm.toolbarProps, {
+    buttons: _vm.footerBarButtons
+  }), !1), _vm.toolbarListeners)) : _vm._e()], 2)]), _vm.$scopedSlots["form-bottom"] || _vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("div", {
     class: ["form-card", {
-      "un-limit": t.unLimit
+      "un-limit": _vm.unLimit
     }],
     staticStyle: {
       "min-height": "0"
     },
     style: {
-      width: `calc(${t.formWidth} + 40px)`
+      width: `calc(${_vm.formWidth} + 40px)`
     }
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-content"
-  }, [t.$parent.$options.flowForm && t.flowContext.logs.length ? o("FormItemGroup", {
+  }, [_vm.$parent.$options.flowForm && _vm.flowContext.logs.length ? _c("FormItemGroup", {
     attrs: {
       "block-title": "流程日志"
     }
-  }, [o("FlowLog", {
+  }, [_c("FlowLog", {
     staticClass: "flow-log",
     attrs: {
       fetch: !1,
       "show-title": !1,
-      "business-key": t.$parent.bizKey
+      "business-key": _vm.$parent.bizKey
     }
-  })], 1) : t._e(), t._t("form-bottom")], 2)]) : t._e()]), o("ResizeObserver", {
+  })], 1) : _vm._e(), _vm._t("form-bottom")], 2)]) : _vm._e()]), _c("ResizeObserver", {
     on: {
-      notify: t.onFormResize
+      notify: _vm.onFormResize
     }
-  })], 1), t.formNav && !t.isFormLoading && t.showNav && t.groups.length ? o("div", {
+  })], 1), _vm.formNav && !_vm.isFormLoading && _vm.showNav && _vm.groups.length ? _c("div", {
     staticClass: "form-nav"
-  }, [o("div", {
+  }, [_c("div", {
     staticClass: "form-nav-header"
-  }, [t._v(" 表单导航 ")]), o("ul", {
+  }, [_vm._v(" 表单导航 ")]), _c("ul", {
     staticClass: "form-nav-list"
-  }, t._l(t.groups, function(r, s) {
-    return o("li", {
-      key: r.blockTitle,
+  }, _vm._l(_vm.groups, function(item, index) {
+    return _c("li", {
+      key: item.blockTitle,
       class: ["form-nav-item", {
-        active: t.activeIndex === s
+        active: _vm.activeIndex === index
       }],
       on: {
-        click: function(n) {
-          return t.navItemClick(r, s);
+        click: function($event) {
+          return _vm.navItemClick(item, index);
         }
       }
-    }, [t._v(" " + t._s(r.blockTitle) + " ")]);
-  }), 0)]) : t._e(), t.isFormLoading ? o("LoadingView", {
+    }, [_vm._v(" " + _vm._s(item.blockTitle) + " ")]);
+  }), 0)]) : _vm._e(), _vm.isFormLoading ? _c("LoadingView", {
     attrs: {
       "icon-size": "34px",
       "font-size": "16px"
     }
-  }) : t._e()], 1);
-}, g = [];
-const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], y = u.map((t) => `${t}-down`), w = ["back", "withdraw", "edit"], c = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], l = (t, e) => {
-  if (t.classList.contains(e))
-    return t;
-  let o = t.parentNode;
-  for (; o && !o.classList.contains(e); )
-    o = o.parentNode;
-  return o.classList.contains(e) ? o : null;
-}, x = {
+  }) : _vm._e()], 1);
+}, staticRenderFns = [];
+const builtInButtons = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "agree", "disagree", "reject", "finish", "cancel", "enable", "exp", "imp", "del", "disabled", "reload", "slot"], footerButtons = builtInButtons.map((value) => `${value}-down`), topButtons = ["back", "withdraw", "edit"], bottomButtons = ["save", "submit", "", "publish", "agree", "disagree", "reject", "finish", "cancel"], findParent = (el, selector) => {
+  if (el.classList.contains(selector))
+    return el;
+  let parent = el.parentNode;
+  for (; parent && !parent.classList.contains(selector); )
+    parent = parent.parentNode;
+  return parent.classList.contains(selector) ? parent : null;
+}, __vue2_script = {
   name: "FormView",
   inject: {
     flowContext: {
@@ -245,37 +246,37 @@ const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "a
   },
   computed: {
     isFormLoading() {
-      return this.loading || a(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
+      return this.loading || hasOwn(this.$parent, "isFormLoaded") ? !this.$parent.isFormLoaded : !1;
     },
     toolbarProps() {
-      var r;
-      const t = {}, e = ((r = this.toolbarAttrs) == null ? void 0 : r.buttons) || this.$parent.buttons, o = m({}, this.toolbarAttrs, t);
-      return o.buttons = e || ["back"], o.buttons = h(o.buttons), o;
+      var _a;
+      const defaultProps = {}, buttons = ((_a = this.toolbarAttrs) == null ? void 0 : _a.buttons) || this.$parent.buttons, toolbarAttrs = merge({}, this.toolbarAttrs, defaultProps);
+      return toolbarAttrs.buttons = buttons || ["back"], toolbarAttrs.buttons = toStringArray(toolbarAttrs.buttons), toolbarAttrs;
     },
     toolbarButtons() {
-      return this.toolbarProps.buttons.filter((t) => !c.includes(t) && t.indexOf(":down") < 0).map((t) => t.replace(":up", ""));
+      return this.toolbarProps.buttons.filter((value) => !bottomButtons.includes(value) && value.indexOf(":down") < 0).map((value) => value.replace(":up", ""));
     },
     footerBarButtons() {
-      let t = this.toolbarProps.buttons.filter((e) => !w.includes(e) && (c.includes(e) || e.indexOf(":down") > -1)).map((e) => e.replace(":down", ""));
-      return t = t || [], this.$parent.isEnabled && !t.includes("cancel") && t.push("cancel"), t;
+      let footerBarButtons = this.toolbarProps.buttons.filter((value) => !topButtons.includes(value) && (bottomButtons.includes(value) || value.indexOf(":down") > -1)).map((value) => value.replace(":down", ""));
+      return footerBarButtons = footerBarButtons || [], this.$parent.isEnabled && !footerBarButtons.includes("cancel") && footerBarButtons.push("cancel"), footerBarButtons;
     }
   },
   created() {
-    this.$on("FormView.addGroup", (t) => {
-      t && (this.activeIndex === -1 && (this.activeIndex = 0), this.groups.push(t), this.groups = this.groups.sort((e, o) => {
-        const r = l(e.$el, "form-card"), s = l(o.$el, "form-card");
-        if (r === s) {
-          const n = [].indexOf.call(e.$el.parentNode.children, e.$el), i = [].indexOf.call(o.$el.parentNode.children, o.$el);
-          return n - i;
+    this.$on("FormView.addGroup", (group) => {
+      group && (this.activeIndex === -1 && (this.activeIndex = 0), this.groups.push(group), this.groups = this.groups.sort((aTab, bTab) => {
+        const formCardA = findParent(aTab.$el, "form-card"), formCardB = findParent(bTab.$el, "form-card");
+        if (formCardA === formCardB) {
+          const aIndex = [].indexOf.call(aTab.$el.parentNode.children, aTab.$el), bIndex = [].indexOf.call(bTab.$el.parentNode.children, bTab.$el);
+          return aIndex - bIndex;
         } else {
-          const n = l(r, "form-scroller"), i = [].indexOf.call(n.children, r), d = [].indexOf.call(n.children, s);
-          return i - d;
+          const formScroller = findParent(formCardA, "form-scroller"), aBlockIndex = [].indexOf.call(formScroller.children, formCardA), bBlockIndex = [].indexOf.call(formScroller.children, formCardB);
+          return aBlockIndex - bBlockIndex;
         }
-      }), t.active && (this.activeIndex = this.groups.indexOf(t), this.navItemClick(t, this.activeIndex)));
-    }), this.$on("FormView.removeGroup", (t) => {
-      if (t) {
-        const e = this.groups.indexOf(t);
-        this.groups.splice(e, 1), this.activeIndex > this.groups.length - 1 && (this.activeIndex = 0);
+      }), group.active && (this.activeIndex = this.groups.indexOf(group), this.navItemClick(group, this.activeIndex)));
+    }), this.$on("FormView.removeGroup", (tab) => {
+      if (tab) {
+        const index = this.groups.indexOf(tab);
+        this.groups.splice(index, 1), this.activeIndex > this.groups.length - 1 && (this.activeIndex = 0);
       }
     }), this.onFormResize({ width: window.document.body.clientWidth });
   },
@@ -284,31 +285,31 @@ const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "a
   },
   methods: {
     getToolbarSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((t) => u.includes(t));
+      return Object.keys(this.$scopedSlots).filter((value) => builtInButtons.includes(value));
     },
     getFooterSlotKeys() {
-      return Object.keys(this.$scopedSlots).filter((t) => y.includes(t));
+      return Object.keys(this.$scopedSlots).filter((value) => footerButtons.includes(value));
     },
-    getFooterSlotKey(t) {
-      return t.replace("-down", "");
+    getFooterSlotKey(key) {
+      return key.replace("-down", "");
     },
-    onFormResize({ width: t }) {
-      this.showNav = t > 1500;
+    onFormResize({ width }) {
+      this.showNav = width > 1500;
     },
     onEdit() {
-      !this.toolbarListeners.edit && a(this.$parent, "disabled") && (this.$parent.disabled = !1);
+      !this.toolbarListeners.edit && hasOwn(this.$parent, "disabled") && (this.$parent.disabled = !1);
     },
-    async navItemClick(t, e) {
-      this.showNav && (await this.$nextTick(), this.activeFormItemGroup(t, e), t.expand || t.open());
+    async navItemClick(item, index) {
+      this.showNav && (await this.$nextTick(), this.activeFormItemGroup(item, index), item.expand || item.open());
     },
-    activeFormItemGroup(t, e) {
-      this.$refs.formScroller.scrollTop = t.$el.offsetTop - 10, p(t.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = e;
+    activeFormItemGroup(tab, index) {
+      this.$refs.formScroller.scrollTop = tab.$el.offsetTop - 10, animate(tab.$el, "breathe-indicator-animation"), this.tryByClick = !0, this.activeIndex = index;
     },
     async tryActive() {
       if (this.showNav) {
-        for (let t = 0; t < this.groups.length; t++)
-          if (b(this.groups[t].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
-            this.activeIndex = t;
+        for (let i = 0; i < this.groups.length; i++)
+          if (isInContainer(this.groups[i].$el, this.$refs.formScroller, { bottomOffset: 10 })) {
+            this.activeIndex = i;
             break;
           }
       }
@@ -316,28 +317,28 @@ const u = ["back", "create", "save", "withdraw", "edit", "submit", "publish", "a
     onFormScroll() {
       this.formScrollTop = this.$refs.formScroller.scrollTop, this.formScrollLeft = this.$refs.formScroller.scrollLeft, !this.tryByClick && this.groups.length && window.requestAnimationFrame(this.tryActive), this.tryByClick = !1;
     },
-    scrollTo(t, e) {
-      t && (this.$refs.formScroller.scrollTop = t), e && (this.$refs.formScroller.scrollLeft = e);
+    scrollTo(top, left) {
+      top && (this.$refs.formScroller.scrollTop = top), left && (this.$refs.formScroller.scrollLeft = left);
     }
   }
-}, f = {};
-var $ = /* @__PURE__ */ v(
-  x,
-  _,
-  g,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  S,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function S(t) {
-  for (let e in f)
-    this[e] = f[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const B = /* @__PURE__ */ function() {
-  return $.exports;
+const FormView = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  B as default
+  FormView as default
 };

package/dist/components/form-view/style.css

@@ -1 +1,155 @@
-.form-view{display:flex;flex-direction:column;height:100%}.form-view .form-scroller-wrapper{position:relative;flex:1}.form-view .not-form{margin:0 auto}.form-view .form-view-toolbar{overflow:hidden}.form-view .form-scroller{flex:1;overflow:auto}.form-view .form-scroller .el-row{position:static}.form-view .form-content .el-form .el-row{padding-right:2rem}.form-view .form-content .el-form .el-row .el-row{padding-right:0}.form-view .form-card{box-shadow:0 2px 12px #0000001a;max-width:1000px;margin:14px auto;padding:20px;color:#303133;background-color:#fff;border:1px solid #ebeef5;border-radius:4px;transition:.3s}.form-view .form-card.un-limit{max-width:100%}.form-view .form-nav{box-shadow:0 2px 12px #0000001a;position:absolute;top:55px;left:20px;background-color:#fff}.form-view .form-nav-list{min-width:180px;padding:10px 20px}.form-view .form-nav-header{position:relative;padding:5px 20px;color:#e34e55;font-weight:700;font-size:15px;background-color:#f3f5fb}.form-view .form-nav-item{position:relative;padding:5px 0;font-family:element-icons!important;cursor:pointer}.form-view .form-nav-item.active,.form-view .form-nav-item:hover{color:#e34e55;font-weight:700}.form-view .form-nav-item.active:before{position:absolute;left:-14px;content:"\e6e0"}.form-view .form-view-title{width:100%;height:36px;margin-bottom:10px;color:#333;font-size:22px;line-height:36px;text-align:center;background-color:#fff}.form-view .tip{margin:20px 0;padding:8px 16px;background-color:#ecf8ff;border-left:5px solid #50bfff;border-radius:4px}.form-view .tip p{color:#5e6d82;font-size:14px;line-height:1.5em}.form-view .tip.danger{background-color:#fde2e2;border-left-color:#f56c6c}.form-view .tip.danger p{color:#564646}.form-view .tip.warning{background-color:#f7efe2;border-left-color:#e6a23c}.form-view .tip.warning p{color:#5d564b}.form-view .select-num{color:#898989;font-size:12px}.form-view .select-num .num{font-size:19px;font-family:impact,Constantia,Georgia}.form-view .el-table .el-table__header th{color:#595959;font-weight:400;background:#fff}.form-view .el-table td{padding:4px 0}.form-view .el-table td .cell .el-input .el-input__inner{padding-left:4px}.form-view .el-table td .cell .el-input.el-input--prefix .el-input__inner{padding-left:30px}.form-view .el-table td .cell .el-input.is-disabled .el-input__suffix{display:none}.form-view .el-table td .cell .el-input.is-disabled .el-input__inner{padding:0 0 0 4px;line-height:1.6;white-space:normal;word-break:break-word;background:transparent;border:0}@media screen and (min-width: 1700px){.form-view.form-view__lg .form-card{position:relative;left:60px}}
+.form-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.form-view .form-scroller-wrapper {
+  position: relative;
+  flex: 1;
+}
+.form-view .not-form {
+  margin: 0 auto;
+}
+.form-view .form-view-toolbar {
+  overflow: hidden;
+}
+.form-view .form-scroller {
+  flex: 1;
+  overflow: auto;
+}
+.form-view .form-scroller .el-row {
+  position: static;
+}
+.form-view .form-content .el-form .el-row {
+  padding-right: 2rem;
+}
+.form-view .form-content .el-form .el-row .el-row {
+  padding-right: 0;
+}
+.form-view .form-card {
+  box-shadow: 0 2px 12px #0000001a;
+  max-width: 1000px;
+  margin: 14px auto;
+  padding: 20px;
+  color: #303133;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  transition: .3s;
+}
+.form-view .form-card.un-limit {
+  max-width: 100%;
+}
+.form-view .form-nav {
+  box-shadow: 0 2px 12px #0000001a;
+  position: absolute;
+  top: 55px;
+  left: 20px;
+  background-color: #fff;
+}
+.form-view .form-nav-list {
+  min-width: 180px;
+  padding: 10px 20px;
+}
+.form-view .form-nav-header {
+  position: relative;
+  padding: 5px 20px;
+  color: #e34e55;
+  font-weight: 700;
+  font-size: 15px;
+  background-color: #f3f5fb;
+}
+.form-view .form-nav-item {
+  position: relative;
+  padding: 5px 0;
+  font-family: element-icons !important;
+  cursor: pointer;
+}
+.form-view .form-nav-item.active,
+.form-view .form-nav-item:hover {
+  color: #e34e55;
+  font-weight: 700;
+}
+.form-view .form-nav-item.active:before {
+  position: absolute;
+  left: -14px;
+  content: "\e6e0";
+}
+.form-view .form-view-title {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+  color: #333;
+  font-size: 22px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #fff;
+}
+.form-view .tip {
+  margin: 20px 0;
+  padding: 8px 16px;
+  background-color: #ecf8ff;
+  border-left: 5px solid #50bfff;
+  border-radius: 4px;
+}
+.form-view .tip p {
+  color: #5e6d82;
+  font-size: 14px;
+  line-height: 1.5em;
+}
+.form-view .tip.danger {
+  background-color: #fde2e2;
+  border-left-color: #f56c6c;
+}
+.form-view .tip.danger p {
+  color: #564646;
+}
+.form-view .tip.warning {
+  background-color: #f7efe2;
+  border-left-color: #e6a23c;
+}
+.form-view .tip.warning p {
+  color: #5d564b;
+}
+.form-view .select-num {
+  color: #898989;
+  font-size: 12px;
+}
+.form-view .select-num .num {
+  font-size: 19px;
+  font-family:
+    impact,
+    Constantia,
+    Georgia;
+}
+.form-view .el-table .el-table__header th {
+  color: #595959;
+  font-weight: 400;
+  background: #fff;
+}
+.form-view .el-table td {
+  padding: 4px 0;
+}
+.form-view .el-table td .cell .el-input .el-input__inner {
+  padding-left: 4px;
+}
+.form-view .el-table td .cell .el-input.el-input--prefix .el-input__inner {
+  padding-left: 30px;
+}
+.form-view .el-table td .cell .el-input.is-disabled .el-input__suffix {
+  display: none;
+}
+.form-view .el-table td .cell .el-input.is-disabled .el-input__inner {
+  padding: 0 0 0 4px;
+  line-height: 1.6;
+  white-space: normal;
+  word-break: break-word;
+  background: transparent;
+  border: 0;
+}
+@media screen and (min-width: 1700px) {
+  .form-view.form-view__lg .form-card {
+    position: relative;
+    left: 60px;
+  }
+}