156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<template>
|
||
<div :class="prefixCls">
|
||
<a-row :class="`${prefixCls}-top`">
|
||
<a-col :span="9" :class="`${prefixCls}-col`">
|
||
<a-row>
|
||
<a-col :span="8">
|
||
<div :class="`${prefixCls}-top__avatar`">
|
||
<img width="70" :src="avatar" />
|
||
<span>Vben</span>
|
||
<div>海纳百川，有容乃大</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="16">
|
||
<div :class="`${prefixCls}-top__detail`">
|
||
<template v-for="detail in details" :key="detail.title">
|
||
<p>
|
||
<Icon :icon="detail.icon" />
|
||
{{ detail.title }}
|
||
</p>
|
||
</template>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :span="7" :class="`${prefixCls}-col`">
|
||
<CollapseContainer title="标签" :canExpan="false">
|
||
<template v-for="tag in tags" :key="tag">
|
||
<Tag class="mb-2">
|
||
{{ tag }}
|
||
</Tag>
|
||
</template>
|
||
</CollapseContainer>
|
||
</a-col>
|
||
<a-col :span="8" :class="`${prefixCls}-col`">
|
||
<CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false">
|
||
<div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
|
||
<Icon :icon="team.icon" :color="team.color" />
|
||
<span>{{ team.title }}</span>
|
||
</div>
|
||
</CollapseContainer>
|
||
</a-col>
|
||
</a-row>
|
||
<div :class="`${prefixCls}-bottom`">
|
||
<Tabs>
|
||
<template v-for="item in achieveList" :key="item.key">
|
||
<TabPane :tab="item.name">
|
||
<component :is="item.component" />
|
||
</TabPane>
|
||
</template>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { Tag, Tabs, Row, Col } from 'ant-design-vue';
|
||
import { defineComponent, computed } from 'vue';
|
||
import { CollapseContainer } from '/@/components/Container/index';
|
||
import Icon from '/@/components/Icon/index';
|
||
import Article from './Article.vue';
|
||
import Application from './Application.vue';
|
||
import Project from './Project.vue';
|
||
|
||
import headerImg from '/@/assets/images/header.jpg';
|
||
import { tags, teams, details, achieveList } from './data';
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
CollapseContainer,
|
||
Icon,
|
||
Tag,
|
||
Tabs,
|
||
TabPane: Tabs.TabPane,
|
||
Article,
|
||
Application,
|
||
Project,
|
||
[Row.name]: Row,
|
||
[Col.name]: Col,
|
||
},
|
||
setup() {
|
||
const userStore = useUserStore();
|
||
const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
|
||
return {
|
||
prefixCls: 'account-center',
|
||
avatar,
|
||
tags,
|
||
teams,
|
||
details,
|
||
achieveList,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.account-center {
|
||
&-col:not(:last-child) {
|
||
padding: 0 10px;
|
||
|
||
&:not(:last-child) {
|
||
border-right: 1px dashed rgb(206 206 206 / 50%);
|
||
}
|
||
}
|
||
|
||
&-top {
|
||
padding: 10px;
|
||
margin: 16px 16px 12px;
|
||
background-color: @component-background;
|
||
border-radius: 3px;
|
||
|
||
&__avatar {
|
||
text-align: center;
|
||
|
||
img {
|
||
margin: auto;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
span {
|
||
display: block;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
div {
|
||
margin-top: 3px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
&__detail {
|
||
padding-left: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
&__team {
|
||
&-item {
|
||
display: inline-block;
|
||
padding: 4px 24px;
|
||
}
|
||
|
||
span {
|
||
margin-left: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-bottom {
|
||
padding: 10px;
|
||
margin: 0 16px 16px;
|
||
background-color: @component-background;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
</style>
|