为每个界面添加banner图，并加入动画

blog/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
         "@kangc/v-md-editor": "^2.3.15",
+        "animate.css": "^4.1.1",
         "axios": "^1.1.3",
         "element-plus": "^2.2.20",
         "pinia": "^2.0.23",
@@ -708,6 +709,11 @@
         "uri-js": "^4.2.2"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -7370,6 +7376,11 @@
         "uri-js": "^4.2.2"
       }
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",

blog/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
     "@kangc/v-md-editor": "^2.3.15",
+    "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "element-plus": "^2.2.20",
     "pinia": "^2.0.23",

blog/src/App.vue

@@ -1,9 +1,13 @@
 <template>
   <Header />
+  <!-- <div class="home-banner" v-if="$router.currentRoute.value.path === '/'"></div>
   <main class="main-wrap">
     <div class="content">
       <router-view></router-view>
     </div>
+  </main> -->
+  <main>
+    <router-view></router-view>
   </main>
   <Footer />
   <el-backtop :right="50" :bottom="70" :visibility-height="100" />
@@ -15,14 +19,14 @@ import Footer from '@/components/Footer.vue'
 </script>
 
 <style lang="scss" scoped>
-.main-wrap {
+// .main-wrap {
-  display: flex;
+//   display: flex;
-  justify-content: center;
+//   justify-content: center;
-  align-items: center;
+//   align-items: center;
-  margin: 10px 0;
+//   margin: 10px 0;
-  .content {
+//   .content {
-    width: 65%;
+//     width: 65%;
-    // margin-top: 50px;
+//     // margin-top: 50px;
-  }
+//   }
-}
+// }
 </style>

blog/src/assets/scss/index.scss

@@ -1,4 +1,5 @@
 @import './element.scss';
+@import './mine.scss';
 
 * {
   margin: 0;

blog/src/assets/scss/mine.scss

@@ -0,0 +1,8 @@
+.m-content {
+  margin: 20px auto;
+  width: 65%;
+}
+
+.m-banner {
+  height: 400px;
+}

blog/src/components/Banner.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="m-banner animate__animated animate__slideInDown"
+    :style="{ background: 'url(' + props.bannerUrl + ') center center / cover no-repeat' }"
+  ></div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  bannerUrl: String
+})
+</script>
+
+<style lang="scss" scoped></style>

blog/src/components/Header.vue

@@ -1,11 +1,11 @@
 <template>
-  <header class="header">
+  <header class="header" ref="menu">
     <el-menu
       :default-active="navActive"
       mode="horizontal"
       background-color="rgba(0, 0, 0, 0)"
       text-color="#000"
-      active-text-color="#5698c3"
+      active-text-color="#FB3B49"
       @select="handleSelect"
       router="true"
     >
@@ -25,9 +25,10 @@
 
 <script setup>
 import { Search } from '@element-plus/icons-vue'
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
+const menu = ref()
 const navActive = ref('/')
 const router = useRouter()
 
@@ -36,6 +37,23 @@ watch(router.currentRoute, () => {
   navActive.value = router.currentRoute.value.path
   console.log(navActive.value)
 })
