86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="page-top">
|
||
|
|
<u-navbar title="考勤管理" placeholder bgColor="transparent" autoBack leftIconColor="#fff"
|
||
|
|
titleStyle="color:white">
|
||
|
|
</u-navbar>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="sizedbox" style="height: 88rpx;">
|
||
|
|
</view>
|
||
|
|
<view class="tabs">
|
||
|
|
<view :class="`tab-item ${activeIndex==0?'active':''}`" @tap="switchTab(0)">考勤统计</view>
|
||
|
|
<view :class="`tab-item ${activeIndex==1?'active':''}`" @tap="switchTab(1)">考勤记录</view>
|
||
|
|
<view :class="`tab-item ${activeIndex==2?'active':''}`" @tap="switchTab(2)">出入记录</view>
|
||
|
|
</view>
|
||
|
|
<view class="sizedbox" style="height: 80rpx;">
|
||
|
|
</view>
|
||
|
|
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||
|
|
<Statistics v-if="activeIndex==0"></Statistics>
|
||
|
|
<Record v-else-if="activeIndex==1"></Record>
|
||
|
|
<IoRecord v-else-if="activeIndex==2"></IoRecord>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Statistics from './statistics/statistics.vue'
|
||
|
|
import Record from './record/record.vue'
|
||
|
|
import IoRecord from './io_record/io_record.vue'
|
||
|
|
export default {
|
||
|
|
name: 'AttendanceDetail',
|
||
|
|
components: {
|
||
|
|
Record,
|
||
|
|
IoRecord,
|
||
|
|
Statistics
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeIndex: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
switchTab(index) {
|
||
|
|
this.activeIndex = index
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page-top {
|
||
|
|
width: 100%;
|
||
|
|
z-index: 9999;
|
||
|
|
position: fixed;
|
||
|
|
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 100rpx 0;
|
||
|
|
height: 80rpx;
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
z-index: 99;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
|
||
|
|
.tab-item {
|
||
|
|
|
||
|
|
font-family: PingFangSC-Regular;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #8F959E;
|
||
|
|
font-weight: 400;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: #0F40F5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|