@web-utils/component 5.0.0-beta02 → 5.0.0-beta04

package/login/index.mjs

@@ -1,252 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { x as t } from "../chunks/util.g-WQEec9.mjs";
-import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, normalizeStyle as c, openBlock as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
-import { isBlank as p } from "@web-utils/core";
-//#region src/components/login/Login.vue
-var m = "发送验证码", h = "{{time}}s后重获取", g = {
-	name: "Login",
-	props: {
-		modelValue: {
-			type: Object,
-			default: () => ({})
-		},
-		codesrc: { type: String },
-		option: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	emits: [
-		"refresh",
-		"send",
-		"submit",
-		"update:modelValue",
-		"change"
-	],
-	data() {
-		return {
-			text: m,
-			nowtime: "",
-			check: {},
-			flag: !1
-		};
-	},
-	computed: {
-		form: {
-			get() {
-				return this.modelValue;
-			},
-			set(e) {
-				this.$emit("update:modelValue", e), this.$emit("change", e);
-			}
-		},
-		labelWidth() {
-			return this.option.labelWidth || 80;
-		},
-		time() {
-			return this.option.time || 60;
-		},
-		isImg() {
-			return this.codeType === "img";
-		},
-		isPhone() {
-			return this.codeType === "phone";
-		},
-		codeType() {
-			return this.option.codeType || "img";
-		},
-		width() {
-			return this.option.width || "100%";
-		},
-		username() {
-			return this.column.username || {};
-		},
-		password() {
-			return this.column.password || {};
-		},
-		code() {
-			return this.column.code || {};
-		},
-		column() {
-			return this.option.column || {};
-		},
-		sendDisabled() {
-			return !p(this.check);
-		}
-	},
-	methods: {
-		setPx: t,
-		onSend() {
-			this.sendDisabled || this.$emit("send", () => {
-				this.nowtime = this.time, this.text = h.replace("{{time}}", this.nowtime), this.check = setInterval(() => {
-					this.nowtime--, this.nowtime === 0 ? (this.text = m, clearInterval(this.check), this.check = null) : this.text = h.replace("{{time}}", this.nowtime);
-				}, 1e3);
-			});
-		},
-		onRefresh() {
-			this.$emit("refresh");
-		},
-		onSubmit() {
-			let e = () => {
-				let e = {};
-				for (let t in this.form) {
-					let n = t;
-					this[t].prop && (n = this[t].prop), e[n] = this.form[t];
-				}
-				return e;
-			};
-			this.$refs.form.validate((t) => {
-				t && this.$emit("submit", e());
-			});
-		}
-	}
-}, _ = { key: 1 }, v = ["src"];
-function y(e, t, p, m, h, g) {
-	let y = u("ElInput"), b = u("ElTooltip"), x = u("ElFormItem"), S = u("ElButton"), C = u("ElForm");
-	return l(), i("div", {
-		class: "avue-login",
-		style: c({ width: g.setPx(g.width) })
-	}, [s(C, {
-		ref: "form",
-		model: g.form,
-		"label-suffix": ":",
-		"label-width": g.setPx(g.labelWidth)
-	}, {
-		default: f(() => [
-			g.username.hide ? r("v-if", !0) : (l(), n(x, {
-				key: 0,
-				label: g.username.label || "用户名",
-				rules: g.username.rules,
-				"label-width": g.setPx(g.username.labelWidth),
-				prop: "username"
-			}, {
-				default: f(() => [s(b, {
-					content: g.username.tip,
-					disabled: g.username.tip === void 0,
-					placement: "top-start"
-				}, {
-					default: f(() => [s(y, {
-						modelValue: g.form.username,
-						"onUpdate:modelValue": t[0] || (t[0] = (e) => g.form.username = e),
-						size: "default",
-						"prefix-icon": g.username.prefixIcon || "el-icon-user",
-						placeholder: g.username.placeholder || "请输入用户名",
-						autocomplete: g.username.autocomplete
-					}, null, 8, [
-						"modelValue",
-						"prefix-icon",
-						"placeholder",
-						"autocomplete"
-					])]),
-					_: 1
-				}, 8, ["content", "disabled"])]),
-				_: 1
-			}, 8, [
-				"label",
-				"rules",
-				"label-width"
-			])),
-			g.password.hide ? r("v-if", !0) : (l(), n(x, {
-				key: 1,
-				label: g.password.label || "密码",
-				rules: g.password.rules,
-				"label-width": g.setPx(g.password.labelWidth),
-				prop: "password"
-			}, {
-				default: f(() => [s(b, {
-					content: g.password.tip,
-					disabled: g.password.tip === void 0,
-					placement: "top-start"
-				}, {
-					default: f(() => [s(y, {
-						modelValue: g.form.password,
-						"onUpdate:modelValue": t[1] || (t[1] = (e) => g.form.password = e),
-						type: "password",
-						size: "default",
-						"prefix-icon": g.password.prefixIcon || "el-icon-unlock",
-						placeholder: g.password.placeholder || "请输入密码",
-						"show-password": "",
-						autocomplete: g.password.autocomplete
-					}, null, 8, [
-						"modelValue",
-						"prefix-icon",
-						"placeholder",
-						"autocomplete"
-					])]),
-					_: 1
-				}, 8, ["content", "disabled"])]),
-				_: 1
-			}, 8, [
-				"label",
-				"rules",
-				"label-width"
-			])),
-			g.code.hide ? r("v-if", !0) : (l(), n(x, {
-				key: 2,
-				label: g.code.label || "验证码",
-				rules: g.code.rules,
-				"label-width": g.setPx(g.code.labelWidth),
-				prop: "code"
-			}, {
-				default: f(() => [s(b, {
-					content: g.code.tip,
-					disabled: g.code.tip === void 0,
-					placement: "top-start"
-				}, {
-					default: f(() => [s(y, {
-						modelValue: g.form.code,
-						"onUpdate:modelValue": t[3] || (t[3] = (e) => g.form.code = e),
-						size: "default",
-						"prefix-icon": g.code.prefixIcon || "el-icon-c-scale-to-original",
-						placeholder: g.code.placeholder || "请输入验证码",
-						autocomplete: g.code.autocomplete
-					}, {
-						append: f(() => [g.isPhone ? (l(), n(S, {
-							key: 0,
-							type: "primary",
-							class: "avue-login__send",
-							disabled: g.sendDisabled,
-							onClick: g.onSend
-						}, {
-							default: f(() => [o(d(h.text), 1)]),
-							_: 1
-						}, 8, ["disabled", "onClick"])) : r("v-if", !0), g.isImg ? (l(), i("span", _, [a("img", {
-							src: p.codesrc,
-							alt: "",
-							width: "80",
-							height: "25",
-							onClick: t[2] || (t[2] = (...e) => g.onRefresh && g.onRefresh(...e))
-						}, null, 8, v)])) : r("v-if", !0)]),
-						_: 1
-					}, 8, [
-						"modelValue",
-						"prefix-icon",
-						"placeholder",
-						"autocomplete"
-					])]),
-					_: 1
-				}, 8, ["content", "disabled"])]),
-				_: 1
-			}, 8, [
-				"label",
-				"rules",
-				"label-width"
-			])),
-			s(x, null, {
-				default: f(() => [s(S, {
-					type: "primary",
-					class: "avue-login__submit",
-					onClick: g.onSubmit
-				}, {
-					default: f(() => [...t[4] || (t[4] = [o(" 登录 ", -1)])]),
-					_: 1
-				}, 8, ["onClick"])]),
-				_: 1
-			})
-		]),
-		_: 1
-	}, 8, ["model", "label-width"])], 4);
-}
-var b = /* @__PURE__ */ e(g, [["render", y]]);
-//#endregion
-export { b as default };

package/login/style.css

@@ -1 +0,0 @@
-.avue-login .el-form-item{margin-bottom:18px}.avue-login .el-input-group__append{padding:0;overflow:hidden}.avue-login__send{box-sizing:border-box;min-width:150px}.avue-login__send:hover{color:#c0c4cc!important;background-color:#f5f7fa!important;border-color:#ebeef5!important}.avue-login__submit{width:100%}

package/name-avatar/index.mjs

@@ -1,61 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createElementBlock as t, normalizeClass as n, normalizeStyle as r, openBlock as i, toDisplayString as a } from "vue";
-//#region src/components/NameAvatar.vue
-var o = {
-	name: "NameAvatar",
-	props: {
-		num: [Number, String],
-		name: String,
-		square: Boolean,
-		fontColor: {
-			type: String,
-			default: "#fff"
-		},
-		backgroundColor: {
-			type: String,
-			default: "#3696F2"
-		},
-		faceUrl: {
-			type: String,
-			default: ""
-		},
-		fontSize: {
-			type: String,
-			default: "12px"
-		},
-		size: {
-			type: String,
-			default: "40px"
-		}
-	},
-	computed: {
-		text() {
-			return this.num === void 0 ? this.name ? this.name.slice(-2) : "" : `+${this.num}`;
-		},
-		styles() {
-			let e = { "font-size": this.fontSize };
-			return this.fontColor && (e.color = this.fontColor), this.backgroundColor && (e.background = this.backgroundColor), e;
-		}
-	}
-}, s = ["src"];
-function c(e, o, c, l, u, d) {
-	return i(), t("div", {
-		class: n(["name-avatar", c.square ? "square" : "round"]),
-		style: r({
-			width: c.size,
-			height: c.size
-		})
-	}, [c.faceUrl && !c.num ? (i(), t("img", {
-		key: 0,
-		class: "name-avatar-image",
-		src: c.faceUrl,
-		alt: ""
-	}, null, 8, s)) : (i(), t("div", {
-		key: 1,
-		class: "name-avatar-text",
-		style: r(d.styles)
-	}, a(d.text), 5))], 6);
-}
-var l = /* @__PURE__ */ e(o, [["render", c]]);
-//#endregion
-export { l as default };

package/name-avatar/style.css

@@ -1 +0,0 @@
-.name-avatar{width:40px;height:40px;overflow:hidden}.name-avatar .name-avatar-image,.name-avatar .name-avatar-text{width:100%;height:100%}.name-avatar .name-avatar-text{justify-content:center;align-items:center;display:flex}.round{z-index:10;text-align:center;vertical-align:bottom;-webkit-user-select:none;user-select:none;border-radius:50%;font-size:8px;display:inline-block;position:relative}.square{border-radius:8px;display:block;overflow:hidden}

package/nav-bar/index.mjs

@@ -1,34 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createBlock as t, createCommentVNode as n, createElementBlock as r, createTextVNode as i, openBlock as a, renderSlot as o, resolveComponent as s, withCtx as c } from "vue";
-//#region src/components/NavBar.vue
-var l = {
-	name: "NavBar",
-	props: {
-		onGoBack: Function,
-		showBack: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	methods: { goBack() {
-		this.onGoBack ? this.onGoBack() : this.$router.back();
-	} }
-}, u = { class: "nav-bar" }, d = {
-	key: 1,
-	class: "flex-item flex-row-column vertical-center"
-};
-function f(e, l, f, p, m, h) {
-	let g = s("ElButton");
-	return a(), r("div", u, [f.showBack ? (a(), t(g, {
-		key: 0,
-		type: "text",
-		icon: "el-icon-arrow-left",
-		onClick: h.goBack
-	}, {
-		default: c(() => [...l[0] || (l[0] = [i(" 返回 ", -1)])]),
-		_: 1
-	}, 8, ["onClick"])) : n("v-if", !0), e.$slots.right ? (a(), r("div", d, [o(e.$slots, "right")])) : n("v-if", !0)]);
-}
-var p = /* @__PURE__ */ e(l, [["render", f]]);
-//#endregion
-export { p as default };

package/nav-bar/style.css

@@ -1 +0,0 @@
-.nav-bar{background-color:#fff;border-bottom:1px solid #eee;flex-shrink:0;width:100%;height:40px;display:flex}.nav-bar .el-button--text{margin-left:12px}

package/not-implement/index.mjs

@@ -1,10 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createElementBlock as t, createElementVNode as n, createTextVNode as r, openBlock as i } from "vue";
-//#region src/components/not-implement/NotImplement.vue
-var a = { name: "NotImplement" }, o = { class: "not-implement" };
-function s(e, a, s, c, l, u) {
-	return i(), t("div", o, [...a[0] || (a[0] = [n("div", null, [n("i", { class: "fa fa-wrench" }), r(" 建设中...")], -1)])]);
-}
-var c = /* @__PURE__ */ e(a, [["render", s]]);
-//#endregion
-export { c as default };

package/not-implement/style.css

@@ -1 +0,0 @@
-.not-implement{color:gray;text-align:center;justify-content:center;align-items:center;height:100%;font-size:3em;display:flex}

package/notice/index.mjs

@@ -1,100 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, openBlock as s, renderList as c, resolveComponent as l, resolveDirective as u, toDisplayString as d, withCtx as f, withDirectives as p } from "vue";
-//#region src/components/notice/Notice.vue
-var m = {
-	img: "img",
-	title: "title",
-	subtile: "title",
-	tag: "tag",
-	status: "status"
-}, h = {
-	name: "Notice",
-	props: {
-		finish: {
-			type: Boolean,
-			default: !1
-		},
-		option: {
-			type: Object,
-			default: () => ({})
-		},
-		data: {
-			type: Array,
-			default: () => []
-		}
-	},
-	emits: ["page-change", "click"],
-	data() {
-		return {
-			page: 1,
-			loading: !1
-		};
-	},
-	computed: {
-		props() {
-			return this.option.props || m;
-		},
-		imgKey() {
-			return this.props.img || m.img;
-		},
-		titleKey() {
-			return this.props.title || m.title;
-		},
-		subtitleKey() {
-			return this.props.subtitle || m.subtitle;
-		},
-		tagKey() {
-			return this.props.tag || m.tag;
-		},
-		statusKey() {
-			return this.props.status || m.status;
-		}
-	},
-	methods: {
-		click(e) {
-			this.$emit("click", e);
-		},
-		handleClick() {
-			this.loading = !0, this.page++, this.$emit("page-change", this.page, () => {
-				this.loading = !1;
-			});
-		},
-		getType(e = 0) {
-			if (e === 0) return "info";
-			if (e === 1) return "";
-			if (e === 2) return "warning";
-			if (e === 3) return "danger";
-			if (e === 4) return "success";
-		}
-	}
-}, g = { class: "avue-notice" }, _ = ["onClick"], v = {
-	key: 0,
-	class: "avue-notice__img"
-}, y = ["src"], b = { class: "avue-notice__content" }, x = { class: "avue-notice__title" }, S = { class: "avue-notice__name" }, C = {
-	key: 0,
-	class: "avue-notice__tag"
-}, w = { class: "avue-notice__subtitle" };
-function T(e, m, h, T, E, D) {
-	let O = l("ElTag"), k = u("loading");
-	return s(), r("div", g, [(s(!0), r(t, null, c(h.data, (e, t) => (s(), r("div", {
-		key: t,
-		class: "avue-notice__item",
-		onClick: (t) => D.click(e)
-	}, [e[D.imgKey] ? (s(), r("div", v, [i("img", {
-		src: e[D.imgKey],
-		alt: ""
-	}, null, 8, y)])) : n("v-if", !0), i("div", b, [i("div", x, [i("span", S, d(e[D.titleKey]), 1), e[D.tagKey] ? (s(), r("span", C, [o(O, {
-		size: "default",
-		type: D.getType(e[D.statusKey])
-	}, {
-		default: f(() => [a(d(e[D.tagKey]), 1)]),
-		_: 2
-	}, 1032, ["type"])])) : n("v-if", !0)]), i("div", w, d(e[D.subtitleKey]), 1)])], 8, _))), 128)), h.finish ? n("v-if", !0) : p((s(), r("div", {
-		key: 0,
-		class: "avue-notice__more",
-		onClick: m[0] || (m[0] = (...e) => D.handleClick && D.handleClick(...e))
-	}, [...m[1] || (m[1] = [a("加载更多", -1)])])), [[k, !0]])]);
-}
-var E = /* @__PURE__ */ e(h, [["render", T]]);
-//#endregion
-export { E as default };

