考勤静态页面

2022-03-08 17:02:42 +08:00
parent b768efcb5d
commit 7faac31464
8 changed files with 1126 additions and 2 deletions
--- a/src/saas/AppCountryAlbum/AttendanceSetting.vue
+++ b/src/saas/AppCountryAlbum/AttendanceSetting.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="AttendanceSetting">
+    <div class="cell-group">
+      <div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFiexdTime')">
+        <div class="cell-item__left">
+          <h2>固定时间上下班</h2>
+          <p>有固定的上下班时间，考核迟到早退</p>
+        </div>
+        <image src="./images/right.png" />
+      </div>
+      <div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFlexibleTime')">
+        <div class="cell-item__left">
+          <h2>灵活时间上下班</h2>
+          <p>上下班时间不固定，考核工时时长</p>
+        </div>
+        <image src="./images/right.png" />
+      </div>
+    </div>
+    <div class="tips">
+      当前考勤时间为00:00~24:00，若新增考勤规则则以
+      新增规则为准；
+      工作时长=（最晚拍照时间）-（最早拍照时间）；
+      若员工“最早”或者“最晚”拍照时间缺失，对应工作时长为空；
+      上班时间=最早拍照时间；
+      下班时间=最晚拍照时间。
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AttendanceSetting',
+
+    appName: '考勤设置',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .text-hover {
+    opacity: 0.7;
+  }
+
+  .bg-hover {
+    background: #eee;
+  }
+  .AttendanceSetting {
+    .tips {
+      line-height: 44px;
+      margin: 32px;
+      font-size: 28px;
+      color: #999999;
+      white-space: pre-line;
+    }
+
+    .cell-group {
+      .cell-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 156px;
+        margin-bottom: 16px;
+        padding: 0 32px;
+        background: #FFFFFF;
+
+        &:active {
+          background: #eee;
+        }
+
+        image {
+          width: 32px;
+          height: 32px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        h2 {
+          margin-bottom: 12px;
+          color: #333333;
+          font-size: 32px;
+        }
+
+        p {
+          color: #999999;
+          font-size: 28px;
+        }
+      }
+    }
+  }
+</style>