This commit is contained in:
cxc
2022-09-14 16:15:22 +08:00
parent f272e21b7c
commit f8ccdae9d8
25 changed files with 15243 additions and 4536 deletions

View File

@ -0,0 +1,160 @@
<template>
<view>
<view class="tabs">
<view :class="`tab-item ${type==0?'active':''}`" @tap="switchTab(0)"></view>
<view :class="`tab-item ${type==1?'active':''}`" @tap="switchTab(1)"></view>
<view :class="`tab-item ${type==2?'active':''}`" @tap="switchTab(2)"></view>
</view>
<view class="sizedbox" style="height: 60rpx;"></view>
<view class="attendance-list">
<view class="attendance-item" v-for="(item ,index) in statisticsList" :key="index">
<view class="time" v-if="type==0">
20220708
</view>
<view class="time" v-if="type==1">
2022七月第一周
</view>
<view class="time" v-if="type==2">
2022年1月
</view>
<view class="desc-item">
<view class="key">应出勤人数</view>
<view class="value">{{item.should}}</view>
</view>
<view class="desc-item">
<view class="key">实际出勤人数</view>
<view class="value">{{item.actu}}</view>
</view>
<view class="desc-item">
<view class="key">出勤率</view>
<view class="value">{{item.ratio}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: 0, // 012
statisticsList: [{
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, {
should: 345,
actu: 340,
ratio: 80,
time: 1663140428270
}, ]
}
},
methods: {
switchTab(index) {
this.type = index
}
}
}
</script>
<style lang="scss" scoped>
.tabs {
position: fixed;
width: 750rpx;
box-sizing: border-box;
z-index: 99;
display: flex;
justify-content: space-between;
padding: 0 200rpx 0;
align-items: center;
height: 60rpx;
background-color: #f6f6f6;
.tab-item {
font-size: 28rpx;
color: #8F959E;
font-weight: 400;
&.active {
color: #0F40F5;
}
}
}
.attendance-list {
padding: 20rpx;
.attendance-item {
border-radius: 8rpx;
padding: 28rpx;
background-color: #fff;
margin-bottom: 20rpx;
position: relative;
.time {
position: absolute;
right: 0;
top: 0;
font-size: 26rpx;
}
.desc-item {
display: flex;
&:not(:last-child) {
margin-bottom: 20rpx;
}
.key {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #8F959E;
line-height: 30rpx;
font-weight: 400;
}
.value {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #333333;
line-height: 30rpx;
font-weight: 400;
}
}
}
}
</style>