student-h5/src/components/PathDetailImage.vue

<template>
  <div class="pathDetail pathDetailback" v-if="data?.list">
    <div
      v-for="(item, i) in data?.list"
      :key="i"
      class="cha"
      :style="{
        top: `${imgAttr.positions[i]?.top - (current === i ? 1 : 0)}px`,
        left: `${imgAttr.positions[i]?.left - (current === i ? 11 : 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, ElMessage } from "element-plus";
import { ROUTERTASK_LIST } from "@/api/api";
import { usePage, useRequest } 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 } = useRequest(
  ROUTERTASK_LIST,
  { routerId: props.routerId },
  () => {
    closeLoading();
  }
);
console.log("data", data);
let current = ref(null);
watch(data, () => {
  if (data && data.value && data.value.list) {
    data.value.list.reverse();
    current.value = data.value.list.findIndex(
      (e) => e.id === data.value.currentChapterId
    );
  }
  closeLoading();
});
// const current = computed(() => {
//   data.value.list.findIndex((e) => e.id === data.value.currentChapterId);
// });
console.log("current", current);

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

function toDetail(i) {
  // console.log("import.meta.env.MODE", import.meta.env.MODE);
  console.log("current.value !== i", current, i);
  if (current.value !== i) {
    return;
  }
  router.push({
    path: "/pathmappage",
    query: {
      routerId: props.routerId,
      // routerName: props.detail.routerName,
    },
  });
}

function close() {
  visiable.value = false;
}
function toIndex() {
  window.location.href = import.meta.env.VITE_BOE_API_URL;
}
</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>