下发任务 修改任务处理

src/pages/clockInPage/components/Timeline.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="info-container">
+    <div class="item" v-for="(item, index) in data" :key="index">
+      <div class="point"></div>
+      <div class="line" v-if="index + 1 != data.length"></div>
+      <div class="info-right">
+        <div class="name">{{item.name}}</div>
+        <div class="time">打卡时间：<text>{{ item.time }}</text></div>
+
+        <div class="image">
+          <img src="../../../assets/home/bddcj.png" alt="">
+        </div>
+
+        <div class="address">
+          <van-icon name="location-o" color="#1DB1FF" />
+          <div class="name">四川省成都市</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.info-container {
+  padding: 0 2.67vw;
+  margin-top: 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: 2.67vw;
+
+    .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;
+      .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;
+
+        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;
+        }
+      }
+    }
+  }
+}
+</style>