add news

src/components/blogs/HomePage.vue

@@ -17,7 +17,7 @@
             </a-carousel>
         </div>
         <!-- 操作按钮滚动 -->
-        <div class="anchorDown">
+        <div class="anchorDown" v-if="show_anchornDown">
             <a-button type="link" shape="circle" size="large" @click="downScroll">
                 <template #icon>
                     <DownCircleOutlined style="font-size: 35px;color: aliceblue;" spin />
@@ -38,16 +38,16 @@
                         <a-button shape="circle" size="large" @click="gravatarClick">
                             <GravatarLined />
                         </a-button>
-                        <a-button shape="circle" size="large">
+                        <a-button shape="circle" size="large" @click="qqClick">
                             <QQLined />
                         </a-button>
                         <a-button shape="circle" size="large">
                             <WechatLined />
                         </a-button>
-                        <a-button shape="circle" size="large">
+                        <a-button shape="circle" size="large" @click="musicClick">
                             <MusicLined />
                         </a-button>
-                        <a-button shape="circle" size="large">
+                        <a-button shape="circle" size="large" @click="githubClick">
                             <GitHubLined />
                         </a-button>
                     </div>
@@ -105,20 +105,27 @@
                 <a-card hoverable>
                     <template #cover>
                         <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
-                        <div ref="heat" style="height: 100%;width: 100%;"></div>
+                            <div ref="heat" style="height: 100%;"></div>
                         </div>
                     </template>
                 </a-card>
 
                 <a-card hoverable>
                     <template #cover>
-                        <div style="width: 100%;">
-                        <div id="aplayer" style="width: 25%;"></div>
-                    </div>
+                        <div id="aplayer"></div>
                     </template>
                 </a-card>
                 <a-card title="随机文章" :bordered="false" hoverable>
-                    sces
+                    <div v-for="article in 3">
+                        <a-image :preview="false" :width="300"
+                            src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
+                        
+                        <div class="article-text">
+                            <span>2021-02-01</span>
+                            <span>操作系统</span>
+                        </div>
+                    </div>
+
                 </a-card>
 
                 <a-card title="标签云" :bordered="false" hoverable>
@@ -155,6 +162,9 @@ const customStyle =
 const scrollbar = ref<Element | null>(null);
 onMounted(() => {
     // 定义home页的博客标题名
+    nextTick(() => {
+        const authorElement = document.querySelector('.author');
+        if (authorElement) {
             new Typed('.author', {
                 strings: ['SunFree.'],
                 typeSpeed: 200,
@@ -163,6 +173,9 @@ onMounted(() => {
                 loopCount: Infinity,
                 showCursor: false
             });
+        };
+        const cardTextElement = document.querySelector('.cardText');
+        if (cardTextElement) {
             // 定义个人座右铭
             new Typed('.cardText', {
                 strings: ['做三流测试，品瀚霖人生！'],
@@ -172,8 +185,11 @@ onMounted(() => {
                 loopCount: Infinity, // 无限循环
                 showCursor: false // 取消光标
             });
+        };
+        const aplayerContainer = document.getElementById('aplayer');
+        if (aplayerContainer) {
             new APlayer({
-        container: document.getElementById('aplayer'),
+                container: aplayerContainer,
                 mini: false,
                 autoplay: false,
                 theme: '#FADFA3',
@@ -204,6 +220,11 @@ onMounted(() => {
                     }
                 ]
             });
+        }
+    });
+
+
+
     function generateDates(numDays: number) {
         const dates = [];
         const currentDate = new Date();
@@ -274,17 +295,16 @@ onMounted(() => {
             orient: 'horizontal',
             left: 'center',
             bottom: '15%',
-            itemGap: 5,
             show: false,
             inRange: {
-                color: ['#ffffff', '#000000'] // 0评论是白色, 非0评论是黑色
+                color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
             }
         },
         series: [{
             type: 'heatmap',
             data: formattedData,
             itemStyle: {
-                borderColor: 'rgba(0, 0, 0, 0.1)', // 设置边框颜色
+                borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
                 borderWidth: 0.5, // 设置边框宽度
             },
             label: {
@@ -326,6 +346,7 @@ onMounted(() => {
 const show_menu = ref(false);
 const show_carousel = ref(true);
 const show_author = ref(true)
+const show_anchornDown = ref(true)
 const mainCss = reactive({
     marginTop: "0px"
 })
@@ -438,9 +459,17 @@ const onSearch = (searchValue: string) => {
 const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
 
 const gravatarClick = () => {
-    window.open("https://www.baidu.com")
+    window.open("https://cn.gravatar.org/")
+}
+const qqClick=()=>{
+    window.open("/qqcode",'_blank')
+}
+const musicClick=()=>{
+    window.open("https://music.163.com/#/playlist?id=160266689")
+}
+const githubClick=()=>{
+    window.open("https://gitee.com/c_panda")
 }
-
 const updateCarouselVisibility = (routeName) => {
     handleScrollEnabled.value = false;
     if (scrollbar.value) {
@@ -454,6 +483,7 @@ const updateCarouselVisibility = (routeName) => {
         show_menu.value = true;
         show_author.value = false;
         show_carousel.value = false;
+        show_anchornDown.value = false;
         mainCss.marginTop = '48px';
     }
 };
@@ -595,16 +625,32 @@ router.beforeEach((to, from, next) => {
 
 
 .rightBar {
-    width: 20%;
+    width: 15%;
 }
 
 .rightBar>* {
     margin-bottom: 24px;
 }
 
+.rightBar>:nth-child(4) div {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 24px;
+}
+.rightBar>:nth-child(4) div .article-text{
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 5%;
+    left: 10%;
+    color: rgb(187, 185, 187);
+}
+#aplayer {
+    margin: 0;
+}
+
 .statistic {
     text-align: center;
 }
-
-
 </style>

src/components/blogs/QQCode.vue

@@ -0,0 +1,9 @@
+<template>
+    <a-qrcode error-level="H" value="https://www.baidu.com" icon="https://www.antdv.com/assets/logo.1ef800a8.svg" />
+</template>
+
+<script setup lang='ts'>
+
+</script>
+
+<style></style>

src/components/blogs/WechatCode.vue

@@ -0,0 +1,9 @@
+<template>
+    <a-qrcode error-level="H" value="https://www.antdv.com" icon="https://www.antdv.com/assets/logo.1ef800a8.svg" />
+</template>
+
+<script setup lang='ts'>
+
+</script>
+
+<style></style>

src/router/blog.ts

@@ -22,12 +22,23 @@ const blogRoute:Array<RouteRecordRaw>=[
           name:"home",
           component:()=>import("@/views/blog/HomePageView.vue")
         },
+        
       ]
     },
     {
       path:"/ceshi",
       name:"ceshi",
       component:()=>import("@/components/blogs/ceshi.vue")
-    }
+    },
+    {
+      path:"/qqcode",
+      name:"qqcode",
+      component:()=>import("@/components/blogs/QQCode.vue")
+    },
+    {
+      path:"/wechatcode",
+      name:"wechatcode",
+      component:()=>import("@/components/blogs/WechatCode.vue")
+    },
 ]
 export default blogRoute

src/views/blog/AmountChartView.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>测试</div>
+</template>
+    
+<script setup lang='ts'>
+    
+</script>
+    
+<style>
+    
+</style>