From 2df23056dabb8a8fd7d279e0b5200b4de391d47d Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Mon, 17 Jun 2024 17:04:11 +0800
Subject: [PATCH] add news

---
 src/components/blogs/HomePage.vue   | 182 +++++++++++++++++-----------
 src/components/blogs/QQCode.vue     |   9 ++
 src/components/blogs/WechatCode.vue |   9 ++
 src/router/blog.ts                  |  13 +-
 src/views/blog/AmountChartView.vue  |  11 ++
 5 files changed, 155 insertions(+), 69 deletions(-)
 create mode 100644 src/components/blogs/QQCode.vue
 create mode 100644 src/components/blogs/WechatCode.vue
 create mode 100644 src/views/blog/AmountChartView.vue

diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 7eed302..f1ee159 100644
--- a/src/components/blogs/HomePage.vue
+++ b/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>
@@ -104,21 +104,28 @@
                 </a-card>
                 <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>
-                </template>
+                        <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
+                            <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,55 +162,69 @@ const customStyle =
 const scrollbar = ref<Element | null>(null);
 onMounted(() => {
     // 定义home页的博客标题名
-    new Typed('.author', {
-        strings: ['SunFree.'],
-        typeSpeed: 200,
-        backSpeed: 150,
-        loop: true,
-        loopCount: Infinity,
-        showCursor: false
-    });
-    // 定义个人座右铭
-    new Typed('.cardText', {
-        strings: ['做三流测试，品瀚霖人生！'],
-        typeSpeed: 200,
-        backSpeed: 150,
-        loop: true, // 开启循环
-        loopCount: Infinity, // 无限循环
-        showCursor: false // 取消光标
-    });
-    new APlayer({
-        container: document.getElementById('aplayer'),
-        mini: false,
-        autoplay: false,
-        theme: '#FADFA3',
-        loop: 'all',
-        order: 'random',
-        preload: 'auto',
-        volume: 0.7,
-        mutex: true,
-        listFolded: true,
-        listMaxHeight: 90,
-        lrcType: 3,
-        audio: [
-            {
-                name: 'name1',
-                artist: 'artist1',
-                url: 'url1.mp3',
-                cover: 'cover1.jpg',
-                lrc: 'lrc1.lrc',
-                theme: '#ebd0c2'
-            },
-            {
-                name: 'name2',
-                artist: 'artist2',
-                url: 'url2.mp3',
-                cover: 'cover2.jpg',
-                lrc: 'lrc2.lrc',
-                theme: '#46718b'
-            }
-        ]
+    nextTick(() => {
+        const authorElement = document.querySelector('.author');
+        if (authorElement) {
+            new Typed('.author', {
+                strings: ['SunFree.'],
+                typeSpeed: 200,
+                backSpeed: 150,
+                loop: true,
+                loopCount: Infinity,
+                showCursor: false
+            });
+        };
+        const cardTextElement = document.querySelector('.cardText');
+        if (cardTextElement) {
+            // 定义个人座右铭
+            new Typed('.cardText', {
+                strings: ['做三流测试，品瀚霖人生！'],
+                typeSpeed: 200,
+                backSpeed: 150,
+                loop: true, // 开启循环
+                loopCount: Infinity, // 无限循环
+                showCursor: false // 取消光标
+            });
+        };
+        const aplayerContainer = document.getElementById('aplayer');
+        if (aplayerContainer) {
+            new APlayer({
+                container: aplayerContainer,
+                mini: false,
+                autoplay: false,
+                theme: '#FADFA3',
+                loop: 'all',
+                order: 'random',
+                preload: 'auto',
+                volume: 0.7,
+                mutex: true,
+                listFolded: true,
+                listMaxHeight: 90,
+                lrcType: 3,
+                audio: [
+                    {
+                        name: 'name1',
+                        artist: 'artist1',
+                        url: 'url1.mp3',
+                        cover: 'cover1.jpg',
+                        lrc: 'lrc1.lrc',
+                        theme: '#ebd0c2'
+                    },
+                    {
+                        name: 'name2',
+                        artist: 'artist2',
+                        url: 'url2.mp3',
+                        cover: 'cover2.jpg',
+                        lrc: 'lrc2.lrc',
+                        theme: '#46718b'
+                    }
+                ]
+            });
+        }
     });
+
+
+
     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>
\ No newline at end of file
diff --git a/src/components/blogs/QQCode.vue b/src/components/blogs/QQCode.vue
new file mode 100644
index 0000000..cb8bd69
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/blogs/WechatCode.vue b/src/components/blogs/WechatCode.vue
new file mode 100644
index 0000000..e84276a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 9a9ea59..8e39131 100644
--- a/src/router/blog.ts
+++ b/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
diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue
new file mode 100644
index 0000000..434cd27
--- /dev/null
+++ b/src/views/blog/AmountChartView.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>测试</div>
+</template>
+    
+<script setup lang='ts'>
+    
+</script>
+    
+<style>
+    
+</style>
\ No newline at end of file