diff --git a/public/index.html b/public/index.html
index 137c6ea..64c46b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.7/dist/tailwind.min.css">
     <title>考勤</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 923ac55..500821a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <a-config-provider :locale="zh_CN">
     <div id="app">
-      <head-nav class="head-nav" />
       <router-view></router-view>
     </div>
   </a-config-provider>
@@ -10,11 +9,9 @@
 <script>
 import { mapActions, mapMutations } from 'vuex';
 import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
-import HeadNav from './components/HeadNav/HeadNav.vue';
 
 export default {
   name: 'App',
-  components: { HeadNav },
   data() {
     return { zh_CN };
   },
diff --git a/src/assets/arrow.png b/src/assets/arrow.png
deleted file mode 100644
index 8d121ac..0000000
Binary files a/src/assets/arrow.png and /dev/null differ
diff --git a/src/assets/build.png b/src/assets/build.png
deleted file mode 100644
index a7129cb..0000000
Binary files a/src/assets/build.png and /dev/null differ
diff --git a/src/assets/bullhorn.png b/src/assets/bullhorn.png
deleted file mode 100644
index 2b3a466..0000000
Binary files a/src/assets/bullhorn.png and /dev/null differ
diff --git a/src/assets/code.png b/src/assets/code.png
deleted file mode 100644
index 83e6c35..0000000
Binary files a/src/assets/code.png and /dev/null differ
diff --git a/src/assets/enterprise-banner.png b/src/assets/enterprise-banner.png
deleted file mode 100644
index f2497ce..0000000
Binary files a/src/assets/enterprise-banner.png and /dev/null differ
diff --git a/src/assets/gywm01.jpg b/src/assets/gywm01.jpg
deleted file mode 100644
index d5439dd..0000000
Binary files a/src/assets/gywm01.jpg and /dev/null differ
diff --git a/src/assets/gywm02.png b/src/assets/gywm02.png
deleted file mode 100644
index dd742bb..0000000
Binary files a/src/assets/gywm02.png and /dev/null differ
diff --git a/src/assets/hzhb01.png b/src/assets/hzhb01.png
deleted file mode 100644
index c13b30f..0000000
Binary files a/src/assets/hzhb01.png and /dev/null differ
diff --git a/src/assets/hzhb02.png b/src/assets/hzhb02.png
deleted file mode 100644
index 5e29e42..0000000
Binary files a/src/assets/hzhb02.png and /dev/null differ
diff --git a/src/assets/hzhb03.png b/src/assets/hzhb03.png
deleted file mode 100644
index ab45b8e..0000000
Binary files a/src/assets/hzhb03.png and /dev/null differ
diff --git a/src/assets/hzhb04.png b/src/assets/hzhb04.png
deleted file mode 100644
index bc7eaec..0000000
Binary files a/src/assets/hzhb04.png and /dev/null differ
diff --git a/src/assets/image.jpeg b/src/assets/image.jpeg
deleted file mode 100644
index 74710e5..0000000
Binary files a/src/assets/image.jpeg and /dev/null differ
diff --git a/src/assets/image.png b/src/assets/image.png
deleted file mode 100644
index ea56251..0000000
Binary files a/src/assets/image.png and /dev/null differ
diff --git a/src/assets/join-us.png b/src/assets/join-us.png
deleted file mode 100644
index c19b566..0000000
Binary files a/src/assets/join-us.png and /dev/null differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index 5421d53..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/logo_bottom.png b/src/assets/logo_bottom.png
deleted file mode 100644
index 5d24d80..0000000
Binary files a/src/assets/logo_bottom.png and /dev/null differ
diff --git a/src/assets/new01.png b/src/assets/new01.png
deleted file mode 100644
index 25abc35..0000000
Binary files a/src/assets/new01.png and /dev/null differ
diff --git a/src/assets/new02.png b/src/assets/new02.png
deleted file mode 100644
index 3aafb78..0000000
Binary files a/src/assets/new02.png and /dev/null differ
diff --git a/src/assets/round.png b/src/assets/round.png
deleted file mode 100644
index cbe9296..0000000
Binary files a/src/assets/round.png and /dev/null differ
diff --git a/src/assets/settleIn.png b/src/assets/settleIn.png
deleted file mode 100644
index e57b472..0000000
Binary files a/src/assets/settleIn.png and /dev/null differ
diff --git a/src/assets/solicitation.png b/src/assets/solicitation.png
deleted file mode 100644
index 02f5b1b..0000000
Binary files a/src/assets/solicitation.png and /dev/null differ
diff --git a/src/assets/t-top.png b/src/assets/t-top.png
deleted file mode 100644
index 3540e5d..0000000
Binary files a/src/assets/t-top.png and /dev/null differ
diff --git a/src/assets/zckj.png b/src/assets/zckj.png
deleted file mode 100644
index 0949d22..0000000
Binary files a/src/assets/zckj.png and /dev/null differ
diff --git a/src/assets/zckj01.png b/src/assets/zckj01.png
deleted file mode 100644
index c8af94e..0000000
Binary files a/src/assets/zckj01.png and /dev/null differ
diff --git a/src/assets/矩形 133.png b/src/assets/矩形 133.png
deleted file mode 100644
index a812142..0000000
Binary files a/src/assets/矩形 133.png and /dev/null differ
diff --git a/src/common/dateRangUtil.js b/src/common/dateRangUtil.js
new file mode 100644
index 0000000..2031e02
--- /dev/null
+++ b/src/common/dateRangUtil.js
@@ -0,0 +1,363 @@
+/**
+ * 日期范围工具类
+ */
+var dateRangeUtil = (function() {
+  /***
+   * 获得当前时间
+   */
+  this.getCurrentDate = function() {
+    return new Date();
+  };
+
+  /***
+   * 获得本周起止时间
+   */
+  this.getCurrentWeek = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //返回date是一周中的某一天
+    var week = currentDate.getDay();
+    //返回date是一个月中的某一天
+    var month = currentDate.getDate();
+
+    //一天的毫秒数
+    var millisecond = 1000 * 60 * 60 * 24;
+    //减去的天数
+    var minusDay = week != 0 ? week - 1 : 6;
+    //alert(minusDay);
+    //本周 周一
+    var monday = new Date(currentDate.getTime() - minusDay * millisecond);
+    //本周 周日
+    var sunday = new Date(monday.getTime() + 6 * millisecond);
+    //添加本周时间
+    startStop.push(monday.format('yyyy-MM-dd')); //本周起始时间
+    //添加本周最后一天时间
+    startStop.push(sunday.format('yyyy-MM-dd')); //本周终止时间
+    //返回
+    return startStop;
+  };
+
+  /***
+   * 获得本月的起止时间
+   */
+  this.getCurrentMonth = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前月份0-11
+    var currentMonth = currentDate.getMonth();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+    //求出本月第一天
+    var firstDay = new Date(currentYear, currentMonth, 1);
+
+    //当为12月的时候年份需要加1
+    //月份需要更新为0 也就是下一年的第一个月
+    if (currentMonth == 11) {
+      currentYear++;
+      currentMonth = 0; //就为
+    } else {
+      //否则只是月份增加,以便求的下一月的第一天
+      currentMonth++;
+    }
+
+    //一天的毫秒数
+    var millisecond = 1000 * 60 * 60 * 24;
+    //下月的第一天
+    var nextMonthDayOne = new Date(currentYear, currentMonth, 1);
+    //求出上月的最后一天
+    var lastDay = new Date(nextMonthDayOne.getTime() - millisecond);
+
+    //添加至数组中返回
+    startStop.push(firstDay.format('yyyy-MM-dd'));
+    startStop.push(lastDay.format('yyyy-MM-dd'));
+    //返回
+    return startStop;
+  };
+
+  /**
+   * 得到本季度开始的月份
+   * @param month 需要计算的月份
+   ***/
+  this.getQuarterSeasonStartMonth = function(month) {
+    var quarterMonthStart = 0;
+    var spring = 0; //春
+    var summer = 3; //夏
+    var fall = 6; //秋
+    var winter = 9; //冬
+    //月份从0-11
+    if (month < 3) {
+      return spring;
+    }
+
+    if (month < 6) {
+      return summer;
+    }
+
+    if (month < 9) {
+      return fall;
+    }
+
+    return winter;
+  };
+
+  /**
+   * 获得该月的天数
+   * @param year年份
+   * @param month月份
+   * */
+  this.getMonthDays = function(year, month) {
+    //本月第一天 1-31
+    var relativeDate = new Date(year, month, 1);
+    //获得当前月份0-11
+    var relativeMonth = relativeDate.getMonth();
+    //获得当前年份4位年
+    var relativeYear = relativeDate.getFullYear();
+
+    //当为12月的时候年份需要加1
+    //月份需要更新为0 也就是下一年的第一个月
+    if (relativeMonth == 11) {
+      relativeYear++;
+      relativeMonth = 0;
+    } else {
+      //否则只是月份增加,以便求的下一月的第一天
+      relativeMonth++;
+    }
+    //一天的毫秒数
+    var millisecond = 1000 * 60 * 60 * 24;
+    //下月的第一天
+    var nextMonthDayOne = new Date(relativeYear, relativeMonth, 1);
+    //返回得到上月的最后一天,也就是本月总天数
+    return new Date(nextMonthDayOne.getTime() - millisecond).getDate();
+  };
+
+  /**
+   * 获得本季度的起止日期
+   */
+  this.getCurrentSeason = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前月份0-11
+    var currentMonth = currentDate.getMonth();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+    //获得本季度开始月份
+    var quarterSeasonStartMonth = this.getQuarterSeasonStartMonth(currentMonth);
+    //获得本季度结束月份
+    var quarterSeasonEndMonth = quarterSeasonStartMonth + 2;
+
+    //获得本季度开始的日期
+    var quarterSeasonStartDate = new Date(currentYear, quarterSeasonStartMonth, 1);
+    //获得本季度结束的日期
+    var quarterSeasonEndDate = new Date(currentYear, quarterSeasonEndMonth, this.getMonthDays(currentYear, quarterSeasonEndMonth));
+    //加入数组返回
+    startStop.push(quarterSeasonStartDate.format('yyyy-MM-dd'));
+    startStop.push(quarterSeasonEndDate.format('yyyy-MM-dd'));
+    //返回
+    return startStop;
+  };
+
+  /***
+   * 得到本年的起止日期
+   *
+   */
+  this.getCurrentYear = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+
+    //本年第一天
+    var currentYearFirstDate = new Date(currentYear, 0, 1);
+    //本年最后一天
+    var currentYearLastDate = new Date(currentYear, 11, 31);
+    //添加至数组
+    startStop.push(currentYearFirstDate.format('yyyy-MM-dd'));
+    startStop.push(currentYearLastDate.format('yyyy-MM-dd'));
+    //返回
+    return startStop;
+  };
+
+  /**
+   * 返回上一个月的第一天Date类型
+   * @param year 年
+   * @param month 月
+   **/
+  this.getPriorMonthFirstDay = function(year, month) {
+    //年份为0代表,是本年的第一月,所以不能减
+    if (month == 0) {
+      month = 11; //月份为上年的最后月份
+      year--; //年份减1
+      return new Date(year, month, 1);
+    }
+    //否则,只减去月份
+    month--;
+    return new Date(year, month, 1);
+  };
+
+  /**
+   * 获得上一月的起止日期
+   * ***/
+  this.getPreviousMonth = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前月份0-11
+    var currentMonth = currentDate.getMonth();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+    //获得上一个月的第一天
+    var priorMonthFirstDay = this.getPriorMonthFirstDay(currentYear, currentMonth);
+    //获得上一月的最后一天
+    var priorMonthLastDay = new Date(
+      priorMonthFirstDay.getFullYear(),
+      priorMonthFirstDay.getMonth(),
+      this.getMonthDays(priorMonthFirstDay.getFullYear(), priorMonthFirstDay.getMonth()),
+    );
+    //添加至数组
+    startStop.push(priorMonthFirstDay.format('yyyy-MM-dd'));
+    startStop.push(priorMonthLastDay.format('yyyy-MM-dd'));
+    //返回
+    return startStop;
+  };
+
+  /**
+   * 获得上一周的起止日期
+   * **/
+  this.getPreviousWeek = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //返回date是一周中的某一天
+    var week = currentDate.getDay();
+    //返回date是一个月中的某一天
+    var month = currentDate.getDate();
+    //一天的毫秒数
+    var millisecond = 1000 * 60 * 60 * 24;
+    //减去的天数
+    var minusDay = week != 0 ? week - 1 : 6;
+    //获得当前周的第一天
+    var currentWeekDayOne = new Date(currentDate.getTime() - millisecond * minusDay);
+    //上周最后一天即本周开始的前一天
+    var priorWeekLastDay = new Date(currentWeekDayOne.getTime() - millisecond);
+    //上周的第一天
+    var priorWeekFirstDay = new Date(priorWeekLastDay.getTime() - millisecond * 6);
+
+    //添加至数组
+    startStop.push(priorWeekFirstDay.format('yyyy-MM-dd'));
+    startStop.push(priorWeekLastDay.format('yyyy-MM-dd'));
+
+    return startStop;
+  };
+
+  /**
+   * 得到上季度的起始日期
+   * year 这个年应该是运算后得到的当前本季度的年份
+   * month 这个应该是运算后得到的当前季度的开始月份
+   * */
+  this.getPriorSeasonFirstDay = function(year, month) {
+    var quarterMonthStart = 0;
+    var spring = 0; //春
+    var summer = 3; //夏
+    var fall = 6; //秋
+    var winter = 9; //冬
+    //月份从0-11
+    switch (
+      month //季度的其实月份
+    ) {
+      case spring:
+        //如果是第一季度则应该到去年的冬季
+        year--;
+        month = winter;
+        break;
+      case summer:
+        month = spring;
+        break;
+      case fall:
+        month = summer;
+        break;
+      case winter:
+        month = fall;
+        break;
+    }
+
+    return new Date(year, month, 1);
+  };
+
+  /**
+   * 得到上季度的起止日期
+   * **/
+  this.getPreviousSeason = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前月份0-11
+    var currentMonth = currentDate.getMonth();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+    //上季度的第一天
+    var priorSeasonFirstDay = this.getPriorSeasonFirstDay(currentYear, currentMonth);
+    //上季度的最后一天
+    var priorSeasonLastDay = new Date(
+      priorSeasonFirstDay.getFullYear(),
+      priorSeasonFirstDay.getMonth() + 2,
+      this.getMonthDays(priorSeasonFirstDay.getFullYear(), priorSeasonFirstDay.getMonth() + 2),
+    );
+    //添加至数组
+    startStop.push(priorSeasonFirstDay.format('yyyy-MM-dd'));
+    startStop.push(priorSeasonLastDay.format('yyyy-MM-dd'));
+    return startStop;
+  };
+
+  /**
+   * 得到去年的起止日期
+   * **/
+  this.getPreviousYear = function() {
+    //起止日期数组
+    var startStop = new Array();
+    //获取当前时间
+    var currentDate = this.getCurrentDate();
+    //获得当前年份4位年
+    var currentYear = currentDate.getFullYear();
+    currentYear--;
+    var priorYearFirstDay = new Date(currentYear, 0, 1);
+    var priorYearLastDay = new Date(currentYear, 11, 1);
+    //添加至数组
+    startStop.push(priorYearFirstDay.format('yyyy-MM-dd'));
+    startStop.push(priorYearLastDay.format('yyyy-MM-dd'));
+    return startStop;
+  };
+
+  return this;
+})();
+
+Date.prototype.format = function(fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, //月份
+    'd+': this.getDate(), //日
+    'h+': this.getHours(), //小时
+    'm+': this.getMinutes(), //分
+    's+': this.getSeconds(), //秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
+    S: this.getMilliseconds(), //毫秒
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+    }
+  }
+  return fmt;
+};
diff --git a/src/components/HeadNav/HeadNav.vue b/src/components/HeadNav/HeadNav.vue
index acef824..6a958b0 100644
--- a/src/components/HeadNav/HeadNav.vue
+++ b/src/components/HeadNav/HeadNav.vue
@@ -1,19 +1,21 @@
 <template>
