mirror of https://github.com/halo-dev/halo
Made JournalList page more beautiful.
ruibaby
parent
3c303c0c12
commit
754e2a4873
|
|
@ -2,65 +2,117 @@
|
||||||
<div class="page-header-index-wide">
|
<div class="page-header-index-wide">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
<a-card>
|
<a-card :bordered="false">
|
||||||
<a-list
|
<div class="table-page-search-wrapper">
|
||||||
class="demo-loadmore-list"
|
<a-form layout="inline">
|
||||||
:loading="loading"
|
<a-row :gutter="48">
|
||||||
itemLayout="horizontal"
|
<a-col :md="6" :sm="24">
|
||||||
:dataSource="data"
|
<a-form-item label="关键词">
|
||||||
>
|
<a-input/>
|
||||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
</a-form-item>
|
||||||
<a slot="actions">edit</a>
|
</a-col>
|
||||||
<a slot="actions">more</a>
|
<a-col :md="6" :sm="24">
|
||||||
<a-list-item-meta :description="item.url">
|
<a-form-item label="年月份">
|
||||||
<a slot="title" href="https://vue.ant.design/">{{ item.url }}</a>
|
<a-select placeholder="请选择年月">
|
||||||
<a-avatar
|
<a-select-option value="2019-01">2019-01</a-select-option>
|
||||||
slot="avatar"
|
<a-select-option value="2019-02">2019-02</a-select-option>
|
||||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
<a-select-option value="2019-03">2019-03</a-select-option>
|
||||||
/>
|
</a-select>
|
||||||
</a-list-item-meta>
|
</a-form-item>
|
||||||
<div>content</div>
|
</a-col>
|
||||||
</a-list-item>
|
<a-col :md="6" :sm="24">
|
||||||
</a-list>
|
<a-form-item label="状态">
|
||||||
|
<a-select placeholder="请选择状态">
|
||||||
|
<a-select-option value="1">公开</a-select-option>
|
||||||
|
<a-select-option value="0">私密</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :md="6" :sm="24">
|
||||||
|
<span class="table-page-search-submitButtons">
|
||||||
|
<a-button type="primary">查询</a-button>
|
||||||
|
<a-button style="margin-left: 8px;">重置</a-button>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<div class="table-operator">
|
||||||
|
<a-button type="primary" icon="plus" @click="handleNew">写日志</a-button>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
<div style="margin-top:15px">
|
||||||
|
<a-list itemLayout="vertical" :pagination="pagination" :dataSource="listData">
|
||||||
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||||
|
<a slot="actions" @click="handleEdit(item)">编辑</a>
|
||||||
|
<a slot="actions">删除</a>
|
||||||
|
<a-list-item-meta :description="item.description">
|
||||||
|
<a slot="title" :href="item.href">{{ item.title }}</a>
|
||||||
|
<a-avatar slot="avatar" :src="item.avatar" size="large"/>
|
||||||
|
</a-list-item-meta>
|
||||||
|
{{ item.content }}
|
||||||
|
</a-list-item>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
|
<a-modal title="新建" v-model="visible">
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item label="标题：">
|
||||||
|
<a-input v-model="journal.title"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="内容：">
|
||||||
|
<a-input
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 5 }"
|
||||||
|
v-model="journal.content"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import postApi from '@/api/post'
|
const listData = []
|
||||||
|
for (let i = 0; i < 50; i++) {
|
||||||
|
listData.push({
|
||||||
|
href: '#',
|
||||||
|
title: `Title ${i}`,
|
||||||
|
avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm',
|
||||||
|
description: '2019-04-12 09:00:00',
|
||||||
|
content:
|
||||||
|
'这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志,这是一条日志'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: true,
|
listData,
|
||||||
data: [],
|
visible: false,
|
||||||
queryParam: {
|
pagination: {
|
||||||
page: 0,
|
onChange: page => {
|
||||||
size: 10,
|
console.log(page)
|
||||||
sort: null,
|
},
|
||||||
keyword: null,
|
pageSize: 10
|
||||||
categoryId: null,
|
},
|
||||||
status: null
|
actions: [{ type: 'star-o', text: '156' }, { type: 'like-o', text: '156' }, { type: 'message', text: '2' }],
|
||||||
}
|
journal: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.loadPosts()
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
loadPosts() {
|
handleNew() {
|
||||||
postApi.listLatest().then(response => {
|
this.visible = true
|
||||||
this.data = response.data.data
|
},
|
||||||
this.loading = false
|
handleEdit(item) {
|
||||||
})
|
this.journal = item
|
||||||
|
this.visible = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.demo-loadmore-list {
|
|
||||||
min-height: 350px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue