更新入口页动画背景

onresize · Jun 17, 2024 · f65b84b · f65b84b
1 parent ee9c091
commit f65b84b
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 8 deletions.
diff --git a/docs/.vuepress/layouts/Layout.vue b/docs/.vuepress/layouts/Layout.vue
@@ -36,8 +36,9 @@ const getCommit = () => {
 getCommit()
 
 const state = reactive({
-  showPageBottom: false,
+  showPageBottom: true,
   onLinNum: 0,
+  showHeaderNavBar: true,
 })
 
 const themeConfig = {
@@ -86,9 +87,15 @@ const route = useRoute()
 watch(
   () => route.path,
   async (val) => {
+    console.log('监听route.path:', decodeURI(val))
     await nextTick()
     state.showPageBottom = decodeURI(val).includes('/工具/') ? false : true
-    // console.log('监听route.path:', decodeURI(val), state.showPageBottom)
+    if (val === '/') {
+      state.showPageBottom = false
+      state.showHeaderNavBar = true
+    } else {
+      state.showHeaderNavBar = false
+    }
   },
   {
     flush: 'post',
@@ -137,8 +144,9 @@ onUnmounted(() => {
   <Fps v-show="state.showPageBottom" />
 
   <ParentLayout>
-    <!-- <template #navbar>
-    </template> -->
+    <template #navbar>
+      <div v-if="state.showHeaderNavBar"></div>
+    </template>
 
     <template #page-bottom v-if="state.showPageBottom">
       <div class="my-footer">

diff --git a/docs/.vuepress/public/bg.png b/docs/.vuepress/public/bg.png
diff --git a/docs/.vuepress/public/circle.png b/docs/.vuepress/public/circle.png
diff --git a/docs/README.md b/docs/README.md
@@ -17,8 +17,15 @@ features:
     footer: null
 ---
 
-<div class="home-bg-container">
+<!-- <div class="home-bg-container">
   <div class="home-bg"></div>
+</div> -->
+
+<div class="g-c-box">
+  <div class="g-container">
+    <div class="g-bg"></div>
+    <div class="g-circle"></div>
+  </div>
 </div>
 
 <style>
@@ -27,7 +34,8 @@ body {
 }
 
 .home .features {
-  border-top: 1px solid #eaecef !important;
+  /* border-top: 1px solid #eaecef !important; */
+  border-top: 1px dashed rgba(0, 0, 0, 0.05) !important;
 }
 
 .home-bg-container {
@@ -54,9 +62,78 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  background: url('/bg-heading.png') repeat;
-  background-size: auto;
+  /* background: url('/bg-heading.png') repeat;
+  background-size: auto; */
   /* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z+AAAABmJLR0QA/wD/A+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJF+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=); */
+}
+
+#main-title {
+  /* color: #ADBAC7 !important; */
+  color: #f5f5f5 !important;
+}
+
+.feature > h2,p {
+  /* color: #96A7B7 !important; */
+  color: #f5f5f5 !important;
+}
+.actions a {
+    color: #f5f5f5 !important;
+}
+
+.g-c-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  background: #000 !important;
+}
+
+.g-container {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.g-bg {
+  width: 100%;
+  height: 100%;
+  background: url('/bg.png');
+  background-size: cover;
+  background-position: center;
+  z-index: 1;
+}
+
+.g-circle {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  width: 400px;
+  height: 400px;
+  background: url('/circle.png');
+  /* filter: invert(0.8); */
+  background-size: cover;
+  animation: scale 8s infinite;
+}
 
+@keyframes scale {
+  0% {
+    transform: translate(-50%, -50%) scale(0.5);
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(10);
+    opacity: 0;
+  }
 }
 </style>