80%

pages/attendance/attendance_detail/attendance_detail.vue

@@ -0,0 +1,85 @@
+<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>