引入开场视频等小优化

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",

src/views/EntryList.vue

@@ -19,7 +19,10 @@
       </div>
     </Transition>
 
-    <ul class="entry-list">
+    <ul
+      v-show="!isShowForeword || hasShownForword"
+      class="entry-list"
+    >
       <li
         v-for="idx in 6"
         :key="idx"

src/views/HomeView.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="home">
-    <div class="btn-group">
-      <button @click="onClickBegin">
-        开始探索
-      </button>
-      <button
-        id="copy-text"
-        :data-clipboard-text="shareUrl"
-        data-clipboard-action="copy"
-        @click="onClickCopy"
+    <video
+      src="@/assets/videos/startup.mp4"
+      autoplay
+      playsinline
+      webkit-playsinline="true"
+      muted
+    />
+    <Transition name="fade-in">
+      <div
+        v-show="isShowBtnGroup"
+        class="btn-group"
       >
-        分享
-      </button>
-    </div>
+        <button @click="onClickBegin">
+          开始探索
+        </button>
+        <button
+          id="copy-text"
+          :data-clipboard-text="shareUrl"
+          data-clipboard-action="copy"
+          @click="onClickCopy"
+        >
+          分享
+        </button>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -20,6 +32,7 @@
 import Clipboard from "clipboard"
 import { showToast } from "@/store/index.js"
 import { useRoute, useRouter } from "vue-router"
+import { ref } from "vue"
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -28,6 +41,11 @@ const {
 const route = useRoute()
 const router = useRouter()
 
+const isShowBtnGroup = ref(false)
+setTimeout(() => {
+  isShowBtnGroup.value = true
+}, 2500)
+
 const shareUrl = location.origin + location.pathname
 function onClickBegin() {
   router.push({
@@ -51,10 +69,18 @@ function onClickCopy() {
   top: 0;
   width: 100%;
   height: 100%;
-  background-image: url(@/assets/images/cover-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
+  // background-image: url(@/assets/images/cover-bg.jpg);
+  // background-size: cover;
+  // background-repeat: no-repeat;
+  // background-position: center center;
+  >video{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
   >.btn-group{
     position: absolute;
     bottom: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));