|
|
@ -1,20 +1,20 @@ |
|
|
|
<template> |
|
|
|
<a-card title="随机文章" :bordered="false" hoverable> |
|
|
|
<div v-for="article in homepagelist"> |
|
|
|
<div v-if="article.blogtitle"> |
|
|
|
<a :href="`/blog/${article.id}`" v-if="article.blogtitle" class="random-blog"> |
|
|
|
<div class="article-text"> |
|
|
|
<span>{{ article.blogtitle }}</span> |
|
|
|
<span>{{ article.create_at }}</span> |
|
|
|
</div> |
|
|
|
<a-image :preview="false" :width="300" :src="article.imglink" /> |
|
|
|
</div> |
|
|
|
<div v-if="article.diarytitle"> |
|
|
|
<a-image :preview="false" :width="250" :src="article.imglink" /> |
|
|
|
</a> |
|
|
|
<a :href="`/diary/${article.id}`" v-if="article.diarytitle" class="random-diary"> |
|
|
|
<div class="article-text"> |
|
|
|
<span>{{ article.diarytitle }}</span> |
|
|
|
<span>{{ article.create_at }}</span> |
|
|
|
</div> |
|
|
|
<a-image :preview="false" :width="300" :src="article.imglink" /> |
|
|
|
</div> |
|
|
|
<a-image :preview="false" :width="250" :src="article.imglink" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</template> |
|
|
@ -22,6 +22,7 @@ |
|
|
|
<script setup lang='ts'> |
|
|
|
import { get } from '@/tools/request'; |
|
|
|
import { onMounted, ref } from 'vue'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import type { homePageInterface } from '@/api'; |
|
|
|
const homepagelist = ref<homePageInterface[]>([]) |
|
|
|
// 随机文章 |
|
|
@ -29,10 +30,16 @@ const homePageList = async () => { |
|
|
|
await get( |
|
|
|
"/statistics/homepage" |
|
|
|
).then(response => { |
|
|
|
homepagelist.value = response.data.data.sort(() => 0.5 - Math.random()).slice(0, 3); |
|
|
|
const randResponse = response.data.data.map((items: any) => ({ |
|
|
|
...items, |
|
|
|
imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片A.jpg', |
|
|
|
create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
})) |
|
|
|
homepagelist.value = randResponse.sort(() => 0.5 - Math.random()).slice(0, 3); |
|
|
|
}) |
|
|
|
} |
|
|
|
onMounted(()=>{ |
|
|
|
onMounted(() => { |
|
|
|
homePageList() |
|
|
|
}) |
|
|
|
</script> |
|
|
@ -46,4 +53,29 @@ onMounted(()=>{ |
|
|
|
margin-right: 12px; |
|
|
|
font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif"; |
|
|
|
} |
|
|
|
|
|
|
|
.random-blog, |
|
|
|
.random-diary { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: rgb(16, 15, 15); |
|
|
|
} |
|
|
|
|
|
|
|
a:hover { |
|
|
|
color: rgb(134, 134, 231); |
|
|
|
} |
|
|
|
|
|
|
|
.random-blog img, |
|
|
|
.random-diary img { |
|
|
|
padding: 4px; |
|
|
|
border: 2px solid #ccc; |
|
|
|
display: inline-block; |
|
|
|
border-radius: 10px; |
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
</style> |