+
+onMounted(() => {
+  // 监听滚动条位置
+  window.addEventListener('scroll', scrollTop, true)
+})
+
+// 实时滚动条高度
+const scrollTop = () => {
+  const scroll = document.documentElement.scrollTop || document.body.scrollTop
+  if (scroll > 0) {
+    menu.value.style.backgroundColor = '#fff'
+    menu.value.style.boxShadow = '0px 2px #eee'
+  } else {
+    menu.value.style.backgroundColor = 'rgba(0, 0, 0, 0)'
+    menu.value.style.boxShadow = 'none'
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -44,13 +62,14 @@ watch(router.currentRoute, () => {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  box-shadow: 0px 2px #eee;
+  // box-shadow: 0px 2px #eee;
-  background-color: #fff;
+  // background-color: rgba(0, 0, 0, 0);
   padding: 0 30px;
   box-sizing: border-box;
-  // position: fixed;
+  position: fixed;
-  // top: 0;
+  top: 0;
-  // z-index: 999;
+  z-index: 999;
+  transition-duration: 0.7s;
 }
 .right-header {
   display: flex;
@@ -62,7 +81,6 @@ watch(router.currentRoute, () => {
   }
 }
 .el-menu {
-  box-shadow: 0px 2px #eee;
   width: 60%;
 }
 .el-menu-item {

blog/src/main.js

@@ -8,13 +8,11 @@ import 'virtual:svg-icons-register'
 import SvgIcon from './assets/svg/SvgIcon.vue'
 import VMdPreview from '@kangc/v-md-editor/lib/preview'
 import '@kangc/v-md-editor/lib/style/preview.css'
-// VuePress主题以及样式（这里也可以选择github主题）
 import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
 import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
-// Prism
 import Prism from 'prismjs'
-// 代码高亮
 import 'prismjs/components/prism-json'
+import 'animate.css'
 
 // 选择使用主题
 VMdPreview.use(vuepressTheme, {

blog/src/views/about/About.vue

@@ -1,10 +1,20 @@
 <template>
+  <Banner :bannerUrl="data.bannerUrl" />
+  <div class="m-content">
     <el-card shadow="hover" class="aboutme">
       <v-md-preview :text="blog"></v-md-preview>
     </el-card>
+  </div>
 </template>
 
 <script setup>
+import Banner from '@/components/Banner.vue'
+import { ref } from 'vue'
+
+const data = ref({
+  bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-p931d9.png'
+})
+
 const blog = `
 ## Welcome!
 

blog/src/views/archive/Archive.vue

@@ -1,7 +1,17 @@
 <template>
+  <Banner :bannerUrl="data.bannerUrl" />
+  <div class="m-content">
     <el-card shadow="hover">Archives</el-card>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Banner from '@/components/Banner.vue'
+import { ref } from 'vue'
+
+const data = ref({
+  bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-1p38v3.png'
+})
+</script>
 
 <style lang="scss" scoped></style>

blog/src/views/article/Article.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="m-content">
     <el-row :gutter="20">
       <el-col :span="18">
         <el-card shadow="hover" class="article">
@@ -19,6 +20,7 @@
         </el-card>
       </el-col>
     </el-row>
+  </div>
 </template>
 
 <script setup>

blog/src/views/category/Category.vue

@@ -1,7 +1,17 @@
 <template>
+  <Banner :bannerUrl="data.bannerUrl" />
+  <div class="m-content">
     <el-card shadow="hover">Categories</el-card>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Banner from '@/components/Banner.vue'
+import { ref } from 'vue'
+
+const data = ref({
+  bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-kxw9o1.png'
+})
+</script>
 
 <style lang="scss" scoped></style>

blog/src/views/home/Home.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="home-banner animate__animated animate__fadeIn"></div>
+  <div class="m-content">
     <el-row :gutter="20">
       <el-col :span="18">
         <BlogList />
@@ -8,6 +10,7 @@
         <UserInfo />
       </el-col>
     </el-row>
+  </div>
 </template>
 
 <script setup>
@@ -16,7 +19,9 @@ import UserInfo from '../../components/UserInfo.vue'
 </script>
 
 <style lang="scss" scoped>
-.home-container {
+.home-banner {
-  width: 100%;
+  background: url('https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-x6l5vl.jpg')
+    center center / cover no-repeat;
+  height: 100vh;
 }
 </style>

blog/src/views/tag/Tag.vue

@@ -1,7 +1,17 @@
 <template>
+  <Banner :bannerUrl="data.bannerUrl" />
+  <div class="m-content">
     <el-card shadow="hover">Tags</el-card>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Banner from '@/components/Banner.vue'
+import { ref } from 'vue'
+
+const data = ref({
+  bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-kxw3p1.jpg'
+})
+</script>
 
 <style lang="scss" scoped></style>