DY-JMXF/dy_app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
13684185576
2025-11-06 14:33:56 +08:00
parent 6538af0c59
commit b6dc821182
2 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/clockInPage/components/Timeline.vue
View File

@ -2,14 +2,22 @@
<div class="info-container">
<div class="title">时间轴</div>
<template v-for="(item, index) in data" :key="index">
<div :class="['item', { 'disabled': !item?.dkKsSj }]">
<div :class="['item', { disabled: !item?.dkKsSj }]">
<div class="point"></div>
<div class="info-right">
<div class="name">{{ `第${item?.count}次打卡 开始` }}</div>
<div v-if="item?.dkKsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text></div>
<div v-if="item?.dkKsSj" class="time">
打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text>
</div>
<div v-if="item?.imgUrlDkKsFj" class="image">
<van-image width="80px" height="95px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
<van-image
width="80px"
height="90px"
:src="item?.imgUrlDkKsFj"
@click="onClickImg(item?.imgUrlDkKsFj)"
style="flex: 1"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@ -23,14 +31,22 @@
</div>
</div>
<div :class="['item', { 'disabled': !item?.dkJsSj }]">
<div :class="['item', { disabled: !item?.dkJsSj }]">
<div class="point"></div>
<div class="info-right">
<div class="name">{{ `第${item?.count}次打卡 离开` }}</div>
<div v-if="item?.dkJsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkJsSj) }}</text></div>
<div v-if="item?.dkJsSj" class="time">
打卡时间：<text>{{ handleTime(item?.dkJsSj) }}</text>
</div>
<div v-if="item?.imgUrlDkJsFj" class="image">
<van-image width="80px" height="95px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)" style="flex: 1">
<van-image
width="80px"
height="95px"
:src="item?.imgUrlDkJsFj"
@click="onClickImg(item?.imgUrlDkJsFj)"
style="flex: 1"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@ -48,14 +64,14 @@
</template>
<script setup>
import {ImagePreview} from "vant";
import { ImagePreview } from "vant";
const props = defineProps({
data: {
type: Array,
default: []
}
})
default: [],
},
});
//预览图片
function onClickImg(url) {
@ -63,8 +79,8 @@ function onClickImg(url) {
}
const handleTime = (time) => {
if (time) return time?.split(' ')[1]
}
if (time) return time?.split(" ")[1];
};
</script>
<style lang="scss" scoped>
@ -84,15 +100,15 @@ const handleTime = (time) => {
align-content: center;
position: relative;
height: auto;
border-left: 0.53vw dashed #1DB1FF;
border-left: 0.53vw dashed #1db1ff;
max-height: 46.93vw;
padding-bottom: 8vw;
padding-bottom: 4vw;
.point {
position: absolute;
width: 3.2vw;
height: 3.2vw;
background: #1DB1FF;
background: #1db1ff;
border-radius: 50%;
flex-shrink: 0;
left: -1.665vw;
@ -111,7 +127,7 @@ const handleTime = (time) => {
.image {
margin-top: 2.13vw;
width: 33.87vw;
height: 18.67vw;
// height: 18.67vw;
}
.time {
@ -119,7 +135,7 @@ const handleTime = (time) => {
font-size: 3.73vw;
text {
color: #0386FB;
color: #0386fb;
}
}
@ -127,7 +143,7 @@ const handleTime = (time) => {
margin-top: 2.13vw;
display: flex;
align-items: center;
color: #75787F;
color: #75787f;
div {
font-size: 2.67vw;
@ -141,10 +157,10 @@ const handleTime = (time) => {
}
.disabled {
border-left: 0.53vw dashed #EDEDED !important;
border-left: 0.53vw dashed #ededed !important;
.point {
background: #EDEDED !important;
background: #ededed !important;
}
}
}