package/notice/style.css

@@ -1 +0,0 @@
-.avue-notice__item{text-align:left;cursor:pointer;border-bottom:1px solid #e8eaec;align-items:flex-start;padding:12px 24px;transition:background-color .2s ease-in-out;display:flex}.avue-notice__content{flex:1}.avue-notice__img{border-radius:100%;width:38px;height:38px;margin-top:5px;margin-right:10px;overflow:hidden}.avue-notice__img img{width:100%;height:100%}.avue-notice__name{line-height:25px}.avue-notice__title{color:#515a6e;margin-bottom:4px;font-size:14px;font-weight:400;line-height:22px}.avue-notice__tag{float:right;margin-top:2px}.avue-notice__subtitle{color:#808695;font-size:12px}.avue-notice__more{color:#2d8cf0;text-align:center;cursor:pointer;padding:10px 0}

package/page/index.mjs

@@ -1,19 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createElementBlock as t, normalizeClass as n, openBlock as r, renderSlot as i } from "vue";
-//#region src/components/Page.vue
-var a = {
-	name: "Page",
-	props: {
-		vertical: {
-			type: Boolean,
-			default: !0
-		},
-		horizontal: Boolean
-	}
-};
-function o(e, a, o, s, c, l) {
-	return r(), t("div", { class: n(["page flex-row flex-item", { vertical: o.vertical && !o.horizontal }]) }, [i(e.$slots, "default")], 2);
-}
-var s = /* @__PURE__ */ e(a, [["render", o]]);
-//#endregion
-export { s as default };

