perf(views): 编写首页

src/views/PortalIndex.vue

@@ -0,0 +1,154 @@
+<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>