diff --git a/src/assets/image/growth/path2.png b/src/assets/image/growth/path2.png
new file mode 100644
index 0000000..b6aa7f6
Binary files /dev/null and b/src/assets/image/growth/path2.png differ
diff --git a/src/views/growth/components/gowthPath2.vue b/src/views/growth/components/gowthPath2.vue
new file mode 100644
index 0000000..617205d
--- /dev/null
+++ b/src/views/growth/components/gowthPath2.vue
@@ -0,0 +1,261 @@
+<template>
+  <el-scrollbar height="935px">
+    <div
+      class="gowth-path2"
+      :style="{
+        height: position(stageProcessList.length - 1).top,
+      }"
+    >
+      <div
+        class="path-item"
+        @click="toFinish(item)"
+        :style="position(index)"
+        v-for="(item, index) of stageProcessList"
+      >
+        <template v-if="(index + 1) % 2">
+          <div class="item-link">
+            <div class="circle"></div>
+            <div
+              :style="{
+                width: widthConfig[index % 10],
+              }"
+              class="line-right"
+            ></div>
+          </div>
+        </template>
+        <div>
+          <div>
+            <div class="item-name">{{ item.taskName }}</div>
+            <div class="triangle"></div>
+          </div>
+          <div class="f-a-c" style="justify-content: flex-end">
+            <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>
+        <template v-if="(index + 1) % 2 === 0">
+          <div class="item-link">
+            <div
+              :style="{
+                width: widthConfig[index % 10],
+              }"
+              class="line-left"
+            ></div>
+            <div class="circle"></div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  stageProcessList: Array,
+});
+
+const point = [
+  {
+    top: 0,
+    right: -24,
+  },
+  {
+    top: 51,
+    right: 167,
+  },
+  {
+    top: 144,
+    right: -26,
+  },
+  {
+    top: 234,
+    right: 146,
+  },
+  {
+    top: 339,
+    right: 90,
+  },
+  {
+    top: 414,
+    right: 121,
+  },
+  {
+    top: 535,
+    right: 92,
+  },
+  {
+    top: 635,
+    right: 53,
+  },
+  {
+    top: 723,
+    right: 51,
+  },
+  {
+    top: 804,
+    right: 53,
+  },
+];
+
+// 基础配置项
+const widthConfig = [
+  "0px",
+  "0px",
+  "64px",
+  "40px",
+  "80px",
+  "20px",
+  "64px",
+  "80px",
+  "45px",
+  "65px",
+];
+
+const position = (index) => {
+  if (index < 0) {
+    return {
+      top: `0px`,
+      right: `0px`,
+    };
+  }
+  let num = index / 10;
+  // 获取倍数
+  let multiple = num < 1 ? 0 : Number(Math.floor(num));
+
+  let num2 = index % 10;
+
+  return {
+    top: `${multiple * (853 + 25) + point[num2].top}px`,
+    right: `${point[num2].right}px`,
+  };
+};
+// 基础配置项
+const stateData = computed(() => {
+  return (item) => {
+    if (item.completionStatus === "10") {
+      return {
+        text: "未解锁",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "0") {
+      return {
+        text: "未开始",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "1") {
+      return {
+        text: "已完成",
+        color: "#0077EC",
+        bgColor: "rgba(0, 119, 236, 0.2)",
+        progressColor: "#0077EC",
+      };
+    } else if (item.completionStatus === "2") {
+      return {
+        text: "进行中",
+        color: "#F2903D",
+        bgColor: "rgba(242, 144, 61, 0.2)",
+        progressColor: "#F2903D",
+      };
+    }
+  };
+});
+const emit = defineEmits(["toFinish"]);
+const toFinish = (item) => {
+  emit("toFinish", item);
+};
+</script>
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.gowth-path2 {
+  min-height: 200px;
+  position: relative;
+  margin: 53px 45px 31px 63px;
+  box-sizing: border-box;
+  background-image: url(@/assets/image/growth/path2.png);
+  background-size: 100%;
+
+  .path-item {
+    position: absolute;
+    display: flex;
+    padding-bottom: 20px;
+
+    .item-link {
+      height: 28px;
+      display: flex;
+      align-items: center;
+      .line-right {
+        height: 2px;
+        background: linear-gradient(90deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
+      }
+      .line-left {
+        height: 2px;
+        background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 10px;
+        height: 10px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 2px solid #0077ec;
+      }
+    }
+    .item-progress {
+      width: 71px;
+    }
+    .item-state {
+      width: 48px;
+      height: 16px;
+      border-radius: 3px;
+      text-align: center;
+      line-height: 16px;
+      margin-left: 4px;
+      font-size: 12px;
+    }
+    .item-name {
+      max-width: 125px;
+      min-width: 40px;
+      display: inline-block;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 4px;
+      font-size: 12px;
+      color: #ffffff;
+      padding: 8px 5px 9px 10px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 5px solid transparent;
+      border-top-color: #4391f8;
+      margin-left: 22px;
+    }
+  }
+}
+</style>
diff --git a/src/views/growth/growthDetails.vue b/src/views/growth/growthDetails.vue
index c618f01..b758262 100644
--- a/src/views/growth/growthDetails.vue
+++ b/src/views/growth/growthDetails.vue
@@ -550,6 +550,9 @@ const toPath = () => {
   box-sizing: border-box;
   background-color: #ffffff;
   position: relative;
+  :deep(input::placeholder) {
+    color: #ffffff;
+  }
   .container {
     position: absolute;
     background-color: #ffffff;
diff --git a/src/views/growth/growthPath.vue b/src/views/growth/growthPath.vue
index 18b8520..5d41388 100644
--- a/src/views/growth/growthPath.vue
+++ b/src/views/growth/growthPath.vue
@@ -4,7 +4,7 @@
       <div class="nav-left" @click="returnclick">
         <el-icon color="#fff" size="20"><ArrowLeft /></el-icon>
       </div>
-      <div class="nav-title">专业力必修</div>
+      <div class="nav-title">{{ growthInfo.growthName }}</div>
     </div>
     <div class="tabs">
       <div
@@ -62,95 +62,108 @@
     </div>
     <div class="container" v-loading="loading">
       <div :style="{ transform: 'scale(' + transformSize + ')' }">
-        <div class="path-container">
-          <div
-            :class="
-              item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6
-                ? 'path-item-left'
-                : 'path-item-right'
-            "
-            @click="toFinish(item)"
-            :style="point[item.position]"
-            v-for="(item, index) of stageProcessList"
-          >
-            <template v-if="item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6">
-              <div>
-                <div class="item-name">{{ item.taskName }}</div>
-                <div class="triangle"></div>
-              </div>
-              <div class="f-a-c">
-                <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
-                    :style="{
-                      width: widthConfig(item.position).width,
-                      marginLeft: widthConfig(item.position).margin,
-                    }"
-                    class="line"
-                  ></div>
-                  <div class="circle"></div>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="item-link">
-                <div class="circle"></div>
-                <div
-                  :style="{
-                    width: widthConfig(item.position).width,
-                    marginRight: widthConfig(item.position).margin,
-                  }"
-                  class="line"
-                ></div>
-              </div>
-              <div>
+        <template v-if="growthInfo.template == 2">
+          <div class="path-container">
+            <div
+              :class="
+                item.position + 1 < 3 ||
+                item.position + 1 == 4 ||
+                item.position + 1 == 6
+                  ? 'path-item-left'
+                  : 'path-item-right'
+              "
+              @click="toFinish(item)"
+              :style="point[item.position]"
+              v-for="(item, index) of stageProcessList"
+            >
+              <template
+                v-if="
+                  item.position + 1 < 3 ||
+                  item.position + 1 == 4 ||
+                  item.position + 1 == 6
+                "
+              >
                 <div>
                   <div class="item-name">{{ item.taskName }}</div>
                   <div class="triangle"></div>
                 </div>
-                <div class="f-a-c" style="justify-content: flex-end">
-                  <div class="item-progress">
-                    <el-progress
-                      :percentage="parseInt(item.progress)"
-                      :show-text="false"
-                      :stroke-width="6"
-                      :color="stateData(item).progressColor"
-                    />
-                  </div>
+                <div class="f-a-c">
+                  <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
+                      class="item-state"
+                      :style="{
+                        color: stateData(item).color,
+                        background: stateData(item).bgColor,
+                      }"
+                    >
+                      {{ stateData(item).text }}
+                    </div>
+                  </div>
+                  <div class="item-link">
+                    <div
+                      :style="{
+                        width: widthConfig(item.position).width,
+                        marginLeft: widthConfig(item.position).margin,
+                      }"
+                      class="line"
+                    ></div>
+                    <div class="circle"></div>
                   </div>
                 </div>
-              </div>
-            </template>
+              </template>
+              <template v-else>
+                <div class="item-link">
+                  <div class="circle"></div>
+                  <div
+                    :style="{
+                      width: widthConfig(item.position).width,
+                      marginRight: widthConfig(item.position).margin,
+                    }"
+                    class="line"
+                  ></div>
+                </div>
+                <div>
+                  <div>
+                    <div class="item-name">{{ item.taskName }}</div>
+                    <div class="triangle"></div>
+                  </div>
+                  <div class="f-a-c" style="justify-content: flex-end">
+                    <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>
+              </template>
+            </div>
           </div>
