add new

src/components/blogs/HomePage.vue

@@ -3,7 +3,7 @@
         <!-- 头部导航菜单 -->
         <div class="headerMenu" v-if="show_menu">
             <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;"
-                @click="menuClick" />
+                @click="menuClick" @select="menuSelect"/>
             <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
         </div>
         <div class="author" v-if="show_author"></div>
@@ -26,7 +26,7 @@
         </div>
 
         <!-- 主要内容区域 -->
-        <div class="mainContainer">
+        <div class="mainContainer" :style="mainCss">
             <div class="leftBar">
                 <a-card hoverable>
                     <template #cover>
@@ -143,6 +143,7 @@ const activeKey = ref(['']);
 const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
 const customStyle =
     'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+const scrollbar=ref<Element | null>(null);
 onMounted(() => {
     // 定义home页的博客标题名
     new Typed('.author', {
@@ -291,6 +292,23 @@ onMounted(() => {
         }]
     };
     createEcharts(heat, heatMapData);
+    scrollbar.value = document.querySelector('.simplebar-content-wrapper');
+    // const storedShowMenu = localStorage.getItem('show_menu');
+    // const storedShowCarousel = localStorage.getItem('show_carousel');
+    // const storedScrollPosition = localStorage.getItem('scrollPosition');
+    // const storedMainCssMarginTop = localStorage.getItem('mainCss_marginTop');
+    // if (storedShowMenu !== null) {
+    //     show_menu.value = storedShowMenu === 'true';
+    // }
+    // if (storedShowCarousel !== null) {
+    //     show_carousel.value = storedShowCarousel === 'true';
+    // }
+    // if (storedScrollPosition !== null && scrollbar.value) {
+    //     scrollbar.value.scrollTop = parseInt(storedScrollPosition, 10);
+    // }
+    // if (storedMainCssMarginTop !== null) {
+    //     mainCss.marginTop = storedMainCssMarginTop;
+    // }
 
 })
 
@@ -298,6 +316,10 @@ onMounted(() => {
 const show_menu = ref(false);
 const show_carousel = ref(true);
 const show_author = ref(true)
+const mainCss=reactive({
+    marginTop:"0px"
+})
+
 const items = ref<MenuProps['items']>([
     {
         key: 'home',
@@ -354,36 +376,45 @@ const items = ref<MenuProps['items']>([
 const handleScrollEnabled = ref(true);
 // 定义滚动条滚到一半显示导航菜单
 const handleScroll = () => {
-    // if (!handleScrollEnabled.value) return; 
-    const scrollbar = document.querySelector('.simplebar-content-wrapper');
-    if (scrollbar) {
-        const scrollOffset = scrollbar.scrollTop;
-        const halfViewportHeight = scrollbar.clientHeight / 2;
+    if (!handleScrollEnabled.value) return; 
+    if (scrollbar.value) {
+        const scrollOffset = scrollbar.value.scrollTop;
+        const halfViewportHeight = scrollbar.value.clientHeight / 2;
         show_menu.value = scrollOffset > halfViewportHeight;
     }
 };
 
-const menuClick = ({ item }: { items: any }) => {
-    // if (item.title != "首页") {
-    show_menu.value = true;
-    show_carousel.value = false;
-    // handleScrollEnabled.value = false; 
+const menuClick = ({ item }: { item: any }) => {
+    handleScrollEnabled.value=false
+    if (scrollbar.value) {
+  }
+    if (item.url=="/" || item.url=="/home") {
+        handleScrollEnabled.value=true
+        show_carousel.value=true
+    }else{
+        show_menu.value=true
+        show_carousel.value=false
+        scrollbar.value!.scrollTop=0
+        mainCss.marginTop="48px"
+        // localStorage.setItem('show_menu', 'true');
+        // localStorage.setItem('show_carousel', 'false');
+        // localStorage.setItem('scrollPosition', '0');
+        // localStorage.setItem('mainCss_marginTop', '48px');
+    }
     router.push(item.url)
 }
-
 const current = ref<string[]>(['mail']);
 
 
 // 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离
 const downScroll = () => {
-    const scrollbar = document.querySelector('.simplebar-content-wrapper');
-    if (scrollbar) {
-        const scrollTop = scrollbar.scrollTop;
-        const viewportHeight = scrollbar.clientHeight;
-        const scrollDistance = viewportHeight - scrollTop + 48 + 48;
+    if (scrollbar.value) {
+        const scrollTop = scrollbar.value.scrollTop;
+        const viewportHeight = scrollbar.value.clientHeight;
+        const scrollDistance = viewportHeight - scrollTop -48;
 
         setTimeout(() => {
-            scrollbar.scrollBy({ top: scrollDistance, behavior: 'smooth' });
+            scrollbar.value!.scrollBy({ top: scrollDistance, behavior: 'smooth' });
         }, 300);
     }
 };
@@ -472,7 +503,7 @@ const gravatarClick = () => {
 .mainContainer {
     display: flex;
     justify-content: center;
-    /* padding-top: 48px; */
+    padding-top: 48px;
     background-color: rgba(5, 5, 5, 0.08);
 }
 

src/router/blog.ts

@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router'
 const blogRoute:Array<RouteRecordRaw>=[
     {
       path: "/",
-      redirect:"/blog",
+      redirect:"/home",
       name: "home",
       component: () => import("@/components/blogs/HomePage.vue"),
       children:[
@@ -17,6 +17,11 @@ const blogRoute:Array<RouteRecordRaw>=[
           name:"diary",
           component:()=>import("@/views/blog/DiaryContentView.vue")
         },
+        {
+          path:"/home",
+          name:"home",
+          component:()=>import("@/views/blog/HomePageView.vue")
+        },
       ]
     },
     {

src/views/blog/HomePageView.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="main">
+        <div class="mainContent" v-for="article in 2">
+            <a-badge-ribbon text="Hippies" color="black">
+                <a-card hoverable>
+                    <h2>操作系统的安装</h2>
+                    <div class="tag-group">
+                        <a-tag color="#E6E6FA">
+                            <template #icon>
+                                <RiLiLined />
+                            </template>
+                            {{ mainStatistic.mainDate }}
+                        </a-tag>
+                        <a-tag color="#6495ED">
+                            <template #icon>
+                                <YanJingLined />
+                            </template>
+                            {{ mainStatistic.mainWatchCount }}
+                        </a-tag>
+                        <a-tag color="#B0C4DE">
+                            <template #icon>
+                                <XieZiLined />
+                            </template>
+                            字数≈{{ mainStatistic.mainWordCount }}字
+                        </a-tag>
+                        <a-tag color="#20B2AA">
+                            <template #icon>
+                                <YueDuLined />
+                            </template>
+                            阅读时长≈{{ mainStatistic.mainReadCount }}分
+                        </a-tag>
+                    </div>
+                    <div class="blog-content">
+                        <div>
+                            <a-image :preview="false" :width="200"
+                                src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
+                        </div>
+                        <div class="text-container">
+                            这是内容
+                        </div>
+                    </div>
+                    <div class="read-button">
+                        <a-button type="primary" shape="round">阅读全文</a-button>
+                    </div>
+                </a-card>
+            </a-badge-ribbon>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { reactive } from 'vue';
+const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
+    mainDate: "2024-06-11",
+    mainWatchCount: "9999",
+    mainWordCount: "9999",
+    mainReadCount: "9999"
+})
+
+</script>
+
+<style scoped>
+.main {
+
+    width: 45%;
+    margin: 0 24px;
+}
+
+.main .mainContent {
+    margin-bottom: 24px;
+}
+
+.main h2 {
+    text-align: center;
+}
+
+.main .tag-group {
+    display: flex;
+    justify-content: center;
+}
+
+.main .tag-group>* {
+    color: black;
+    margin: 0 12px;
+}
+
+.main .blog-content {
+    display: flex;
+    margin: 48px;
+}
+
+.main .blog-content>:nth-child(2) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap;
+    /* 防止文本换行 */
+}
+
+.main .read-button {
+    display: flex;
+    justify-content: center;
+
+}
+
+.main .read-button button {
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    background-color: #007bff;
+    /* 初始背景颜色 */
+    animation: colorChange 3s infinite alternate;
+    /* 添加颜色变化的动画 */
+}
+
+@keyframes colorChange {
+    0% {
+        background-color: #007bff;
+        /* 初始颜色 */
+    }
+
+    50% {
+        background-color: #ff7e5f;
+        /* 中间颜色 */
+    }
+
+    100% {
+        background-color: #feb47b;
+        /* 结束颜色 */
+    }
+}
+
+.main .text-container {
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 2;
+    margin-left: 24px;
+
+}
+</style>