提交

src/pages/clockInPage/components/Timeline.vue

@@ -0,0 +1,153 @@
+<template>
+  <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="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?.imgUrlDkKsFj" class="image">
+            <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>
+            </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" height="95px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)"
+              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>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ImagePreview } from "vant";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+
+//预览图片
+function onClickImg(url) {
+  ImagePreview([url]);
+}
+
+const handleTime = (time) => {
+  if (time) return time?.split(" ")[1];
+};
+</script>
+
+<style lang="scss" scoped>
+.info-container {
+  padding: 0 2.67vw;
+  margin-top: 4vw;
+
+  .title {
+    color: #707070;
+    font-size: 3.73vw;
+    margin-bottom: 4vw;
+  }
+
+  .item {
+    color: #666;
+    display: flex;
+    align-content: center;
+    position: relative;
+    height: auto;
+    border-left: 0.53vw dashed #1db1ff;
+    max-height: 46.93vw;
+    padding-bottom: 4vw;
+
+    .point {
+      position: absolute;
+      width: 3.2vw;
+      height: 3.2vw;
+      background: #1db1ff;
+      border-radius: 50%;
+      flex-shrink: 0;
+      left: -1.665vw;
+    }
+
+    .info-right {
+      margin-left: 5.33vw;
+      font-family: PingFang HK, PingFang HK;
+      margin-top: -1.33vw;
+
+      .name {
+        font-weight: 400;
+        font-size: 3.73vw;
+        color: #707070;
+      }
+
+      .image {
+        margin-top: 2.13vw;
+        width: 33.87vw;
+        // height: 18.67vw;
+      }
+
+      .time {
+        margin-top: 2.13vw;
+        font-size: 3.73vw;
+
+        text {
+          color: #0386fb;
+        }
+      }
+
+      .address {
+        margin-top: 2.13vw;
+        display: flex;
+        align-items: center;
+        color: #75787f;
+
+        div {
+          font-size: 2.67vw;
+        }
+
+        .name {
+          margin-left: 1.33vw;
+        }
+      }
+    }
+  }
+
+  .disabled {
+    border-left: 0.53vw dashed #ededed !important;
+
+    .point {
+      background: #ededed !important;
+    }
+  }
+}
+</style>

src/pages/clockInPage/components/mapWrapper.vue

@@ -0,0 +1,17 @@
+<script setup>
+import GdMap from "@/components/GdMap/index.vue"
+
+</script>
+
+<template>
+  <div class="mapWrapper">
+    <gd-map />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.mapWrapper {
+  margin-top: 4vw;
+  height: 40vh;
+}
+</style>