@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/dist/treeshaking/components/events/OEventsList.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,195 @@
+import { useI18n } from "../../i18n/index.mjs";
+import { CITY_MAP, DEFAULT_COVER } from "./config.mjs";
+import { EventsStatusT } from "./types.mjs";
+import { compareDate } from "./utils.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { OCard, ODivider, OIcon, OIconSearch, OInput, OPagination, ORadio, ORadioGroup, OTag, OToggle } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import dayjs from "dayjs";
+// src/components/events/OEventsList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-events-list" };
+var _hoisted_2 = { class: "filter-slot-wrapper" };
+var _hoisted_3 = { class: "filter-wrapper" };
+var _hoisted_4 = { class: "filter-left" };
+var _hoisted_5 = { class: "list-content" };
+var _hoisted_6 = { class: "tags-wrapper" };
+var _hoisted_7 = { class: "event-name" };
+var _hoisted_8 = { class: "event-desc" };
+var _hoisted_9 = { class: "event-date" };
+var _hoisted_10 = {
+	key: 0,
+	class: "event-location"
+};
+var OEventsList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OEventsList",
+	props: {
+		data: { default: () => [] },
+		page: {},
+		pageSize: {},
+		total: {}
+	},
+	emits: ["search"],
+	setup(__props, { emit: __emit }) {
+		const { t } = useI18n();
+		const { lePadV } = useScreen();
+		const props = __props;
+		const statusOptions = [
+			{
+				label: t("events.statusAll"),
+				value: EventsStatusT.ALL
+			},
+			{
+				label: t("events.statusIng"),
+				value: EventsStatusT.ING
+			},
+			{
+				label: t("events.statusFinish"),
+				value: EventsStatusT.FINISH
+			}
+		];
+		const emits = __emit;
+		const status = ref(EventsStatusT.ALL);
+		const input = ref("");
+		const keyword = ref("");
+		const emitSearch = (params = {}) => {
+			emits("search", Object.assign({
+				page: props.page,
+				pageSize: props.pageSize,
+				status: status.value,
+				keyword: keyword.value
+			}, params));
+		};
+		const changeStatus = () => {
+			emitSearch();
+		};
+		const changeKeyword = () => {
+			keyword.value = input.value;
+			emitSearch();
+		};
+		const list = computed(() => {
+			return props.data.map((v) => {
+				let startDate = v.startDate;
+				let endDate = v.endDate;
+				let dateStr = dayjs(v.date).format("YYYY/MM/DD");
+				if (startDate && endDate) {
+					const yearFirstDay = dayjs().format("YYYY-01-01");
+					if (compareDate(yearFirstDay, startDate)) startDate = yearFirstDay;
+					const yearLastDay = dayjs().format("YYYY-12-31");
+					if (compareDate(endDate, yearLastDay)) endDate = yearLastDay;
+					dateStr = `${dayjs(startDate).format("YYYY/MM/DD")}-${dayjs(endDate).format("MM/DD")}`;
+				}
+				return {
+					...v,
+					startDate,
+					endDate,
+					dateStr,
+					status: !compareDate(/* @__PURE__ */ new Date(), v.endDate || v.date) ? EventsStatusT.ING : EventsStatusT.FINISH
+				};
+			}).sort((a, b) => compareDate(a.date || a.endDate, b.date || b.endDate) ? -1 : 1).map((v) => {
+				const city = v.city?.replace("市", "")?.replace("中国", "")?.replaceAll(" ", "");
+				let cover = null;
+				if (Array.isArray(CITY_MAP[city])) cover = CITY_MAP[city][v.name.length % CITY_MAP[city].length];
+				else cover = CITY_MAP[city];
+				if (!cover) cover = DEFAULT_COVER;
+				return {
+					...v,
+					cover
+				};
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "filter", {}, () => [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("span", null, toDisplayString(unref(t)("events.status")), 1), createVNode(unref(ORadioGroup), {
+					modelValue: status.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => status.value = $event),
+					style: { "--radio-group-gap": "8px" },
+					onChange: changeStatus
+				}, {
+					default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(statusOptions, (t) => {
+						return createVNode(unref(ORadio), {
+							key: t.value,
+							value: t.value
+						}, {
+							radio: withCtx(({ checked }) => [createVNode(unref(OToggle), { checked }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(t.label), 1)]),
+								_: 2
+							}, 1032, ["checked"])]),
+							_: 2
+						}, 1032, ["value"]);
+					}), 64))]),
+					_: 1
+				}, 8, ["modelValue"])]), createVNode(unref(OInput), {
+					size: "large",
+					modelValue: input.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => input.value = $event),
+					placeholder: unref(t)("events.searchPlaceholder"),
+					onPressEnter: changeKeyword,
+					onClear: changeKeyword,
+					clearable: ""
+				}, {
+					prefix: withCtx(() => [createVNode(unref(OIcon), { class: "input-icon" }, {
+						default: withCtx(() => [createVNode(unref(OIconSearch))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue", "placeholder"])])])]),
+				createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
+					return openBlock(), createBlock(unref(OCard), {
+						key: item.name,
+						cover: item.cover,
+						href: item.link
+					}, {
+						default: withCtx(() => [
+							createElementVNode("div", _hoisted_6, [item.tags?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(item.tags, (tag) => {
+								return openBlock(), createBlock(unref(OTag), {
+									key: tag.title,
+									size: "medium"
+								}, createSlots({
+									default: withCtx(() => [createElementVNode("span", null, toDisplayString(tag.title), 1)]),
+									_: 2
+								}, [tag.icon ? {
+									name: "icon",
+									fn: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tag.icon)))]),
+									key: "0"
+								} : void 0]), 1024);
+							}), 128)) : createCommentVNode("", true), createVNode(unref(OTag), { class: "event-status" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.status === unref(EventsStatusT).ING ? unref(t)("events.statusIng") : unref(t)("events.statusFinish")), 1)]),
+								_: 2
+							}, 1024)]),
+							createElementVNode("div", _hoisted_7, toDisplayString(item.name), 1),
+							createElementVNode("div", _hoisted_8, [
+								createElementVNode("div", _hoisted_9, toDisplayString(item.dateStr), 1),
+								createVNode(unref(ODivider), { direction: "v" }),
+								item.city ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(item.city), 1)) : createCommentVNode("", true)
+							])
+						]),
+						_: 2
+					}, 1032, ["cover", "href"]);
+				}), 128))]),
+				!list.value.length ? renderSlot(_ctx.$slots, "empty", { key: 0 }) : createCommentVNode("", true),
+				__props.total > 8 ? (openBlock(), createBlock(unref(OPagination), {
+					key: 1,
+					page: __props.page,
+					simple: unref(lePadV),
+					"show-total": true,
+					pageSize: __props.pageSize,
+					total: __props.total,
+					onChange: emitSearch,
+					pageSizes: [
+						4,
+						12,
+						24,
+						36,
+						48
+					]
+				}, null, 8, [
+					"page",
+					"simple",
+					"pageSize",
+					"total"
+				])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+export { OEventsList_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/events/OEventsList.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,492 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
+}
+.o-events-list .filter-slot-wrapper {
+  background-color: var(--o-color-fill2);
+  border-radius: var(--events-card-radius);
+  padding: var(--o-gap-5) var(--o-gap-6);
+  gap: var(--o-gap-3) var(--o-gap-2);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--o-gap-4);
+}
+.o-events-list .filter-wrapper .filter-left {
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-2);
+  flex-wrap: wrap;
+}
+.o-events-list .filter-wrapper .filter-left span:first-child {
+  flex-shrink: 0;
+  margin-right: var(--o-gap-5);
+  font-weight: 500;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+  --toggle-size: 32px;
+  --toggle-padding: 3px 15px;
+  --toggle-radius: var(--events-tag-radius);
+  max-height: 32px;
+  --toggle-bg-color: var(--o-color-fill1);
+  --toggle-bg-color-hover: var(--o-color-control2-light);
+  --toggle-color: var(--o-color-info1);
+  --toggle-color-hover: var(--o-color-info1);
+  --toggle-color-active: var(--o-color-primary1);
+  --toggle-color-disabled: var(--o-color-info4);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .filter-wrapper .o-input .o-icon-search {
+  font-size: 24px;
+}
+.o-events-list .list-content {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--o-gap-6);
+  margin-top: var(--o-gap-6);
+}
+@media screen and (max-width: 1000px) {
+.o-events-list .list-content {
+    grid-template-columns: repeat(3, 1fr);
+}
+}
+@media (max-width: 840px) {
+.o-events-list .list-content {
+    grid-template-columns: repeat(1, 1fr);
+    container-type: inline-size;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-5);
+    gap: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+.o-events-list .list-content .o-card {
+  aspect-ratio: 1/1;
+  position: relative;
+  --card-radius: var(--events-card-radius);
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card {
+    aspect-ratio: 1/0.4;
+}
+}
+@container (max-width: 300px) {
+.o-events-list .list-content .o-card {
+    height: 140px;
+    width: 100%;
+    aspect-ratio: unset;
+}
+}
+.o-events-list .list-content .o-card .o-card-cover {
+  padding: 0;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-main {
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-white);
+  text-align: center;
+  padding: var(--o-gap-6);
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+  position: absolute;
+  top: var(--o-gap-3);
+  right: var(--o-gap-3);
+  display: flex;
+  align-items: center;
+  column-gap: var(--o-gap-2);
+  row-gap: var(--o-gap-1);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+    top: var(--o-gap-2);
+    right: var(--o-gap-2);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+  --tag-color: rgb(var(--o-white));
+  --tag-bg-color: rgba(var(--o-black), 0.25);
+  --tag-padding: var(--o-gap-1) var(--o-gap-3);
+  --tag-text-size: 12px;
+  --tag-text-height: 18px;
+  --tag-height: 24px;
+  border: none;
+  border-radius: var(--events-tag-radius);
+}
+@media (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+    --tag-padding: var(--o-gap-1);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag .o-tag-icon {
+  height: 16px;
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag .o-tag-icon {
+    --tag-icon-gap: -8px;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag .o-tag-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  font-weight: 500;
+  text-align: center;
+  height: 3lh;
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 32px;
+    line-height: 44px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    height: 2lh;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  text-align: center;
+  font-weight: 500;
+  margin-top: var(--o-gap-5);
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+  --o-divider-color: var(--o-color-info1-inverse);
+  --o-divider-bd-color: var(--o-color-info1-inverse);
+  display: none;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    display: flex;
+    align-items: center;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+    display: block;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .list-content .event-card {
+  border-radius: var(--events-card-radius);
+  color: rgb(var(--o-white));
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.o-events-list .o-pagination {
+  margin-top: var(--o-gap-6);
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: #fff;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .o-pagination .o-pagination-wrap {
+  justify-content: flex-end;
+}

package/dist/treeshaking/components/events/config.d.ts

@@ -0,0 +1,14 @@
+export declare const EVENTS_COLOR_MAP: {
+    summit: string;
+    events: string;
+    competition: string;
+    release: string;
+};
+export declare const EVENTS_ICON_MAP: {
+    events: string;
+    competition: string;
+    release: string;
+    summit: string;
+};
+export declare const CITY_MAP: Record<string, string | string[]>;
+export declare const DEFAULT_COVER = "https://infrastructure-website.osinfra.cn/picture/city/default-cover.jpg";