@opendesign-plus/components 0.0.1-rc.17 → 0.0.1-rc.19

package/src/components/meeting/OSigMeetingCalendar.vue

@@ -310,7 +310,7 @@ onMounted(() => {
 .o-sig-meeting-calendar {
   width: 100%;
   background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-m);
+  border-radius: var(--o-radius-xs);
   margin-top: var(--o-gap-5);
   @include respond-to('phone') {
     .meeting-card-header {
@@ -351,6 +351,7 @@ onMounted(() => {
     .header-left {
       width: 35%;
       padding-bottom: 12px;
+      color: var(--o-color-info1);
     }
 
     .o-tab {

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -2,14 +2,8 @@
 import { OCollapse, OCollapseItem, ODivider, OIcon, OLink, OTag, useMessage } from '@opensig/opendesign';
 import OMeetingDetail from './OMeetingDetail.vue';
 import { computed, nextTick, ref, watch } from 'vue';
-import IconMeetinging from '~icons/meeting/icon-meet.svg';
 import IconCopy from '~icons/meeting/icon-copy.svg';
-import { CalendarDataType, MeetingGroupType, MeetingItemT } from '../types.ts';
-
-import IconAll from '~icons/meeting/icon-all.svg';
-import IconEvent from '~icons/meeting/icon-event.svg';
-import IconSummit from '~icons/meeting/icon-summit.svg';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
+import { MeetingGroupType, MeetingItemT } from '../types.ts';
 import IconChevronRight from '~icons/components/icon-chevron-right.svg';
 import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '../config.ts';
 import { formatDate } from '../utils.ts';
@@ -26,7 +20,7 @@ const props = withDefaults(defineProps<{
 });
 const { t, locale, getConfig, getPointStr } = useMeetingConfig();
 const detailRefs = ref([]);
-const message = useMessage();
+const message = useMessage(null);
 const copyInfo = async (idx) => {
   const instance = detailRefs.value[idx];
   await instance.copyInfo();
@@ -48,12 +42,6 @@ const i18n = computed(() => {
   };
 });
 
-const getCurrentIcon = (item) => {
-  if (item.type === 'summit') return IconSummit;
-  if (item.type === 'events') return IconEvent;
-  return IconMeeting;
-};
-
 // -------------------- 监听尺寸变化 --------------------
 const meetInfoRef = ref();
 const resizeObserver = new ResizeObserver((entries) => {
@@ -86,25 +74,21 @@ const computedList = computed(() => {
   return props.list.map((v) => {
     const type = v.type;
     let dateRange = '';
-    if (['activity'].includes(type)) {
+    if (type !== 'meeting') {
       let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
-      if (v.end_date === v.start_date) {
-        return {
-          ...v,
-          activity_type,
-          dateRange: `${ formatDate(v.start_date) } ${ v.start }-${ v.end }`,
-        };
+      if (v.start && v.end) {
+        if (v.end_date === v.start_date) {
+          dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ v.end }`;
+        } else {
+          dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ formatDate(v.end_date) } ${ v.end }`;
+        }
+      } else {
+        dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
       }
+
       return {
         ...v,
         activity_type,
-        dateRange: `${ formatDate(v.start_date) } ${ v.start }-${ formatDate(v.end_date) } ${ v.end }`,
-      };
-    }
-    if (['events', 'summit'].includes(type)) {
-      dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
-      return {
-        ...v,
         dateRange,
       };
     }
@@ -406,6 +390,10 @@ const computedList = computed(() => {
 
       .o-icon {
         font-size: 16px;
+
+        svg path {
+          fill: currentColor;
+        }
       }
     }
 
@@ -420,6 +408,10 @@ const computedList = computed(() => {
       color: var(--o-color-info1);
       @include text2;
 
+      @include respond-to('<=pad_v') {
+        @include h3;
+      }
+
       .tag-wrapper {
         margin-left: var(--o-gap-2);
 
@@ -437,7 +429,7 @@ const computedList = computed(() => {
         margin-right: var(--icon-right);
         width: var(--icon-size2);
         height: var(--icon-size2);
-        font-size: var(--icon-size2);
+        font-size: calc(var(--icon-size2) - 4px);
 
         svg path {
           fill: currentColor;

package/src/components/meeting/components/OMeetingDetail.vue

@@ -57,7 +57,7 @@ const activityInfoApprovalList = computed(() => {
 });
 
 const columns = computed(() => {
-  if (props.data.type === CalendarDataType.ACTIVITY || props.data.type === CalendarDataType.EVENTS) {
+  if (props.data.type === CalendarDataType.EVENTS) {
     if (props.page === CalendarDataType.APPROVAL) {
       return activityInfoApprovalList.value;
     }
@@ -140,7 +140,7 @@ defineExpose({ copyInfo });
     font-size: 14px;
     gap: var(--o-gap-5);
 
-    @include respond-to('phone') {
+    @include respond-to('<=pad_v') {
       font-size: 12px;
       gap: var(--o-gap-2);
     }

package/src/components/meeting/components/OSigMeetingAside.vue

@@ -134,6 +134,7 @@ const changeMonth = (step) => {
         .day-d {
           font-weight: 500;
           margin-bottom: var(--o-gap-1);
+          color: var(--o-color-info1);
         }
 
         .day-c {

package/src/components/meeting/composables/useMeetingConfig.ts

@@ -71,9 +71,6 @@ export const useMeetingConfig = () => {
 
   const getConfig = (val: CalendarDataType, key: keyof meetingTabT): string => {
     let value = val;
-    if (val === CalendarDataType.ACTIVITY) {
-      value = CalendarDataType.EVENTS;
-    }
     const find: meetingTabT | undefined = meetingTabs.value.find(v => v.value === value);
     return find?.[key] || '';
   };

package/src/components/meeting/config.ts

@@ -1,59 +1,59 @@
-import { CalendarDataType, meetingTabT } from './types.ts';
-import IconAll from '~icons/meeting/icon-all.svg';
-import IconEvent from '~icons/meeting/icon-event.svg';
-import IconMeeting from '~icons/meeting/icon-meet.svg';
-import IconSummit from '~icons/meeting/icon-summit.svg';
-
-const getMeetingColor = () => {
-  if (typeof document !== 'undefined') {
-    const deepBlue = getComputedStyle(document.documentElement)
-      .getPropertyValue('--o-deep-blue-6')?.trim();
-    if (deepBlue) {
-      return 'rgba(var(--o-deep-blue-6))';
-    }
-  }
-  return 'var(--o-color-primary1)';
-};
-
-export const TYPE_COLOR_MAP = {
-  summit: 'rgba(var(--o-orange-6))',
-  events: 'rgba(var(--o-cyan-6))',
-  meeting: getMeetingColor(),
-};
-
-export const INTERVAL_DAY = 0;
-export const INTERVAL_WEEK = 1;
-export const INTERVAL_MONTH = 2;
-
-export const EMAIL_REGEX = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
-
-export const PROGRESS_COLORS = ['var(--o-color-primary1)', 'var(--o-color-warning1)', 'var(--o-color-success1)'];
-
-export const getMeetingTabs = (t: (key: string) => string): meetingTabT[] => [
-  {
-    label: t('meeting.meetingTypeAll'),
-    value: CalendarDataType.ALL,
-    icon: IconAll,
-  },
-  {
-    label: t('meeting.meetingTypeMeet'),
-    value: CalendarDataType.MEETING,
-    icon: IconMeeting,
-    color: TYPE_COLOR_MAP.meeting,
-    zIndex: 3,
-  },
-  {
-    label: t('meeting.meetingTypeEvents'),
-    value: CalendarDataType.EVENTS,
-    icon: IconEvent,
-    color: TYPE_COLOR_MAP.events,
-    zIndex: 2,
-  },
-  {
-    label: t('meeting.meetingTypeSummit'),
-    value: CalendarDataType.SUMMIT,
-    icon: IconSummit,
-    color: TYPE_COLOR_MAP.summit,
-    zIndex: 1,
-  },
+import { CalendarDataType, meetingTabT } from './types.ts';
+import IconAll from '~icons/meeting/icon-all.svg';
+import IconEvent from '~icons/meeting/icon-event.svg';
+import IconMeeting from '~icons/meeting/icon-meet.svg';
+import IconSummit from '~icons/meeting/icon-summit.svg';
+
+const getMeetingColor = () => {
+  if (typeof document !== 'undefined') {
+    const deepBlue = getComputedStyle(document.documentElement)
+      .getPropertyValue('--o-deep-blue-6')?.trim();
+    if (deepBlue) {
+      return 'rgba(var(--o-deep-blue-6))';
+    }
+  }
+  return 'var(--o-color-primary1)';
+};
+
+export const TYPE_COLOR_MAP = {
+  summit: 'rgba(var(--o-orange-6))',
+  events: 'rgba(var(--o-cyan-6))',
+  meeting: getMeetingColor(),
+};
+
+export const INTERVAL_DAY = 0;
+export const INTERVAL_WEEK = 1;
+export const INTERVAL_MONTH = 2;
+
+export const EMAIL_REGEX = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+
+export const PROGRESS_COLORS = ['var(--o-color-primary1)', 'var(--o-color-warning1)', 'var(--o-color-success1)'];
+
+export const getMeetingTabs = (t: (key: string) => string): meetingTabT[] => [
+  {
+    label: t('meeting.meetingTypeAll'),
+    value: CalendarDataType.ALL,
+    icon: IconAll,
+  },
+  {
+    label: t('meeting.meetingTypeMeet'),
+    value: CalendarDataType.MEETING,
+    icon: IconMeeting,
+    color: TYPE_COLOR_MAP.meeting,
+    zIndex: 3,
+  },
+  {
+    label: t('meeting.meetingTypeEvents'),
+    value: CalendarDataType.EVENTS,
+    icon: IconEvent,
+    color: TYPE_COLOR_MAP.events,
+    zIndex: 2,
+  },
+  {
+    label: t('meeting.meetingTypeSummit'),
+    value: CalendarDataType.SUMMIT,
+    icon: IconSummit,
+    color: TYPE_COLOR_MAP.summit,
+    zIndex: 1,
+  },
 ];

package/src/components/meeting/index.ts

@@ -12,7 +12,7 @@ const OMeetingCalendar = Object.assign(_OMeetingCalendar, {
 });
 const OMeetingForm = Object.assign(_OMeetingForm, {
   install(app: App) {
-    app.component('OMeetingCalendar', _OMeetingForm);
+    app.component('OMeetingForm', _OMeetingForm);
   },
 });
 

package/src/components/meeting/types.ts

@@ -53,6 +53,7 @@ export interface MeetingCalendarPropsT {
   hiddenEvents?: boolean;
   hiddenSummit?: boolean;
   groupType: MeetingGroupType;
+  groups: string[];
 }
 // 会议新增、修改
 export interface MeetingPostT {

package/src/components/meeting/utils.ts

@@ -1,70 +1,70 @@
-import dayjs from 'dayjs';
-import { OptionItemT } from './types';
-
-export const formatDate = (date: string | Date = new Date(), format: string = 'YYYY-MM-DD'): string => {
-  let dateStr = date;
-  if (!dateStr) {
-    dateStr = new Date();
-  }
-  if (!dayjs(new Date(dateStr)).isValid()) {
-    return dateStr as string;
-  }
-  return dayjs(new Date(dateStr)).format(format);
-};
-
-export const findLabelFromOptions = (value: string | number, options: OptionItemT[], labelKey: keyof OptionItemT = 'label', valueKey: keyof OptionItemT = 'value') => {
-  const find = options.find((o) => o[valueKey] === value);
-  return find?.[labelKey] || value;
-};
-
-export const speakerNum = (val: string) => {
-  const regex = /\d+/g;
-  const match = val.match(regex) || '';
-
-  return parseInt(match[0]);
-};
-
-export const getDateNumber = (date: string) => {
-  const arr: string[] = date.split(':');
-  if (arr.length > 3 || !arr.length) {
-    return 0;
-  }
-  let res = 0;
-  let base = 1;
-  while (arr.length > 0) {
-    const current = arr.pop();
-    res += parseInt(current!) * base;
-    base *= 60;
-  }
-  return res;
-};
-
-const formatNumber = (num: number) => {
-  if (num < 0) return 'Invalid number';
-  if (num >= 10) return `${ num }`;
-  return `0${ num }`;
-};
-
-export const formatDateNumber = (num: number) => {
-  if (num > 24 * 60 * 60) return 'Invalid date';
-  const h = Math.floor(num / 60 / 60);
-  const m = Math.floor((num - h * 60 * 60) / 60);
-  const s = num % 60;
-  return `${ formatNumber(h) }:${ formatNumber(m) }:${ formatNumber(s) }`;
-};
-
-export const transformTime = (time: string) => {
-  const arr = time.split(':');
-  const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
-  const mm = parseInt(arr[arr.length - 2]);
-  const ss = parseFloat(arr[arr.length - 1]);
-
-  return hh * 60 * 60 + mm * 60 + ss;
-};
-
-export const transformSeconds = (seconds: number) => {
-  const hh = Math.floor(seconds / 3600);
-  const mm = Math.floor((seconds - hh * 3600) / 60);
-  const ss = Math.floor(seconds - hh * 3600 - mm * 60);
-  return `${ hh ? `${ hh.toString().padStart(2, '0') }:` : '' }${ mm.toString().padStart(2, '0') }:${ ss.toString().padStart(2, '0') }`;
+import dayjs from 'dayjs';
+import { OptionItemT } from './types';
+
+export const formatDate = (date: string | Date = new Date(), format: string = 'YYYY-MM-DD'): string => {
+  let dateStr = date;
+  if (!dateStr) {
+    dateStr = new Date();
+  }
+  if (!dayjs(new Date(dateStr)).isValid()) {
+    return dateStr as string;
+  }
+  return dayjs(new Date(dateStr)).format(format);
+};
+
+export const findLabelFromOptions = (value: string | number, options: OptionItemT[], labelKey: keyof OptionItemT = 'label', valueKey: keyof OptionItemT = 'value') => {
+  const find = options.find((o) => o[valueKey] === value);
+  return find?.[labelKey] || value;
+};
+
+export const speakerNum = (val: string) => {
+  const regex = /\d+/g;
+  const match = val.match(regex) || '';
+
+  return parseInt(match[0]);
+};
+
+export const getDateNumber = (date: string) => {
+  const arr: string[] = date.split(':');
+  if (arr.length > 3 || !arr.length) {
+    return 0;
+  }
+  let res = 0;
+  let base = 1;
+  while (arr.length > 0) {
+    const current = arr.pop();
+    res += parseInt(current!) * base;
+    base *= 60;
+  }
+  return res;
+};
+
+const formatNumber = (num: number) => {
+  if (num < 0) return 'Invalid number';
+  if (num >= 10) return `${ num }`;
+  return `0${ num }`;
+};
+
+export const formatDateNumber = (num: number) => {
+  if (num > 24 * 60 * 60) return 'Invalid date';
+  const h = Math.floor(num / 60 / 60);
+  const m = Math.floor((num - h * 60 * 60) / 60);
+  const s = num % 60;
+  return `${ formatNumber(h) }:${ formatNumber(m) }:${ formatNumber(s) }`;
+};
+
+export const transformTime = (time: string) => {
+  const arr = time.split(':');
+  const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
+  const mm = parseInt(arr[arr.length - 2]);
+  const ss = parseFloat(arr[arr.length - 1]);
+
+  return hh * 60 * 60 + mm * 60 + ss;
+};
+
+export const transformSeconds = (seconds: number) => {
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds - hh * 3600) / 60);
+  const ss = Math.floor(seconds - hh * 3600 - mm * 60);
+  return `${ hh ? `${ hh.toString().padStart(2, '0') }:` : '' }${ mm.toString().padStart(2, '0') }:${ ss.toString().padStart(2, '0') }`;
 };

package/src/i18n/en.ts

@@ -39,8 +39,8 @@ export default {
   'meeting.myMeeting': 'My Meetings',
   'meeting.meetingCancel': '[{0}] meeting canceled.',
   'meeting.todayNonMeeting': 'No meetings scheduled for today.',
-  'meeting.online': '线上',
-  'meeting.offline': '线下',
+  'meeting.online': 'Online',
+  'meeting.offline': 'Offline',
   'meeting.meetingSingle': 'This meeting',
   'meeting.meetingCycle': 'All recurring meetings',
   'meeting.bookMeeting': 'Book Meeting',

package/src/i18n/zh.ts

@@ -202,14 +202,14 @@ export default {
   'meeting.rejectReview': '审核驳回',
   'meeting.reviewNotes': '审核备注',
   'meeting.enterReviewNotes': '请输入审核的备注信息',
-  'meeting.confirmCancelActivity': '确定取消"xxxxxxxxxxxxxxxxx"活动？取消后将不会在会议首页呈现，且已报名的数据也会被清空，请谨慎操作。',
+  'meeting.confirmCancelActivity': '确定取消"{0}"活动？取消后将不会在会议首页呈现，且已报名的数据也会被清空，请谨慎操作。',
   'meeting.confirmBtn': '确定',
   'meeting.activityDetail': '活动详情',
   'meeting.modifyActivity': '修改活动',
   'meeting.withdrawReview': '撤销审核',
   'meeting.deleteActivity': '删除活动',
   'meeting.submitReview': '提交审核',
-  'meeting.confirmDeleteActivity': '确定删除"xxxxxxxxxxxxxxxxx"活动？删除后记录将不再我的个人中心呈现。',
+  'meeting.confirmDeleteActivity': '确定删除"{0}"活动？删除后记录将不再我的个人中心呈现。',
   'meeting.registerNow': '我要报名',
   'meeting.onlineOffline': '线上与线下',
   'meeting.statusDraft': '草稿',

package/dist/components/header/OHeaderMoblie.vue.d.ts

@@ -1,33 +0,0 @@
-export interface OHeaderT {
-    (e: 'go-back'): void;
-    (e: 'go-home'): void;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        rightConfig?(_: {}): any;
-        tool?(_: {}): any;
-        logo?(_: {}): any;
-        toolbar?(_: {}): any;
-    };
-    refs: {
-        mobileNav: import('../../../vue/dist/vue.esm-bundler.js').CreateComponentPublicInstanceWithMixins<Record<string, any> & {}, {}, {}, {}, {}, import('../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {}, import('../../../vue/dist/vue.esm-bundler.js').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Record<string, any> & {}, {}, {}, {}, {}, {}> | null;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('../../../vue/dist/vue.esm-bundler.js').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('../../../vue/dist/vue.esm-bundler.js').PublicProps>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/header/components/HeaderNavMoblie.vue.d.ts

@@ -1,17 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        tool?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/header/components/HeaderUbmcNav.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps>;
-export default _default;

package/src/components/header/OHeaderMoblie.vue

@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
-
-import ContentWrapper from '../common/ContentWrapper.vue';
-import HeaderNavMoblie from './components/HeaderNavMoblie.vue';
-
-import IconClose from '~icons/components/icon-close.svg';
-import IconMenu from '~icons/components/icon-header-menu.svg';
-
-export interface OHeaderT {
-  (e: 'go-back'): void;
-  (e: 'go-home'): void;
-}
-
-const emit = defineEmits<OHeaderT>();
-
-const props = defineProps({
-  logo: undefined,
-  navData: undefined,
-  codeData: undefined,
-  isSimpleHeader: undefined,
-  headerTitle: undefined,
-});
-
-const goBack = () => {
-  emit('go-back');
-};
-const goHome = () => {
-  emit('go-home');
-};
-
-const menuShow = ref(false);
-const menuPanel = () => {
-  setTimeout(() => {
-    menuShow.value = !menuShow.value;
-    document.body.style.overflow = menuShow.value ? 'hidden' : '';
-  }, 200);
-};
-
-const mobileClick = () => {
-  menuPanel();
-};
-</script>
-
-<template>
-  <div class="header">
-    <ContentWrapper class="header-wrap">
-      <!-- 二级路由简单头部 -->
-      <div v-if="isSimpleHeader" class="header-simple">
-        <div class="simple-header-left">
-          <OIcon @click="goBack">
-            <OIconArrowLeft />
-          </OIcon>
-          <div v-if="headerTitle" class="header-title">
-            {{ headerTitle }}
-          </div>
-        </div>
-        <div v-if="$slots.rightConfig" class="simple-header-right">
-          <slot name="rightConfig"></slot>
-        </div>
-      </div>
-      <template v-else>
-        <div class="header-left">
-          <OIcon @click="menuPanel">
-            <IconMenu v-if="!menuShow" />
-            <IconClose v-else />
-          </OIcon>
-        </div>
-        <HeaderNavMoblie ref="mobileNav" :nav-data="navData" :code-data="codeData" :menu-show="menuShow" @link-click="mobileClick">
-          <template #tool>
-            <slot name="tool"></slot>
-          </template>
-        </HeaderNavMoblie>
-        <div class="header-center">
-          <div class="header-logo" @click="goHome">
-            <slot name="logo">
-              <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
-            </slot>
-          </div>
-        </div>
-        <div class="header-right">
-          <slot name="toolbar"></slot>
-        </div>
-      </template>
-    </ContentWrapper>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  background-color: var(--o-color-fill2);
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
-  backdrop-filter: blur(5px);
-  --o-header-height: 56px;
-}
-.header-wrap {
-  display: flex;
-  align-items: center;
-  height: var(--o-header-height);
-  justify-content: space-between;
-  position: relative;
-}
-.header-simple {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .o-icon {
-    font-size: 24px;
-  }
-  .simple-header-left {
-    display: flex;
-    gap: 16px;
-    color: var(--o-color-info1);
-    overflow: hidden;
-    flex-grow: 1;
-    .header-title {
-      color: var(--o-color-info1);
-      font-weight: 500;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      @include text2;
-    }
-  }
-  .simple-header-right {
-    flex-shrink: 0;
-    color: var(--o-color-info1);
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  .o-icon {
-    --icon-size: 24px;
-  }
-}
-.logo {
-  height: 24px;
-  width: auto;
-}
-</style>