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