@opendesign-plus-test/components 0.0.1-rc.82 → 0.0.1-rc.84

package/src/components/meeting/OMeetingCalendar.vue

@@ -1,943 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
-import {
-  isClient,
-  OFigure,
-  OIcon,
-  OIconChevronLeft,
-  OIconChevronRight,
-  OOption, OResult,
-  OScroller,
-  OSelect,
-  OTab,
-  OTabPane,
-} from '@opensig/opendesign';
-import dayjs from 'dayjs';
-import { ElCalendar } from 'element-plus';
-import OMeetingCalendarList from './components/OMeetingCalendarList.vue';
-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 emptyDefaultImg from '@/assets/meeting/empty.png';
-import { Locales } from '@/i18n';
-import { useMeetingConfig } from './composables/useMeetingConfig';
-import {
-  CalendarDataType,
-  MeetingEventsItemT,
-  MeetingCalendarPropsT,
-  MeetingGroupType, MeetingItemT,
-  meetingTabT,
-  SummitItemT,
-} from './types.ts';
-import { formatDate } from './utils.ts';
-import { useDebounceFn } from '@vueuse/core';
-
-const props = withDefaults(defineProps<MeetingCalendarPropsT>(), {
-  getSummitListRequest: async () => [],
-  getEventsListRequest: async () => [],
-  hiddenEvents: false,
-  hiddenSummit: false,
-  groupType: MeetingGroupType.SIG,
-  groups: () => [],
-});
-const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
-const isEn = computed(() => locale.value === Locales.EN);
-
-const dateList = ref<string[]>([]);
-const summitData = ref<SummitItemT[]>([]);
-const summitDates = ref<string[]>([]);
-const eventsData = ref<MeetingEventsItemT[]>([]);
-const eventsDates = ref<string[]>([]);
-const meetingData = ref<MeetingItemT[]>([]);
-const limitTime = '2021-01-01';
-const tabType = ref<CalendarDataType>(CalendarDataType.ALL);
-const tabs = computed<meetingTabT[]>(() => {
-  let list = meetingTabs.value;
-  if (props.hiddenEvents) {
-    list = list.filter((item) => item.value !== CalendarDataType.EVENTS);
-  }
-  if (props.hiddenSummit) {
-    list = list.filter((item) => item.value !== CalendarDataType.SUMMIT);
-  }
-  if (list.filter(v => v.value !== CalendarDataType.ALL).length === 1) {
-    return [];
-  }
-  return list;
-});
-
-watch(() => tabs.value, () => {
-  tabType.value = tabs.value[0]?.value ?? CalendarDataType.MEETING;
-});
-const calendar = ref();
-const calendarHeight = ref<string>('407px');
-const isLimit = ref(false);
-const currentDay = ref('');
-const isAutoClick = ref(false);
-// sig组列表
-const group = ref('');
-const getSummitData = async (date: string) => {
-  if (props.getSummitListRequest) {
-    summitData.value = [];
-    const list = await props.getSummitListRequest(date);
-    summitData.value = (list || []).map((v: SummitItemT) => {
-      return {
-        ...v,
-        type: CalendarDataType.SUMMIT,
-      };
-    });
-  } else {
-    summitData.value = [];
-  }
-};
-const getActivityData = async (date: string) => {
-  if (props.getEventsListRequest) {
-    eventsData.value = [];
-    const list = await props.getEventsListRequest(date);
-    eventsData.value = (list || []).map((v: MeetingEventsItemT) => {
-      return {
-        ...v,
-        type: CalendarDataType.EVENTS,
-      };
-    });
-  } else {
-    eventsData.value = [];
-  }
-};
-
-const getDateList = async (date: string) => {
-  if (props.getDateListRequest) {
-    props.getDateListRequest(date, group.value || '').then((res: string[]) => {
-      dateList.value = res;
-    });
-  }
-  if (props.getEventsDatesRequest) {
-    props.getEventsDatesRequest(date).then((res: string[]) => {
-      eventsDates.value = res;
-    });
-  }
-  if (props.getSummitDatesRequest) {
-    props.getSummitDatesRequest(date).then((res: string[]) => {
-      summitDates.value = res;
-    });
-  }
-};
-
-const paramGetDaysData = async (params: { date: string; type: string }) => {
-  if (!props.getMeetingListRequest) {
-    return;
-  }
-  if (!params.date) {
-    return;
-  }
-  try {
-    meetingData.value = [];
-    const res: MeetingItemT[] = await props.getMeetingListRequest(params.date, group.value, '');
-    meetingData.value = res.map((v) => {
-      return {
-        ...v,
-        time: `${ v.start }-${ v.end }`,
-        type: CalendarDataType.MEETING,
-        date: v.date || params.date,
-      };
-    }).sort((a: any, b: any) => {
-      return parseInt((a.start || a.cycle_start)?.replace(':', '')) - parseInt(b.end || b.cycle_end?.replace(':', ''));
-    });
-  } catch {
-    meetingData.value = [];
-  }
-};
-
-const renderData = computed(() => {
-  return [
-    ...meetingData.value,
-    ...eventsData.value,
-    ...summitData.value,
-  ].filter((v) => {
-    if (tabType.value === CalendarDataType.ALL) {
-      return true;
-    }
-    return v.type === tabType.value;
-  });
-});
-
-const getDateData = async (day?: string) => {
-  const date = dayjs(day).format('YYYY-MM-DD');
-  currentDay.value = date;
-  getSummitData(date);
-  getActivityData(date);
-  getDateList(date);
-
-  paramGetDaysData({
-    date: date,
-    type: tabType.value,
-  });
-};
-const allDates = computed<string[]>(() => {
-  return [...new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])]
-    .flat()
-    .sort((a: string, b: string) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
-});
-
-const latestDay = computed(() => {
-  if (!allDates.value.length) {
-    return formatDate(new Date());
-  } else {
-    let find = allDates.value.find((v) => dayjs(v).isAfter(dayjs()));
-    if (!find) {
-      find = [...allDates.value].reverse().find((v) => dayjs().isAfter(dayjs(v)));
-    }
-    return formatDate(find);
-  }
-});
-
-const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
-  if (isAutoClick.value) {
-    isAutoClick.value = false;
-    return;
-  }
-  if (new Date(day).getTime() / 1000 < 1610380800) {
-    event?.stopPropagation();
-    return;
-  }
-  getDateData(day);
-}, 300)
-
-
-watch(() => latestDay.value,
-  () => {
-    calendar.value?.pickDay(dayjs(latestDay.value));
-    changeMeetingDay(latestDay.value);
-  },
-  {
-    immediate: true,
-  },
-);
-
-const selectDate = (val: string, date: string) => {
-  if (formatDate(date) === formatDate(limitTime) && val === 'prev-month') {
-    isLimit.value = true;
-    return;
-  }
-  isLimit.value = false;
-  calendar.value.selectDate(val);
-  changeMeetingDay(formatDate(calendar.value.selectedDay));
-};
-const changeGroup = () => {
-  nextTick(() => {
-    paramGetDaysData({
-      date: currentDay.value,
-      type: tabType.value,
-    });
-    getDateList(currentDay.value);
-  });
-};
-
-const removeLeadingZero = (str: string) => {
-  // 使用正则表达式匹配以 0 开头的字符串，然后去除开头的 0
-  return str.replace(/^0+(?=\d)/, '');
-};
-
-const watchChange = (element: HTMLElement) => {
-  const observe = new MutationObserver(function() {
-    calendarHeight.value = `${ element.offsetHeight - 2 }px`;
-  });
-  observe.observe(element, {
-    childList: true,
-    subtree: true,
-    characterData: true,
-  });
-};
-
-const getCalendarHeight = async () => {
-  // 设置右侧 日程列表高度
-  const tbody = document.querySelector('.calendar-body .el-calendar__body') as HTMLElement;
-  if (tbody) {
-    watchChange(tbody);
-    calendarHeight.value = `${ tbody.offsetHeight - 2 }px`;
-  }
-};
-
-onMounted(() => {
-  getCalendarHeight();
-});
-
-const stopWatchData = watch(
-  () => allDates.value.length,
-  () => {
-    if (isClient && !currentDay.value) {
-      nextTick(() => {
-        const activeBoxes = document.querySelector('.is-today .out-box') as HTMLElement;
-        if (activeBoxes) {
-          isAutoClick.value = true;
-          activeBoxes.click();
-          stopWatchData();
-        }
-      });
-    }
-  },
-);
-
-const formatYearMonth = (date: string) => {
-  if (isEn.value) {
-    return date.split(' ').reverse().join(' ');
-  } else {
-    return date;
-  }
-};
-// 根据类型校验日历日期是否可选
-const checkSelectedDay = (type: CalendarDataType, date: string) => {
-  if (type === CalendarDataType.MEETING) {
-    return ([CalendarDataType.ALL, CalendarDataType.MEETING].includes(tabType.value) && dateList.value.includes(date));
-  }
-  if (type === CalendarDataType.SUMMIT) {
-    return ([CalendarDataType.ALL, CalendarDataType.SUMMIT].includes(tabType.value) && summitDates.value.includes(date));
-  }
-  if (type === CalendarDataType.EVENTS) {
-    return ([CalendarDataType.ALL, CalendarDataType.EVENTS].includes(tabType.value) && eventsDates.value.includes(date));
-  }
-  return false;
-};
-
-defineExpose({
-  refresh: getDateData,
-});
-</script>
-<template>
-  <div class="o-meeting-calendar">
-    <div class="calendar-body">
-      <ElCalendar ref="calendar" class="calender">
-        <template #header="{ date }">
-          <div class="calender-header-left">
-            <div class="left-title">
-              <OIcon @click="selectDate('prev-month', date)">
-                <OIconChevronLeft :class="{ disable: isLimit }" />
-              </OIcon>
-              <span class="month-date">{{ formatYearMonth(date) }}</span>
-              <OIcon @click="selectDate('next-month', date)">
-                <OIconChevronRight />
-              </OIcon>
-            </div>
-            <OSelect
-              v-if="groups?.length > 0"
-              v-model="group"
-              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
-              clearable
-              @change="changeGroup"
-            >
-              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
-            </OSelect>
-          </div>
-
-          <div class="right-title">
-            <span>{{ t('meeting.latestMeeting') }}&nbsp;</span>
-            <span>{{ formatDate(dayjs(latestDay)) }}</span>
-          </div>
-        </template>
-        <template #date-cell="{ data }">
-          <div class="out-box" :class="{ 'has-calender': allDates.includes(data.day) }"
-               @click="changeMeetingDay(data.day, $event)">
-            <div class="day-box">
-              <p :class="data.isSelected ? 'is-selected' : ''" class="date-calender">
-                {{ removeLeadingZero(data.day.split('-').at(-1) || '') }}
-              </p>
-              <div class="icon-box">
-                <OIcon
-                  class="meeting"
-                  :style="{
-                      zIndex: getConfig(CalendarDataType.MEETING, 'zIndex'),
-                      backgroundColor: getConfig(CalendarDataType.MEETING, 'color')
-                    }"
-                  v-if="checkSelectedDay(CalendarDataType.MEETING, data.day)">
-                  <IconMeeting />
-                </OIcon>
-                <OIcon
-                  class="events"
-                  :style="{
-                      zIndex: getConfig(CalendarDataType.EVENTS, 'zIndex'),
-                      backgroundColor: getConfig(CalendarDataType.EVENTS, 'color')
-                    }"
-                  v-if="checkSelectedDay(CalendarDataType.EVENTS, data.day)">
-                  <IconEvent />
-                </OIcon>
-                <OIcon
-                  class="summit"
-                  :style="{
-                      zIndex: getConfig(CalendarDataType.SUMMIT, 'zIndex'),
-                      backgroundColor: getConfig(CalendarDataType.SUMMIT, 'color')
-                    }"
-                  v-if="checkSelectedDay(CalendarDataType.SUMMIT, data.day)">
-                  <IconSummit />
-                </OIcon>
-              </div>
-            </div>
-          </div>
-        </template>
-      </ElCalendar>
-      <div class="detail-list">
-        <div class="current-day">
-          {{ t('meeting.latestMeeting') }}&nbsp;
-          <span>{{ formatDate(dayjs(latestDay)) }}</span>
-        </div>
-        <div class="right-title">
-          <div class="title-list">
-            <OSelect
-              v-model="group"
-              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
-              clearable
-              @change="changeGroup"
-            >
-              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
-            </OSelect>
-            <OTab v-model="tabType" :line="false" :max-show="9999">
-              <OTabPane v-for="item in tabs" :key="item.value" :value="item.value">
-                <template #nav>
-                  <OIcon>
-                    <component :is="item.icon" />
-                  </OIcon>
-                  {{ item.label }}
-                </template>
-              </OTabPane>
-            </OTab>
-          </div>
-        </div>
-
-        <div>
-          <OScroller class="meeting-list" show-type="hover" size="small" :style="{
-            '--height': calendarHeight
-          }">
-            <OMeetingCalendarList
-              :list="renderData as unknown as MeetingItemT[]"
-              :groupType="groupType"
-              :disableFormat="disableFormat"
-            >
-              <template #empty>
-                <slot name="empty">
-                  <OResult class="empty-result">
-                    <template #image>
-                      <OFigure class="img" :src="emptyImg ?? emptyDefaultImg" />
-                    </template>
-                    <template #description>{{ emptyText ?? t('meeting.meetingEmptyText') }}</template>
-                  </OResult>
-                </slot>
-              </template>
-            </OMeetingCalendarList>
-          </OScroller>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style lang="scss">
-.o-meeting-calendar {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
-
-  .o-select {
-    flex-grow: 1;
-    max-width: 320px;
-    --select-radius: var(--meeting-input-radius);
-  }
-
-  .el-calendar-table {
-    margin-bottom: 0;
-    display: table;
-    width: 100%;
-  }
-
-  .calendar-body {
-    display: flex;
-    border-radius: var(--meeting-card-radius);
-    background-color: var(--o-color-fill2);
-    overflow: hidden;
-    @include respond('<=pad_v') {
-      background-color: transparent;
-      flex-direction: column;
-    }
-
-    .calender {
-      width: 56%;
-      --el-calendar-borde: none;
-      --el-calendar-selected-bg-color: none;
-      @include respond('<=pad_v') {
-        width: 100%;
-        flex-direction: column;
-        background-color: var(--o-color-fill2);
-        border-radius: var(--meeting-card-radius);
-      }
-
-      .el-calendar__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 58px;
-        padding: 0 var(--o-gap-6);
-        gap: var(--o-gap-6);
-        border-bottom: 1px solid var(--o-color-control4);
-        background: var(--o-color-fill2);
-        @include respond('<=pad_v') {
-          justify-content: center;
-          border-bottom: none;
-          height: 52px;
-        }
-
-        .calender-header-left {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: var(--o-gap-6);
-          @include respond('<=pad') {
-            gap: var(--o-gap-4);
-          }
-
-          .o-select {
-            max-width: 240px;
-            @include respond('<=pad_v') {
-              display: none;
-            }
-          }
-        }
-
-        .left-title {
-          display: flex;
-          align-items: center;
-          flex-shrink: 0;
-          color: var(--o-color-info1);
-          @include text2;
-          @include respond('<=pad_v') {
-            @include h3;
-          }
-
-          .o-icon {
-            cursor: pointer;
-            font-size: 24px;
-          }
-
-          .month-date {
-            font-weight: 500;
-            margin: 0;
-          }
-        }
-
-        .right-title {
-          display: flex;
-          align-items: center;
-          color: var(--o-color-info2);
-          word-break: keep-all;
-          @include text2;
-          @include respond('<=pad_v') {
-            display: none;
-          }
-        }
-      }
-
-      .el-calendar__body {
-        padding: 0 var(--o-gap-6) var(--o-gap-6);
-        border-right: 1px solid var(--o-color-control4);
-        margin-bottom: 0;
-        background: var(--o-color-fill2);
-
-        thead {
-          th {
-            padding: var(--o-gap-4) var(--o-gap-3);
-            text-align: left;
-            color: var(--o-color-info3);
-            background: none;
-            border: none;
-            @include text1;
-            @include respond('<=pad_v') {
-              padding: 0;
-              text-align: center;
-            }
-          }
-        }
-
-        td {
-          border: none;
-          padding: 0;
-        }
-
-        td:first-child {
-          .el-calendar-day {
-            margin-left: 0 !important;
-          }
-        }
-
-        tr:last-child {
-          .el-calendar-day {
-            margin-bottom: 0 !important;
-          }
-        }
-
-        @include respond('<=pad_v') {
-          border: none;
-          padding: 0 16px 16px;
-          thead {
-            background-color: var(--o-color-control4-light);
-            overflow: hidden;
-
-            th {
-              padding: 9px 0;
-            }
-
-            th:first-child {
-              border-top-left-radius: var(--meeting-cell-radius);
-              border-bottom-left-radius: var(--meeting-cell-radius);
-            }
-
-            th:last-child {
-              border-top-right-radius: var(--meeting-cell-radius);
-              border-bottom-right-radius: var(--meeting-cell-radius);
-            }
-          }
-          tr:last-child {
-            .out-box {
-              margin-bottom: 0 !important;
-            }
-          }
-        }
-      }
-
-      td {
-        border: none;
-      }
-
-      .el-calendar-day {
-        padding: 0;
-        margin-left: var(--o-gap-2);
-        margin-bottom: var(--o-gap-2);
-        height: 64px;
-        color: var(--o-color-info1);
-        @include respond('<=pad_v') {
-          display: flex;
-          justify-content: center;
-          padding: 0;
-          height: fit-content;
-        }
-
-        .out-box {
-          position: relative;
-          border-radius: var(--meeting-cell-radius);
-          padding: 8px 12px;
-          width: 100%;
-          height: 100%;
-          background-color: var(--o-color-control2-light);
-          border: 1px solid transparent;
-          @include tip1;
-          @include hover {
-            background-color: var(--o-color-control3-light);
-            @include respond('<=pad_v') {
-              @include hover {
-                background-color: inherit;
-                border: 1px solid transparent;
-              }
-            }
-          }
-
-          .day-box {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            height: 100%;
-          }
-
-          .icon-box {
-            display: flex;
-            margin-top: 4px;
-            color: var(--o-color-white);
-            height: 16px;
-
-            .o-icon {
-              flex-shrink: 0;
-              position: relative;
-              border-radius: 50%;
-              width: 16px;
-              height: 16px;
-              font-size: 14px;
-              padding: 1px;
-              margin-left: -4px;
-              margin-top: 0;
-              @include respond('<=pad_v') {
-                height: 6px;
-                width: 6px;
-                margin-left: -2px;
-              }
-
-              &:first-child {
-                margin: 0;
-              }
-            }
-
-            .o-icon {
-              svg path {
-                fill: currentColor;
-              }
-            }
-          }
-
-          @include respond('<=pad_v') {
-            background-color: transparent;
-            padding: 0;
-            margin: 6px 8px;
-            text-align: center;
-            width: 24px;
-            height: 24px;
-            .day-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              font-size: 14px;
-              line-height: 22px;
-            }
-            .icon-box {
-              display: flex;
-              justify-content: center;
-              margin-top: 0;
-              position: absolute;
-              left: 50%;
-              bottom: -2px;
-              height: 6px;
-              transform: translate(-50%, 100%);
-            }
-            .o-icon {
-              width: 6px;
-              height: 6px;
-
-              svg {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-
-      .date-calender {
-        position: relative;
-        margin-bottom: 0;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: -1;
-        }
-      }
-
-      .is-selected {
-        .out-box {
-          background-color: var(--o-color-control3-light);
-          border: 1px solid var(--o-color-primary1);
-          @include respond('<=pad_v') {
-            background-color: transparent;
-            border: 1px solid transparent;
-            .date-calender {
-              color: var(--o-color-primary1);
-              font-weight: 600;
-              z-index: 1;
-
-              &::after {
-                height: 24px;
-                width: 40px;
-                background-color: var(--o-color-control3-light);
-                border-radius: var(--meeting-cell-radius);
-                border: 1px solid var(--o-color-primary1);
-              }
-            }
-          }
-        }
-      }
-
-      .is-today {
-        .date-calender {
-          --num-size: 22px;
-          width: fit-content;
-          height: var(--num-size);
-          line-height: var(--num-size);
-          z-index: 1;
-          font-weight: 600;
-          color: var(--o-color-primary1);
-
-          &::after {
-            width: var(--num-size);
-            height: var(--num-size);
-            background-color: var(--o-color-control3-light);
-            border-radius: 50%;
-          }
-
-          @include respond('<=pad_v') {
-            height: auto;
-            width: auto;
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              height: 24px;
-              width: 40px;
-              border-radius: var(--meeting-cell-radius);
-              z-index: -1;
-            }
-          }
-        }
-      }
-    }
-
-    .detail-list {
-      width: 44%;
-
-
-      @include respond('<=pad_v') {
-        margin-top: 12px;
-        padding-top: 16px;
-        background-color: var(--o-color-fill2);
-        width: 100%;
-        border-radius: var(--meeting-card-radius);
-      }
-      @include respond('phone') {
-
-        margin-top: 16px;
-        padding-top: 12px;
-      }
-
-      .current-day {
-        color: var(--o-color-info2);
-        @include respond('>pad_v') {
-          display: none;
-        }
-        @include respond('<=pad_v') {
-          display: flex;
-          margin: 16px 16px 12px;
-          padding: 7px 12px;
-          justify-content: center;
-          border-radius: var(--meeting-card-radius);
-          background-color: var(--o-color-control4-light);
-          @include text2;
-        }
-      }
-
-      .title-list {
-        padding: 16px 0;
-        position: relative;
-        height: 58px;
-
-        @include respond('<=pad_v') {
-          justify-content: space-between;
-          padding: 0 16px;
-          gap: var(--o-gap-4);
-          height: auto;
-          align-items: flex-start;
-          display: flex;
-        }
-        @include respond('phone') {
-          flex-direction: column;
-          align-items: center;
-          gap: var(--o-gap-2);
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          background-color: var(--o-color-control4);
-        }
-
-        .o-select {
-          display: none;
-          margin-bottom: var(--o-gap-2);
-          @include respond('<=pad_v') {
-            display: inline-flex;
-          }
-          @include respond('pad_v') {
-            max-width: 160px;
-          }
-          @include respond('phone') {
-            display: flex;
-            width: 100%;
-            max-width: 100%;
-            margin-bottom: 0;
-          }
-        }
-
-      }
-
-      .o-tab {
-        --tab-nav-padding: 0 0 16px;
-        @include respond('laptop') {
-          --tab-nav-padding: 0 0 18px;
-        }
-        @include respond('pad_h') {
-          --tab-nav-gap: 24px;
-          --tab-nav-padding: 0 0 18px;
-        }
-
-        @include respond('<=pad_v') {
-          border-bottom: none;
-          height: auto;
-          .o-icon {
-            display: none;
-          }
-        }
-        @include respond('pad_v') {
-          --tab-nav-justify: flex-end;
-          width: 50%;
-          --tab-nav-padding: 0 0 14px;
-        }
-
-        @include respond('phone') {
-          --tab-nav-padding: 0 0 4px;
-        }
-
-        .o-icon {
-          svg path {
-            fill: currentColor;
-          }
-        }
-        .o-tab-nav-anchor {
-          .o-tab-nav-anchor-line {
-            width: 100%;
-            @include respond('<=pad_v') {
-              width: 16px;
-            }
-          }
-        }
-      }
-    }
-
-    .meeting-list {
-      height: var(--height);
-      @include respond('<=pad_v') {
-        height: auto;
-      }
-    }
-  }
-
-  .empty-result {
-    --result-image-width: 240px;
-    --result-image-height: 210px;
-    --result-desc-gap: var(--o-gap-4);
-
-    @include respond('laptop') {
-      --result-image-width: 200px;
-      --result-image-height: 175px;
-      --result-desc-gap: var(--o-gap-3);
-    }
-
-    @include respond('<=pad') {
-      --result-image-width: 160px;
-      --result-image-height: 140px;
-      --result-desc-gap: var(--o-gap-2);
-    }
-
-    .o-result-description {
-      @include tip1;
-    }
-  }
-}
-</style>