feat:修改跳转等问题

src/components/PathDetailImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pathDetail" :style="{ backgroundImage: `url('${back}')` }">
+  <div class="pathDetail pathDetailback">
     <div
       v-for="(item, i) in data"
       :key="i"
@@ -11,13 +11,12 @@
     >
       <div
         @click="toDetail(i)"
-        class="nameClass"
+        :class="current === i ? 'nameClass currentBack' : 'nameClass nameBack'"
         :title="item.name"
         :style="{
-          background: `url('${current === i ? currentBack : nameBack}')`,
           backgroundSize: '100%',
-          width: `${current === i ? 139 : 123}px`,
-          height: `${current === i ? 60 : 60}px`,
+          width: `${current === i ? 100 : 100}px`,
+          height: `${current === i ? 75 : 75}px`,
           lineHeight: '50px',
           color: '#FFF',
         }"
@@ -29,9 +28,6 @@
 </template>
 <script setup>
 import { computed, defineProps, ref, watch } 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 { useRouter } from "vue-router/dist/vue-router";
 import { ElLoading } from "element-plus";
 import { ROUTERTASK_LIST } from "@/api/api";
@@ -48,17 +44,19 @@ const props = defineProps({
 });
 const router = useRouter();
 const visiable = ref(true);
+
+// const back = ref("require('@/assets/images/pathdetails/pathDetailBack.png')");
 const imageAttrs = {
   "路径图背景-1671015331292.png": {
     width: 1437,
     height: 594,
     positions: [
-      { left: -28, top: 435 },
-      { left: 170, top: 360 },
-      { left: 20, top: 260 },
-      { left: 200, top: 183 },
-      { left: 160, top: 66 },
-      { left: 260, top: -30 },
+      { left: -21, top: 433 },
+      { left: 170, top: 324 },
+      { left: 28, top: 256 },
+      { left: 200, top: 166 },
+      { left: 160, top: 30 },
+      { left: 297, top: -63 },
     ],
   },
 };
@@ -80,9 +78,30 @@ openLoading();
 const closeLoading = () => {
   loading.value.close();
 };
+// const data = ref([
+//   {
+//     name: "关卡一",
+//   },
+//   {
+//     name: "关卡二",
+//   },
+//   {
+//     name: "关卡三",
+//   },
+//   {
+//     name: "关卡四",
+//   },
+//   {
+//     name: "关卡五",
+//   },
+//   {
+//     name: "关卡六",
+//   },
+// ]);
+// closeLoading();
 const { data } = usePage(ROUTERTASK_LIST, { routerId: props.routerId }, (e) => {
   console.log("我请求成功了吗", e);
-
+  e.data.rows.reverse();
   closeLoading();
 });
 const current = computed(() =>
@@ -96,9 +115,9 @@ function show() {
 
 function toDetail(i) {
   // console.log("import.meta.env.MODE", import.meta.env.MODE);
-  if (current.value !== i) {
-    return;
-  }
+  // if (current.value !== i) {
+  //   return;
+  // }
   import.meta.env.MODE === "development" || import.meta.env.MODE === "test"
     ? router.push({
         path: "/pathmappage",
@@ -122,6 +141,9 @@ function close() {
 }
 </script>
 <style lang="scss">
+.pathDetailback {
+  background-image: url(@/assets/image/pathdetails/pathDetailBack.png);
+}
 .pathDetail {
   width: 410px;
   height: 500px;
@@ -130,7 +152,8 @@ function close() {
   background-repeat: no-repeat;
   // background-position: center;
   // overflow-x: scroll;
-  margin: 20px;
+  margin: 30px;
+  margin-top: 100px;
   .cha {
     position: absolute;
     cursor: pointer;
@@ -143,5 +166,12 @@ function close() {
     padding: 0 20px 0 50px;
     font-size: 12px;
   }
+
+  .nameBack {
+    background-image: url(@/assets/image/pathdetails/pathDetailImg.png);
+  }
+  .currentBack {
+    background-image: url(@/assets/image/pathdetails/pathDetailImgSelect.png);
+  }
 }
 </style>