student-h5/src/components/PathDetailImage.vue

<template>
  <div class="pathDetail pathDetailback">
    <div
      v-for="(item, i) in data"
      :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="current === i ? 'nameClass currentBack' : 'nameClass nameBack'"
        :title="item.name"
        :style="{
          backgroundSize: '100%',
          width: `${current === i ? 100 : 100}px`,
          height: `${current === i ? 75 : 75}px`,
          lineHeight: '50px',
          color: '#FFF',
        }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, defineProps, ref, watch } from "vue";
import { useRouter } from "vue-router/dist/vue-router";
import { ElLoading } from "element-plus";
import { ROUTERTASK_LIST } from "@/api/api";
import { usePage } from "@/api/request";
const listheight = document.body.clientHeight - 300 + "px";
console.log("listheight", listheight);
const props = defineProps({
  value: String,
  img: String,
  routerId: {
    type: Number,
    default: null,
  },
});
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: -21, top: 433 },
      { left: 170, top: 324 },
      { left: 28, top: 256 },
      { left: 200, top: 166 },
      { left: 160, top: 30 },
      { left: 297, top: -63 },
    ],
  },
};

const imgAttr = computed(
  () =>
    imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] || {}
);
// 使用
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
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(() =>
  data.value.findIndex((e) => e.chapterId === props.currentStageId)
);
console.log("data", data);

function show() {
  visiable.value = true;
}

function toDetail(i) {
  // console.log("import.meta.env.MODE", import.meta.env.MODE);
  // if (current.value !== i) {
  //   return;
  // }
  import.meta.env.MODE === "development" || import.meta.env.MODE === "test"
    ? router.push({
        path: "/pathmappage",
        query: {
          routerId: props.routerId,
          // routerName: props.detail.routerName,
        },
      })
    : window.open(
        `${
          window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL
        }/pathmappage&params=${encodeURIComponent(
          `routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
        )}`,
        "_top"
      );
}

function close() {
  visiable.value = false;
}
</script>
<style lang="scss">
.pathDetailback {
  background-image: url(@/assets/image/pathdetails/pathDetailBack.png);
}
.pathDetail {
  width: 410px;
  height: 500px;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-position: center;
  // overflow-x: scroll;
  margin: 30px;
  margin-top: 100px;
  .cha {
    position: absolute;
    cursor: pointer;
  }
  .nameClass {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    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>