package/page/style.css

@@ -1 +0,0 @@
-.page{height:100%}.page.vertical{flex-direction:column}

package/page-header/index.mjs

@@ -1,27 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createElementBlock as t, createElementVNode as n, createTextVNode as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
-//#region src/components/PageHeader.vue
-var c = {
-	name: "PageHeader",
-	props: {
-		title: {
-			type: String,
-			default: "标题"
-		},
-		alignEnd: {
-			type: Boolean,
-			default: !0
-		}
-	}
-}, l = { class: "egd-header flex-row egd-page-header" }, u = { class: "section-title" }, d = { class: "flex-row flex-item vertical-center" };
-function f(e, c, f, p, m, h) {
-	return a(), t("div", l, [o(e.$slots, "section-title", { title: f.title }, () => [n("span", u, [o(e.$slots, "title", { title: f.title }, () => [r(s(f.title), 1)])])]), n("div", d, [n("div", { class: i([
-		"flex-row",
-		"flex-item",
-		"vertical-center",
-		{ "align-end": f.alignEnd }
-	]) }, [o(e.$slots, "default")], 2)])]);
-}
-var p = /* @__PURE__ */ e(c, [["render", f]]);
-//#endregion
-export { p as default };

package/page-header/style.css

@@ -1 +0,0 @@
-.egd-page-header{height:40px;margin:0 10px;line-height:40px}.egd-page-header .align-end{justify-content:flex-end}

