diff --git a/lib/provider/app_provider.dart b/lib/provider/app_provider.dart
index 0adf46c..5f03cd1 100644
--- a/lib/provider/app_provider.dart
+++ b/lib/provider/app_provider.dart
@@ -11,6 +11,17 @@ import 'package:aku_community_manager/const/api.dart';
 import 'package:aku_community_manager/ui/home/application/applications_page.dart';
 import 'package:aku_community_manager/utils/network/net_util.dart';
 
+enum WORKCLOCK {
+  ///未上班打卡状态
+  NOTIN,
+
+  ///已上班打卡
+  IN,
+
+  ///已下班打卡
+  OUT,
+}
+
 class AppProvider extends ChangeNotifier {
   List<AppApplication> _recentUsedApp = [];
   List<AppApplication> get recentUsedApp => _recentUsedApp;
@@ -69,4 +80,52 @@ class AppProvider extends ChangeNotifier {
     _commentMessage = response.data['commentCount'] ?? 0;
     notifyListeners();
   }
+
+  WORKCLOCK _clockStatus = WORKCLOCK.NOTIN;
+  DateTime _clockInTime;
+  DateTime _clockOutTime;
+  DateTime _dateRecord;
+  WORKCLOCK get clockStatus => _clockStatus;
+  DateTime get clockInTime => _clockInTime;
+  DateTime get clockOutTime => _clockOutTime;
+
+  initClock() {
+    if (_dateRecord == null ||
+        (_dateRecord !=
+            DateTime.utc(DateTime.now().year, DateTime.now().month,
+                DateTime.now().day))) {
+      resetClock();
+    }
+  }
+
+  setClockInTime(DateTime dateTime) {
+    if (_clockStatus == WORKCLOCK.NOTIN) {
+      _dateRecord = DateTime.utc(dateTime.year, dateTime.month, dateTime.day);
+      _clockInTime = dateTime;
+      _clockStatus = WORKCLOCK.IN;
+    }
+    notifyListeners();
+  }
+
+  setClockOutTime(DateTime dateTime) {
+    if (_dateRecord != null &&
+        (_dateRecord !=
+            DateTime.utc(DateTime.now().year, DateTime.now().month,
+                DateTime.now().day))) {
+      resetClock();
+    }
+    if (_clockStatus == WORKCLOCK.IN) {
+      _dateRecord = DateTime.utc(dateTime.year, dateTime.month, dateTime.day);
+      _clockOutTime = dateTime;
+      _clockStatus = WORKCLOCK.OUT;
+    }
+    notifyListeners();
+  }
+
+  resetClock() {
+    _clockInTime = null;
+    _clockOutTime = null;
+    _clockStatus = WORKCLOCK.NOTIN;
+    notifyListeners();
+  }
 }
diff --git a/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart b/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart
index 9461f86..2fa9a23 100644
--- a/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart
+++ b/lib/ui/manage_pages/clock_in_out/clock_in_out_main_page.dart
@@ -1,6 +1,8 @@
 import 'dart:async';
 
+import 'package:aku_community_manager/provider/app_provider.dart';
 import 'package:aku_community_manager/style/app_style.dart';
+import 'package:aku_community_manager/tools/user_tool.dart';
 import 'package:aku_community_manager/utils/weekdays_to_chinese.dart';
 import 'package:bot_toast/bot_toast.dart';
 import 'package:common_utils/common_utils.dart';
@@ -40,6 +42,7 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
     _clockSetState = Timer.periodic(Duration(seconds: 1), (_timer) {
       setState(() {});
     });
+    UserTool.appProvider.initClock();
   }
 
   @override
@@ -77,26 +80,44 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
             64.w.heightBox,
             Row(
               children: [
-                _buildCard(0),
+                _buildCard(0, time: UserTool.appProvider.clockInTime),
                 Spacer(),
-                _buildCard(1)
+                _buildCard(1, time: UserTool.appProvider.clockOutTime)
               ], //上班打卡为‘type’0.下班打卡为1
             ),
             150.w.heightBox,
             _buildClock(),
             65.w.heightBox,
             '今日工时'.text.size(24.sp).bold.color(kTextSubColor).make(),
-            '共10小时13分钟'.text.size(24.sp).bold.color(kTextSubColor).make(),
+            '共$getWorkHours'.text.size(24.sp).bold.color(kTextSubColor).make(),
           ],
         ),
       ),
     );
   }
 
+  clockInOut() {
+    switch (UserTool.appProvider.clockStatus) {
+      case WORKCLOCK.NOTIN:
+        UserTool.appProvider.setClockInTime(DateTime.now());
+        BotToast.showText(text: '上班打卡成功');
+        break;
+      case WORKCLOCK.IN:
+        UserTool.appProvider.setClockOutTime(DateTime.now());
+        BotToast.showText(text: '下班打卡成功');
+        break;
+      case WORKCLOCK.OUT:
+        BotToast.showText(text: '今日已打卡');
+        break;
+      default:
+        BotToast.showText(text: '未知错误');
+    }
+  }
+
   Widget _buildClock() {
     return GestureDetector(
       onTap: () {
-        canTap ? BotToast.showText(text: '打卡成功') : null;
+        canTap ? clockInOut() : null;
       },
       child: Container(
         width: 400.w,
@@ -126,7 +147,7 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
     );
   }
 
-  Widget _buildCard(int type, {String time}) {
+  Widget _buildCard(int type, {DateTime time}) {
     return Container(
       width: 296.w,
       height: 131.w,
@@ -138,9 +159,10 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          time.isEmptyOrNull
+          time == null
               ? SizedBox()
               : Container(
+                  margin: EdgeInsets.symmetric(vertical: 14.w),
                   width: 22.w,
                   height: 22.w,
                   decoration: BoxDecoration(
@@ -158,7 +180,7 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisAlignment: MainAxisAlignment.center,
-              children: time.isEmptyOrNull
+              children: time == null
                   ? [
                       Center(
                           child: '未打卡'
@@ -176,7 +198,7 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
                           .color(kTextSubColor)
                           .make(),
                       12.w.heightBox,
-                      DateUtil.formatDateStr(time, format: 'HH:mm:ss')
+                      DateUtil.formatDate(time, format: 'HH:mm:ss')
                           .text
                           .size(32.sp)
                           .bold
@@ -189,4 +211,13 @@ class _ClockInOutMainPageState extends State<ClockInOutMainPage> {
       ),
     );
   }
+
+ String get getWorkHours {
+    int _time = UserTool.appProvider.clockInTime
+        .difference(UserTool.appProvider.clockOutTime)
+        .inMinutes;
+    int _hour = _time ~/ 60;
+    int _min = _time % 60;
+    return '$_hour小时$_min分钟';
+  }
 }