From 9d6c5ce7d6af32bb18e21f71870522392d37f1b2 Mon Sep 17 00:00:00 2001
From: liuyx <1517482303@qq.com>
Date: Sun, 13 Nov 2022 17:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E6=AF=8F=E4=B8=AA=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0banner=E5=9B=BE=EF=BC=8C=E5=B9=B6=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A5=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog/package-lock.json               | 11 ++++++++
 blog/package.json                    |  1 +
 blog/src/App.vue                     | 24 +++++++++-------
 blog/src/assets/scss/index.scss      |  1 +
 blog/src/assets/scss/mine.scss       |  8 ++++++
 blog/src/components/Banner.vue       | 16 +++++++++++
 blog/src/components/Header.vue       | 36 ++++++++++++++++++------
 blog/src/main.js                     |  4 +--
 blog/src/views/about/About.vue       | 16 +++++++++--
 blog/src/views/archive/Archive.vue   | 14 ++++++++--
 blog/src/views/article/Article.vue   | 42 +++++++++++++++-------------
 blog/src/views/category/Category.vue | 14 ++++++++--
 blog/src/views/home/Home.vue         | 27 ++++++++++--------
 blog/src/views/tag/Tag.vue           | 14 ++++++++--
 14 files changed, 166 insertions(+), 62 deletions(-)
 create mode 100644 blog/src/assets/scss/mine.scss
 create mode 100644 blog/src/components/Banner.vue

diff --git a/blog/package-lock.json b/blog/package-lock.json
index aea11d7..16ecebc 100644
--- a/blog/package-lock.json
+++ b/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",
diff --git a/blog/package.json b/blog/package.json
index a3d3636..2854f19 100644
--- a/blog/package.json
+++ b/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",
diff --git a/blog/src/App.vue b/blog/src/App.vue
index 7664874..4c26142 100644
--- a/blog/src/App.vue
+++ b/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 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 10px 0;
-  .content {
-    width: 65%;
-    // margin-top: 50px;
-  }
-}
+// .main-wrap {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   margin: 10px 0;
+//   .content {
+//     width: 65%;
+//     // margin-top: 50px;
+//   }
+// }
 </style>
diff --git a/blog/src/assets/scss/index.scss b/blog/src/assets/scss/index.scss
index a29e819..8ffcb3a 100644
--- a/blog/src/assets/scss/index.scss
+++ b/blog/src/assets/scss/index.scss
@@ -1,4 +1,5 @@
 @import './element.scss';
+@import './mine.scss';
 
 * {
   margin: 0;
diff --git a/blog/src/assets/scss/mine.scss b/blog/src/assets/scss/mine.scss
new file mode 100644
index 0000000..9d4ab96
--- /dev/null
+++ b/blog/src/assets/scss/mine.scss
@@ -0,0 +1,8 @@
+.m-content {
+  margin: 20px auto;
+  width: 65%;
+}
+
+.m-banner {
+  height: 400px;
+}
\ No newline at end of file
diff --git a/blog/src/components/Banner.vue b/blog/src/components/Banner.vue
new file mode 100644
index 0000000..aa45c0c
--- /dev/null
+++ b/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>
diff --git a/blog/src/components/Header.vue b/blog/src/components/Header.vue
index 894234e..3e802e8 100644
--- a/blog/src/components/Header.vue
+++ b/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;
-  background-color: #fff;
+  // box-shadow: 0px 2px #eee;
+  // background-color: rgba(0, 0, 0, 0);
   padding: 0 30px;
   box-sizing: border-box;
-  // position: fixed;
-  // top: 0;
-  // z-index: 999;
+  position: fixed;
+  top: 0;
+  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 {
diff --git a/blog/src/main.js b/blog/src/main.js
index 990684b..90481bb 100644
--- a/blog/src/main.js
+++ b/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, {
diff --git a/blog/src/views/about/About.vue b/blog/src/views/about/About.vue
index 1a09391..688d135 100644
--- a/blog/src/views/about/About.vue
+++ b/blog/src/views/about/About.vue
@@ -1,10 +1,20 @@
 <template>
-  <el-card shadow="hover" class="aboutme">
-    <v-md-preview :text="blog"></v-md-preview>
-  </el-card>
+  <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!
 
diff --git a/blog/src/views/archive/Archive.vue b/blog/src/views/archive/Archive.vue
index ff61318..8bd42bf 100644
--- a/blog/src/views/archive/Archive.vue
+++ b/blog/src/views/archive/Archive.vue
@@ -1,7 +1,17 @@
 <template>
-  <el-card shadow="hover">Archives</el-card>
+  <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>
diff --git a/blog/src/views/article/Article.vue b/blog/src/views/article/Article.vue
index 3fd5476..6056b1d 100644
--- a/blog/src/views/article/Article.vue
+++ b/blog/src/views/article/Article.vue
@@ -1,24 +1,26 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="18">
-      <el-card shadow="hover" class="article">
-        <v-md-preview :text="blog" ref="preview"></v-md-preview>
-      </el-card>
-    </el-col>
-    <el-col :span="6">
-      <el-card shadow="hover" class="directory">
-        <h3>目录</h3>
-        <div
-          v-for="anchor in directory"
-          :key="anchor"
-          :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
-          @click="handleAnchorClick(anchor)"
-        >
-          <a style="cursor: pointer">{{ anchor.title }}</a>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
+  <div class="m-content">
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <el-card shadow="hover" class="article">
+          <v-md-preview :text="blog" ref="preview"></v-md-preview>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="directory">
+          <h3>目录</h3>
+          <div
+            v-for="anchor in directory"
+            :key="anchor"
+            :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
+            @click="handleAnchorClick(anchor)"
+          >
+            <a style="cursor: pointer">{{ anchor.title }}</a>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
diff --git a/blog/src/views/category/Category.vue b/blog/src/views/category/Category.vue
index 26f9de9..6d6f0b3 100644
--- a/blog/src/views/category/Category.vue
+++ b/blog/src/views/category/Category.vue
@@ -1,7 +1,17 @@
 <template>
-  <el-card shadow="hover">Categories</el-card>
+  <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>
diff --git a/blog/src/views/home/Home.vue b/blog/src/views/home/Home.vue
index 1d960ba..b2b7092 100644
--- a/blog/src/views/home/Home.vue
+++ b/blog/src/views/home/Home.vue
@@ -1,13 +1,16 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="18">
-      <BlogList />
-    </el-col>
-    <el-col :span="6"
-      ><div class="grid-content ep-bg-purple" />
-      <UserInfo />
-    </el-col>
-  </el-row>
+  <div class="home-banner animate__animated animate__fadeIn"></div>
+  <div class="m-content">
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <BlogList />
+      </el-col>
+      <el-col :span="6"
+        ><div class="grid-content ep-bg-purple" />
+        <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 {
-  width: 100%;
+.home-banner {
+  background: url('https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-x6l5vl.jpg')
+    center center / cover no-repeat;
+  height: 100vh;
 }
 </style>
diff --git a/blog/src/views/tag/Tag.vue b/blog/src/views/tag/Tag.vue
index 254672c..0fbeaca 100644
--- a/blog/src/views/tag/Tag.vue
+++ b/blog/src/views/tag/Tag.vue
@@ -1,7 +1,17 @@
 <template>
-  <el-card shadow="hover">Tags</el-card>
+  <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>