guyuan-museum-web/packages/pc/src/views/Home/index.vue

<template>
  <div class="home">
    <ul class="home-menu">
      <li
        v-for="index in 4"
        :key="index"
        class="home-menu-item"
        :style="{
          backgroundImage: `url(${
            mIndex === index - 1
              ? MIMAGES[index - 1].active
              : MIMAGES[index - 1].default
          })`,
        }"
        @click="handleMenu(index)"
      />
    </ul>

    <div class="map">
      <div
        v-for="(item, index) in POINTS"
        :key="index"
        :class="[`map-point point-${index + 1}`, { active: pIndex === index }]"
        @click="pIndex === index ? (pIndex = -1) : (pIndex = index)"
      >
        <img :src="item.img2" />

        <transition name="slide-fade">
          <div
            v-if="pIndex === index"
            class="point-popup"
            :class="{ 'has-btn': index === 2 || index === 0 || index === 3 }"
          >
            <img class="point-popup__title" :src="POINTS[pIndex].img" />
            <el-scrollbar scroll-y class="point-popup-scrollbar">
              <div
                class="point-popup__content"
                v-html="POINTS[pIndex].content"
              />
            </el-scrollbar>

            <div
              v-if="index === 3"
              class="point-popup__btn"
              @click="$router.push({ name: 'step4Detail' })"
            >
              小岔沟
            </div>
            <div
              v-if="index === 2"
              class="point-popup__btn"
              @click="$router.push({ name: 'step3Detail' })"
            >
              青石嘴战役
            </div>
            <div
              v-if="index === 0"
              class="point-popup__btn"
              @click="$router.push({ name: 'step1Detail' })"
            >
              单家集的灯火
            </div>
          </div>
        </transition>
      </div>
    </div>

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

  <Biographies v-model:visible="biographiesVisible" />
  <SharePopup v-model:visible="shareVisible" />
</template>

<script setup>
import { ref } from "vue";
import { POINTS, MIMAGES } from "./constants";
import Biographies from "./components/Biographies/index.vue";
import { useRouter } from "vue-router";
import SharePopup from "./components/SharePopup.vue";

const router = useRouter();
const mIndex = ref(-1);
const pIndex = ref(-1);
const shareVisible = ref(false);
const biographiesVisible = ref(false);

const handleMenu = (index) => {
  const item = MIMAGES[index - 1];
  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>