diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 1d19666f59fd0f4e8fc8d5a2e8e956adb32186bd..793a80aeb376870cee89e649ab8ec653d0493e78 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,3 +1,4 @@
+// 公共样式入口文件
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
diff --git a/src/components/animation/VopPlayer.vue b/src/components/animation/VopPlayer.vue
deleted file mode 100644
index 702cf6aa3c311c419f1a1402f035f4ec31a748de..0000000000000000000000000000000000000000
--- a/src/components/animation/VopPlayer.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
- <div class="vap-container">
-
- </div>
-</template>
-
-<script lang="ts" setup>
-// @ts-ignore
-import Vap from 'video-animation-player';
-import videoUrl from "@/assets/animation/demo.mp4"
-// import videoConfigUrl from "@/assets/animation/demo.json"
-import axios from 'axios';
-
-console.log(videoUrl, 11)
-
-axios.get('/src/assets/animation/demo.json') // 替换为您的JSON文件路径
-      .then(res => {
-        console.log(res, 22222222)
-      })
-      .catch(error => {
-        console.error('Error fetching JSON file:', error);
-      });
-
-const options = reactive<any>({
-  container: '', // dom容器
-  src: videoUrl, // mp4视频地址
-  config: '', // 配置json对象（详情见下文）
-  width: 400, // 宽度
-  height: 300, // 高度
-  fps: '', // 动画帧数（生成素材时在工具中填写的fps值）
-  mute: true, // 是否对视频静音
-  loop: false, // 是否循环
-  type: '', // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
-  beginPoint: '', // 起始播放时间点(单位秒),在一些浏览器中可能无效
-  fontStyle: '', // 融合字体样式用法参考(https://github.com/Tencent/vap/pull/101)
-  accurate: true, // 是否启用精准模式（使用requestVideoFrameCallback提升融合效果，浏览器不兼容时自动降级）
-  precache: '', // 是否预加载视频资源（默认关闭，即边下边播）
-  // 组件销毁时回调
-  onDestory: () => { 
-
-  }, 
-  // 加载失败回调
-  onLoadError: () => { 
-
-  },
-  ext: '', // 融合参数（和json配置文件中保持一致）
-})
-
-// const vapApp = new Vap({
-//   container
-// })
-
-
-</script>
-
-<style lang='scss' scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/layout/MainLayout.vue b/src/components/layout/MainLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b86bb8328d637b2b215b841a187e38270791472a
--- /dev/null
+++ b/src/components/layout/MainLayout.vue
@@ -0,0 +1,22 @@
+<template>
+ <div class="h-screen flex justify-between flex-col">
+    <div class="grow-0">
+      <slot name="header"></slot>
+    </div>
+    <div class="h-screen grow">
+      <slot name="main"></slot>
+    </div>
+    <div class="grow-0">
+      <slot name="footer"></slot>
+    </div>
+    <div></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/modules/animation/Animation.vue b/src/modules/animation/Animation.vue
index acceb3833186e329c2adfa1d85077875717e0cef..c794e3d4ee69a1624fe4ebca1f65e0a4f4d890ae 100644
--- a/src/modules/animation/Animation.vue
+++ b/src/modules/animation/Animation.vue
@@ -64,7 +64,7 @@ const handleVop = () => {
     })
     .on("frame", (frame: any, timestamp: any) => {
       // frame: 当前帧(从0开始)  timestamp: (播放时间戳)
-      // console.log(frame, "-------", timestamp);
+      console.log(frame, "-------", timestamp);
       if (frame === 50) {
         // do something
       }
diff --git a/src/modules/layout/Layout.vue b/src/modules/layout/Layout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50d3506bb5f2ec44eb1f4988ec0d79e920f0dbf4
--- /dev/null
+++ b/src/modules/layout/Layout.vue
@@ -0,0 +1,82 @@
+<template>
+  <main-Layout>
+    <template #header>
+      <div class="header-container bg-black">
+        <div class="nav-list h-full flex justify-start text-white">
+          <n-popover trigger="manual" :show="showPopover">
+            <template #trigger>
+              <div
+                @mouseenter="navMouseEnter"
+                @mouseleave="navMouseLeave"
+                class="nav-item flex justify-center items-center cursor-pointer font-bold"
+                :class="[showPopover ? 'text-white' : 'text-aaa']"
+              >
+                <span class="nav-text">产品</span>
+                <span class="nav-triangle"></span>
+              </div>
+            </template>
+            <div class="">
+              <div>111</div>
+              <div>222</div>
+            </div>
+          </n-popover>
+          <div class="nav-item cursor-pointer font-bold">导航</div>
+          <div class="nav-item cursor-pointer font-bold">支持</div>
+        </div>
+      </div>
+    </template>
+    <template #main>
+      main
+    </template>
+    <template #footer>
+      <div class="bg-black text-white">
+        footer
+      </div>
+    </template>
+  </main-Layout>
+</template>
+
+<script lang="ts" setup>
+import { NPopover } from 'naive-ui'
+
+const showPopover = ref<boolean>(false)
+
+const navMouseEnter = (e: any) => {
+  console.log(e)
+  showPopover.value = true
+}
+
+const navMouseLeave = (e: any) => {
+  console.log(e)
+  showPopover.value = false
+}
+
+
+</script>
+
+<style lang='scss' scoped>
+.header-container {
+  height: 84px;
+  padding-left: 220px;
+}
+.nav-list {
+  .nav-item {
+    padding: 0 3.5vw;
+    font-size: 18px;
+    .nav-text {
+      margin-right: 20px;
+    }
+    .nav-triangle {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-top: 6px;
+      color: #fff;
+      border-top: 5px solid #aaa;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/layout/index.html b/src/modules/layout/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f7aeb99e1c7dfb4efcc9bd1cf8ad04eb2d4861a6
--- /dev/null
+++ b/src/modules/layout/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>layout</title>
+  </head>
+  <body>
+    <div id="layout"></div>
+    <script type="module" src="./layout.ts"></script>
+  </body>
+</html>
diff --git a/src/modules/layout/layout.ts b/src/modules/layout/layout.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10d514eda4cea101a8b914da9df7c9245ebed475
--- /dev/null
+++ b/src/modules/layout/layout.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import Layout from './Layout.vue'
+import '@/assets/styles/index.scss'
+
+createApp(Layout).mount('#layout')
diff --git a/tailwind.config.js b/tailwind.config.js
index c24095543161da3bdce82b93ab5f6f76eb739cb6..07c053cf4dafb035c616a1035ecbc3be32cdb760 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       inset: {
       },
       textColor: {
+        'aaa': '#aaa',
       },
       backgroundColor: {
       },