-  <div class="d-flex justify-space-between align-center justify-center nav mb-4">
-    <!-- <a-icon type="left" class="back" /> -->
-    <div>考勤管理</div>
-    <div>
-      <a-button type="primary" icon="search" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
-      <a-button type="primary" size="small" icon="export" @click="clockExport"> 导出 </a-button>
+  <div class="d-flex justify-space-between pa-3">
+    <div class="d-flex align-center">
+      <!-- <a-icon type="left" class="mr-1" @click="back" /> -->
+      考勤管理
     </div>
-    <div class="timer" v-if="show">
+    <div class="d-flex align-center">
+      <a-button type="primary" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
+      <a-button type="primary" size="small" @click="clockExport"> 导出 </a-button>
+    </div>
+    <div class="timer p-4" v-if="show">
       <!-- 时间选择 -->
-      <TimePicker @changeTime="changeTime" />
+      <TimePicker />
       <!-- 成员选择 -->
-      <MemberPicker @changeTime="changeTime" />
-      <div class="btns mt-3">
-        <a-button class="btn" size="small"> 取消 </a-button>
-        <a-button class="btn" type="primary" size="small"> 确认 </a-button>
+      <MemberPicker />
+      <div class="mt-5 flex justify-center">
+        <a-button size="small" class="mr-10" @click="show = false"> 取消 </a-button>
+        <a-button type="primary" size="small" @click="searchParam"> 确认 </a-button>
       </div>
     </div>
   </div>
