修改样式

src/views/growth/growthRoadmap.vue

@@ -4,7 +4,7 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
-    <div class="nav">
+    <div class="nav" >
       <div class="tabs">
         <div
           class="tabs-item"
@@ -53,7 +53,7 @@
         >
       </div> -->
     </div>
-    <div class="growth-path-container">
+    <div class="growth-path-container" :style="{transform:'scale('+ transformSize + ')'}">
       <div class="growth-name-type">
         <div class="growth-name">
           <div>{{ selectGrowth?.growthName }}</div>
@@ -407,6 +407,14 @@ const stateData = computed(() => {
   };
 });
 
+// 储存屏幕宽
+const windowWidth = ref(0);
+const transformSize = ref(0.8);
+
+const updateWindowWidth = () =>  {
+    windowWidth.value = window.innerWidth;
+    transformSize.value = windowWidth.value / 1920
+}
 // 样式类型
 const templateClick = () => {
   router.push({
@@ -470,13 +478,17 @@ const select = (item) => {
   getList();
 };
 onMounted(() => {
+  updateWindowWidth(); // 初始化宽度
+  window.addEventListener('resize', updateWindowWidth());
   dispatch("getGrowthInfo", { routerId });
   getList();
   growthRequest(PROFESSIONAL_STUDENT_LIST).then((res) => {
     growthList.value = res.data;
   });
 });
-
+// unMounted(() =>{ // Vue 3.x 使用 unmounted
+//   window.removeEventListener('resize', updateWindowWidth());
+// }),
 watch(
   () => state.growthInfo,
   (val) => {
@@ -787,6 +799,7 @@ function toOffcoursePlanPage(id) {
     background-size: 100%;
     background-repeat: no-repeat;
     width: 1920px;
+    transform-origin: top left;
     height: 1122px;
   }
   .path-container {