考勤打卡界面

src/DTO/attendance.ts

+interface Punch{
+  date:String,
+  time:String,
+  isLocal:Boolean,
+  location?:String,
+  note?:String,
+}
+
+/* 
+date:打卡日期
+time:打卡时间
+isLocal:是否为异地打卡
+location?:打卡位置
+note?:备注
+ */
+
+// const stateList:Array<String>=[
+//   '异常','正常','早退'
+// ]
+
+const punchList:Array<Punch>=[
+  {
+    date:'2019-11-04',
+    time:'09:30',
+    isLocal:false,
+    location:'浙江省杭州市西湖区东部软件园',
+    note:'字数有多少显示多少，什么什么计划什么什么'
+  },
+  {
+    date:'2019-11-04',
+    time:'09:30',
+    isLocal:true,
+    location:'浙江省杭州市西湖区东部软件园',
+  }
+]
+
+export{
+  Punch,
+  punchList
+}
+
+

src/DTO/index.ts

@@ -16,7 +16,8 @@
 // })
 
 import { contacts, Person, flatContacts } from './contacts'
-import { list, info, details } from './request'
+import { List, Info, details } from './request'
+import { punchList,Punch } from './attendance'
 
 interface Member {
   parentId?: number,
@@ -100,7 +101,9 @@ export {
   flatContacts,
   Person,
   Member,
-  list, 
-  info, 
-  details
+  List, 
+  Info, 
+  details,
+  Punch,
+  punchList
 }
\ No newline at end of file

src/DTO/request.ts

-interface info{
+interface Info{
   path:string
   name:string,
   request:string,
@@ -6,13 +6,13 @@ interface info{
   current:string,
 }
 
-interface list{
+interface List{
   id:number,
   time:string,
-  children:Array<info>
+  children:Array<Info>
 }
 
-const details:Array<list>=[
+const details:Array<List>=[
   {
     id:0,
     time:'2021/6',
@@ -53,7 +53,7 @@ const details:Array<list>=[
 ]
 
 export {
-  info,
-  list,
+  Info,
+  List,
   details
 }
\ No newline at end of file

src/router/attendance.ts

@@ -4,4 +4,13 @@ import { RouteConfig } from 'vue-router'
  * 考勤路由
  */
 
-export const attendanceRoutes: Array<RouteConfig> = []
\ No newline at end of file
+export const attendanceRoutes: Array<RouteConfig> = [
+  {
+    path: '/attendance',
+    name: 'Attendance',
+    component: () => import('@/views/attendance/attendance.vue'),
+    meta: {
+      title: '考勤打卡'
+    }
+  },
+]
\ No newline at end of file

src/views/attendance/attendance.vue

+<template>
+  <div class="attendance">
+    <main-page
+      left-arrow
+      @click-left="handleClickLeft"
+      class=" relative"
+    > 
+      <!-- 侧边栏 -->
+      <div class="left-border w-0.5 bg-border-lighter h-full left-6 absolute"/>
+      <!-- 顶部员工信息 -->
+      <div class=" mx-4 bg-bg-deep rounded-md py-5 px-7 text-white relative mt-12">
+          <p class="top align-baseline">
+            <span class="name text-xl mr-4">姓名</span> <span class="number text-sm">员工编号43</span>
+          </p>
+          <p class="team-name text-base mt-3">杭州复杂美科技有限公司</p>
+      </div>    
+      <!-- 考勤状态 -->
+      <p class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
+        今日考勤异常
+      </p>
+      <!-- 打卡信息 -->
+      <div v-for="(punch,index) in list" :key="index">
+        <punch :punch="punch"/>
+      </div>
+      <p class=" text-sm text-gray-400 pt-8 text-center pb-36">查看更多打卡记录请前往work.33.cn</p>
+
+    </main-page>  
+  </div>
+</template>
+
+
+<script lang="ts">
+import Vue,{ PropType } from 'vue';
+import { punchList,Punch } from '@/DTO'
+
+export default Vue.extend({
+  name:'attendance',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'),
+    'punch': () => import('@/views/attendance/components/punch.vue')
+
+  },
+  props:{
+    punch:{
+      type:Object as PropType<Punch>
+    }
+  },
+  data(){
+    let list:Array<Punch> = punchList
+    return{
+      list
+    }
+  },
+  methods:{
+    handleClickLeft() {
+      console.log('click left')
+    },
+  }
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/attendance/components/punch.vue

+<template>
+  <div class=" relative mt-4">
+    <!-- 左侧圆形 -->
+    <div  
+          class=" w-4 h-4 bg-white border-2 border-color-primary rounded-full absolute top-11 left-4.5"></div>
+    <div class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-4">
+      <!-- 打卡日期 -->
+      <p class="date text-gray-500 text-sm pt-4">{{punch.date}}</p>
+      <!-- 打卡 -->
+      <div  v-if="punch.location ==null"
+            class="round w-40 mx-auto relative">
+        <img src="../../../assets/oval.png" alt="" srcset="">
+        <div class=" absolute top-14 left-0 right-0 mx-auto text-center text-white">
+          <p class=" text-xl tracking-wide">上班打卡</p>
+          <p class=" text-base tracking-wider">{{time}}</p>
+        </div>
+      </div>
+      <p v-else class="text-base my-1.5">
+        <span class="text-text-primary mr-4">打卡时间{{punch.time}}</span>
+        <span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded px-1">异地</span>
+      </p>
+      <!-- 定位信息 -->
+      <div class=" flex text-sm">
+        <img src="../../../assets/icons/location.png" alt="" class="w-4 h-5 mr-1 inline-block">
+        <div>
+          <span class="text-gray-500">{{punch.location}}</span>
+          <!-- 异地备注 -->
+          <div  v-if="punch.isLocal ==false"
+              class=" pt-1">
+            <p class=" text-gray-400">备注：{{punch.note}}</p>  
+            <span class=" text-color-primary px-5 py-2 pt-5">编辑备注</span>
+            <span class=" text-color-primary px-5 py-2">撤回申请</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 刷新定位 -->
+      <p  v-if="punch.location ==null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" >刷新定位</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue,{ PropType } from 'vue'
+import { Punch } from '@/DTO'
+
+export default Vue.extend({
+  name:'punch',
+  props:{
+    punch:{
+    type:Object as PropType<Punch>
+    }
+  },
+  data(){
+    return{
+      date:'',
+      time:'',
+      timer:0,
+    }
+  },
+  methods:{
+    getTime(){
+      var _this = this;
+      let yy = new Date().getFullYear()
+      let mm = new Date().getMonth()+1
+      let dd = new Date().getDate()
+      let hh = new Date().getHours()
+      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
+      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
+      this.date = yy+ '-'+ mm+ '-'+ dd
+      this.time = hh+ ':'+ mf+ ':'+ ss
+    },
+    currentTime(){
+      this.timer = setInterval(this.getTime,1000)
+    }
+  },
+  mounted(){
+    this.getTime()
+    this.currentTime()
+    console.log(this.punch);
+    
+  },
+  beforeDestroy(){
+    if(this.timer){
+      clearInterval(this.timer)
+    }
+  }
+})
+
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file

src/views/components/request.vue

@@ -37,13 +37,13 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { info } from '@/DTO'
+import { Info } from '@/DTO'
 
 export default Vue.extend({
   name:'request',
   props:{
     detail:{
-      type:Object as PropType<info>
+      type:Object as PropType<Info>
     },
   },
   data(){

src/views/team/request-managemant.vue

 <template>
-  <div class=" ">
+  <div class="">
     <main-page left-arrow @click-left="$router.go(-1)" class=" relative">
       <template slot="right">
         <app-icon
@@ -14,7 +14,7 @@
       <div class="request relative px-4 pt-14">
         <!-- 时间 -->
         <!-- 申请详情 -->
-        <div :details="list" v-for="(item,index) in list" :key="index">
+        <div :details="List" v-for="(item,index) in List" :key="index">
           <p class=" text-right text-xs text-text-secondary pr-4 pb-2 ">{{item.time}}</p>
           <div v-for="(detail,i) in item.children" :key="i">
             <request :detail="detail" class=" pb-4" @change="changeState($event,index,i)" />
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { list, info, details } from '@/DTO'
+import { List, Info, details } from '@/DTO'
 
 export default Vue.extend({
   name:'requestmanagement',
@@ -41,22 +41,22 @@ export default Vue.extend({
       console.log('click left')
     },
     changeState(state:string,index:number,i:number){
-      this.list[index].children[i].current = state   
+      this.List[index].children[i].current = state   
       // console.log(state,index,i);   
     }
   },
   props:{
     details:{
-      type:Object as PropType<list>
+      type:Object as PropType<List>
     },
     detail:{
-      type:Array as PropType<Array<info>>
+      type:Array as PropType<Array<Info>>
     }
   },
   data(){
-    let list :Array<list> = details
+    let List :Array<List> = details
     return{
-      list
+      List
     }
   }
 });

tailwind.config.js

@@ -22,14 +22,22 @@ module.exports = {
         'linear-t': '#6A8FBB',
         'linear-b': '#066BA2',
         // 按钮
-        'button-disabled': '#C8D3DE'
+        'button-disabled': '#C8D3DE',
+        // 员工信息背景色
+        "bg-deep":'#0D73AD',
+        // 异常字体颜色
+        "text-warning":'#CF4646',
+        // 异常背景颜色
+        "bg-warning":'#FAEEEE',
       },
       spacing: {
         
+        4.5: '1.08rem',
         6.5: '1.625rem',
         10.5: '2.625rem',
         13: '3.125rem',
         15: '3.75rem',
+        21.5:'5.375rem',
         50: '12.5rem',
         82: '20.375rem',
       },