You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.3 KiB
46 lines
1.3 KiB
<script setup lang="ts"> |
|
import { TabPane, Tabs } from 'ant-design-vue' |
|
import { ref } from 'vue' |
|
import { settingList } from './data' |
|
import BaseSetting from './BaseSetting.vue' |
|
import SecureSetting from './SecureSetting.vue' |
|
import AccountBind from './AccountBind.vue' |
|
import MsgNotify from './MsgNotify.vue' |
|
import { ScrollContainer } from '@/components/Container/index' |
|
|
|
const wrapperRef = ref(null) |
|
|
|
const tabBarStyle = { width: '220px' } |
|
</script> |
|
|
|
<template> |
|
<ScrollContainer> |
|
<div ref="wrapperRef" class="account-setting"> |
|
<Tabs tab-position="left" :tab-bar-style="tabBarStyle"> |
|
<template v-for="item in settingList" :key="item.key"> |
|
<TabPane :tab="item.name"> |
|
<BaseSetting v-if="item.component === 'BaseSetting'" /> |
|
<SecureSetting v-if="item.component === 'SecureSetting'" /> |
|
<AccountBind v-if="item.component === 'AccountBind'" /> |
|
<MsgNotify v-if="item.component === 'MsgNotify'" /> |
|
</TabPane> |
|
</template> |
|
</Tabs> |
|
</div> |
|
</ScrollContainer> |
|
</template> |
|
|
|
<style lang="less"> |
|
.account-setting { |
|
margin: 12px; |
|
background-color: @component-background; |
|
|
|
.base-title { |
|
padding-left: 0; |
|
} |
|
|
|
.ant-tabs-tab-active { |
|
background-color: @item-active-bg; |
|
} |
|
} |
|
</style>
|
|
|