add new

package-lock.json

@@ -8,6 +8,7 @@
       "name": "blog_front",
       "version": "0.0.0",
       "dependencies": {
+        "animejs": "^3.2.2",
         "ant-design-vue": "^4.2.1",
         "axios": "^1.7.2",
         "echarts": "^5.5.0",
@@ -882,6 +883,11 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
+    "node_modules/animejs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
+      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
+    },
     "node_modules/ansi-styles": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "animejs": "^3.2.2",
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.2",
     "echarts": "^5.5.0",

src/App.vue

@@ -1,7 +1,6 @@
 <template>
-  <Simplebar style="height: 100vh;overflow: auto;">
     <RouterView/>
-  </Simplebar>
+  <!-- </Simplebar> -->
 </template>
 
 <script setup lang="ts">
@@ -10,5 +9,7 @@ import 'simplebar-vue/dist/simplebar.min.css';
 </script>
 
 <style>
-
+html{
+  overflow: hidden;
+}
 </style>

src/components/admin/MainWrapper.vue

@@ -46,6 +46,7 @@ import { get } from "@/tools/request"
 import { message } from 'ant-design-vue';
 import { useAuthStore } from '@/store/index'
 import { BlogOutLined, SystemOutLined, PhotoOutLined, FileOutLined, DiaryOutLined, CommentOutLined, TypeOutLined } from "@/assets"
+
 const state = reactive({
   collapsed: false,
   openKeys: [1],

src/components/blogs/HomePage.vue

@@ -1,11 +1,131 @@
 <template>
-    <div>ceshi</div>
+    <Simplebar style="height: 100vh;overflow: auto;" @scroll="handleScroll">
+        <div class="menu" v-if="show_menu">
+            <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;" />
+            <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
+        </div>
+        <div class="carouse">
+            <a-carousel autoplay>
+                <div class="img"><img src="/src/assets/images/nav1.png" alt=""></div>
+                <div class="img"><img src="/src/assets/images/nav10.png" alt=""></div>
+                <div class="img"><img src="/src/assets/images/nav13.png" alt=""></div>
+            </a-carousel>
+            
+        </div>
+    </Simplebar>
 </template>
+<script lang="ts" setup>
+import Simplebar from 'simplebar-vue';
+import 'simplebar-vue/dist/simplebar.min.css';
+import { h, ref } from 'vue';
+import { MenuProps } from 'ant-design-vue/es/menu';
+import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
+const current = ref<string[]>(['mail']);
+const show_menu = ref(false);
+const handleScroll = () => {
+    const scrollbar = document.querySelector('.simplebar-content-wrapper');
+    if (scrollbar) {
+        const scrollOffset = scrollbar.scrollTop;
+        const halfViewportHeight = scrollbar.clientHeight / 2;
+        show_menu.value = scrollOffset > halfViewportHeight;
+    }
+};
+const items = ref<MenuProps['items']>([
+    {
+        key: 'home',
+        icon: () => h(HomeOutlined),
+        label: '首页',
+        title: '首页',
+    },
+    {
+        key: 'blog',
+        icon: () => h(HighlightOutlined),
+        label: '博客',
+        title: '博客',
+    },
+    {
+        key: 'diary',
+        icon: () => h(ProfileOutlined),
+        label: '日记',
+        title: '日记',
+    },
+    {
+        key: 'album',
+        icon: () => h(CameraOutlined),
+        label: '相册',
+        title: '相册',
+        children: [
+            {
+                label: '相册1',
+                key: 'album1',
+            },
+            {
+                label: '相册2',
+                key: 'album2',
+            },
+            {
+                label: '相册3',
+                key: 'album3',
+            },
+            {
+                label: '相册4',
+                key: 'album4',
+            },
+        ],
+    },
+    {
+        key: 'aboutme',
+        icon: () => h(UsergroupDeleteOutlined),
+        label: '关于sunfree',
+        title: '关于sunfree',
+    },
+]);
+const value = ref<string>('');
+const onSearch = (searchValue: string) => {
+    console.log('use value', searchValue);
+    console.log('or use this.value', value.value);
+};
 
-<script setup lang='ts'>
 
 </script>
+<style scoped>
+.menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
+    width: 100%;
+    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+    position: fixed;
+    background-color: white;
+    transform: translateX(-50%);
+    top: 0;
+    left: 50%;
+    z-index: 999;
+}
+
+.menu>* {
+    margin: 0 24px;
+}
+
+:deep(.slick-slide) {
+    text-align: center;
+    height: 100vh;
+    line-height: 160px;
+    background: #364d79;
+    overflow: hidden;
+}
+
+:deep(.slick-slide h3) {
+    color: #fff;
+}
+
+button {
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+}
 
-<style>
 
 </style>

src/components/blogs/ceshi.vue

@@ -0,0 +1,32 @@
+<template>
+  <div ref="animeRef" style="font-size: 36px;">你石头很大的朱</div>
+</template>
+
+<script>
+import anime from 'animejs';
+
+export default {
+  mounted() {
+    const textWrapper = this.$refs.animeRef;
+    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
+
+    anime.timeline({loop: false})
+      .add({
+        targets: '.letter',
+        scale: [4,1],
+        opacity: [0,1],
+        translateZ: 0,
+        easing: "easeOutExpo",
+        duration: 950,
+        delay: (el, i) => 70*i
+      });
+  }
+}
+</script>
+
+<style>
+.letter {
+  display: inline-block;
+  line-height: 1em;
+}
+</style>

src/router/home.ts

@@ -10,6 +10,11 @@ const homeRoute:Array<RouteRecordRaw>=[
       path: "/login",
       name: "login",
       component: () => import("@/components/admin/SignIn.vue"),
+    },
+    {
+      path:"/ceshi",
+      name:"ceshi",
+      component:()=>import("@/components/blogs/ceshi.vue")
     }
 ]
 export default homeRoute

src/types/custom.d.ts

@@ -1,2 +1,4 @@
 declare module 'ant-design-vue';
 declare module 'echarts';
+declare module 'ant-design-vue/es/menu'
+declare module 'animejs/lib/anime.es.js'