gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add news

master
panda 9 months ago
parent
20c5854392
commit
2df23056da
5 changed files with 155 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 182
      src/components/blogs/HomePage.vue
  2. 9
      src/components/blogs/QQCode.vue
  3. 9
      src/components/blogs/WechatCode.vue
  4. 13
      src/router/blog.ts
  5. 11
      src/views/blog/AmountChartView.vue

182
src/components/blogs/HomePage.vue
View File

@ -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>

9
src/components/blogs/QQCode.vue
View File

@ -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>

9
src/components/blogs/WechatCode.vue
View File

@ -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>

13
src/router/blog.ts
View File

@ -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

11
src/views/blog/AmountChartView.vue
View File

@ -0,0 +1,11 @@
<template>
<div>测试</div>
</template>
<script setup lang='ts'>
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save