142 lines
3.6 KiB
Plaintext
142 lines
3.6 KiB
Plaintext
<template>
|
|
<PageWrapper>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
|
<a-card :bordered="false" size="small" class="proCard tabsCard">
|
|
<div class="user-account pt-4">
|
|
<div class="flex justify-center user-account-head">
|
|
<a-avatar :size="110" :src="headImg" />
|
|
</div>
|
|
<div class="flex justify-center py-4 user-account-name">Ah jun</div>
|
|
<div class="flex justify-center user-account-sign">停留只是为了，走的更远</div>
|
|
</div>
|
|
<a-list
|
|
size="small"
|
|
class="introduce"
|
|
:split="false"
|
|
item-layout="horizontal"
|
|
:data-source="introduceData"
|
|
>
|
|
<template #renderItem="{ item }">
|
|
<a-list-item style="padding: 3px 16px">
|
|
<a-list-item-meta>
|
|
<template #title>
|
|
{{ item.title }}
|
|
</template>
|
|
<template #avatar> <component :is="item.icon" /> </template>
|
|
</a-list-item-meta>
|
|
</a-list-item>
|
|
</template>
|
|
</a-list>
|
|
<a-divider dashed />
|
|
<div class="tag-list">
|
|
<div class="tag-title mb-4">标签</div>
|
|
<div class="tag-item">
|
|
<a-tag color="cyan">为人亲切</a-tag>
|
|
<a-tag color="blue">对代码有洁癖</a-tag>
|
|
<a-tag color="green">喜欢挑战新型技术</a-tag>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
|
<a-card
|
|
:tab-list="tabList"
|
|
:active-tab-key="tabKey"
|
|
@tabChange="onTabChange"
|
|
:bordered="false"
|
|
size="small"
|
|
>
|
|
<BasicSetting v-if="tabKey === 'basic'" />
|
|
<SafetySetting v-if="tabKey === 'safety'" />
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { PageWrapper } from '@/components/Page';
|
|
import BasicSetting from './BasicSetting.vue';
|
|
import SafetySetting from './SafetySetting.vue';
|
|
import { ref } from 'vue';
|
|
import { renderIcon } from '@/utils';
|
|
import {
|
|
UserOutlined,
|
|
TagOutlined,
|
|
EnvironmentOutlined,
|
|
HomeOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import headImg from '@/assets/images/schoolboy.png';
|
|
|
|
const tabKey = ref('basic');
|
|
|
|
const tabList = [
|
|
{
|
|
key: 'basic',
|
|
tab: '基本设置',
|
|
},
|
|
{
|
|
key: 'safety',
|
|
tab: '安全设置',
|
|
},
|
|
];
|
|
|
|
const introduceData = [
|
|
{
|
|
title: '资深全栈工程师',
|
|
icon: renderIcon(UserOutlined),
|
|
},
|
|
{
|
|
title: '牛B公司 - 牛B事业群 - 牛B技术部',
|
|
icon: renderIcon(HomeOutlined),
|
|
},
|
|
{
|
|
title: '中国 • 广东省 • 深圳市',
|
|
icon: renderIcon(EnvironmentOutlined),
|
|
},
|
|
{
|
|
title: 'JavaScript、HTML、CSS、Vue、Node、',
|
|
icon: renderIcon(TagOutlined),
|
|
},
|
|
];
|
|
|
|
const onTabChange = (value: string) => {
|
|
tabKey.value = value;
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.thing-cell {
|
|
margin: 0 -16px 10px;
|
|
padding: 5px 16px;
|
|
|
|
&:hover {
|
|
background: #f3f3f3;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.thing-cell-on {
|
|
background: #f0faff;
|
|
color: #2d8cf0;
|
|
|
|
:deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
|
color: #2d8cf0;
|
|
}
|
|
|
|
&:hover {
|
|
background: #f0faff;
|
|
}
|
|
}
|
|
|
|
.user-account {
|
|
&-name {
|
|
color: #333;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
.introduce {
|
|
padding-top: 30px;
|
|
}
|
|
</style>
|