@@ -56,45 +58,39 @@ export default {
         throw error || '导出失败';
       }
     },
-    changeTime() {
-      this.$refs.mychild.setParams();
+
+    searchParam() {
+      this.$emit('searchParam');
+      this.show = false;
     },
+
     openSearch() {
       this.show = !this.show;
     },
+
+    // back() {
+    //   window.location.href = document.referrer;
+    //   window.history.back(-1);
+    // },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.nav {
-  position: relative;
-  // border-bottom: 1px solid #ccc;
-}
-.back {
-  position: absolute;
-  left: 0;
-}
 .search {
   border: none;
 }
 .timer {
   position: absolute;
-  width: 380px;
-  height: 150px;
-  // border: 1px solid black;
-  top: 50px;
-  margin-left: 50%;
-  transform: translate(-50%);
+  width: 100%;
+  top: 49px;
+  left: 0;
   background-color: #fff;
   color: black;
   box-shadow: 0px 0px 5px #ccc;
   z-index: 1;
-  padding: 26px 24px 24px 24px;
-}
-.btn {
-  margin-left: 80px;
 }
+
 .export {
   position: absolute;
   top: 0;
diff --git a/src/components/List/List.vue b/src/components/List/List.vue
index 3a30659..68566c9 100644
--- a/src/components/List/List.vue
+++ b/src/components/List/List.vue
@@ -20,7 +20,14 @@
 
               <div v-else>
                 <div v-if="record.isMine">
-                  <span v-if="record.morningStatus" class="baseColor font-bold">
+                  <span v-if="record.morningStatus === 1" class="font-bold daka">
+                    {{ $moment(record.morning - 0).format('HH:mm') }}
+                    <div class="dian"></div>
+                  </span>
+                  <span v-else-if="record.morningStatus === 2" class="line-through text-red-500 font-bold">
+                    {{ $moment(record.morning - 0).format('HH:mm') }}
+                  </span>
+                  <span v-else-if="record.morningStatus === 3" class="text-blue-500 font-bold">
                     {{ $moment(record.morning - 0).format('HH:mm') }}
                   </span>
                   <a-button
@@ -45,16 +52,17 @@
                       @cancel="changeStatus(record.id, 0, 'morning')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button slot="title" size="small">审核</a-button>
-                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)"
-                        >驳回</a-button
-                      >
+                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 2, 'morning', record.morning)">确认</a-button>
+                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">
+                        驳回
+                      </a-button>
                       <span
                         class="font-bold daka"
