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