101 lines
1.9 KiB
Vue
101 lines
1.9 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
|
||
|
|
|
||
|
|
// 示例：草稿数据
|
||
|
|
const drafts = 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'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
function createNewDraft() {
|
||
|
|
console.log('新建博客草稿')
|
||
|
|
// 在此处执行新建草稿逻辑
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<!-- 顶部按钮居中 -->
|
||
|
|
<div class="top-bar">
|
||
|
|
<button class="create-btn" @click="createNewDraft">新建博客</button>
|
||
|
|
</div>
|
||
|
|
<!-- 下面循环渲染草稿展示条 -->
|
||
|
|
<div class="draft-list">
|
||
|
|
<AccountWorkPiece
|
||
|
|
v-for="(item, index) in drafts"
|
||
|
|
:key="index"
|
||
|
|
:cover="item.cover"
|
||
|
|
:title="item.title"
|
||
|
|
:createdTime="item.createdTime"
|
||
|
|
:lastModifiedTime="item.lastModifiedTime"
|
||
|
|
:isDraft="true"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
color: #f5f6f7;
|
||
|
|
animation: fadeIn 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.draft-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
width: 80%;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|