<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>