starwork-uniapp/src/pages/attendance/attendance.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="h-[calc(100vh-50px)] flex flex-col">
    <TopNavigation :title="titleTab[curIndex]"></TopNavigation>
    <scroll-view class="flex-1 box-border" scroll-y>
      <AttendanceClockIn v-show="curIndex === 0"></AttendanceClockIn>
      <AttendanceStatistics v-show="curIndex === 1"></AttendanceStatistics>
      <AttendanceSet v-show="curIndex === 2"></AttendanceSet>
    </scroll-view>
  </view>
  <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
</template>

<script lang="ts" setup>
  import AttendanceClockIn from './AttendanceClockIn.vue'
  import AttendanceStatistics from './AttendanceStatistics.vue'
  import AttendanceSet from './AttendanceSet.vue'
  import { TabBarItem } from '@/typings'
  const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
  const titleTab = ['考勤打卡', '考勤统计', '设置']
  const list = ref<Array<TabBarItem>>([
    {
      title: '打卡',
      icon: 'home'
    },
    {
      title: '统计',
      icon: 'notification'
    },
    {
      title: '设置',
      icon: 'setting'
    }
  ])
  const curIndex = ref(0)
  const change = (data: { value: number }) => {
    curIndex.value = data.value
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f6f8fc;
  }
</style>