67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
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>
|