Skip to content

Commit

Permalink
feat: add account center page (#86)
Browse files Browse the repository at this point in the history
  • Loading branch information
chen-xt authored Nov 15, 2020
1 parent 7ad4cee commit 78d4d41
Show file tree
Hide file tree
Showing 12 changed files with 557 additions and 4 deletions.
2 changes: 1 addition & 1 deletion mock/demo/account.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess } from '../_util';

const userInfo = {
name: 'Serati Ma',
name: 'Vben',
userid: '00000001',
email: 'antdesign@alipay.com',
signature: '海纳百川,有容乃大',
Expand Down
Binary file added src/assets/images/demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/router/menus/modules/demo/page.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
/*
* @description: Do not edit
* @author: cxiaoting
* @Date: 2020-11-13 14:00:37
* @LastEditors: cxiaoting
* @LastEditTime: 2020-11-13 18:07:11
*/
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 20,
Expand Down Expand Up @@ -58,6 +65,10 @@ const menu: MenuModule = {
content: 'new',
},
children: [
{
path: 'center',
name: '个人中心',
},
{
path: 'setting',
name: '个人设置',
Expand Down
8 changes: 8 additions & 0 deletions src/router/routes/modules/demo/page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,14 @@ const page: AppRouteModule = {
title: '个人页',
},
children: [
{
path: 'center',
name: 'AccountCenterPage',
component: () => import('/@/views/demo/page/account/center/index.vue'),
meta: {
title: '个人中心',
},
},
{
path: 'setting',
name: 'AccountSettingPage',
Expand Down
93 changes: 93 additions & 0 deletions src/views/demo/page/account/center/Application.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<template>
<List :class="prefixCls">
<Row :gutter="16">
<template v-for="(item, index) in list" :key="index">
<Col :span="6">
<ListItem>
<Card :hoverable="true" :class="`${prefixCls}__card`">
<div :class="`${prefixCls}__card-title`">
<Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
{{ item.title }}
</div>
<div :class="`${prefixCls}__card-num`">
活跃用户:<span>{{ item.active }}</span> 万
</div>
<div :class="`${prefixCls}__card-num`">
新增用户:<span>{{ item.new }}</span>
</div>
<Icon
:class="`${prefixCls}__card-download`"
v-if="item.download"
:icon="item.download"
/>
</Card>
</ListItem>
</Col>
</template>
</Row>
</List>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List, Card, Row, Col } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import { applicationList } from './data';
export default defineComponent({
components: {
List,
ListItem: List.Item,
Card,
Row,
Col,
Icon,
},
setup() {
return {
prefixCls: 'account-center-application',
list: applicationList,
};
},
});
</script>
<style lang="less" scoped>
.account-center-application {
&__card {
width: 100%;
/deep/ .ant-card-body {
padding: 16px;
}
&-title {
margin-bottom: 5px;
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
.icon {
margin-top: -5px;
font-size: 22px;
}
}
&-num {
margin-left: 24px;
line-height: 36px;
color: #7d7a7a;
span {
margin-left: 5px;
font-size: 18px;
color: #000;
}
}
&-download {
float: right;
font-size: 20px !important;
color: #1890ff;
}
}
}
</style>
90 changes: 90 additions & 0 deletions src/views/demo/page/account/center/Article.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template>
<List item-layout="vertical" :class="prefixCls">
<template v-for="(item, index) in list" :key="index">
<ListItem>
<ListItemMeta>
<template #description>
<div :class="`${prefixCls}__content`">{{ item.content }}</div>
</template>
<template #title>
<p :class="`${prefixCls}__title`"> {{ item.title }}</p>
<div>
<template v-for="(tag, index) in item.description" :key="index">
<Tag class="mb-2">{{ tag }}</Tag>
</template>
</div>
</template>
</ListItemMeta>
<div>
<template v-for="(action, index) in actions" :key="index">
<div :class="`${prefixCls}__action`">
<Icon
v-if="action.icon"
:class="`${prefixCls}__action-icon`"
:icon="action.icon"
:color="action.color"
/>
{{ action.text }}
</div>
</template>
<span :class="`${prefixCls}__time`">{{ item.time }}</span>
</div>
</ListItem>
</template>
</List>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List, Tag } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import { actions, articleList } from './data';
export default defineComponent({
components: {
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
Tag,
Icon,
},
setup() {
return {
prefixCls: 'account-center-article',
list: articleList,
actions,
};
},
});
</script>
<style lang="less" scoped>
.account-center-article {
&__title {
margin-bottom: 12px;
font-size: 18px;
}
&__content {
color: rgba(0, 0, 0, 0.65);
}
&__action {
display: inline-block;
padding: 0 16px;
color: rgba(0, 0, 0, 0.45);
&:not(:last-child) {
border-right: 1px solid rgba(206, 206, 206, 0.4);
}
&-icon {
margin-right: 3px;
}
}
&__time {
position: absolute;
right: 20px;
color: rgba(0, 0, 0, 0.45);
}
}
</style>
69 changes: 69 additions & 0 deletions src/views/demo/page/account/center/Project.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<List :class="prefixCls">
<Row :gutter="16">
<template v-for="(item, index) in list" :key="index">
<Col :span="6">
<ListItem>
<Card :hoverable="true" :class="`${prefixCls}__card`">
<img :src="demoImg" />
<div :class="`${prefixCls}__card-title`">
{{ item.title }}
</div>
<div :class="`${prefixCls}__card-content`"> {{ item.content }}</div>
</Card>
</ListItem>
</Col>
</template>
</Row>
</List>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List, Card, Row, Col } from 'ant-design-vue';
import demoImg from '/@/assets/images/demo.png';
import { projectList } from './data';
export default defineComponent({
components: {
List,
ListItem: List.Item,
Card,
Row,
Col,
},
setup() {
return {
prefixCls: 'account-center-project',
list: projectList,
demoImg,
};
},
});
</script>
<style lang="less" scoped>
.account-center-project {
&__card {
width: 100%;
/deep/ .ant-card-body {
padding: 0 0 24px 0;
}
img {
width: 100%;
height: 100px;
}
&-title {
margin: 5px 10px;
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
&-content {
margin: 5px 10px;
}
}
}
</style>
Loading

0 comments on commit 78d4d41

Please sign in to comment.