save

src/router.ts

@@ -123,6 +123,11 @@ const routes = [
   //   ),
   // },
   {
+    path: "/tracingDetail",
+    name: "tracingDetail",
+    component: () => import("@/views/category/tracingDetail/index.vue"),
+  },
+  {
     path: "/passMaker",
     name: "passMaker",
     component: () => import("@/views/Collection/PassMaker/index.vue"),

src/views/category/tracingDetail/TimeLine.vue

+<template>
+  <el-timeline style="padding-left: 2px">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :="activity"
+    >
+      {{ activity.content }}
+      <template #dot>
+        <div v-if="!activity.checked" class="dot-normal dot-timeLine"></div>
+        <div v-else class="dot-checked dot-timeLine">
+          <icon icon-name="icona-21"></icon>
+        </div>
+      </template>
+    </el-timeline-item>
+  </el-timeline>
+</template>
+
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from "element-plus";
+import Icon from "@/components/Icon/index.vue";
+
+const activities = [
+  {
+    content: "Approved",
+  },
+  {
+    content: "Event start",
+    checked: true,
+  },
+  {
+    content: "Approved",
+  },
+  {
+    content: "Success",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.dot-timeLine {
+  top: 7px;
+  position: absolute;
+  left: 5px;
+  transform: translate(-50%, -50%);
+  &.dot-normal {
+    width: 7px;
+    height: 7px;
+    background: #ffffff;
+    border: 2px solid #3662ec;
+    border-radius: 50%;
+  }
+  &.dot-checked {
+    width: 14px;
+    height: 14px;
+    // background: #16b141;
+    border-radius: 50%;
+  }
+}
+:deep(.el-timeline-item__tail) {
+  top: 6px;
+}
+</style>

src/views/category/tracingDetail/index.vue

+<template>
+  <div style="height: 50px; margin-bottom: 20px"></div>
+  <syHeaderNavBar
+    class="fixed top-0 left-0 right-0"
+    @close="router.push('/tracingManagement')"
+    @back="router.back"
+    >杭州第一农场</syHeaderNavBar
+  >
+  <TimeLine></TimeLine>
+</template>
+
+<script setup lang="ts">
+import { router } from "@/router";
+import TimeLine from "@/views/category/tracingDetail/TimeLine.vue";
+import * as cqk from "cqk-sy-ui";
+console.log(cqk);
+</script>
+
+<style></style>

src/views/category/tracingManagement/components/ProofTable/index.vue

@@ -9,7 +9,10 @@
       element-loading-text="加载中..."
     >
       <template #name="slotProps">
-        <div class="whitespace-nowrap overflow-hidden text-ellipsis">
+        <div
+          class="whitespace-nowrap overflow-hidden text-ellipsis"
+          @click="$router.push('/tracingDetail')"
+        >
           {{ slotProps.name }}
         </div>
       </template>