打卡页面修改 增加地图功能处理
This commit is contained in:
@ -1,15 +1,36 @@
|
||||
<template>
|
||||
<div class="info-container">
|
||||
<div class="title">时间轴</div>
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<div v-if="item?.dkKsSj" class="item">
|
||||
<div :class="['item', { 'disabled': !item?.dkKsSj }]">
|
||||
<div class="point"></div>
|
||||
<div class="line" v-if="index + 1 != data.length"></div>
|
||||
<div class="info-right">
|
||||
<div class="name">{{ `第${item?.count}次打卡` }}</div>
|
||||
<div class="time">打卡时间:<text>{{ item?.dkKsSj }}</text></div>
|
||||
<div class="name">{{ `第${item?.count}次打卡 开始` }}</div>
|
||||
<div v-if="item?.dkKsSj" class="time">打卡时间:<text>{{ handleTime(item?.dkKsSj) }}</text></div>
|
||||
|
||||
<div v-if="item?.imgUrl" class="image">
|
||||
<van-image width="80px" :src="item?.imgUrl" @click="onClickImg(item?.imgUrl)" style="flex: 1">
|
||||
<div v-if="item?.imgUrlDkKsFj" class="image">
|
||||
<van-image width="80px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
|
||||
<template v-slot:loading>
|
||||
<van-loading type="spinner" size="20" />
|
||||
</template>
|
||||
</van-image>
|
||||
</div>
|
||||
|
||||
<!-- <div class="address">-->
|
||||
<!-- <van-icon name="location-o" color="#1DB1FF" />-->
|
||||
<!-- <div class="name">四川省成都市</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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?.imgUrlDkJsFj" class="image">
|
||||
<van-image width="80px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)" style="flex: 1">
|
||||
<template v-slot:loading>
|
||||
<van-loading type="spinner" size="20" />
|
||||
</template>
|
||||
@ -40,6 +61,10 @@ const props = defineProps({
|
||||
function onClickImg(url) {
|
||||
ImagePreview([url]);
|
||||
}
|
||||
|
||||
const handleTime = (time) => {
|
||||
if (time) return time?.split(' ')[1]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -47,6 +72,12 @@ function onClickImg(url) {
|
||||
padding: 0 2.67vw;
|
||||
margin-top: 4vw;
|
||||
|
||||
.title {
|
||||
color: #707070;
|
||||
font-size: 3.73vw;
|
||||
margin-bottom: 4vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
color: #666;
|
||||
display: flex;
|
||||
@ -55,7 +86,7 @@ function onClickImg(url) {
|
||||
height: auto;
|
||||
border-left: 0.53vw dashed #1DB1FF;
|
||||
max-height: 46.93vw;
|
||||
padding-bottom: 2.67vw;
|
||||
padding-bottom: 8vw;
|
||||
|
||||
.point {
|
||||
position: absolute;
|
||||
@ -70,6 +101,7 @@ function onClickImg(url) {
|
||||
.info-right {
|
||||
margin-left: 5.33vw;
|
||||
font-family: PingFang HK, PingFang HK;
|
||||
margin-top: -1.33vw;
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: 3.73vw;
|
||||
@ -84,6 +116,7 @@ function onClickImg(url) {
|
||||
|
||||
.time {
|
||||
margin-top: 2.13vw;
|
||||
font-size: 3.73vw;
|
||||
|
||||
text {
|
||||
color: #0386FB;
|
||||
@ -106,5 +139,13 @@ function onClickImg(url) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
border-left: 0.53vw dashed #EDEDED !important;
|
||||
|
||||
.point {
|
||||
background: #EDEDED !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user