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> |
|||
<div ref="wordcloud" style="width: 500px; height: 500px;"></div> |
|||
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" /> |
|||
</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> |
|||
|
|||
@ -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