2 files changed, 29 insertions, 5 deletions
diff --git a/site/src/views/index/Right.vue b/site/src/views/index/Right.vue
index ba8f294..f87d167 100644
--- a/site/src/views/index/Right.vue
+++ b/site/src/views/index/Right.vue
@@ -2,7 +2,7 @@
 import Notepad from './Notepad/index.vue'
 import DocumentationIcon from '@/components/icons/IconDocumentation.vue'
 import { getChangeLog } from './Notepad/changelog'
-
+import { computed } from 'vue'
 
 export default {
   data() {
@@ -47,13 +47,17 @@ export default {
     }
   },
   beforeCreate() {
-    getChangeLog().then(res => {
+    changeLogMessage.value.then((res) => {
       this.changeLogMessage = res;
       this.change_page(this.mainPage);
-    })
+    });
   },
 }
 
+const changeLogMessage = computed(() => {
+    return getChangeLog();
+})
+
 </script>
 
 <template>
diff --git a/site/src/views/index/index.vue b/site/src/views/index/index.vue
index edba96f..14759b8 100644
--- a/site/src/views/index/index.vue
+++ b/site/src/views/index/index.vue
@@ -3,9 +3,27 @@ import Left from './Left.vue'
 import Right from './Right.vue'
 </script>
 
+<script lang="ts">
+export default {
+  data() {
+    return {
+      isplay: false
+    }
+  },
+  methods: {
+    PlayOn() {
+      this.isplay = true
+    }
+  }
+}
+</script>
+
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="@/assets/Hydroroll-small.svg" width="125" height="125" />
+    <img src="@/assets/Hydroroll-small.svg" 
+      alt="Vue logo" 
+      class="logo" 
+      width="125" height="125" />
 
     <div class="wrapper">
       <Left msg="饼在画了！" />
@@ -13,7 +31,9 @@ import Right from './Right.vue'
   </header>
 
   <main class="main">
-    <video src="@/assets/video/bg.mp4" loop=true autoplay=true></video>
+    <video loop=true preload="auto" muted="true" autoplay @canplay="PlayOn" v-show="isplay" >
+      <source src="@/assets/video/bg.mp4" type="video/mp4" />
+    </video>
     <Right />
   </main>
 </template>