-                        :class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
+                        :class="record.morningStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
                         @click="changeVisible(record.morningStatus, 'morningVisible')"
                       >
-                        <div class="dian"></div>
+                        <div class="dian animate-ping" v-if="record.morningStatus === 1"></div>
+                        <div class="dian" v-if="record.morningStatus === 1"></div>
                         {{ $moment(record.morning - 0).format('HH:mm') }}
                       </span>
                     </a-popconfirm>
@@ -82,7 +90,14 @@
 
               <div v-else>
                 <div v-if="record.isMine">
-                  <span v-if="record.nightStatus" class="baseColor font-bold">
+                  <span v-if="record.nightStatus === 1" class="font-bold daka">
+                    {{ $moment(record.night - 0).format('HH:mm') }}
+                    <div class="dian"></div>
+                  </span>
+                  <span v-else-if="record.nightStatus === 2" class="line-through text-red-500 font-bold">
+                    {{ $moment(record.night - 0).format('HH:mm') }}
+                  </span>
+                  <span v-else-if="record.nightStatus === 3" class="text-blue-500 font-bold">
                     {{ $moment(record.night - 0).format('HH:mm') }}
                   </span>
                   <a-button
@@ -107,16 +122,17 @@
                       @cancel="changeStatus(record.id, 0, 'night')"
                     >
                       <a-icon slot="icon" type="" />
