Skip to content

Commit 8c8ee82

Browse files
HearLingHearLing
authored
feat: 增加搜索表格 (#57)
* feat: 拆分文章列表 * feat: 增加搜索表格
1 parent 5aef23e commit 8c8ee82

File tree

3 files changed

+361
-139
lines changed

3 files changed

+361
-139
lines changed

‎src/components/AccountArticle.vue‎

Lines changed: 3 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,7 @@
22
<el-card shadow="never">
33
<el-tabs v-model="activeName" class="demo-tabs">
44
<el-tab-pane label="文章" name="first">
5-
<div class="list">
6-
<ul class="list-items">
7-
<li
8-
v-for="article in config.ARTICLE"
9-
:key="article.title"
10-
class="list-item"
11-
>
12-
<div class="list-item-meta">
13-
<div class="list-item-meta-content">
14-
<h4 class="list-item-meta-title">{{ article.title }}</h4>
15-
<div>
16-
<el-tag
17-
v-for="tag in article.tags"
18-
:key="tag"
19-
class="list-item-tag"
20-
>
21-
{{ tag }}
22-
</el-tag>
23-
</div>
24-
</div>
25-
</div>
26-
27-
<div class="list-content">
28-
<div class="description">
29-
{{ article.content }}
30-
</div>
31-
32-
<div class="extra">
33-
<span class="avatar">
34-
<img :src="article.avatar" />
35-
</span>
36-
<a :href="article.authorWebsite" target="_blank">
37-
{{ article.author }}
38-
</a>
39-
发布在
40-
<a :href="article.website" target="_blank">
41-
{{ article.website }}
42-
</a>
43-
44-
<em>{{ article.time }}</em>
45-
</div>
46-
</div>
47-
</li>
48-
</ul>
49-
</div>
5+
<Article :data="config.ARTICLE" />
506
</el-tab-pane>
517
<el-tab-pane label="应用" name="second">
528
<el-empty />
@@ -60,6 +16,7 @@
6016

6117
<script lang="ts" setup>
6218
import { ref } from 'vue';
19+
import Article from '../components/Article.vue';
6320
6421
const activeName = ref('first');
6522
@@ -114,93 +71,4 @@ const config = {
11471
};
11572
</script>
11673

117-
<style lang="scss" scoped>
118-
.list {
119-
box-sizing: border-box;
120-
margin: 0;
121-
padding: 0;
122-
color: rgba(0, 0, 0, 0.85);
123-
font-size: 14px;
124-
font-variant: tabular-nums;
125-
line-height: 1.5715;
126-
list-style: none;
127-
font-feature-settings: 'tnum', 'tnum';
128-
position: relative;
129-
.list-items {
130-
margin: 0;
131-
padding: 0;
132-
list-style: none;
133-
134-
.list-item {
135-
padding: 16px 24px;
136-
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
137-
}
138-
.list-item:first-child {
139-
padding-top: 0;
140-
}
141-
142-
.list-item-meta {
143-
margin-bottom: 16px;
144-
}
145-
146-
.list-item-meta-title {
147-
margin-bottom: 12px;
148-
color: rgba(0, 0, 0, 0.85);
149-
font-size: 16px;
150-
line-height: 24px;
151-
}
152-
153-
.list-item-tag {
154-
margin-right: 8px;
155-
}
156-
157-
.description {
158-
max-width: 720px;
159-
line-height: 22px;
160-
}
161-
162-
.extra {
163-
margin-top: 16px;
164-
color: rgba(0, 0, 0, 0.45);
165-
line-height: 22px;
166-
167-
.avatar img {
168-
position: relative;
169-
top: 1px;
170-
width: 20px;
171-
height: 20px;
172-
margin-right: 8px;
173-
vertical-align: top;
174-
line-height: 24px;
175-
border-radius: 50%;
176-
}
177-
178-
em {
179-
margin-left: 16px;
180-
color: rgba(0, 0, 0, 0.25);
181-
font-style: normal;
182-
}
183-
184-
a {
185-
color: #1890ff;
186-
}
187-
}
188-
189-
.list-item-action {
190-
margin-left: auto;
191-
list-style: none;
192-
.list-item-action-item {
193-
.list-item-action-split {
194-
position: absolute;
195-
top: 50%;
196-
right: 0;
197-
width: 1px;
198-
height: 14px;
199-
margin-top: -7px;
200-
background-color: rgba(0, 0, 0, 0.06);
201-
}
202-
}
203-
}
204-
}
205-
}
206-
</style>
74+
<style lang="scss" scoped></style>

‎src/components/Article.vue‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!-- 文章列表 -->
2+
<template>
3+
<div class="list">
4+
<ul class="list-items">
5+
<li v-for="article in data" :key="article.title" class="list-item">
6+
<div class="list-item-meta">
7+
<div class="list-item-meta-content">
8+
<h4 class="list-item-meta-title">{{ article.title }}</h4>
9+
<div>
10+
<el-tag
11+
v-for="tag in article.tags"
12+
:key="tag"
13+
class="list-item-tag"
14+
>
15+
{{ tag }}
16+
</el-tag>
17+
</div>
18+
</div>
19+
</div>
20+
21+
<div class="list-content">
22+
<div class="description">
23+
{{ article.content }}
24+
</div>
25+
26+
<div class="extra">
27+
<span class="avatar">
28+
<img :src="article.avatar" />
29+
</span>
30+
<a :href="article.authorWebsite" target="_blank">
31+
{{ article.author }}
32+
</a>
33+
发布在
34+
<a :href="article.website" target="_blank">
35+
{{ article.website }}
36+
</a>
37+
38+
<em>{{ article.time }}</em>
39+
</div>
40+
</div>
41+
</li>
42+
</ul>
43+
</div>
44+
</template>
45+
46+
<script lang="ts" setup>
47+
export interface DataTyps {
48+
title: string;
49+
tags: string[];
50+
content: string;
51+
avatar: string;
52+
author: string;
53+
authorWebsite: string;
54+
website: string;
55+
time: string;
56+
}
57+
58+
defineProps<{
59+
data: DataTyps[];
60+
}>();
61+
</script>
62+
<style lang="scss" scoped>
63+
.list {
64+
box-sizing: border-box;
65+
margin: 0;
66+
padding: 0;
67+
color: rgba(0, 0, 0, 0.85);
68+
font-size: 14px;
69+
font-variant: tabular-nums;
70+
line-height: 1.5715;
71+
list-style: none;
72+
font-feature-settings: 'tnum', 'tnum';
73+
position: relative;
74+
.list-items {
75+
margin: 0;
76+
padding: 0;
77+
list-style: none;
78+
79+
.list-item {
80+
padding: 16px 24px;
81+
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
82+
}
83+
.list-item:first-child {
84+
padding-top: 0;
85+
}
86+
87+
.list-item-meta {
88+
margin-bottom: 16px;
89+
}
90+
91+
.list-item-meta-title {
92+
margin-bottom: 12px;
93+
color: rgba(0, 0, 0, 0.85);
94+
font-size: 16px;
95+
line-height: 24px;
96+
}
97+
98+
.list-item-tag {
99+
margin-right: 8px;
100+
}
101+
102+
.description {
103+
max-width: 720px;
104+
line-height: 22px;
105+
}
106+
107+
.extra {
108+
margin-top: 16px;
109+
color: rgba(0, 0, 0, 0.45);
110+
line-height: 22px;
111+
112+
.avatar img {
113+
position: relative;
114+
top: 1px;
115+
width: 20px;
116+
height: 20px;
117+
margin-right: 8px;
118+
vertical-align: top;
119+
line-height: 24px;
120+
border-radius: 50%;
121+
}
122+
123+
em {
124+
margin-left: 16px;
125+
color: rgba(0, 0, 0, 0.25);
126+
font-style: normal;
127+
}
128+
129+
a {
130+
color: #1890ff;
131+
}
132+
}
133+
134+
.list-item-action {
135+
margin-left: auto;
136+
list-style: none;
137+
.list-item-action-item {
138+
.list-item-action-split {
139+
position: absolute;
140+
top: 50%;
141+
right: 0;
142+
width: 1px;
143+
height: 14px;
144+
margin-top: -7px;
145+
background-color: rgba(0, 0, 0, 0.06);
146+
}
147+
}
148+
}
149+
}
150+
}
151+
</style>

0 commit comments

Comments
 (0)