crand-canal-museum/packages/mobile/src/views/Home/index.vue

<template>
  <div class="home">
    <VueDraggableResizable
      :x="mapX"
      :y="mapY"
      :w="mapWidth"
      :h="mapHeight"
      :draggable="true"
      :resizable="true"
      :handles="[]"
    >
      <img class="home__map" src="./images/map-min.png" />

      <div
        v-for="(item, index) in POINTS"
        :key="index"
        class="home-point"
        :class="[{ active: pointIndex === index }, `point${index}`]"
        @click="handlePoint(index)"
      >
        <img :src="item.img2" />
      </div>
    </VueDraggableResizable>

    <ul class="home-menu">
      <li v-for="(item, index) in MIMAGES" :key="index">
        <img :src="item.default" @click="handleMenu(index)" />
      </li>
    </ul>

    <div class="home-tab">
      <div class="story" />
      <div class="biographies" @click="$router.push({ name: 'story' })" />
    </div>
  </div>

  <SharePopup v-model:visible="shareVisible" />
  <VanPopup
    v-model:show="pointDetailVisible"
    :overlay="true"
    position="bottom"
    class="point-panel"
    :overlay-style="{
      background: 'transparent',
    }"
    @closed="pointIndex = -1"
  >
    <template v-if="activePoint">
      <div class="point-panel-img">
        <img :class="`c${pointIndex}`" :src="activePoint.img" />
      </div>
      <div class="point-panel-content" v-html="activePoint.content" />
    </template>
  </VanPopup>
</template>

<script setup>
import { ref, computed } from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/style.css";
import { POINTS, MIMAGES } from "./constants";
import SharePopup from "@/components/SharePopup.vue";
import { useRouter } from "vue-router";

const mapWidth = window.innerWidth * (1600 / 750);
const mapHeight = window.innerWidth * (1215 / 750);
const mapX = window.innerWidth * (30 / 750);
const mapY = window.innerWidth * (80 / 750);

const router = useRouter();
const pointIndex = ref(-1);
const shareVisible = ref(false);
const pointDetailVisible = ref(false);
const activePoint = computed(() => POINTS[pointIndex.value]);

const handlePoint = (index) => {
  pointIndex.value = index;
  pointDetailVisible.value = true;
};

const handleMenu = (index) => {
  const item = MIMAGES[index];
  if (item.routeName) {
    router.push({ name: item.routeName, query: item.query });
  } else if (item.href) {
    window.location.href = item.href;
  } else if (item.type === "share") {
    shareVisible.value = true;
  }
};
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>