-                      <a-button slot="title" size="small">审核</a-button>
-                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)"
-                        >驳回</a-button
-                      >
+                      <a-button slot="title" size="small" @click="rejectStatus(record.id, 2, 'night', record.night)">确认</a-button>
+                      <a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">
+                        驳回
+                      </a-button>
                       <span
                         class="font-bold daka"
-                        :class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
+                        :class="record.nightStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
                         @click="changeVisible(record.nightStatus, 'visible')"
                       >
-                        <div class="dian"></div>
+                        <div class="dian animate-ping" v-if="record.nightStatus === 1"></div>
+                        <div class="dian" v-if="record.nightStatus === 1"></div>
                         {{ $moment(record.night - 0).format('HH:mm') }}
                       </span>
                     </a-popconfirm>
@@ -141,7 +157,12 @@
                 <div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)">
                   {{ record.checkerName || members[0].name }}
                 </div>
-                <a-select v-else :default-value="record.checkerId || members[0].memberId" style="width: 100%" @change="chooseChecker">
+                <a-select
+                  v-else
+                  :default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? record.checkerId : members[0].memberId"
+                  style="width: 100%"
+                  @change="chooseChecker"
+                >
                   <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
                     {{ member.name }}
                   </a-select-option>
@@ -150,6 +171,10 @@
             </template>
           </a-table>
         </div>
