104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
|
|
|
|
const works = ref([
|
|
{
|
|
cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
|
|
title: '现代化家猪饲养技术：从饲料到环境的全方位提升',
|
|
createdTime: '2077-01-01 11:45',
|
|
lastModifiedTime: '2077-01-02 09:19'
|
|
},
|
|
{
|
|
cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
|
|
title: '家猪繁殖管理的艺术：提高生育率与健康水平',
|
|
createdTime: '2077-01-01 11:45',
|
|
lastModifiedTime: '2077-01-02 09:19'
|
|
}
|
|
])
|
|
|
|
function createNewBlog() {
|
|
console.log('新建博客')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="top-bar">
|
|
<button class="create-btn" @click="createNewBlog">新建博客</button>
|
|
</div>
|
|
<div class="works-list">
|
|
<AccountWorkPiece
|
|
v-for="(item, index) in works"
|
|
:key="index"
|
|
:cover="item.cover"
|
|
:title="item.title"
|
|
:createdTime="item.createdTime"
|
|
:lastModifiedTime="item.lastModifiedTime"
|
|
:isDraft="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 容器基础样式 */
|
|
.container {
|
|
width: 100%;
|
|
overflow-y: auto; /* 或 scroll */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #f5f6f7;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
:deep(.theme-light) .container {
|
|
background-color: #ffffff;
|
|
color: #333333;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.create-btn {
|
|
padding: 8px 16px;
|
|
background-color: #3b6ea8;
|
|
color: #f5f6f7;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.create-btn:hover {
|
|
background-color: #2f5687;
|
|
}
|
|
|
|
.theme-light .create-btn {
|
|
background-color: #ffc107;
|
|
color: #333333;
|
|
}
|
|
.theme-light .create-btn:hover {
|
|
background-color: #e0a806;
|
|
}
|
|
|
|
.works-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 80%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|