construction_site_supervision/pages/attendance/attendance.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>