+        <div class="text-gray-400 text-xs m-3 flex flex-col justify-start">
+          <div class="flex align-center mb-2"><a-icon type="exclamation-circle" class="mr-1" />静态小红点：审核人未审核你的打卡状态</div>
+          <div class="mb-10 ml-4">动态小红点：某成员选择你为打卡人，需要你审核</div>
+        </div>
       </div>
       <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
     </div>
@@ -203,10 +228,10 @@ export default {
         await this.setParams();
 
         // 自动移动到目标位置
-        document.querySelector('#scrollTo').scrollIntoView({
-          behavior: 'smooth', // 平滑过渡
-          block: 'start', // 上边框与视窗顶部平齐。默认值
-        });
+        // document.querySelector('#scrollTo').scrollIntoView({
+        //   behavior: 'smooth', // 平滑过渡
+        //   block: 'start', // 上边框与视窗顶部平齐。默认值
+        // });
       }
     }, 300);
 
@@ -224,8 +249,6 @@ export default {
 
     async setParams() {
       const { projectId, startTime, endTime, memberIdList } = this;
-      console.log('this.startTime: ', startTime, this.$moment(startTime - 0).format('YYYY-MM-DD HH:mm:ss'));
-      console.log('this.endTime: ', endTime, this.$moment(endTime - 0).format('YYYY-MM-DD HH:mm:ss'));
       const params = { param: { projectId, memberIdList, startTime, endTime } };
       await this.getClockQuery(params);
     },
@@ -353,7 +376,7 @@ export default {
         this.visible = false;
       }
       const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
-      // await this.handleClockAudit(params);
+      await this.handleClockAudit(params);
     },
 
     // 取消
