178 lines
3.5 KiB
Vue
178 lines
3.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="page-top">
|
||
<u-navbar title="考勤管理" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
||
</u-navbar>
|
||
<view class="search-bar">
|
||
<u--input placeholder="请输入项目名称" prefixIcon="search" prefixIconStyle="font-size: 32px;color: #909399">
|
||
</u--input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sized-box" style="height: 184rpx;"></view>
|
||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||
|
||
<view class="project-list">
|
||
<navigator class="project-item" url="/pages/attendance/attendance_detail/attendance_detail"
|
||
v-for="(item,index) in projectList" :key="index">
|
||
<view>
|
||
<view class="title">{{item.name}}</view>
|
||
<view class="desc">
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周应出勤人：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周实际出勤人：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周请假人数：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周旷工人数：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周迟到人数：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
<view class="desc-item">
|
||
<text class="key">
|
||
本周早退人数：
|
||
</text>
|
||
<text class="value">
|
||
{{item.shouldAttendance}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectList: [{
|
||
name: '项目1',
|
||
actualAttendance: 233,
|
||
shouldAttendance: 234
|
||
}, {
|
||
name: '项目2',
|
||
actualAttendance: 233,
|
||
shouldAttendance: 234
|
||
}, {
|
||
name: '项目3',
|
||
actualAttendance: 233,
|
||
shouldAttendance: 234
|
||
}, {
|
||
name: '项目4',
|
||
actualAttendance: 233,
|
||
shouldAttendance: 234
|
||
}, {
|
||
name: '项目5',
|
||
actualAttendance: 233,
|
||
shouldAttendance: 234
|
||
}, ]
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</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);
|
||
}
|
||
|
||
|
||
.search-bar {
|
||
margin: 0 32rpx 0;
|
||
height: 80rpx;
|
||
padding-bottom: 20rpx;
|
||
|
||
.u-input {
|
||
height: 48rpx;
|
||
background-color: white;
|
||
}
|
||
}
|
||
|
||
.project-list {
|
||
margin: 28rpx 20rpx 0;
|
||
padding-bottom: 20rpx;
|
||
|
||
.project-item {
|
||
&:not(:last-child) {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
padding: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #232930;
|
||
line-height: 48rpx;
|
||
font-weight: 400;
|
||
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 20rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
grid-gap: 28rpx;
|
||
|
||
.key {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 28rpx;
|
||
color: #8F959E;
|
||
line-height: 44rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 44rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|