SocialNetworks_duan/src/App.vue

<template>
  <div class="app-container">
    <router-view />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue"
const disableZoom = () => {
  // 强制重置浏览器缩放为 100%
  const resetZoom = () => {
    document.body.style.zoom = "100%"
    if (window.devicePixelRatio !== 1) {
      const viewportMeta = document.querySelector('meta[name="viewport"]')
      if (viewportMeta) {
        viewportMeta.content =
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      }
    }
  }
  // 禁用快捷键（Ctrl/Cmd + +/-/0 和 滚轮）
  const keysToBlock = new Set(["+", "-", "=", "0"])
  const codesToBlock = new Set(["Equal", "Minus", "NumpadAdd", "NumpadSubtract", "Digit0"])
  const handleKeyDown = (e) => {
    if ((e.ctrlKey || e.metaKey) && (keysToBlock.has(e.key) || codesToBlock.has(e.code))) {
      e.preventDefault()
    }
  }
  const handleWheel = (e) => {
    if (e.ctrlKey) {
      e.preventDefault()
    }
  }

  // 初始化
  resetZoom()
  document.addEventListener("keydown", handleKeyDown)
  document.addEventListener("wheel", handleWheel, { passive: false })

  // 可选，用于组件卸载时移除监听
  return () => {
    document.removeEventListener("keydown", handleKeyDown)
    document.removeEventListener("wheel", handleWheel)
  }
}

onMounted(() => {
  // const cleanup = disableZoom()
  // onUnmounted(() => cleanup())
})
</script>

<style scoped lang="scss">
.app-container {
  max-width: vw(1920);
  min-height: vh(1080);
  background: url("@/assets/images/bci.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02131f;
}
</style>