@opendesign-plus/components 0.0.1-rc.28 → 0.0.1-rc.29

package/src/components/meeting/OMeetingForm.vue

@@ -19,7 +19,15 @@ import {
 } from '@opensig/opendesign';
 import IconHelp from '~icons/meeting/icon-help.svg';
 import IconTip from '~icons/meeting/icon-tip.svg';
-import { CycleSubItemT, MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT, PlatformT } from './types';
+import {
+  CycleSubItemT,
+  MeetingFormPropsT,
+  MeetingGroupType,
+  MeetingItemT,
+  MeetingPostT,
+  OptionItemT,
+  PlatformT,
+} from './types';
 import dayjs from 'dayjs';
 import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
 import { EMAIL_REGEX, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config';
@@ -31,8 +39,6 @@ import { ValidatorResultT } from '@opensig/opendesign/lib/form/types';
 const { t, locale, cycleTypeOptions0, intervalWeekOptions, getPlatformLabel } = useMeetingConfig();
 
 const props = withDefaults(defineProps<MeetingFormPropsT>(), {
-  isSub: false,
-  isEdit: false,
   showBtns: true,
   groupType: MeetingGroupType.SIG,
 });
@@ -41,6 +47,8 @@ const message = useMessage(null);
 const cycleTypeOptions = cycleTypeOptions0;
 const weekOptions = intervalWeekOptions;
 
+const isEdit = computed(() => Object.keys(props?.data || {}).length > 0);
+const isSub = computed(() => !!props.subId);
 const intervalTypeMax = computed(() => {
   return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
 });
@@ -202,7 +210,7 @@ const rules = computed<Record<string, RulesT[]>>(() => {
     email_list: [
       {
         validator: (value: any) => {
-          if (props.isEdit) {
+          if (isEdit.value) {
             return {} as unknown as ValidatorResultT;
           }
           const str = value.replaceAll(' ', '').replaceAll(',', ';') || '';
@@ -287,7 +295,7 @@ const getPropData = () => {
     ...(is_cycle
       ? {
         date_range: [cycle_start_date, cycle_end_date],
-        cycle_point: cycle_point?.map((v) => parseInt(v)) || [],
+        cycle_point: cycle_point?.map((v) => parseInt(v as unknown as string)) || [],
         cycle_interval: cycle_interval || 1,
         time: `${ cycle_start }-${ cycle_end }`,
         start: cycle_start,
@@ -301,13 +309,13 @@ watch(
   () => props.data,
   (data) => {
     if (data) {
-      const propData = getPropData() as unknown as CycleSubItemT;
-      const sub = propData?.cycle_sub?.find((v) => v.sub_id === (props.subId || propData.sub_id)) || {} as unknown as CycleSubItemT;
+      const propData = getPropData() as unknown as MeetingItemT;
+      const sub = propData?.cycle_sub?.find((v) => v.sub_id === (props.subId)) || {} as unknown as CycleSubItemT;
       const { mid, date, start, end, sub_id } = sub;
       Object.assign(
         form.value,
         propData,
-        props.isSub
+        isSub.value
           ? {
             is_cycle: false,
             mid,
@@ -368,12 +376,12 @@ const changeIntervalType = () => {
 };
 
 const changeIsCycle = () => {
-  form.value.platform = 'WELINK';
+  form.value.platform = typeOptions.value.find(v => (v.value as unknown as string).toLowerCase() === 'welink')?.value as unknown as string || 'WeLink';
 };
 
 const { lePadV } = useScreen();
 const confirm = async () => {
-  let type = props.isEdit ? t('meeting.editSuccess') : t('meeting.booSuccess');
+  let type = isEdit.value ? t('meeting.editSuccess') : t('meeting.booSuccess');
   try {
     loading.value = true;
     const valid = await formRef.value.validate();
@@ -431,8 +439,8 @@ const confirm = async () => {
         end,
       };
     }
-    if (props.isEdit) {
-      if (props.isSub) {
+    if (isEdit.value) {
+      if (isSub.value) {
         const { mid, sub_id } = form.value;
         const { date, start, end } = params;
         flag = await props?.editSubMeetingRequest(sub_id, {
@@ -482,7 +490,7 @@ onMounted(() => {
 
 const changeSig = (sig: any) => {
   const find = sigOptions.value.find((v) => v.value === sig);
-  if (!props.isEdit) {
+  if (!isEdit.value) {
     form.value.etherpad = find?.etherpad || '';
     form.value.email_list = find?.email_list || '';
   }
@@ -506,7 +514,7 @@ defineExpose({
 <template>
   <div class="o-meeting-form">
     <OForm :model="form" ref="formRef" has-required :layout="lePadV ? 'v' : 'h'" class="form-wrapper">
-      <OFormItem :rules="rules.topic" :label="t('meeting.meetingName')" field="topic">
+      <OFormItem :rules="rules.topic" :label="labelMap?.topic ?? t('meeting.meetingName')" field="topic">
         <OInput
           :disabled="isSub"
           size="large"
@@ -516,7 +524,7 @@ defineExpose({
       </OFormItem>
       <OFormItem
         :rules="rules.group_name"
-        :label="groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup'):t('meeting.meetingSig')"
+        :label="labelMap?.group_name ?? (groupType === MeetingGroupType.GROUP ? t('meeting.meetingGroup') : t('meeting.meetingSig'))"
         field="group_name">
         <OSelect
           :disabled="isEdit"
@@ -531,7 +539,8 @@ defineExpose({
       </OFormItem>
       <OFormItem :rules="rules.etherpad" label="Etherpad" field="etherpad" v-if="form.group_name">
         <template #label>
-          <div class="label-wrapper">
+          <template v-if="labelMap?.etherpad">{{ labelMap.etherpad }}</template>
+          <div v-else class="label-wrapper">
             <span>{{ t('meeting.etherpad') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content etherpad">{{ t('meeting.etherpadDesc') }}</div>
@@ -552,9 +561,9 @@ defineExpose({
         />
       </OFormItem>
 
-      <OFormItem :label="t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
+      <OFormItem :label="labelMap?.time ?? t('meeting.meetingTime')" field="time" :rules="rules.time" class="repeat-row" required>
         <div class="repeat-config-wrapper">
-          <OFormItem field="repeat" class="repeat-item" v-if="!isSub">
+          <OFormItem field="repeat" class="repeat-radio-item" v-if="!isSub">
             <ORadioGroup v-model="form.is_cycle" @change="changeIsCycle" :disabled="isEdit">
               <ORadio :value="false">{{ t('meeting.nonRepeat') }}</ORadio>
               <ORadio :value="true">{{ t('meeting.isRepeat') }}</ORadio>
@@ -581,7 +590,7 @@ defineExpose({
                 </div>
               </OFormItem>
               <OFormItem
-                :label="t('meeting.in')"
+                :label="labelMap?.cycle_point ?? t('meeting.in')"
                 field="cycle_point"
                 class="point-item"
                 v-if="form.cycle_type !== INTERVAL_DAY"
@@ -598,7 +607,7 @@ defineExpose({
                 </OSelect>
                 <OMeetingCalendarSelector v-if="form.cycle_type === INTERVAL_MONTH" v-model="form.cycle_point" />
               </OFormItem>
-              <OFormItem :label="t('meeting.meetingDuration')" field="date_range">
+              <OFormItem :label="labelMap?.date_range ?? t('meeting.meetingDuration')" field="date_range">
                 <ElDatePicker
                   size="large"
                   v-model="form.date_range"
@@ -614,7 +623,7 @@ defineExpose({
               </OFormItem>
             </template>
             <template v-else>
-              <OFormItem :label="t('meeting.meetingDate')" field="date">
+              <OFormItem :label="labelMap?.date ?? t('meeting.meetingDate')" field="date">
                 <ElDatePicker
                   popper-class="o-meeting-form-date-picker-popper"
                   size="large"
@@ -663,14 +672,14 @@ defineExpose({
           </div>
         </div>
       </OFormItem>
-      <OFormItem :label="t('meeting.meetingPlatform')" field="platform" :rules="rules.platform" class="platform-item">
+      <OFormItem :label="labelMap?.platform ?? t('meeting.meetingPlatform')" field="platform" :rules="rules.platform" class="platform-item">
         <ORadioGroup v-model="form.platform" v-if="!data" :disabled="form.is_cycle">
           <ORadio v-for="item in typeOptions" :key="item.value" :value="item.value">{{ getPlatformLabel(item.label) }}
           </ORadio>
         </ORadioGroup>
         <span v-else>{{ getPlatformLabel(form.platform) }}</span>
       </OFormItem>
-      <OFormItem field="agenda" :label="t('meeting.meetingAgenda')" :rules="rules.genda">
+      <OFormItem field="agenda" :label="labelMap?.agenda ?? t('meeting.meetingAgenda')" :rules="rules.genda">
         <OTextarea
           :disabled="isSub"
           size="large"
@@ -678,7 +687,7 @@ defineExpose({
           style="width: 100%"
           :rows="4" v-model="form.agenda" />
       </OFormItem>
-      <OFormItem :label="t('meeting.meetingRecord')" field="is_record" class="record-item full-width-item">
+      <OFormItem :label="labelMap?.is_record ?? t('meeting.meetingRecord')" field="is_record" class="record-item full-width-item">
         <template v-if="lePadV">
           <OSwitch v-model="form.is_record" :disabled="isSub" />
         </template>
@@ -715,7 +724,8 @@ defineExpose({
       </template>
       <OFormItem field="email_list" :rules="rules.email_list">
         <template #label>
-          <div class="label-wrapper">
+          <template v-if="labelMap?.email_list">{{ labelMap.email_list }}</template>
+          <div v-else class="label-wrapper">
             <span>{{ t('meeting.meetingEmail') }}&nbsp;</span>
             <OPopover>
               <div class="o-meeting-form-popover-content">
@@ -765,7 +775,7 @@ defineExpose({
   }
 
   .o-form {
-    --o-input-color: var(--o-color-info2);
+    --o-input-color: var(--o-color-info1);
     --o-placeholder-color: var(--o-color-info4);
 
 
@@ -925,7 +935,10 @@ defineExpose({
     border-radius: var(--meeting-card-radius);
     padding: 0 15px;
     background-color: var(--o-color-fill2);
-
+    --el-component-size-large: 34px;
+    @include respond('<=pad_v') {
+      --el-component-size-large: calc(var(--o-control_size-l) - 2px);
+    }
     & > span {
       padding: 0 var(--o-gap-2);
     }
@@ -949,8 +962,8 @@ defineExpose({
 
       .el-select__wrapper {
         box-shadow: none;
-        padding: calc((var(--o-control_size-l) - 24px) / 2) 0;
-        min-height: var(--o-control_size-l);
+        padding: calc((var(--el-component-size-large) - 24px) / 2) 0;
+        min-height: var(--el-component-size-large);
         gap: 0;
       }
 
@@ -987,7 +1000,8 @@ defineExpose({
   .repeat-config-wrapper {
     width: 100%;
 
-    .repeat-item {
+    .repeat-radio-item {
+      margin-bottom: var(--o-gap-2);
       .o-form-item-label {
         display: none;
       }
@@ -995,13 +1009,6 @@ defineExpose({
       .o-form-item-main {
         margin-left: 0;
       }
-
-      @include respond('pad_v') {
-        margin-bottom: var(--o-gap-4);
-      }
-      @include respond('phone') {
-        margin-bottom: var(--o-gap-3);
-      }
     }
 
     .repeat-config {

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -58,11 +58,6 @@ const emits = defineEmits(['edit']);
 // -------------------- 自动加载下一页 --------------------
 const nextLoading = ref(false);
 const bottomReached = ref(false);
-const headerRef = ref();
-const headerHeight = ref(0);
-const getHeaderHeight = () => {
-  headerHeight.value = headerRef.value?.clientHeight || 0;
-};
 
 const getList = async () => {
   if (!props.getMeetingListRequest) {
@@ -471,14 +466,11 @@ onMounted(() => {
   window.addEventListener('scroll', handleScroll);
   // 添加resize监听器
   window.addEventListener('resize', handleScroll);
-  getHeaderHeight();
-  window.addEventListener('resize', getHeaderHeight);
 });
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
   window.removeEventListener('resize', handleScroll);
-  window.removeEventListener('resize', getHeaderHeight);
   const scrollerContainerEl = scrollerRef.value?.getContainerEl();
   scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
 });
@@ -597,7 +589,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
           ref="scrollerRef"
           @scrollend="load"
           v-if="list.length"
-          :style="{ '--header-height': headerHeight }"
           class="scroller-container"
           show-type="hover"
         >
@@ -636,6 +627,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
                     :value="row.sub_id || row.id"
                     :class="{
                       'last-item': idx === groupList.length - 1 && rowIdx === group.list.length - 1,
+                      'is-delete': row.is_delete,
+                      'is-end': row.isExpired,
                     }"
                   >
                     <template #title>
@@ -643,7 +636,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                         <div
                           class="meeting-icon"
                           :style="{
-                            backgroundColor: `${getConfig(CalendarDataType.MEETING, 'color')}`
+                            backgroundColor: `${row.is_delete ? 'var(--o-color-info4)' : getConfig(CalendarDataType.MEETING, 'color')}`
                           }"
                         >
                           <OIcon>
@@ -651,13 +644,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           </OIcon>
                         </div>
                         <div class="header-info">
-                          <div
-                            :class="{
-                              'meeting-title': true,
-                              'is-delete': row.is_delete,
-                              'is-end': row.isExpired,
-                            }"
-                          >
+                          <div class="meeting-title">
                             <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
                             <div class="title-wrapper">
                               <div class="title-text">{{ row.topic }}</div>
@@ -817,7 +804,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
     @include respond('phone') {
       flex-direction: column;
       gap: var(--o-gap-3);
-      --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
+      --phone-padding-top: 56px;
     }
 
     .o-loading {
@@ -855,9 +842,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       }
 
       @include respond('phone') {
-        padding-top: var(--o-gap-7);
         background-color: var(--o-color-fill1);
-        padding-bottom: var(--o-gap-4);
         display: flex;
         position: fixed;
         height: var(--phone-padding-top);
@@ -1012,7 +997,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
               &.is-today {
                 .date-cell-text {
-                  color: #000;
+                  color: var(--o-color-primary1);
+                  font-weight: bold;
                   background-color: var(--o-color-control3-light);
                 }
               }
@@ -1039,9 +1025,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
               }
             }
 
-            .is-today {
-              color: inherit;
-            }
           }
         }
       }
@@ -1072,7 +1055,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
       .scroller-container {
         height: 100%;
-        max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
+        max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height, 64) * 1px);
 
         @include respond('phone') {
           max-height: fit-content;
@@ -1082,14 +1065,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
           padding-left: 24px;
           position: relative;
 
-          &.last-item {
-            flex-grow: 1;
-          }
-
           @include respond('phone') {
             padding-left: var(--o-gap-2);
           }
 
+          &.last-item {
+            flex-grow: 1;
+          }
+
           .group-bar {
             position: absolute;
             left: 0;
@@ -1271,6 +1254,19 @@ const cancelActions = computed<DialogActionT[]>(() => {
               border-bottom: none;
             }
           }
+
+          &.is-delete,
+          &.is-end {
+
+            .meeting-title {
+              color: var(--o-color-info4);
+
+              .title-text {
+                color: var(--o-color-info4);
+              }
+            }
+          }
+
           &.o-collapse-item-expanded {
             border-bottom: none;
             background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
@@ -1339,8 +1335,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0;
+                --icon-size2: var(--icon-size);
 
                 .o-icon {
+                  font-size: calc(var(--icon-size2) - 2px);
                   svg path {
                     fill: currentColor;
                   }
@@ -1358,15 +1356,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   margin-bottom: var(--o-gap-2);
                   @include text2;
 
-                  &.is-delete,
-                  &.is-end {
-                    color: var(--o-color-info4);
-
-                    .title-text {
-                      color: var(--o-color-info4) !important;
-                    }
-                  }
-
                   .tag-wrapper {
                     flex: 10;
                     margin-left: var(--o-gap-2);
@@ -1374,6 +1363,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                     .o-tag {
                       background-color: var(--o-color-control2-light);
                       border: none;
+                      font-weight: 400;
                     }
                   }
 

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
 import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
+import { ElSelect, ElOption } from 'element-plus';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
 import OMeetingSigAside from './components/OMeetingSigAside.vue';
@@ -8,6 +9,7 @@ import { CalendarDataType, MeetingEventsItemT, MeetingItemT } from './types.ts';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
+import { formatDate } from '@/components/meeting/utils.ts';
 
 const props = defineProps<{
   sigName: String;
@@ -21,7 +23,7 @@ const { lePadV } = useScreen();
 const selectDate = ref<string>('');
 
 const loading = ref(false); // 数据加载状态
-const list = ref<(MeetingItemT | MeetingEventsItemT)[]>([]); // 某天的会议列表
+const meetingData = ref<MeetingItemT[]>([]); // 某天的会议列表
 const calendarRows = computed(() => (lePadV.value ? 100 : 5)); // 日历行数
 
 const latestDate = ref<string>('');
@@ -44,7 +46,7 @@ const clickDateCell = async (date: string) => {
     loading.value = true;
     selectDate.value = dayjs(date).format('YYYY-MM-DD');
     const res = await props.getMeetingListRequest(selectDate.value, props.sigName);
-    list.value = res.map((v: MeetingItemT) => {
+    meetingData.value = res.map((v: MeetingItemT) => {
       return {
         ...v,
         time: `${ v.start }-${ v.end }`,
@@ -54,11 +56,6 @@ const clickDateCell = async (date: string) => {
     });
   } finally {
     loading.value = false;
-    eventsData.value.forEach((v) => {
-      if (v.dates?.includes(selectDate.value)) {
-        list.value.push(v);
-      }
-    });
   }
 };
 
@@ -68,7 +65,12 @@ const getDates = async () => {
     meetingDates.value = await props.getDateListRequest();
   }
   if (props.getEventsListRequest) {
-    eventsData.value = await props.getEventsListRequest();
+    eventsData.value = (await props.getEventsListRequest(selectDate.value, props.sigName)).map((v: any) => {
+      return {
+        ...v,
+        type: CalendarDataType.EVENTS,
+      };
+    });
     eventsDates.value = (eventsData.value || []).map(v => v.dates || []).flat();
   }
 };
@@ -94,13 +96,15 @@ const getMonthAndDay = (date: string) => {
 };
 
 const dateList = computed(() => {
-  let list = [];
+  let list: any[];
   if (tabType.value === CalendarDataType.ALL) {
     list = [...(meetingDates.value || []), ...eventsDates.value];
   } else if (tabType.value === CalendarDataType.MEETING) {
     list = meetingDates.value || [];
+  } else if (tabType.value === CalendarDataType.EVENTS) {
+    list = eventsDates.value || [];
   } else {
-    list = eventsDates.value;
+    list = [];
   }
   return [...new Set(list)].sort((a, b) => !dayjs(a).isAfter(dayjs(b)) ? -1 : 1).map(v => dayjs(v).format('YYYY-MM-DD'));
 });
@@ -235,11 +239,25 @@ const changeMonthIdx = (step: number) => {
 onMounted(() => {
   getDates();
 });
+
+const list = computed(() => {
+  let list: any[];
+  if (tabType.value === CalendarDataType.ALL) {
+    list = [...(meetingData.value || []), ...eventsData.value];
+  } else if (tabType.value === CalendarDataType.MEETING) {
+    list = meetingData.value || [];
+  } else if (tabType.value === CalendarDataType.EVENTS) {
+    list = eventsData.value || [];
+  } else {
+    list = [];
+  }
+  return list;
+});
 </script>
 
 <template>
   <div class="o-sig-meeting-calendar">
-    <div class="meeting-card-header" v-if="!lePadV">
+    <div class="meeting-card-header">
       <div class="header-left" v-if="latestDate">
         <span>{{ t('meeting.latestMeeting') }} </span>
         <span>{{ dayjs(latestDate).format('YYYY/MM/DD') }}</span>
@@ -268,12 +286,12 @@ onMounted(() => {
     <template v-if="lePadV && dateList.length">
       <div class="date-select">
         <ElSelect v-model="selectDate" @change="changeSelect">
-          <template #label>{{ t('meeting.latestMeeting') }} {{ selectDate }}</template>
+          <template #label>{{ t('meeting.latestMeeting') }} {{ formatDate(selectDate) }}</template>
           <ElOption
             v-for="date in dateList"
             :key="date"
             :value="date"
-            :label="dayjs(date).format('YYYY/MM/DD')"
+            :label="formatDate(date)"
           />
         </ElSelect>
       </div>
@@ -317,7 +335,7 @@ onMounted(() => {
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {
-      padding: 12px 16px 0;
+      padding: var(--o-gap-3) var(--o-gap-4) 0;
 
       .el-input {
         flex-grow: 1;
@@ -329,7 +347,7 @@ onMounted(() => {
   }
 
   .date-select {
-    padding: 16px;
+    padding: var(--o-gap-4);
 
     .o-select {
       width: 100%;
@@ -340,10 +358,13 @@ onMounted(() => {
     font-weight: 500;
     display: flex;
     align-items: center;
-    padding: 12px 32px 0;
+    padding: var(--o-gap-3) var(--o-gap-6) 0;
     @include text1;
     @include respond('<=pad') {
-      padding: 12px 16px 0;
+      padding: var(--o-gap-3) var(--o-gap-4) 0;
+    }
+    @include respond('<=pad_v') {
+      display: none;
     }
 
     .date-meeting {
@@ -353,8 +374,9 @@ onMounted(() => {
 
     .header-left {
       width: 35%;
-      padding-bottom: 12px;
+      padding-bottom: var(--o-gap-3);
       color: var(--o-color-info1);
+      @include text1;
     }
 
     .o-tab {
@@ -365,7 +387,7 @@ onMounted(() => {
       position: relative;
 
       .o-tab-nav {
-        padding-bottom: 12px;
+        padding-bottom: var(--o-gap-3);
 
         svg path {
           fill: currentColor;
@@ -406,8 +428,9 @@ onMounted(() => {
   }
 
   .list-content {
+    min-width: 0;
     flex-grow: 1;
-    height: 400px;
+    height: 360px;
     @include respond('<=pad_v') {
       height: auto;
     }