huijia-website/app/app.vue

<!--
 * @Author: wjc
 * @Date: 2023-11-15 09:54:21
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-15 14:50:45
 * @Description: 
-->
<template>
  <NuxtLayout>
    <el-config-provider :size="elConfig.size" :z-index="elConfig.zIndex" :locale="zhCn">
      <NuxtPage />
    </el-config-provider>
  </NuxtLayout>
</template>

<script setup lang="ts">
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  import { appName } from '~/constants'
  useHead({
    title: appName,
  })

  const elConfig = ref<{
    size: 'default' | 'small' | 'large'
    zIndex: number
  }>({
    size: 'default',
    zIndex: 300,
  })

  if (import.meta.client) {
    const setDocumentZoom = (zoom: number) => {
      ;(document.documentElement.style as unknown as { zoom: number }).zoom = zoom
    }

    const handleResize = () => {
      const width = window.innerWidth
      if (width >= 768 && width < 1440) {
        setDocumentZoom(width / 1920)
      } else {
        setDocumentZoom(1)
      }
    }

    onMounted(() => {
      window.addEventListener('resize', handleResize)
      handleResize()
    })

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })
  }
</script>

<style lang="scss">
  html {
    /**
    一般浏览器的默认字体大小为 16px，以10px 为基数计算rem，font-size: 1.4rem = 14px;
    注意：此设置在媒体查询中无效，媒体查询中，基数还是16px
  */
    font-size: 62.5%;
  }

  html,
  body,
  #__nuxt {
    padding: 0;
    margin: 0;
    height: 100%;
  }
</style>