From d6b1727906e47ee78dd2be2d2ca120b6830c9bac Mon Sep 17 00:00:00 2001
From: Pengxiansen <2422914688@qq.com>
Date: Mon, 17 Feb 2025 10:06:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/growth/growthList.vue    |   7 +-
 src/views/growth/growthRoadmap.vue | 118 ++++++++++++++++-------------
 2 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/src/views/growth/growthList.vue b/src/views/growth/growthList.vue
index ddd8791..4074ff2 100644
--- a/src/views/growth/growthList.vue
+++ b/src/views/growth/growthList.vue
@@ -666,8 +666,13 @@ function toOffcoursePlanPage(id) {
     }
     .item-img {
       width: 100%;
-      background: #cccccc;
       border-radius: 14px 14px 0px 0px;
+      overflow: hidden;
+
+      img:hover {
+        transform: scale(1.1);
+        transition: all 1s ease;
+      }
     }
     .item-content {
       padding: 29px 24px 31px 26px;
diff --git a/src/views/growth/growthRoadmap.vue b/src/views/growth/growthRoadmap.vue
index e7d723a..f7cad30 100644
--- a/src/views/growth/growthRoadmap.vue
+++ b/src/views/growth/growthRoadmap.vue
@@ -86,45 +86,15 @@
         <div class="path-container">
           <div
             :class="
-              (index + 1) % 2 && index + 1 != 15
-                ? 'path-item-top'
-                : 'path-item-bottom'
+              (item.position + 1) % 2 || item.position + 1 == 15
+                ? 'path-item-bottom'
+                : 'path-item-top'
             "
             @click="toFinish(item)"
-            :style="point[index]"
+            :style="point[item.position]"
             v-for="(item, index) of stageProcessList"
           >
-            <template v-if="(index + 1) % 2 && index + 1 != 15">
-              <div>
-                <div class="item-name">{{ item.taskName }}</div>
-                <div class="triangle"></div>
-              </div>
-              <div class="f-a-c">
-                <div class="item-progress">
-                  <el-progress
-                    :percentage="parseInt(item.progress)"
-                    :show-text="false"
-                    :stroke-width="6"
-                    :color="stateData(item).progressColor"
-                  />
-                </div>
-
-                <div
-                  class="item-state"
-                  :style="{
-                    color: stateData(item).color,
-                    background: stateData(item).bgColor,
-                  }"
-                >
-                  {{ stateData(item).text }}
-                </div>
-              </div>
-              <div class="item-link">
-                <div class="line"></div>
-                <div class="circle"></div>
-              </div>
-            </template>
-            <template v-else>
+            <template v-if="(item.position + 1) % 2 || item.position + 1 == 15">
               <div class="item-link">
                 <div class="circle"></div>
                 <div class="line"></div>
@@ -154,6 +124,36 @@
                 </div>
               </div>
             </template>
+            <template v-else>
+              <div>
+                <div class="item-name">{{ item.taskName }}</div>
+                <div class="triangle"></div>
+              </div>
+              <div class="f-a-c">
+                <div class="item-progress">
+                  <el-progress
+                    :percentage="parseInt(item.progress)"
+                    :show-text="false"
+                    :stroke-width="6"
+                    :color="stateData(item).progressColor"
+                  />
+                </div>
+
+                <div
+                  class="item-state"
+                  :style="{
+                    color: stateData(item).color,
+                    background: stateData(item).bgColor,
+                  }"
+                >
+                  {{ stateData(item).text }}
+                </div>
+              </div>
+              <div class="item-link">
+                <div class="line"></div>
+                <div class="circle"></div>
+              </div>
+            </template>
           </div>
         </div>
       </template>
@@ -305,62 +305,63 @@ const {
 } = useRoute();
 
 const point = [
-  {
-    top: 0,
-    right: "234px",
-  },
   {
     top: "226px",
     right: "128px",
   },
   {
-    top: "92px",
-    right: "455px",
+    top: 0,
+    right: "234px",
   },
   {
     top: "347px",
     right: "341px",
   },
   {
-    top: "155px",
-    right: "673px",
+    top: "92px",
+    right: "455px",
   },
   {
     top: "443px",
     right: "561px",
   },
   {
-    top: "200px",
-    right: "893px",
+    top: "155px",
+    right: "673px",
   },
   {
     top: "512px",
     right: "780px",
   },
   {
-    top: "232px",
-    right: "1111px",
+    top: "200px",
+    right: "893px",
   },
   {
     top: "565px",
     right: "1000px",
   },
   {
-    top: "254px",
-    right: "1331px",
+    top: "232px",
+    right: "1111px",
   },
   {
     top: "602px",
     right: "1220px",
   },
   {
-    top: "267px",
-    right: "1551px",
+    top: "254px",
+    right: "1331px",
   },
   {
     top: "630px",
     right: "1440px",
   },
+  {
+    top: "267px",
+    right: "1551px",
+  },
+
   {
     top: "650px",
     right: "1660px",
@@ -463,8 +464,17 @@ const getList = () => {
   }
   loading.value = true;
   growthRequest(PROFESSIONAL_STUDENT_TASKLIST, params).then((res) => {
-    console.log(res);
-    stageProcessList.value = res.data;
+    let newData = res.data.slice(0, 15);
+    // 默认第一个在第一点位
+    let num = 15 / newData.length;
+    stageProcessList.value = newData.map((item, index) => {
+      // 默认第一个在第一点位
+      if (index === 0) {
+        item.position = 0;
+      }
+      item.position = Number((index * num).toFixed());
+      return item;
+    });
     loading.value = false;
   });
 };
@@ -815,6 +825,7 @@ function toOffcoursePlanPage(id) {
     .path-item-bottom {
       position: absolute;
       width: 210px;
+      cursor: pointer;
       .item-progress {
         flex: 1;
       }
@@ -871,6 +882,7 @@ function toOffcoursePlanPage(id) {
     .path-item-top {
       position: absolute;
       width: 210px;
+      cursor: pointer;
       .item-progress {
         flex: 1;
       }