80%

pages/attendance/attendance.vue

@@ -1,6 +1,75 @@
 <template>
 	<view>
-		<h1>考勤管理</h1>
+		<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>
 
@@ -8,15 +77,101 @@
 	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>