Skip to content

Commit 78d4d41

Browse files
chen-xtchen-xt
authored
feat: add account center page (#86)
1 parent 7ad4cee commit 78d4d41

File tree

12 files changed

+557
-4
lines changed

12 files changed

+557
-4
lines changed

‎mock/demo/account.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { MockMethod } from 'vite-plugin-mock';
22
import { resultSuccess } from '../_util';
33

44
const userInfo = {
5-
name: 'Serati Ma',
5+
name: 'Vben',
66
userid: '00000001',
77
email: 'antdesign@alipay.com',
88
signature: '海纳百川，有容乃大',

‎src/assets/images/demo.png‎

17 KB
Loading

‎src/router/menus/modules/demo/page.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/*
2+
* @description: Do not edit
3+
* @author: cxiaoting
4+
* @Date: 2020-11-13 14:00:37
5+
* @LastEditors: cxiaoting
6+
* @LastEditTime: 2020-11-13 18:07:11
7+
*/
18
import type { MenuModule } from '/@/router/types.d';
29
const menu: MenuModule = {
310
orderNo: 20,
@@ -58,6 +65,10 @@ const menu: MenuModule = {
5865
content: 'new',
5966
},
6067
children: [
68+
{
69+
path: 'center',
70+
name: '个人中心',
71+
},
6172
{
6273
path: 'setting',
6374
name: '个人设置',

‎src/router/routes/modules/demo/page.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@ const page: AppRouteModule = {
126126
title: '个人页',
127127
},
128128
children: [
129+
{
130+
path: 'center',
131+
name: 'AccountCenterPage',
132+
component: () => import('/@/views/demo/page/account/center/index.vue'),
133+
meta: {
134+
title: '个人中心',
135+
},
136+
},
129137
{
130138
path: 'setting',
131139
name: 'AccountSettingPage',

‎src/views/demo/page/account/center/Application.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<List :class="prefixCls">
3+
<Row :gutter="16">
4+
<template v-for="(item, index) in list" :key="index">
5+
<Col :span="6">
6+
<ListItem>
7+
<Card :hoverable="true" :class="`${prefixCls}__card`">
8+
<div :class="`${prefixCls}__card-title`">
9+
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
10+
{{ item.title }}
11+
</div>
12+
<div :class="`${prefixCls}__card-num`">
13+
活跃用户：<span>{{ item.active }}</span> 万
14+
</div>
15+
<div :class="`${prefixCls}__card-num`">
16+
新增用户：<span>{{ item.new }}</span>
17+
</div>
18+
<Icon
19+
:class="`${prefixCls}__card-download`"
20+
v-if="item.download"
21+
:icon="item.download"
22+
/>
23+
</Card>
24+
</ListItem>
25+
</Col>
26+
</template>
27+
</Row>
28+
</List>
29+
</template>
30+
<script lang="ts">
31+
import { defineComponent } from 'vue';
32+
import { List, Card, Row, Col } from 'ant-design-vue';
33+
import Icon from '/@/components/Icon/index';
34+
import { applicationList } from './data';
35+
36+
export default defineComponent({
37+
components: {
38+
List,
39+
ListItem: List.Item,
40+
Card,
41+
Row,
42+
Col,
43+
Icon,
44+
},
45+
setup() {
46+
return {
47+
prefixCls: 'account-center-application',
48+
list: applicationList,
49+
};
50+
},
51+
});
52+
</script>
53+
<style lang="less" scoped>
54+
.account-center-application {
55+
&__card {
56+
width: 100%;
57+
58+
/deep/ .ant-card-body {
59+
padding: 16px;
60+
}
61+
62+
&-title {
63+
margin-bottom: 5px;
64+
font-size: 16px;
65+
font-weight: 500;
66+
color: rgba(0, 0, 0, 0.85);
67+
68+
.icon {
69+
margin-top: -5px;
70+
font-size: 22px;
71+
}
72+
}
73+
74+
&-num {
75+
margin-left: 24px;
76+
line-height: 36px;
77+
color: #7d7a7a;
78+
79+
span {
80+
margin-left: 5px;
81+
font-size: 18px;
82+
color: #000;
83+
}
84+
}
85+
86+
&-download {
87+
float: right;
88+
font-size: 20px !important;
89+
color: #1890ff;
90+
}
91+
}
92+
}
93+
</style>

‎src/views/demo/page/account/center/Article.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<List item-layout="vertical" :class="prefixCls">
3+
<template v-for="(item, index) in list" :key="index">
4+
<ListItem>
5+
<ListItemMeta>
6+
<template #description>
7+
<div :class="`${prefixCls}__content`">{{ item.content }}</div>
8+
</template>
9+
<template #title>
10+
<p :class="`${prefixCls}__title`"> {{ item.title }}</p>
11+
<div>
12+
<template v-for="(tag, index) in item.description" :key="index">
13+
<Tag class="mb-2">{{ tag }}</Tag>
14+
</template>
15+
</div>
16+
</template>
17+
</ListItemMeta>
18+
<div>
19+
<template v-for="(action, index) in actions" :key="index">
20+
<div :class="`${prefixCls}__action`">
21+
<Icon
22+
v-if="action.icon"
23+
:class="`${prefixCls}__action-icon`"
24+
:icon="action.icon"
25+
:color="action.color"
26+
/>
27+
{{ action.text }}
28+
</div>
29+
</template>
30+
<span :class="`${prefixCls}__time`">{{ item.time }}</span>
31+
</div>
32+
</ListItem>
33+
</template>
34+
</List>
35+
</template>
36+
<script lang="ts">
37+
import { defineComponent } from 'vue';
38+
import { List, Tag } from 'ant-design-vue';
39+
import Icon from '/@/components/Icon/index';
40+
import { actions, articleList } from './data';
41+
42+
export default defineComponent({
43+
components: {
44+
List,
45+
ListItem: List.Item,
46+
ListItemMeta: List.Item.Meta,
47+
Tag,
48+
Icon,
49+
},
50+
setup() {
51+
return {
52+
prefixCls: 'account-center-article',
53+
list: articleList,
54+
actions,
55+
};
56+
},
57+
});
58+
</script>
59+
<style lang="less" scoped>
60+
.account-center-article {
61+
&__title {
62+
margin-bottom: 12px;
63+
font-size: 18px;
64+
}
65+
66+
&__content {
67+
color: rgba(0, 0, 0, 0.65);
68+
}
69+
70+
&__action {
71+
display: inline-block;
72+
padding: 0 16px;
73+
color: rgba(0, 0, 0, 0.45);
74+
75+
&:not(:last-child) {
76+
border-right: 1px solid rgba(206, 206, 206, 0.4);
77+
}
78+
79+
&-icon {
80+
margin-right: 3px;
81+
}
82+
}
83+
84+
&__time {
85+
position: absolute;
86+
right: 20px;
87+
color: rgba(0, 0, 0, 0.45);
88+
}
89+
}
90+
</style>

‎src/views/demo/page/account/center/Project.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<List :class="prefixCls">
3+
<Row :gutter="16">
4+
<template v-for="(item, index) in list" :key="index">
5+
<Col :span="6">
6+
<ListItem>
7+
<Card :hoverable="true" :class="`${prefixCls}__card`">
8+
<img :src="demoImg" />
9+
<div :class="`${prefixCls}__card-title`">
10+
{{ item.title }}
11+
</div>
12+
<div :class="`${prefixCls}__card-content`"> {{ item.content }}</div>
13+
</Card>
14+
</ListItem>
15+
</Col>
16+
</template>
17+
</Row>
18+
</List>
19+
</template>
20+
<script lang="ts">
21+
import { defineComponent } from 'vue';
22+
import { List, Card, Row, Col } from 'ant-design-vue';
23+
import demoImg from '/@/assets/images/demo.png';
24+
import { projectList } from './data';
25+
26+
export default defineComponent({
27+
components: {
28+
List,
29+
ListItem: List.Item,
30+
Card,
31+
Row,
32+
Col,
33+
},
34+
setup() {
35+
return {
36+
prefixCls: 'account-center-project',
37+
list: projectList,
38+
demoImg,
39+
};
40+
},
41+
});
42+
</script>
43+
<style lang="less" scoped>
44+
.account-center-project {
45+
&__card {
46+
width: 100%;
47+
48+
/deep/ .ant-card-body {
49+
padding: 0 0 24px 0;
50+
}
51+
52+
img {
53+
width: 100%;
54+
height: 100px;
55+
}
56+
57+
&-title {
58+
margin: 5px 10px;
59+
font-size: 16px;
60+
font-weight: 500;
61+
color: rgba(0, 0, 0, 0.85);
62+
}
63+
64+
&-content {
65+
margin: 5px 10px;
66+
}
67+
}
68+
}
69+
</style>

0 commit comments

Comments
 (0)