panda
9 months ago
9 changed files with 455 additions and 172 deletions
-
4src/components/admin/MainWrapper.vue
-
195src/components/blogs/HomePage.vue
-
86src/components/blogs/ceshi.vue
-
7src/router/admin.ts
-
28src/router/blog.ts
-
20src/router/home.ts
-
2src/router/index.ts
-
142src/views/blog/BlogContentView.vue
-
143src/views/blog/DiaryContentView.vue
@ -1,27 +1,65 @@ |
|||||
<template> |
<template> |
||||
<div ref="wordcloud" style="width: 500px; height: 500px;"></div> |
|
||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" /> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
|
||||
import { ref, onMounted } from 'vue'; |
|
||||
import wordcloud from 'wordcloud'; |
|
||||
|
|
||||
const wordcloudRef = ref(null); |
|
||||
|
|
||||
const tags = [ |
|
||||
{ text: 'Java', weight: 5 }, |
|
||||
{ text: 'Python', weight: 3 }, |
|
||||
{ text: 'JavaScript', weight: 7 }, |
|
||||
{ text: 'Ant Design', weight: 2 }, |
|
||||
{ text: 'Vue.js', weight: 4 }, |
|
||||
{ text: 'React', weight: 6 }, |
|
||||
{ text: 'Angular', weight: 3 }, |
|
||||
{ text: 'CSS', weight: 4 }, |
|
||||
{ text: 'HTML', weight: 5 } |
|
||||
]; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
const canvas = wordcloudRef.value; |
|
||||
wordcloud(canvas, { list: tags }); |
|
||||
}); |
|
||||
|
<script lang="ts" setup> |
||||
|
import { h, ref } from 'vue'; |
||||
|
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'; |
||||
|
import { MenuProps } from 'ant-design-vue'; |
||||
|
const current = ref<string[]>(['mail']); |
||||
|
const items = ref<MenuProps['items']>([ |
||||
|
{ |
||||
|
key: 'mail', |
||||
|
icon: () => h(MailOutlined), |
||||
|
label: 'Navigation One', |
||||
|
title: 'Navigation One', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'app', |
||||
|
icon: () => h(AppstoreOutlined), |
||||
|
label: 'Navigation Two', |
||||
|
title: 'Navigation Two', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'sub1', |
||||
|
icon: () => h(SettingOutlined), |
||||
|
label: 'Navigation Three - Submenu', |
||||
|
title: 'Navigation Three - Submenu', |
||||
|
children: [ |
||||
|
{ |
||||
|
type: 'group', |
||||
|
label: 'Item 1', |
||||
|
children: [ |
||||
|
{ |
||||
|
label: 'Option 1', |
||||
|
key: 'setting:1', |
||||
|
}, |
||||
|
{ |
||||
|
label: 'Option 2', |
||||
|
key: 'setting:2', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
type: 'group', |
||||
|
label: 'Item 2', |
||||
|
children: [ |
||||
|
{ |
||||
|
label: 'Option 3', |
||||
|
key: 'setting:3', |
||||
|
}, |
||||
|
{ |
||||
|
label: 'Option 4', |
||||
|
key: 'setting:4', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
key: 'alipay', |
||||
|
label: h('a', { href: 'https://antdv.com' }, 'Navigation Four - Link'), |
||||
|
title: 'Navigation Four - Link', |
||||
|
}, |
||||
|
]); |
||||
</script> |
</script> |
||||
|
|
||||
@ -0,0 +1,28 @@ |
|||||
|
import type { RouteRecordRaw } from 'vue-router' |
||||
|
|
||||
|
const blogRoute:Array<RouteRecordRaw>=[ |
||||
|
{ |
||||
|
path: "/", |
||||
|
redirect:"/blog", |
||||
|
name: "home", |
||||
|
component: () => import("@/components/blogs/HomePage.vue"), |
||||
|
children:[ |
||||
|
{ |
||||
|
path:"/blog", |
||||
|
name:"blog", |
||||
|
component:()=>import("@/views/blog/BlogContentView.vue") |
||||
|
}, |
||||
|
{ |
||||
|
path:"/diary", |
||||
|
name:"diary", |
||||
|
component:()=>import("@/views/blog/DiaryContentView.vue") |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
path:"/ceshi", |
||||
|
name:"ceshi", |
||||
|
component:()=>import("@/components/blogs/ceshi.vue") |
||||
|
} |
||||
|
] |
||||
|
export default blogRoute |
||||
@ -1,20 +0,0 @@ |
|||||
import type { RouteRecordRaw } from 'vue-router' |
|
||||
|
|
||||
const homeRoute:Array<RouteRecordRaw>=[ |
|
||||
{ |
|
||||
path: "/", |
|
||||
name: "home", |
|
||||
component: () => import("@/components/blogs/HomePage.vue"), |
|
||||
}, |
|
||||
{ |
|
||||
path: "/login", |
|
||||
name: "login", |
|
||||
component: () => import("@/components/admin/SignIn.vue"), |
|
||||
}, |
|
||||
{ |
|
||||
path:"/ceshi", |
|
||||
name:"ceshi", |
|
||||
component:()=>import("@/components/blogs/ceshi.vue") |
|
||||
} |
|
||||
] |
|
||||
export default homeRoute |
|
||||
@ -0,0 +1,142 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="mainContent" v-for="article in 2"> |
||||
|
<a-badge-ribbon text="Hippies" color="black"> |
||||
|
<a-card hoverable> |
||||
|
<h2>操作系统的安装</h2> |
||||
|
<div class="tag-group"> |
||||
|
<a-tag color="#E6E6FA"> |
||||
|
<template #icon> |
||||
|
<RiLiLined /> |
||||
|
</template> |
||||
|
{{ mainStatistic.mainDate }} |
||||
|
</a-tag> |
||||
|
<a-tag color="#6495ED"> |
||||
|
<template #icon> |
||||
|
<YanJingLined /> |
||||
|
</template> |
||||
|
{{ mainStatistic.mainWatchCount }} |
||||
|
</a-tag> |
||||
|
<a-tag color="#B0C4DE"> |
||||
|
<template #icon> |
||||
|
<XieZiLined /> |
||||
|
</template> |
||||
|
字数≈{{ mainStatistic.mainWordCount }}字 |
||||
|
</a-tag> |
||||
|
<a-tag color="#20B2AA"> |
||||
|
<template #icon> |
||||
|
<YueDuLined /> |
||||
|
</template> |
||||
|
阅读时长≈{{ mainStatistic.mainReadCount }}分 |
||||
|
</a-tag> |
||||
|
</div> |
||||
|
<div class="blog-content"> |
||||
|
<div> |
||||
|
<a-image :preview="false" :width="200" |
||||
|
src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" /> |
||||
|
</div> |
||||
|
<div class="text-container"> |
||||
|
这是内容 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="read-button"> |
||||
|
<a-button type="primary" shape="round">阅读全文</a-button> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</a-badge-ribbon> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { reactive } from 'vue'; |
||||
|
const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({ |
||||
|
mainDate: "2024-06-11", |
||||
|
mainWatchCount: "9999", |
||||
|
mainWordCount: "9999", |
||||
|
mainReadCount: "9999" |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.main { |
||||
|
width: 45%; |
||||
|
margin: 0 24px; |
||||
|
} |
||||
|
|
||||
|
.main .mainContent { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.main h2 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.main .tag-group { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.main .tag-group>* { |
||||
|
color: black; |
||||
|
margin: 0 12px; |
||||
|
} |
||||
|
|
||||
|
.main .blog-content { |
||||
|
display: flex; |
||||
|
margin: 48px; |
||||
|
} |
||||
|
|
||||
|
.main .blog-content>:nth-child(2) { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: pre-wrap; |
||||
|
/* 防止文本换行 */ |
||||
|
} |
||||
|
|
||||
|
.main .read-button { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.main .read-button button { |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
background-color: #007bff; |
||||
|
/* 初始背景颜色 */ |
||||
|
animation: colorChange 3s infinite alternate; |
||||
|
/* 添加颜色变化的动画 */ |
||||
|
} |
||||
|
|
||||
|
@keyframes colorChange { |
||||
|
0% { |
||||
|
background-color: #007bff; |
||||
|
/* 初始颜色 */ |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
background-color: #ff7e5f; |
||||
|
/* 中间颜色 */ |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
background-color: #feb47b; |
||||
|
/* 结束颜色 */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main .text-container { |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 6; |
||||
|
word-wrap: break-word; |
||||
|
overflow-wrap: break-word; |
||||
|
line-height: 2; |
||||
|
margin-left: 24px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,143 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div class="mainContent" v-for="article in 2"> |
||||
|
<a-badge-ribbon text="Hippies" color="black"> |
||||
|
<a-card hoverable> |
||||
|
<h2>操作系统的安装</h2> |
||||
|
<div class="tag-group"> |
||||
|
<a-tag color="#E6E6FA"> |
||||
|
<template #icon> |
||||
|
<RiLiLined /> |
||||
|
</template> |
||||
|
{{ mainStatistic.mainDate }} |
||||
|
</a-tag> |
||||
|
<a-tag color="#6495ED"> |
||||
|
<template #icon> |
||||
|
<YanJingLined /> |
||||
|
</template> |
||||
|
{{ mainStatistic.mainWatchCount }} |
||||
|
</a-tag> |
||||
|
<a-tag color="#B0C4DE"> |
||||
|
<template #icon> |
||||
|
<XieZiLined /> |
||||
|
</template> |
||||
|
字数≈{{ mainStatistic.mainWordCount }}字 |
||||
|
</a-tag> |
||||
|
<a-tag color="#20B2AA"> |
||||
|
<template #icon> |
||||
|
<YueDuLined /> |
||||
|
</template> |
||||
|
阅读时长≈{{ mainStatistic.mainReadCount }}分 |
||||
|
</a-tag> |
||||
|
</div> |
||||
|
<div class="blog-content"> |
||||
|
<div> |
||||
|
<a-image :preview="false" :width="200" |
||||
|
src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" /> |
||||
|
</div> |
||||
|
<div class="text-container"> |
||||
|
这是内容 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="read-button"> |
||||
|
<a-button type="primary" shape="round">阅读全文</a-button> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</a-badge-ribbon> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { reactive } from 'vue'; |
||||
|
const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({ |
||||
|
mainDate: "2024-06-11", |
||||
|
mainWatchCount: "9999", |
||||
|
mainWordCount: "9999", |
||||
|
mainReadCount: "9999" |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.main { |
||||
|
|
||||
|
width: 45%; |
||||
|
margin: 0 24px; |
||||
|
} |
||||
|
|
||||
|
.main .mainContent { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.main h2 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.main .tag-group { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.main .tag-group>* { |
||||
|
color: black; |
||||
|
margin: 0 12px; |
||||
|
} |
||||
|
|
||||
|
.main .blog-content { |
||||
|
display: flex; |
||||
|
margin: 48px; |
||||
|
} |
||||
|
|
||||
|
.main .blog-content>:nth-child(2) { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: pre-wrap; |
||||
|
/* 防止文本换行 */ |
||||
|
} |
||||
|
|
||||
|
.main .read-button { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.main .read-button button { |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
background-color: #007bff; |
||||
|
/* 初始背景颜色 */ |
||||
|
animation: colorChange 3s infinite alternate; |
||||
|
/* 添加颜色变化的动画 */ |
||||
|
} |
||||
|
|
||||
|
@keyframes colorChange { |
||||
|
0% { |
||||
|
background-color: #007bff; |
||||
|
/* 初始颜色 */ |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
background-color: #ff7e5f; |
||||
|
/* 中间颜色 */ |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
background-color: #feb47b; |
||||
|
/* 结束颜色 */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main .text-container { |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 6; |
||||
|
word-wrap: break-word; |
||||
|
overflow-wrap: break-word; |
||||
|
line-height: 2; |
||||
|
margin-left: 24px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue