请假 巡检

components/punchInfo.vue

@@ -0,0 +1,115 @@
+<template>
+	<!-- 上班 -->
+	<view class="timeline-item">
+	  <view class="timeline-dot"></view>
+	  <view class="timeline-content">
+	    <text class="timeline-label">应上班 09:00</text>
+	    <view class="clock-card late">
+	      <text class="clock-text">已打卡 08:48:32</text>
+	      <text class="status orange">迟到</text>
+	      <text class="buka" @click="goBuka">申请补卡</text>
+	      <view class="location">
+	        <text class="icon">📍</text>
+	        <text class="loc-text">某综合服务中心1栋</text>
+	      </view>
+	    </view>
+	  </view>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			info:{}
+		},
+		methods:{
+			goBuka(){
+				uni.navigateTo({
+					url: '/pages/sys/user/myRecord/cardReplacement'
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style>
+	.timeline-item {
+	  position: relative;
+	  padding-left: 20rpx;
+	  margin-left: 60rpx;
+	  margin-right: 90rpx;
+	  margin-bottom: 40rpx;
+	  border-left: 2rpx solid #e0e0e0; /* 竖线 */
+	}
+	
+	.timeline-item:last-child {
+	  margin-bottom: 0;
+	}
+	
+	.timeline-dot {
+	  position: absolute;
+	  left: -10rpx;
+	  top: -10rpx;
+	  width: 16rpx;
+	  height: 16rpx;
+	  background-color: #666;
+	  border-radius: 50%;
+	}
+	
+	.timeline-content {
+	  margin-left: 20rpx;
+	}
+	
+	.timeline-label {
+	  font-size: 28rpx;
+	  color: #737373;
+	}
+	
+	/* 打卡卡片 */
+	.clock-card {
+	  background: #fff;
+	  border-radius: 12rpx;
+	  padding: 24rpx;
+	  margin-top: 23rpx;
+	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
+	}
+	
+	.clock-text {
+	  font-size: 34rpx;
+	  color: #000000;
+	  font-weight: 500;
+	}
+	
+	
+	
+	.status {
+	  margin-left: 20rpx;
+	  font-size: 28rpx;
+	}
+	.status.orange {
+	  color: #ff6b35;
+	}
+	
+	.buka {
+	  margin-left: 20rpx;
+	  font-size: 28rpx;
+	  color: #3370FF;
+	}
+	
+	/* 地点 */
+	.location {
+	  display: flex;
+	  align-items: center;
+	  margin-top: 12rpx;
+	}
+	
+	.icon {
+	  margin-right: 6rpx;
+	}
+	
+	.loc-text {
+	  font-size: 28rpx;
+	  color: #1C9BFF;
+	}
+</style>