提交

src/views/growth/growthList.vue

@@ -56,22 +56,22 @@
     <div class="growth-name-type">
       <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
         <div class="growth-name">
-        <div>{{ selectGrowth?.growthName }}</div>
-        <div style="margin-left: 20px; cursor: pointer">
+          <div>{{ selectGrowth?.growthName }}</div>
+          <div style="margin-left: 20px; cursor: pointer">
             <el-icon color="#000" size="16"><CaretBottom /></el-icon>
           </div>
-      </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                :disabled="selectGrowth.id == item.id"
-                v-for="item of growthList"
-              >
-                <div @click="select(item)">{{ item.growthName }}</div>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              :disabled="selectGrowth.id == item.id"
+              v-for="item of growthList"
+            >
+              <div @click="select(item)">{{ item.growthName }}</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <div class="growth-type">
         <div class="type-item-list">列表</div>
         <div class="type-item-path" @click="templateClick">路径</div>
@@ -87,7 +87,12 @@
             v-for="(value, index) in stageProcessList"
           >
             <div class="list-item" @click="toFinish(value)">
-              <div class="item-img"></div>
+              <div class="item-img">
+                <img
+                  style="width: 100%; height: 100%"
+                  :src="getAssetsFile(value.courseType)"
+                />
+              </div>
               <div class="item-content">
                 <div class="item-name">
                   {{
@@ -270,6 +275,10 @@ const lastLearned = computed(() =>
   stageProcessList.value.find((item) => item.lastStudy)
 );
 
+const getAssetsFile = (url) => {
+  return new URL(`../../assets/image/growth/type${url}.png`, import.meta.url)
+    .href;
+};
 // 样式类型
 const templateClick = () => {
   router.push({
@@ -307,7 +316,7 @@ const refresh = () => {
 const loading = ref(false);
 const getList = () => {
   let params = {
-    growthId: selectGrowth.id ? selectGrowth.id : routerId,
+    growthId: selectGrowth.value.id ? selectGrowth.value.id : routerId,
     ...queryParams,
   };
   // 3为查询全部状态，需给后端传空
@@ -656,7 +665,6 @@ function toOffcoursePlanPage(id) {
       margin: 15px 0 19px 0;
     }
     .item-img {
-      height: 240px;
       width: 100%;
       background: #cccccc;
       border-radius: 14px 14px 0px 0px;

src/views/growth/growthRoadmap.vue

@@ -4,7 +4,7 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
-    <div class="nav"  :style="{transform:'scale('+ transformSize + ')'}">
+    <div class="nav" :style="{ transform: 'scale(' + transformSize + ')' }">
       <div class="tabs">
         <div
           class="tabs-item"
@@ -53,27 +53,29 @@
         >
       </div> -->
     </div>
-    <div class="growth-path-container" :style="{transform:'scale('+ transformSize + ')'}">
+    <div
+      class="growth-path-container"
+      :style="{ transform: 'scale(' + transformSize + ')' }"
+    >
       <div class="growth-name-type">
-        <div class="growth-name">
-          <div>{{ selectGrowth?.growthName }}</div>
-          <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
+        <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
+          <div class="growth-name">
+            <div>{{ selectGrowth?.growthName }}</div>
             <div style="margin-left: 20px; cursor: pointer">
               <el-icon color="#000" size="16"><CaretBottom /></el-icon>
             </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  :disabled="selectGrowth.id == item.id"
-                  v-for="item of growthList"
-                >
-                  <div @click="select(item)">{{ item.growthName }}</div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                :disabled="selectGrowth.id == item.id"
+                v-for="item of growthList"
+              >
+                <div @click="select(item)">{{ item.growthName }}</div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
         <div class="growth-type">
           <div class="type-item-list" @click="templateClick">列表</div>
           <div class="type-item-path">路径</div>
@@ -282,7 +284,7 @@
   </div>
 </template>
 <script setup>
-import { computed, onMounted,onUnmounted, ref, watch, reactive } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { request } from "@/api/request";
 import { growthRequest } from "@/api/growthRequest";
@@ -411,10 +413,10 @@ const stateData = computed(() => {
 const windowWidth = ref(0);
 const transformSize = ref(1);
 
-const updateWindowWidth = () =>  {
-    windowWidth.value = window.innerWidth;
-    transformSize.value = windowWidth.value / 1920;
-}
+const updateWindowWidth = () => {
+  windowWidth.value = window.innerWidth;
+  transformSize.value = windowWidth.value / 1920;
+};
 // 样式类型
 const templateClick = () => {
   router.push({
@@ -452,7 +454,7 @@ const refresh = () => {
 const loading = ref(false);
 const getList = () => {
   let params = {
-    growthId: selectGrowth.id ? selectGrowth.id : routerId,
+    growthId: selectGrowth.value.id ? selectGrowth.value.id : routerId,
     ...queryParams,
   };
   // 3为查询全部状态，需给后端传空
@@ -479,7 +481,7 @@ const select = (item) => {
 };
 onMounted(() => {
   updateWindowWidth(); // 初始化宽度
-  window.addEventListener('resize', updateWindowWidth);
+  window.addEventListener("resize", updateWindowWidth);
   dispatch("getGrowthInfo", { routerId });
   getList();
   growthRequest(PROFESSIONAL_STUDENT_LIST).then((res) => {
@@ -488,7 +490,7 @@ onMounted(() => {
 });
 // 在组件卸载时移除事件监听器
 onUnmounted(() => {
-  window.removeEventListener('resize', updateWindowWidth);
+  window.removeEventListener("resize", updateWindowWidth);
 });
 watch(
   () => state.growthInfo,