hvac-web/src/views/PortalIndex.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { PAGInit } from 'libpag';

const pagCanvas = ref<HTMLCanvasElement | null>(null);
const router = useRouter();

const addLog = () => {
  router.push('/login');
};

onMounted(async () => {
  if (!pagCanvas.value) {
    console.error('Canvas element not found');
    return;
  }

  // 初始化 libpag
  const PAG = await PAGInit();

  // 加载 PAG 文件
  const pagUrl = '/portal.pag';
  try {
    const response = await fetch(pagUrl);
    const buffer = await response.arrayBuffer();
    const pagFile = await PAG.PAGFile.load(buffer);

    // 创建 PAG 视图并初始化
    const pagView = await PAG.PAGView.init(pagFile, pagCanvas.value);
    if (pagView) {
      pagView.setRepeatCount(0); // 设置循环播放

      // 修复：使用直接属性访问或数值常量
      // 方法1: 检查 PAGScaleMode 是否直接作为 PAG 的属性
      if (PAG.PAGScaleMode) {
        pagView.setScaleMode(PAG.PAGScaleMode.Stretch);
      } else if (PAG.ScaleMode) {
        // 有些版本可能使用 PAG.ScaleMode
        pagView.setScaleMode(PAG.ScaleMode.Stretch);
      } else {
        // 方法2: 使用数值常量
        pagView.setScaleMode(1);
      }
      await pagView.play(); // 播放动画
    }
  } catch (error) {
    console.error('Failed to load or play PAG file:', error);
  }
});
</script>

<template>
  <div class="fullscreen-container">
    <div class="header-bar">
      <AFlex justify="space-between" class="header-top" align="center">
        <div>
          <img class="aside-header-logo" src="@/assets/img/logo.png" />
        </div>
        <AFlex class="text-top">
          <div class="text-color">首页</div>
          <div>产品介绍</div>
          <div>关于我们</div>
        </AFlex>
        <div>
          <AButton type="primary" class="button-style" @click="addLog">立即体验</AButton>
        </div>
      </AFlex>
      <AFlex justify="center">
        <div class="portal-text">
          <div>智能能耗指挥官</div>
          <div>AI动态调控冷热平衡</div>
          <AButton type="primary" @click="addLog" class="lord-button-style">立即体验</AButton>
        </div>
      </AFlex>
    </div>
    <canvas ref="pagCanvas" class="fullscreen-canvas"></canvas>
  </div>
</template>

<style lang="scss" scoped>
.text-top .text-color {
  color: var(--antd-color-primary-hover);
}

.text-top > div {
  margin-left: 56px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #333;
  text-align: justify;
  cursor: pointer;
}

.lord-button-style {
  width: 172px;
  height: 56px;
  margin-top: 32px;
  border-radius: 28px;
}

.portal-text {
  margin-top: 85px;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 56px;
  color: #333;
  text-align: center;
}

.button-style {
  width: 112px;
  height: 48px;
  border-radius: 24px;
}

.header-top {
  width: 100%;
  height: 80px;
  padding: 0 80px;
}

.aside-header-logo {
  width: 48px;
  height: 48px;
}

.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 269px;
  background: linear-gradient(180deg, #fff 0%, rgb(230 229 228 / 0%) 100%);
}

.fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>