shanxia2.0/web-admin/src/views/m/pl/dispatch-calendar/index.vue

<template>
  <MpWebviewShell class="mp-dispatch-edge-to-edge" @ready="ready = true">
    <div class="mp-dispatch-tabs" :style="{ '--dispatch-header-height': `${headerHeight}px` }">
      <div ref="header" class="mp-dispatch-top">
        <MpBusinessHeader title="派车日历" back-label="返回工作台" @back="goToMiniWorkbench" />
        <van-tabs v-model:active="active" shrink color="#0a9f6d" title-active-color="#087f57">
          <van-tab title="酸派车日历" name="acid" />
          <van-tab title="碱派车日历" name="alkali" />
          <van-tab title="其他日历" name="other" />
          <van-tab title="实际派车信息" name="actual" />
        </van-tabs>
      </div>
      <template v-if="ready">
        <ManualCalendar v-if="active === 'acid'" calendar-kind="acid" title="酸派车日历" />
        <ManualCalendar v-else-if="active === 'alkali'" calendar-kind="alkali" title="碱派车日历" />
        <ManualCalendar v-else-if="active === 'other'" calendar-kind="other" title="其他日历" />
        <ActualCalendar v-else />
      </template>
    </div>
  </MpWebviewShell>
</template>
<script setup lang="ts">
  import MpWebviewShell from '@/layouts/MpWebviewShell.vue'
  import MpBusinessHeader from '@/components/mp/MpBusinessHeader.vue'
  import { goToMiniWorkbench } from '@/utils/mp-webview'
  import ManualCalendar from './ManualCalendar.vue'
  import ActualCalendar from './ActualCalendar.vue'
  defineOptions({ name: 'MpDispatchCalendar' })
  const header = ref<HTMLElement>()
  const { height: headerHeight } = useElementSize(header)
  const ready = ref(false)
  const active = ref('acid')
</script>
<style scoped>
  .mp-dispatch-edge-to-edge {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }
  .mp-dispatch-tabs {
    min-width: 0;
    padding: 0 0 20px;
  }

  .mp-dispatch-top {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
  }
  .mp-dispatch-top > :deep(.mp-wv-header) {
    position: static;
    margin: 0;
  }
  .mp-dispatch-tabs :deep(.mp-calendar-sticky) {
    top: var(--dispatch-header-height);
  }
  .mp-dispatch-tabs :deep(.van-tabs__nav) {
    padding-right: 8px;
    padding-left: 8px;
  }
  .mp-dispatch-tabs :deep(.van-tab) {
    padding: 0 10px;
    font-size: 14px;
  }
</style>