@fangzhongya/fang-ui 0.0.29 → 0.0.30

package/dist/components/forms-item/src/index.cjs

@@ -2,8 +2,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const data = require("./data.cjs");
-const index$2 = require("../../forms-div/index.cjs");
-const elementPlus = require("element-plus");
+const index$3 = require("../../forms-div/index.cjs");
+const index$2 = require("element-plus/es/components/form/index");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/inherit/index.cjs");
 const label = require("./label.cjs");
@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           rowHeight: rowHeight.value
         })
       }, vue.unref(attrs).root), [
-        vue.unref(props).hideLabel ?? prs.hideLabel ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), vue.mergeProps({ key: 0 }, vue.unref(attrs).assem, {
+        vue.unref(props).hideLabel ?? prs.hideLabel ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElFormItem), vue.mergeProps({ key: 0 }, vue.unref(attrs).assem, {
           class: [
             vue.unref(cs).z("el-item"),
             vue.unref(cs).is("height", rowHeight.value && vue.unref(form).labelPosition != "top"),
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           "label-width": setLabelWidth(vue.unref(props))
         }), {
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(index$2.FormsDiv), {
+            vue.createVNode(vue.unref(index$3.FormsDiv), {
               listobj: vue.unref(props),
               optionss: prs.optionss,
               valueobj: prs.valueobj,
@@ -79,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]), 1032, ["listobj", "optionss", "valueobj", "modelValue"])
           ]),
           _: 3
-        }, 16, ["class", "prop", "required", "rules", "label-width"])) : (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), vue.mergeProps({ key: 1 }, vue.unref(attrs).assem, {
+        }, 16, ["class", "prop", "required", "rules", "label-width"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.ElFormItem), vue.mergeProps({ key: 1 }, vue.unref(attrs).assem, {
           class: [
             vue.unref(cs).z("el-item"),
             vue.unref(cs).is("height", rowHeight.value && vue.unref(form).labelPosition != "top"),
@@ -100,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["value", "label", "listobj", "optionss", "valueobj"])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(index$2.FormsDiv), {
+            vue.createVNode(vue.unref(index$3.FormsDiv), {
               listobj: vue.unref(props),
               optionss: prs.optionss,
               valueobj: prs.valueobj,

package/dist/components/forms-item/src/index.js

@@ -1,7 +1,7 @@
 import { defineComponent, useSlots, useAttrs, inject, computed, createElementBlock, openBlock, mergeProps, unref, createBlock, withCtx, createVNode, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { dataEmits, dataProps, dataExpose } from "./data.js";
 import { FormsDiv } from "../../forms-div/index.js";
-import { ElFormItem } from "element-plus";
+import { ElFormItem } from "element-plus/es/components/form/index";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { useInherit } from "../../../hooks/inherit/index.js";
 import Lable from "./label.js";

package/dist/components/forms-item/style/index2.scss

@@ -0,0 +1,4 @@
+@use 'element-plus/theme-chalk/src/form-item.scss' as *;
+
+@use '../../forms-div/style/index2.scss' as *;
+@use '../index.scss' as *;

package/dist/components/forms-items/style/index2.scss

@@ -0,0 +1,2 @@
+@use '../../forms-div/style/index2.scss' as *;
+@use '../../forms-item/style/index2.scss' as *;

package/dist/components/index.cjs

@@ -108,13 +108,14 @@ const index$1E = require("./selector/index.cjs");
 const index$1F = require("./selects/index.cjs");
 const index$1G = require("./switchs/index.cjs");
 const index$1H = require("./text/index.cjs");
-const index$1I = require("./el-tables/index.cjs");
-const index$1J = require("./pagin/index.cjs");
-const index$1K = require("./table-list/index.cjs");
-const index$1L = require("./tables-form/index.cjs");
-const index$1M = require("./tables-pagin/index.cjs");
-const index$1N = require("./tables/index.cjs");
-const index$1O = require("./vxe-tables/index.cjs");
+const index$1I = require("./paging/index.cjs");
+const index$1J = require("./table-list/index.cjs");
+const index$1K = require("./tables-form/index.cjs");
+const index$1L = require("./tables/index.cjs");
+const index$1M = require("./tablesp/index.cjs");
+const index$1N = require("./tabless/index.cjs");
+const index$1O = require("./tablesv/index.cjs");
+const index$1P = require("./tablesvp/index.cjs");
 const index$i = require("./loading/src/index.cjs");
 exports.CsConfig = index.CsConfig;
 exports.CsEmits = index$1.CsEmits;
@@ -223,11 +224,12 @@ exports.Selector = index$1E.Selector;
 exports.Selects = index$1F.Selects;
 exports.Switchs = index$1G.Switchs;
 exports.Text = index$1H.Text;
-exports.ElTables = index$1I.ElTables;
-exports.Pagin = index$1J.Pagin;
-exports.TableList = index$1K.TableList;
-exports.TablesForm = index$1L.TablesForm;
-exports.TablesPagin = index$1M.TablesPagin;
-exports.Tables = index$1N.Tables;
-exports.VxeTables = index$1O.VxeTables;
+exports.Paging = index$1I.Paging;
+exports.TableList = index$1J.TableList;
+exports.TablesForm = index$1K.TablesForm;
+exports.Tables = index$1L.Tables;
+exports.Tablesp = index$1M.Tablesp;
+exports.Tabless = index$1N.Tabless;
+exports.Tablesv = index$1O.Tablesv;
+exports.Tablesvp = index$1P.Tablesvp;
 exports.vLoading = index$i.vLoading;

package/dist/components/index.d.ts

@@ -105,10 +105,11 @@ export * from './selector/index';
 export * from './selects/index';
 export * from './switchs/index';
 export * from './text/index';
-export * from './el-tables/index';
-export * from './pagin/index';
+export * from './paging/index';
 export * from './table-list/index';
 export * from './tables-form/index';
-export * from './tables-pagin/index';
 export * from './tables/index';
-export * from './vxe-tables/index';
+export * from './tablesp/index';
+export * from './tabless/index';
+export * from './tablesv/index';
+export * from './tablesvp/index';

package/dist/components/index.js

@@ -106,13 +106,14 @@ import { Selector } from "./selector/index.js";
 import { Selects } from "./selects/index.js";
 import { Switchs } from "./switchs/index.js";
 import { Text } from "./text/index.js";
-import { ElTables } from "./el-tables/index.js";
-import { Pagin } from "./pagin/index.js";
+import { Paging } from "./paging/index.js";
 import { TableList } from "./table-list/index.js";
 import { TablesForm } from "./tables-form/index.js";
-import { TablesPagin } from "./tables-pagin/index.js";
 import { Tables } from "./tables/index.js";
-import { VxeTables } from "./vxe-tables/index.js";
+import { Tablesp } from "./tablesp/index.js";
+import { Tabless } from "./tabless/index.js";
+import { Tablesv } from "./tablesv/index.js";
+import { Tablesvp } from "./tablesvp/index.js";
 import { vLoading } from "./loading/src/index.js";
 export {
   Alert,
@@ -159,7 +160,6 @@ export {
   DropdownMenu,
   Edit,
   EditFloat,
-  ElTables,
   Form,
   FormItem,
   Forms,
@@ -190,8 +190,8 @@ export {
   Option,
   OptionGroup,
   Page,
-  Pagin,
   Pagination,
+  Paging,
   Popconfirm,
   Popover,
   Popup,
@@ -216,7 +216,10 @@ export {
   TableList,
   Tables,
   TablesForm,
-  TablesPagin,
+  Tablesp,
+  Tabless,
+  Tablesv,
+  Tablesvp,
   Tabs,
   Text,
   TimePicker,
@@ -227,7 +230,6 @@ export {
   TreeSelectBox,
   Upload,
   UserSelect,
-  VxeTables,
   Window,
   vLoading
 };

package/dist/components/index.scss

@@ -28,7 +28,9 @@
 @use './selects/index.scss' as *;
 @use './switchs/index.scss' as *;
 @use './text/index.scss' as *;
-@use './el-tables/index.scss' as *;
-@use './pagin/index.scss' as *;
-@use './tables-pagin/index.scss' as *;
-@use './tables/index.scss' as *;
+@use './paging/index.scss' as *;
+@use './tables-form/index.scss' as *;
+@use './tables/index.scss' as *;
+@use './tablesp/index.scss' as *;
+@use './tabless/index.scss' as *;
+@use './tablesv/index.scss' as *;

package/dist/components/lists/common/img.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const img_vue_vue_type_script_setup_true_lang = require("./img2.cjs");
 ;/* empty css       */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
-const FImg = /* @__PURE__ */ _pluginVue_exportHelper.default(img_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-19199d9d"]]);
+const FImg = /* @__PURE__ */ _pluginVue_exportHelper.default(img_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7ccddd13"]]);
 exports.default = FImg;

package/dist/components/lists/common/img.d.ts

@@ -1,7 +1,9 @@
 import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare const _default: DefineComponent<ExtractPropTypes<{
     modelValue: StringConstructor;
+    prefix: StringConstructor;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     modelValue: StringConstructor;
+    prefix: StringConstructor;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/dist/components/lists/common/img.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./img2.js";
 /* empty css     */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
-const FImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-19199d9d"]]);
+const FImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7ccddd13"]]);
 export {
   FImg as default
 };

package/dist/components/lists/common/img2.cjs

@@ -1,30 +1,27 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const es = require("element-plus/es");
-require("element-plus/es/components/base/style/css");
-require("element-plus/es/components/image/style/css");
 const vue = require("vue");
+const index = require("element-plus/es/components/image/index");
 const _hoisted_1 = { class: "lists-li" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "img",
   props: {
-    modelValue: String
+    modelValue: String,
+    prefix: String
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const prefix = void 0;
     const value = vue.computed(() => {
       if (props.modelValue) {
-        return prefix + "/" + props.modelValue;
+        return props.prefix + "/" + props.modelValue;
       } else {
         return "";
       }
     });
     __expose({});
     return (_ctx, _cache) => {
-      const _component_el_image = es.ElImage;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createVNode(_component_el_image, {
+        vue.createVNode(vue.unref(index.ElImage), {
           fit: "contain",
           class: "lists-li-img",
           src: value.value,

package/dist/components/lists/common/img2.js

@@ -1,28 +1,25 @@
-import { ElImage } from "element-plus/es";
-import "element-plus/es/components/base/style/css";
-import "element-plus/es/components/image/style/css";
-import { defineComponent, computed, createElementBlock, openBlock, createVNode } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, createVNode, unref } from "vue";
+import { ElImage } from "element-plus/es/components/image/index";
 const _hoisted_1 = { class: "lists-li" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "img",
   props: {
-    modelValue: String
+    modelValue: String,
+    prefix: String
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const prefix = void 0;
     const value = computed(() => {
       if (props.modelValue) {
-        return prefix + "/" + props.modelValue;
+        return props.prefix + "/" + props.modelValue;
       } else {
         return "";
       }
     });
     __expose({});
     return (_ctx, _cache) => {
-      const _component_el_image = ElImage;
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_component_el_image, {
+        createVNode(unref(ElImage), {
           fit: "contain",
           class: "lists-li-img",
           src: value.value,

package/dist/components/menus/src/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const menuLl_vue_vue_type_script_lang = require("./menu-ll.cjs");
-const elementPlus = require("element-plus");
+const index$1 = require("element-plus/es/components/menu/index");
 const index = require("../../../hooks/cssname/index.cjs");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -98,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       emit("select", id, arr, arrObj);
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElMenu), vue.mergeProps(vue.unref(attrs), {
+      return vue.openBlock(), vue.createBlock(vue.unref(index$1.ElMenu), vue.mergeProps(vue.unref(attrs), {
         class: vue.unref(cs).z(),
         onSelect,
         "default-active": props.value

package/dist/components/menus/src/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, useAttrs, useSlots, computed, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import _sfc_main$1 from "./menu-ll.js";
-import { ElMenu } from "element-plus";
+import { ElMenu } from "element-plus/es/components/menu/index";
 import { useCssName } from "../../../hooks/cssname/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",

package/dist/components/menus/src/menu-ll.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const elementPlus = require("element-plus");
-const index$1 = require("../../icon/index.cjs");
+const index$1 = require("element-plus/es/components/menu/index");
+const index$2 = require("../../icon/index.cjs");
 const use = require("../../common/use.cjs");
 const index = require("../../../hooks/cssname/index.cjs");
 const util$1 = require("./util.cjs");
@@ -44,7 +44,7 @@ const _sfc_main = vue.defineComponent({
       if (i) {
         if (typeof i === "string") {
           return vue.h(
-            index$1.Icon,
+            index$2.Icon,
             {
               class: cs.z("icon")
             },
@@ -54,7 +54,7 @@ const _sfc_main = vue.defineComponent({
           );
         } else {
           return vue.h(
-            index$1.Icon,
+            index$2.Icon,
             {
               class: cs.z("icon")
             },
@@ -103,7 +103,7 @@ const _sfc_main = vue.defineComponent({
           if (c && c.length > 0) {
             arr.push(
               vue.h(
-                elementPlus.ElSubMenu,
+                index$1.ElSubMenu,
                 {
                   popperClass: config.class + " " + config.class + "-" + v,
                   index: i
@@ -126,7 +126,7 @@ const _sfc_main = vue.defineComponent({
           } else {
             arr.push(
               vue.h(
-                elementPlus.ElMenuItem,
+                index$1.ElMenuItem,
                 {
                   index: i
                 },

package/dist/components/menus/src/menu-ll.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { ElSubMenu, ElMenuItem } from "element-plus";
+import { ElSubMenu, ElMenuItem } from "element-plus/es/components/menu/index";
 import { Icon } from "../../icon/index.js";
 import { useHide } from "../../common/use.js";
 import { useCssName } from "../../../hooks/cssname/index.js";

package/dist/components/menus/style/index2.scss

@@ -0,0 +1,5 @@
+@use 'element-plus/theme-chalk/src/sub-menu.scss' as *;
+@use 'element-plus/theme-chalk/src/menu-item.scss' as *;
+@use 'element-plus/theme-chalk/src/menu.scss' as *;
+
+@use '../index.scss' as *;

package/dist/components/page/index.css

@@ -12,6 +12,251 @@
   --g-main-bg: var(--bg-color-page);
 }
 
+.forms-div {
+  width: 100%;
+  height: 100%;
+}
+.forms-div-com {
+  height: 100%;
+}
+
+.forms-item {
+  width: 100%;
+}
+.forms-item-el-item.is-height {
+  min-height: var(--forms-item-row-height);
+}
+.forms-item-el-item.is-height .el-form-item__label {
+  height: var(--forms-item-row-height);
+  line-height: var(--forms-item-row-height);
+}
+.forms-item-el-item.is-top .el-form-item__content {
+  min-height: var(--forms-item-row-height);
+  display: grid;
+}
+
+.forms {
+  --forms-inline-right: 16px;
+  --forms-row-height: 32px;
+  --el-input-height: var(--forms-row-height);
+}
+.forms .el-form--label-center .el-form-item__label {
+  justify-content: center;
+  text-align: center;
+}
+.forms .el-form--label-left .el-form-item__label {
+  justify-content: flex-start;
+  text-align: left;
+}
+.forms .el-form-item__label {
+  text-align: left;
+}
+.forms-div--column .forms-li {
+  display: inline-flex;
+  margin-right: 0;
+}
+.forms-div--inline .forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.forms-div--inline .forms-li {
+  height: fit-content;
+  margin-right: var(--forms-inline-right);
+}
+.forms-div--box .forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.forms-div--box .forms-li {
+  box-sizing: border-box;
+  margin-right: 0;
+  padding-right: var(--forms-inline-right);
+}
+.forms-div--query .forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.forms-div--query .forms-li {
+  height: fit-content;
+  margin-top: var(--forms-query-interval);
+  margin-bottom: var(--forms-query-interval);
+  margin-right: var(--forms-inline-right);
+}
+.forms-div--query .forms-li .el-form-item {
+  margin-bottom: 0;
+  flex: 1;
+}
+.forms-li .el-form-item {
+  margin-bottom: var(--forms-item-bottom);
+  flex: 1;
+}
+.forms-elf {
+  text-align: left;
+}
+.forms-elf.center .el-form-item__label {
+  justify-content: center;
+}
+.forms-buts-div .el-button {
+  height: inherit;
+}
+
+.lists-div .lists-table {
+  width: 100%;
+  height: 100%;
+}
+.lists-div .lists-table td {
+  text-align: left;
+}
+.lists-div .lists-table th {
+  font-weight: initial;
+}
+.lists-div .lists-table .is-whole .lists-table-auto {
+  width: 100%;
+}
+.lists-div .lists-table .is-whole .lists-table-value {
+  width: 100%;
+  display: block;
+}
+.lists-div .lists-table .lists-table-td,
+.lists-div .lists-table .lists-table-th {
+  padding: 6px;
+}
+.lists-div .lists-table .lists-table-auto {
+  display: inline-flex;
+  align-items: center;
+}
+.lists-div .lists-table .lists-table-auto .lists-table-label {
+  white-space: nowrap;
+}
+.lists-div .lists-table .lists-table-th {
+  text-align: left;
+}
+.lists-div .lists-table.right .lists-table-th {
+  text-align: right;
+}
+.lists-div .lists-table.center .lists-table-th {
+  text-align: center;
+}
+.lists-div .lists-table.auto .lists-table-th {
+  padding-right: 0;
+}
+.lists-div .lists-table.top .lists-table-th {
+  padding-bottom: 0;
+}
+.lists-div .lists-table.is-aliquots {
+  table-layout: fixed;
+}
+.lists-div .lists-table.is-border {
+  border-right: 1px solid var(--lists-border-color);
+  border-top: 1px solid var(--lists-border-color);
+  border-bottom: 1px solid var(--lists-border-color);
+}
+.lists-div .lists-table.is-border > tr > td {
+  border-bottom: 1px solid var(--lists-border-color);
+  border-left: 1px solid var(--lists-border-color);
+}
+.lists-div .lists-table.is-border > tr > td:last-child {
+  border-right: 1px solid var(--lists-border-color);
+}
+.lists-div .lists-table.is-border > tr > th {
+  border-left: 1px solid var(--lists-border-color);
+  border-bottom: 1px solid var(--lists-border-color);
+}
+.lists-div .lists-table.is-border > tr > th:last-child {
+  border-right: 1px solid var(--lists-border-color);
+}
+.lists-div .lists-table.is-border > tr:last-child > td {
+  border-bottom: 0;
+}
+.lists-div .lists-table.is-border > tr:last-child > th {
+  border-bottom: 0;
+}
+.lists-div .lists-table.is-border.top > tr > th {
+  border-bottom: 0;
+}
+
+.f-dialog.el-dialog {
+  padding: 0;
+}
+.f-dialog.el-dialog .el-dialog__header {
+  padding-top: 16px;
+  padding-left: 20px;
+  border-bottom: 1px solid var(--border);
+}
+.f-dialog.el-dialog .el-dialog__header .el-dialog__headerbtn {
+  width: 56px;
+  height: 56px;
+  font-size: 22px;
+}
+.f-dialog.el-dialog .el-dialog__body {
+  padding: 20px 30px;
+}
+.f-dialog.el-dialog .el-dialog__footer {
+  border-top: 1px solid var(--border);
+  padding: 20px 20px;
+}
+
+.tables {
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tables-table {
+  background-color: transparent;
+  --el-table-header-bg-color: rgb(248, 248, 249);
+}
+.tables-table.is-absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.paging {
+  padding: 10px;
+}
+.paging-slot {
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+  white-space: pre-wrap;
+}
+.paging .el-pagination__total {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+}
+
+.tablesp {
+  width: 100%;
+  height: var(--tablesp-height);
+  display: flex;
+  flex-direction: column;
+}
+.tablesp-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.tablesp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
+  display: none;
+}
+.tablesp-paginat {
+  overflow: hidden;
+}
+.tablesp-paginat .el-pagination {
+  justify-content: flex-end;
+}
+
 .page {
   height: 100%;
   width: 100%;