-        </div>
+        </template>
+        <template v-else>
+          <GrowthPath2 @toFinish="toFinish" :stageProcessList="stageProcessList"></GrowthPath2>
+        </template>
       </div>
 
       <template v-if="stageProcessList && stageProcessList.length"> </template>
@@ -217,6 +230,7 @@ import { computed, reactive, ref, watch, onMounted } from "vue";
 import { ElLoading } from "element-plus";
 import { useRequest, request } from "@/api/request";
 import { growthRequest } from "@/api/growthRequest";
+import GrowthPath2 from "./components/gowthPath2.vue";
 import {
   EvaluationToLearn,
   QueryEvaluationTaskStatusOne,
@@ -289,17 +303,21 @@ const getList = () => {
     growthId: routerId,
     ...queryParams,
   }).then((res) => {
-    let newData = res.data.slice(0, 15).reverse();
-    // 默认第一个在第一点位
-    let num = 15 / newData.length;
-    stageProcessList.value = newData.map((item, index) => {
+    if (growthInfo.value.template == 1) {
+      stageProcessList.value = res.data;
+    } else {
+      let newData = res.data.slice(0, 15).reverse();
       // 默认第一个在第一点位
-      if (index === 0) {
-        item.position = 0;
-      }
-      item.position = Number((index * num).toFixed());
-      return item;
-    });
+      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;
+      });
+    }
 
     if (anchorNum.value === 0) {
       let find = stageProcessList.value.find((item) => item.lastStudy);
@@ -318,7 +336,7 @@ const openCourseList = ref([]);
 const openCourseIdList = ref([]);
 
 const userInfo = computed(() => store.state.userInfo);
-
+const growthInfo = computed(() => store.state.growthInfo);
 const point = [
   {
     top: "-15px",
@@ -743,6 +761,11 @@ const toPath = () => {
   box-sizing: border-box;
   background-color: #ffffff;
   position: relative;
+
+  :deep(input::placeholder) {
+    color: #ffffff;
+  }
+
   .container {
     position: absolute;
     background-color: #ffffff;