style:增加学习路径图封面及其坐标调整

src/components/PathDetailImage.vue

@@ -1,11 +1,22 @@
 <template>
-  <div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
+  <div 
+    class="pathDetail" 
+    v-if="visiable" 
+    :style="{
+      background:`url('${imgAttr.backurl}') no-repeat`,
+      backgroundSize: 'contain'
+      }">
     <div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
          :style="{top:`${imgAttr.positions[i]?.top - (current===i?5:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
       <div @click="toDetail(i)"
            class="nameClass"
            :title="item.name"
-           :style="{background: `url('${current===i?currentBack:nameBack}')`,backgroundSize:'100%',width:`${current===i?107:93}px`,height:`${current===i?80:70}px`,lineHeight:'50px',color:'#FFF'}">
+           :style="{
+            background: `url('${current===i?imgAttr.currentBack:imgAttr.nameBack}')`,
+            backgroundSize:'100%',
+            width:`${current===i?107:93}px`,
+            height:`${current===i?80:70}px`,
+            lineHeight:'50px',color: current===i?'#FFF':'#A06438'}">
         {{ item.name }}
       </div>
     </div>
@@ -16,6 +27,12 @@ import {computed, defineProps, ref} from "vue";
 import back from '@/assets/image/pathdetails/pathDetailBack.png'
 import nameBack from '@/assets/image/pathdetails/pathDetailImg.png'
 import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png'
+import back1 from '@/assets/image/pathdetails/back1.png'
+import nameBack1 from '@/assets/image/pathdetails/nameBack1.png'
+import currentBack1 from '@/assets/image/pathdetails/currentBack1.png'
+import back2 from '@/assets/image/pathdetails/back2.png'
+import nameBack2 from '@/assets/image/pathdetails/nameBack2.png'
+import currentBack2 from '@/assets/image/pathdetails/currentBack2.png'
 import {useRouter} from "vue-router/dist/vue-router";
 
 const props = defineProps({
@@ -32,19 +49,58 @@ const imageAttrs = {
   '路径图背景': {
     width: 1437,
     height: 594,
+    backurl: back,
+    currentBack: currentBack,
+    nameBack: nameBack,
     positions: [
-      {left: 63, top: 503},
-      {left: 828, top: 455},
-      {left: 268, top: 325},
-      {left: 1087, top: 183},
-      {left: 647, top: 84},
-      {left: 1180, top: 40},
+      {left: 100, top: 645},
+      {left: 670, top: 645},
+      {left: 870, top: 515},
+      {left: 535, top: 370},
+      {left: 1050, top: 330},
+      {left: 1180, top: 200},
+      {left: 980, top: 95},
+      {left: 1490, top: 60},
+    ]
+  },
+  '路径图2': {
+    width: 1437,
+    height: 594,
+    backurl: back2,
+    currentBack: currentBack2,
+    nameBack: nameBack2,
+    positions: [
+      {left: 100, top: 590},
+      {left: 260, top: 465},
+      {left: 530, top: 445},
+      {left: 745, top: 300},
+      {left: 980, top: 290},
+      {left: 1190, top: 230},
+      {left: 1310, top: 130},
+      {left: 1570, top: 95},
+    ]
+  },
+  '路径图3': {
+    width: 1437,
+    height: 594,
+    backurl: back1,
+    currentBack: currentBack1,
+    nameBack: nameBack1,
+    positions: [
+      {left: 60, top: 605},
+      {left: 260, top: 600},
+      {left: 450, top: 495},
+      {left: 720, top: 420},
+      {left: 970, top: 370},
+      {left: 1200, top: 295},
+      {left: 1460, top: 210},
+      {left: 1555, top: 110},
     ]
   }
 }
 
-const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
-
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {})
+console.log(imgAttr)
 const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))
 
 function show() {
@@ -73,8 +129,9 @@ function close() {
 </script>
 <style lang="scss">
 .pathDetail {
-  width: 100%;
+  width: 1800px;
   height: 1011px;
+  min-width: 1800px;
   position: relative;
 }