liyuanchao
57fe929080
Some checks failed
Uniapp 自动化打包 CI/CD / 打包 Uniapp 项目 (push) Has been cancelled
115 lines
1.9 KiB
Vue
115 lines
1.9 KiB
Vue
<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> |