package/page-index/index.mjs

@@ -1,121 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
-import { findFirstMatchNode as p, treeToArray as m } from "@web-utils/core";
-//#region src/components/PageIndex.vue
-var h = {
-	name: "PageIndex",
-	props: {
-		menus: {
-			type: Array,
-			default: () => []
-		},
-		asideWidth: {
-			type: String,
-			default: "220px"
-		},
-		aside: {
-			type: Boolean,
-			default: !0
-		},
-		tips: {
-			type: String,
-			default: "请添加页面内容！"
-		},
-		sectionTitle: {
-			type: String,
-			default: "功能导航"
-		},
-		schema: {
-			type: String,
-			default: ""
-		},
-		currentTreeKey: {
-			type: Array,
-			default: () => []
-		},
-		defaultProps: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	watch: { menus() {
-		this.setCurrentKey(this.$route.path);
-	} },
-	mounted() {
-		this.activeFirstMenu();
-	},
-	activated() {
-		this.setCurrentKey(this.$route.path);
-	},
-	methods: {
-		async activeFirstMenu() {
-			if (m(this.menus).map((e) => e.path).filter((e) => e).includes(this.$route.path)) await this.setCurrentKey(this.$route.path);
-			else {
-				let e = p(this.menus, (e) => e.path);
-				e && (await this.$router.push({
-					path: e.path,
-					query: e.query
-				}), await this.setCurrentKey(e.path));
-			}
-		},
-		async onNodeClick(e) {
-			e.path && e.path.indexOf("/") > -1 && await this.$router.push({
-				path: e.path,
-				query: e.query
-			}), await this.setCurrentKey(e.key);
-		},
-		async setCurrentKey(e) {
-			var t;
-			await this.$nextTick(), (t = this.$refs.menuTree) == null || t.setCurrentKey(e);
-		},
-		async beforeRouteUpdate(e, t, n) {
-			if (e.path === this.schema) {
-				let e = p(this.menus, (e) => e.path);
-				e ? (await n({
-					path: e.path,
-					query: e.query
-				}), await this.setCurrentKey(e.path)) : await n(!1);
-			} else await n(), await this.setCurrentKey(this.$route.path);
-		}
-	}
-}, g = { class: "egd-container" }, _ = { class: "egd-main" }, v = { class: "egd-header" }, y = { class: "section-title flex-not-shrink" }, b = { class: "page-index-content-empty" };
-function x(e, p, m, h, x, S) {
-	let C = u("ElTree");
-	return c(), n("div", g, [m.aside ? (c(), n("div", {
-		key: 0,
-		class: "egd-aside",
-		style: s({ width: m.asideWidth })
-	}, [t("侧栏"), l(e.$slots, "aside", {}, () => [r("div", _, [
-		l(e.$slots, "nav-top"),
-		r("div", v, [r("span", y, d(m.sectionTitle), 1)]),
-		t("菜单"),
-		l(e.$slots, "menu", {}, () => [a(C, {
-			ref: "menuTree",
-			data: m.menus,
-			"default-expand-all": "",
-			props: m.defaultProps,
-			"highlight-current": "",
-			"empty-text": "请配置菜单！",
-			"default-expanded-keys": m.currentTreeKey,
-			"node-key": "key",
-			onNodeClick: S.onNodeClick
-		}, {
-			default: f(({ data: t, node: n }) => [l(e.$slots, "tree-node", {
-				data: t,
-				node: n
-			}, () => [r("span", null, [r("i", { class: o(t.icon) }, null, 2), i(" " + d(t.label), 1)])])]),
-			_: 3
-		}, 8, [
-			"data",
-			"props",
-			"default-expanded-keys",
-			"onNodeClick"
-		])])
-	])])], 4)) : t("v-if", !0), r("div", {
-		class: "page-index-content",
-		style: s({ width: m.aside ? `calc(100% - ${m.asideWidth})` : "100%" })
-	}, [t("内容"), l(e.$slots, "default", {}, () => [r("div", b, d(m.tips), 1)])], 4)]);
-}
-var S = /* @__PURE__ */ e(h, [["render", x]]);
-//#endregion
-export { S as default };

package/page-index/style.css

@@ -1 +0,0 @@
-.page-index-content{flex-direction:column;flex:auto;height:100%;padding:0;display:flex;overflow:hidden}.page-index-content-empty{color:gray;justify-content:center;align-items:center;width:100%;height:100%;font-size:20px;display:flex}