@@ -368,14 +391,14 @@ export default {
      * @param {string} morning 早打卡时间
      * @param {string} night 晚打卡时间
      * @param {string} projectId 项目id
-     * @param {string} type 审批类型(0-修改,1-驳回)
+     * @param {string} type 审批类型(0-修改,1-驳回,2-通过)
      */
     async handleClockAudit(params) {
       try {
         const res = await clockAudit(params);
         const { code, msg } = res.data;
         if (code === 200) {
-          this.$message.success(params.param.type === 0 ? '修改成功' : '驳回成功');
+          this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过');
           this.showNightTime = false;
           this.showMorningTime = false;
           this.auditOptions = null;
@@ -445,18 +468,7 @@ img {
   background: #fcfcfc;
   text-align: center;
 }
-</style>
-
-<style>
-.ant-popover-inner {
-  width: 250px;
-}
 
-.ant-popover-message {
-  position: absolute !important;
-  left: 2px;
-  top: 8px;
-}
 .daka {
   position: relative;
 }
@@ -468,6 +480,17 @@ img {
   border-radius: 50%;
   top: 2px;
   right: -10px;
-  box-shadow: 0 0 6px red;
+}
+</style>
+
+<style>
+.ant-popover-inner {
+  width: 256px;
+}
+
+.ant-popover-message {
+  position: absolute !important;
+  left: 2px;
+  top: 8px;
 }
 </style>
diff --git a/src/components/MemberPicker/MemberPicker.vue b/src/components/MemberPicker/MemberPicker.vue
index 5b8a3c9..0609f70 100644
--- a/src/components/MemberPicker/MemberPicker.vue
+++ b/src/components/MemberPicker/MemberPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mt-3">
     <!-- 多选 -->
-    <a-select mode="multiple" style="width: 100%" placeholder="请选择成员" @change="handleChange">
+    <a-select mode="multiple" style="width: 100%" placeholder="请选择成员" @change="handleChange" :default-value="memberIdList">
       <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> {{ member.name }} </a-select-option>
     </a-select>
   </div>
@@ -15,16 +15,13 @@ export default {
     return {};
   },
 
-  computed: mapState('home', ['members']),
+  computed: mapState('home', ['members', 'memberIdList']),
 
   methods: {
     ...mapMutations('home', ['setMemberIdList']),
 
     handleChange(value) {
       this.setMemberIdList(value);
-      setTimeout(() => {
-        this.$emit('changeTime');
-      }, 1000);
     },
   },
 };
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index dde6bd5..402b558 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/src/components/TimePicker/TimePicker.vue
@@ -15,6 +15,9 @@
       <template slot="renderExtraFooter">
         <a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
         <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setMonday('startValue', 'startOpen')">本周</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setMonthOne('startValue', 'startOpen')">本月</a-button>
+        <a-button size="small" type="primary" ghost @click="setLastMonthOne('startValue', 'startOpen')">上月</a-button>
       </template>
     </a-date-picker>
     <a-date-picker
@@ -31,13 +34,16 @@
       <template slot="renderExtraFooter">
         <a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
         <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setSunday('endValue', 'endOpen')">本周</a-button>
+        <a-button class="ml-3" size="small" type="primary" ghost @click="setMonthEnd('endValue', 'endOpen')">本月</a-button>
+        <a-button size="small" type="primary" ghost @click="setLastMonthEnd('endValue', 'endOpen')">上月</a-button>
       </template>
     </a-date-picker>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex';
+import { mapState, mapMutations } from 'vuex';
 
 export default {
   data() {
@@ -49,6 +55,9 @@ export default {
       endOpen: false,
     };
   },
+
+  computed: mapState('home', ['startTime', 'endTime']),
+
   watch: {
     startValue(val) {
       if (val) {
@@ -57,9 +66,6 @@ export default {
       } else {
         const time = this.$moment(Date.now()).format('YYYY-MM-DD');
         this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
-        if (!this.endValue) {
-          this.$emit('changeTime');
-        }
       }
     },
     endValue(val) {
@@ -75,11 +81,16 @@ export default {
         const time = this.$moment(Date.now()).format('YYYY-MM-DD');
         this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
       }
-
-      this.$emit('changeTime');
     },
   },
 
+  mounted() {
+    this.$nextTick(() => {
+      this.startValue = this.startTime ? this.$moment(this.startTime - 0).format('YYYY-MM-DD') : null;
+      this.endValue = this.endTime ? this.$moment(this.endTime - 0).format('YYYY-MM-DD') : null;
+    });
+  },
+
   methods: {
     ...mapMutations('home', ['setStartTime', 'setEndTime']),
 
@@ -101,6 +112,74 @@ export default {
       }
     },
 
+    // 本周一
+    setMonday(value, open) {
+      var date = this.$moment(this.$moment().format('YYYY-MM-DD'));
+      var dow = date.day();
+      var monday1 = date.subtract(dow - 1, 'days').format('YYYY-MM-DD'); //本周一
+      this[value] = monday1;
+      this[open] = false;
+      if (open === 'startOpen' && !this.startOpen) {
+        this.endOpen = true;
+      }
+    },
+
+    // 本周日
+    setSunday(value, open) {
+      var date = this.$moment(this.$moment().format('YYYY-MM-DD'));
+      var dow = date.day();
+      var monday1 = date.subtract(dow - 7, 'days').format('YYYY-MM-DD'); //本周一
+      this[value] = monday1;
+      this[open] = false;
+    },
+
+    // 本月1号
+    setMonthOne(value, open) {
+      const m = this.$moment()
+        .startOf('month')
+        .format('YYYY-MM-DD');
+      this[value] = m;
+      this[open] = false;
+      if (open === 'startOpen' && !this.startOpen) {
+        this.endOpen = true;
+      }
+    },
+
+    // 本月最后一天
+    setMonthEnd(value, open) {
+      const end =
+        this.$moment()
+          .endOf('month')
+          .format('YYYY-MM-DD') + ' 23:59:59';
+      this[value] = end;
+      this[open] = false;
+    },
+
+    // 上月1号
+    setLastMonthOne(value, open) {
+      const t = this.$moment().format('YYYY-MM-DD');
+      const afterM = this.$moment(t, 'YYYY-MM-DD')
+        .subtract(1, 'months')
+        .startOf('month')
+        .format('YYYY-MM-DD');
+      this[value] = afterM;
+      this[open] = false;
+      if (open === 'startOpen' && !this.startOpen) {
+        this.endOpen = true;
+      }
+    },
+
+    // 上月最后一天
+    setLastMonthEnd(value, open) {
+      const t = this.$moment().format('YYYY-MM-DD');
+      const afterM = this.$moment(t, 'YYYY-MM-DD')
+        .subtract(1, 'months')
+        .endOf('month')
+        .format('YYYY-MM-DD');
+      this[value] = afterM;
+      this[open] = false;
+    },
+
     disabledStartDate(startValue) {
       const endValue = this.endValue;
       if (!startValue || !endValue) {
diff --git a/src/store/modules/home/state.js b/src/store/modules/home/state.js
index 0316996..41dac17 100644
--- a/src/store/modules/home/state.js
+++ b/src/store/modules/home/state.js
@@ -9,8 +9,8 @@ const state = {
   projectId: '',
   clockInfos: [], // 考勤信息
   members: [], // 所有成员
-  startTime: '',
-  endTime: '',
+  startTime: null,
+  endTime: null,
   memberIdList: [],
 };
 
diff --git a/src/views/FirstPage/FirstPage.vue b/src/views/FirstPage/FirstPage.vue
index 4a506eb..3a849f5 100644
--- a/src/views/FirstPage/FirstPage.vue
+++ b/src/views/FirstPage/FirstPage.vue
@@ -1,27 +1,24 @@
 <template>
   <div>
+    <head-nav class="nav bg-white w-full" @searchParam="searchParam" />
     <!-- 列表 -->
-    <List ref="mychild" />
+    <List style="margin-top: 49px" ref="mychild" />
   </div>
 </template>
 
 <script>
-// import TimePicker from '@/components/TimePicker/TimePicker.vue';
-// import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';
 import List from '@/components/List/List.vue';
+import HeadNav from '@/components/HeadNav/HeadNav.vue';
 
 export default {
-  components: { TimePicker, MemberPicker, List },
+  components: { List, HeadNav },
+
   data() {
     return {};
   },
 
   methods: {
-    handleChange(value) {
-      console.log(`selected ${value}`);
-    },
-
-    changeTime() {
+    searchParam() {
       this.$refs.mychild.setParams();
     },
   },
@@ -29,26 +26,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/* .timer {
+.nav {
   position: fixed;
-  width: 380px;
-  height: 150px;
-  // border: 1px solid black;
-  margin-left: 50%;
-  transform: translate(-50%);
-  background-color: #fff;
-  color: black;
-  box-shadow: 0px 0px 5px #ccc;
-  z-index: 1;
-  padding: 26px 24px 24px 24px;
-} */
-.btn {
-  margin-left: 80px;
-}
-.export {
-  position: absolute;
   top: 0;
-  right: 0;
-  z-index: 2;
+  z-index: 9;
+  border-bottom: 1px solid #e8e8e8;
 }
 </style>
