|
|
|
@ -1,63 +1,162 @@ |
|
|
|
<template> |
|
|
|
<div class="main"> |
|
|
|
<div class="mainContent" v-for="article in 2"> |
|
|
|
<a-badge-ribbon text="Hippies" color="black"> |
|
|
|
<div class="mainContent" v-for="article in displayedData"> |
|
|
|
<div class="blogs" v-if="article.blogtitle"> |
|
|
|
<a-badge-ribbon :text=article.typename color="black"> |
|
|
|
<a-card hoverable> |
|
|
|
<h2>操作系统的安装</h2> |
|
|
|
<h2>{{ article.blogtitle }}</h2> |
|
|
|
<div class="tag-group"> |
|
|
|
<a-tag color="#E6E6FA"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.RiLiLined /> |
|
|
|
</template> |
|
|
|
{{ mainStatistic.mainDate }} |
|
|
|
{{ article.create_at }} |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#6495ED"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.YanJingLined /> |
|
|
|
</template> |
|
|
|
{{ mainStatistic.mainWatchCount }} |
|
|
|
{{ 111 }} |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#B0C4DE"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.XieZiLined /> |
|
|
|
</template> |
|
|
|
字数≈{{ mainStatistic.mainWordCount }}字 |
|
|
|
字数≈{{ article.wordcount }}字 |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#20B2AA"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.YueDuLined /> |
|
|
|
</template> |
|
|
|
阅读时长≈{{ mainStatistic.mainReadCount }}分 |
|
|
|
阅读时长≈{{ article.blogcontent?.length }}分 |
|
|
|
</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" /> |
|
|
|
<a-image :preview="false" :width="200" :src=article.imglink /> |
|
|
|
</div> |
|
|
|
<div class="text-container"> |
|
|
|
这是内容 |
|
|
|
{{ article.blogcontent }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="read-button"> |
|
|
|
<a-button type="primary" shape="round">阅读全文</a-button> |
|
|
|
<a-button type="primary" shape="round" @click="readMoreBlog(article.id)">阅读全文</a-button> |
|
|
|
</div> |
|
|
|
<hr class="custom-line"> |
|
|
|
<div> |
|
|
|
<a-tag :color=randomColor() v-for="label in JSON.parse(article.labelnames)">{{ label |
|
|
|
}}</a-tag> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</a-badge-ribbon> |
|
|
|
</div> |
|
|
|
<div class="diarys" v-else> |
|
|
|
<a-badge-ribbon :text=article.typename color="black"> |
|
|
|
<a-card hoverable> |
|
|
|
<h2>{{ article.diarytitle }}</h2> |
|
|
|
<div class="tag-group"> |
|
|
|
<a-tag color="#E6E6FA"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.RiLiLined /> |
|
|
|
</template> |
|
|
|
{{ article.create_at }} |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#6495ED"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.YanJingLined /> |
|
|
|
</template> |
|
|
|
{{ 1111 }} |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#B0C4DE"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.XieZiLined /> |
|
|
|
</template> |
|
|
|
字数≈{{ article.wordcount }}字 |
|
|
|
</a-tag> |
|
|
|
<a-tag color="#20B2AA"> |
|
|
|
<template #icon> |
|
|
|
<component :is=iconComponents.YueDuLined /> |
|
|
|
</template> |
|
|
|
阅读时长≈{{ 111 }}分 |
|
|
|
</a-tag> |
|
|
|
</div> |
|
|
|
<div class="blog-content"> |
|
|
|
<div> |
|
|
|
<a-image :preview="false" :width="1000" :height="500" :src=article.imglink /> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="read-button"> |
|
|
|
<a-button type="primary" shape="round" @click="readMoreDiary(article.id)">阅读全文</a-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
</a-card> |
|
|
|
</a-badge-ribbon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="loadbutton"> |
|
|
|
<a-button v-if="showLoadMoreButton" @click="loadMore" class="ripple-button" :loading="loading" type="primary"> |
|
|
|
{{ loading ? '加载中...' : '加载更多' }} |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang='ts'> |
|
|
|
import { reactive } from 'vue'; |
|
|
|
import { onMounted, ref } from 'vue'; |
|
|
|
import type { homePageInterface } from '@/api'; |
|
|
|
import iconComponents from "@/assets/index" |
|
|
|
const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({ |
|
|
|
mainDate: "2024-06-11", |
|
|
|
mainWatchCount: "9999", |
|
|
|
mainWordCount: "9999", |
|
|
|
mainReadCount: "9999" |
|
|
|
}) |
|
|
|
import { get } from '@/tools/request'; |
|
|
|
import router from '@/router'; |
|
|
|
const randomColor = () => { |
|
|
|
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"]) |
|
|
|
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)]; |
|
|
|
} |
|
|
|
|
|
|
|
const readMoreBlog = (id: any) => { |
|
|
|
router.push(`/blog/${id}`) |
|
|
|
} |
|
|
|
const readMoreDiary = (id: any) => { |
|
|
|
router.push(`/diary/${id}`) |
|
|
|
} |
|
|
|
const homepagelist = ref<homePageInterface[]>([]) |
|
|
|
const displayedData = ref<any[]>([]); // 存储当前显示的部分数据 |
|
|
|
const itemsPerPage = 10; // 每次加载的条目数 |
|
|
|
let currentIndex = 0; // 当前显示数据的索引位置 |
|
|
|
const showNextBatch = () => { |
|
|
|
const end = currentIndex + itemsPerPage; |
|
|
|
displayedData.value = homepagelist.value.slice(0, end); |
|
|
|
currentIndex = end; |
|
|
|
|
|
|
|
// 控制加载更多按钮的显示与隐藏 |
|
|
|
showLoadMoreButton.value = currentIndex < homepagelist.value.length; |
|
|
|
}; |
|
|
|
|
|
|
|
// 加载更多按钮的显示与隐藏 |
|
|
|
const showLoadMoreButton = ref<boolean>(true); |
|
|
|
|
|
|
|
// 点击加载更多按钮时触发加载下一批数据 |
|
|
|
const loading=ref(false) |
|
|
|
const loadMore = () => { |
|
|
|
loading.value=true |
|
|
|
setTimeout(()=>{ |
|
|
|
loading.value=false |
|
|
|
showNextBatch(); |
|
|
|
},1500) |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const homePageList = async () => { |
|
|
|
await get( |
|
|
|
"/statistics/homepage" |
|
|
|
).then(response => { |
|
|
|
homepagelist.value = response.data.data |
|
|
|
showNextBatch(); |
|
|
|
}) |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
homePageList() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -67,9 +166,6 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW |
|
|
|
margin: 0 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.main .mainContent { |
|
|
|
margin-bottom: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.main h2 { |
|
|
|
text-align: center; |
|
|
|
@ -113,6 +209,18 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW |
|
|
|
/* 添加颜色变化的动画 */ |
|
|
|
} |
|
|
|
|
|
|
|
.mainContent .blogs, |
|
|
|
.mainContent .diarys { |
|
|
|
margin: 0 0 24px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-line { |
|
|
|
border: 0; |
|
|
|
height: 1px; |
|
|
|
background: #d9d6d6; |
|
|
|
margin: 48px 0 24px 0; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes colorChange { |
|
|
|
0% { |
|
|
|
background-color: #007bff; |
|
|
|
@ -141,4 +249,15 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW |
|
|
|
margin-left: 24px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.loadbutton{ |
|
|
|
display: flex; |
|
|
|
justify-content: right; |
|
|
|
margin-bottom: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
panda
8 months ago