From b95cf940af8e01e4eca30b2599b029c2f645bd1e Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期一, 29 四月 2024 10:44:26 +0800
Subject: [PATCH] feat:创建新分支

---
 src/views/dashboard/components/TaskStep.vue |   15 ++++++++-------
 1 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/components/TaskStep.vue b/src/views/dashboard/components/TaskStep.vue
index bdbe0d0..ffaecc8 100644
--- a/src/views/dashboard/components/TaskStep.vue
+++ b/src/views/dashboard/components/TaskStep.vue
@@ -8,13 +8,13 @@
         class="task-step-item"
         :style="{ 'flex-basis': flexBasis }"
       >
-        <el-icon v-if="index + 1 < active" class="icon" size="22" color="#01f304"><CircleCheck /></el-icon>
+        <el-icon v-if="index < active" class="icon" color="#01f304"><CircleCheck /></el-icon>
 
-        <el-icon v-if="index + 1 === active" class="icon" size="22" color="#c25915">
+        <el-icon v-if="index === active" class="icon" color="#c25915">
           <Clock />
         </el-icon>
-        <el-icon v-if="index + 1 > active" class="icon" size="22" color="#7d7f83"><Clock /></el-icon>
-        <span class="text" :class="{ green: index + 1 < active, red: index + 1 === active, gray: index + 1 > active }">
+        <el-icon v-if="index > active" class="icon" color="#7d7f83"><Clock /></el-icon>
+        <span class="text" :class="{ green: index < active, red: index === active, gray: index > active }">
           {{ item }}
         </span>
         <span class="line"></span>
@@ -42,7 +42,7 @@
   return '0'
 })
 
-const activeItemRef = ref<(typeof HTMLDivElement)[]>()
+const activeItemRef = ref<HTMLDivElement[]>()
 const scrollerRef = ref<typeof ElScrollbar>()
 
 onMounted(() => {
@@ -50,8 +50,7 @@
     () => [props.steps, activeItemRef.value, scrollerRef.value],
     () => {
       if (props.steps.length > 0 && activeItemRef.value?.length && scrollerRef?.value) {
-        console.log(scrollerRef?.value)
-        const left = props.active - 1 >= 0 ? activeItemRef.value[props.active - 1]?.offsetLeft ?? 20 : 20
+        const left = props.active >= 0 ? activeItemRef.value[props.active]?.offsetLeft ?? 20 : 20
         requestAnimationFrame(() => {
           scrollerRef?.value?.setScrollLeft?.(left - 20)
         })
@@ -81,6 +80,7 @@
   }
   .icon {
     margin-right: 6px;
+    font-size: 22px;
   }
   .green {
     color: #01f304;
@@ -94,6 +94,7 @@
 }
 .text {
   flex-shrink: 0;
+  font-size: 14px;
 }
 .line {
   display: inline-block;

--
Gitblit v1.8.0