tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构 Blog tailwindcss

Browse Source
This commit is contained in:
tone
2024-09-29 22:18:17 +08:00
parent 4fcf7b8bbe
commit 4eb427108e
1 changed files with 9 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
tonecn/src/views/Blog.vue
View File

@@ -22,73 +22,18 @@ onMounted(async () => {
}) })
</script> </script>
<template> <template>
<div class="bcc"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
<div class="content-container"> <div class="flex flex-col max-w-[800px] my-[30px] mx-auto px-[20px]">
<el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" /> <el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" />
<div style="gap: 30px;display: flex;flex-direction: column;" v-else> <div class="gap-[30px] flex flex-col" v-else>
<div class="coding" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="text-center mt-[20px] mb-[300px]" v-if="loadStatus == 0">加载中，请稍后...</div>
<el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" /> <el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" />
<div class="blog-container" v-for="item of blogList"> <div class="mx-auto max-w-[400px] w-full flex flex-col" v-for="item of blogList">
<a class="title" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a> <a class="text-[26px] font-semibold cursor-pointer block hover:underline" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
<div class="description">{{ item.description }}</div> <div class="text-[#666]">{{ item.description }}</div>
<div class="publish-time">{{ timestampToString(+item.publish_time) }} —— <div class="text-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} ——
{{ formateTimes(item.visit_count) }} 次访问</div> {{ formateTimes(item.visit_count) }} 次访问</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.bcc {
position: fixed;
z-index: -1;
background-color: #f6f8f9;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.content-container {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 30px auto;
padding: 0 20px;
}
.coding {
text-align: center;
margin-top: 20px;
margin-bottom: 300px;
}
.blog-container {
margin: 0 auto;
max-width: 400px;
width: 100%;
display: flex;
flex-direction: column;
}
.blog-container .title {
font-size: 26px;
font-weight: 600;
cursor: pointer;
display: block;
}
.blog-container .title:hover {
text-decoration: underline;
text-decoration-thickness: 3px;
}
.blog-container .description {
color: #666;
}
.blog-container .publish-time {
color: #888;
margin-top: 15px;
font-size: 14px;
}
</style>