diff --git a/src/pages/attendance-clockIn/attendance-clockIn.vue b/src/pages/attendance-clockIn/attendance-clockIn.vue
new file mode 100644
index 0000000..9de8137
--- /dev/null
+++ b/src/pages/attendance-clockIn/attendance-clockIn.vue
@@ -0,0 +1,28 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <TopNavigation title="考勤打卡"></TopNavigation>
+  <view class="bg-white rounded-1 pt-20 pb-15 box-border mx-4 mt-2">
+    <view class="text-center">
+      <image src="/static/images/icon_wechat.png" class="w-30 h30" />
+    </view>
+    <view class="text-center mt-2 color-gray">你所在考勤组无法手机打卡</view>
+    <view class="text-center color-gray">请在考勤机或者门禁设备上打卡</view>
+  </view>
+  <view class="w-100% h-17 bg-blue mt-2 rounded-1" @click="goHelper"></view>
+</template>
+
+<script lang="ts" setup>
+  const goHelper = () => {
+    // todo goHelper
+  }
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/attendance-set/attendance-set.vue b/src/pages/attendance-set/attendance-set.vue
new file mode 100644
index 0000000..2a1f00f
--- /dev/null
+++ b/src/pages/attendance-set/attendance-set.vue
@@ -0,0 +1,86 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <TopNavigation title="设置"></TopNavigation>
+  <view class="mx-4 mt-2">
+    <view class="my-2 p-3.5 flex flex-justify-between rounded-1.2 items-center bg-white">
+      <view class="color-[#3372FA]">添加考勤组</view>
+      <wd-icon name="add-circle" class="color-[#3372FA]" size="20"></wd-icon>
+    </view>
+    <view class="my-2 p-3.5 flex flex-justify-between rounded-1.2 items-center bg-white">
+      <view class="flex flex-col">
+        <view>考勤</view>
+        <view class="text-gray mt-1 text-3">固定班制</view>
+      </view>
+      <wd-icon name="arrow-right" class="text-gray" size="20"></wd-icon>
+    </view>
+    <view class="text-gray mt-4 ml-3 text-3 mb-2">其他设置</view>
+    <view class="flex flex-row flex-justify-between">
+      <view class="p-3.5 bg-white rounded-1.2 flex-1 mr-1 flex flex-row items-center">
+        <image src="/static/images/icon_wechat.png" class="w-6 h-6 mr-2" />
+        <view class="text-3">班次管理</view>
+      </view>
+      <view class="p-3.5 bg-white rounded-1.2 flex-1 ml-1 flex flex-row items-center">
+        <image src="/static/images/icon_wechat.png" class="w-6 h-6 mr-2" />
+        <view class="text-3">下发记录</view>
+      </view>
+    </view>
+    <view class="text-gray mt-4 ml-3 text-3 mb-2">了解详情</view>
+    <view class="flex flex-wrap bg-white rounded-1.2 px-3 py-1.5 flex-justify-between">
+      <view
+        v-for="(item, index) in [
+          '电脑网页端',
+          '微信小程序',
+          '人脸-指纹-卡片',
+          '假勤-补卡申请',
+          '打卡问题检测',
+          '打卡-缺卡提醒'
+        ]"
+        :key="index"
+        class="my-1.5 bg-[#F6F8FC] w-4.8/10 py-3.5 px-2 rounded-1.2 box-border flex flex-row items-center"
+      >
+        <image src="/static/images/icon_wechat.png" class="w-5 h-5" mode="scaleToFill" />
+        <view class="text-center text-2.5 custom-color-black ml-1">{{ item }}</view>
+        <wd-icon name="arrow-right" class="text-gray flex-1 text-right" size="20"></wd-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  const list = ref<Array<TabBarItem>>([
+    {
+      title: '首页',
+      isDot: true,
+      icon: 'home'
+    },
+    {
+      title: '我的',
+      value: 0,
+      icon: '/static/tabbar/home.png'
+    },
+    {
+      title: '最大值',
+      value: 200,
+      icon: '/static/tabbar/home.png'
+    },
+    {
+      title: '客服',
+      value: 3,
+      icon: '/static/tabbar/home.png'
+    }
+  ])
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f6f8fc;
+  }
+</style>
diff --git a/src/pages/attendance-statistics/attendance-statistics.vue b/src/pages/attendance-statistics/attendance-statistics.vue
new file mode 100644
index 0000000..e7206fa
--- /dev/null
+++ b/src/pages/attendance-statistics/attendance-statistics.vue
@@ -0,0 +1,27 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <TopNavigation title="考勤统计"></TopNavigation>
+  <wd-tabs v-model="tab">
+    <block v-for="item in tabs" :key="item">
+      <wd-tab :title="item"></wd-tab>
+    </block>
+  </wd-tabs>
+</template>
+
+<script lang="ts" setup>
+  //
+  const tabs = ['团队统计', '我的统计']
+  const tab = ref<number>(0)
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/attendance/attendance.vue b/src/pages/attendance/attendance.vue
new file mode 100644
index 0000000..881f1bb
--- /dev/null
+++ b/src/pages/attendance/attendance.vue
@@ -0,0 +1,48 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-50px)] overflow-y-auto">
+    <view v-for="(item, index) in pages" :key="index" v-show="curIndex == index">
+      <component :is="item"></component>
+    </view>
+  </view>
+  <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
+</template>
+
+<script lang="ts" setup>
+  import AttendanceClockIn from '../attendance-clockIn/attendance-clockIn.vue'
+  import AttendanceSet from '../attendance-set/attendance-set.vue'
+  import AttendanceStatistics from '../attendance-statistics/attendance-statistics.vue'
+  const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
+  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>