vben
authored
|
1
2
3
4
5
6
7
8
|
<template>
<CollapseContainer class="news-list" title="动态" :canExpan="false">
<ScrollContainer>
<List>
<template v-for="item in newList" :key="item.id">
<ListItem class="news-list__item">
<ListItemMeta>
<template #avatar>
|
vben
authored
|
9
|
<img :src="headerImg" class="news-list__item-avatar" />
|
vben
authored
|
10
11
12
|
</template>
<template #description>
<div class="news-list__item-desc">
|
vben
authored
|
13
14
15
|
<div class="news-list__item-time mb-1">
{{ item.sendTime }}
</div>
|
vben
authored
|
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<div class="news-list__item-title mb-1">
<span class="news-list__item-light">{{ item.sender }} </span>申请迭代
<span class="news-list__item-light"> {{ item.title }} </span>发布
</div>
<div class="news-list__item-cnte p-2">
<span class="news-list__item-cnte__title"> {{ item.cnteId }}</span>
<br />
Status: {{ item.cnteStas }}
<br />
Repository: {{ item.cnteRepo }}
<br />
</div>
</div>
</template>
</ListItemMeta>
</ListItem>
</template>
</List>
</ScrollContainer>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List } from 'ant-design-vue';
import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
|
vben
authored
|
41
|
import headerImg from '/@/assets/images/header.jpg';
|
vben
authored
|
42
43
44
45
46
47
48
49
50
51
52
|
import { newList } from '../data';
export default defineComponent({
components: {
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
CollapseContainer,
ScrollContainer,
},
setup() {
|
vben
authored
|
53
|
return { newList, headerImg };
|
vben
authored
|
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
},
});
</script>
<style lang="less" scoped>
.news-list {
&__item {
&-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
}
&-title {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.65;
}
&-time {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.45;
}
&-light {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.85;
}
&-cnte {
background: #eef3fb;
border-radius: 2px;
opacity: 0.6;
&__title {
font-size: 14px;
line-height: 22px;
|
vben
authored
|
95
|
color: rgba(0, 0, 0, 0.85);
|
vben
authored
|
96
97
98
99
100
|
}
}
}
}
</style>
|