74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<ScrollContainer>
|
||
|
|
<PageWrapper dense contentFullHeight fixedHeight>
|
||
|
|
<div ref="wrapperRef" :class="prefixCls">
|
||
|
|
<Tabs tab-position="left" :tabBarStyle="tabBarStyle" class="h-full">
|
||
|
|
<template v-for="item in settingList" :key="item.key">
|
||
|
|
<TabPane :tab="item.name" class="h-full">
|
||
|
|
<component :is="item.component" />
|
||
|
|
</TabPane>
|
||
|
|
</template>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
</PageWrapper>
|
||
|
|
</ScrollContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
import { Tabs } from 'ant-design-vue';
|
||
|
|
import { PageWrapper } from '/@/components/Page';
|
||
|
|
import { ScrollContainer } from '/@/components/Container/index';
|
||
|
|
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 UpdatePassword from './UpdatePassword.vue';
|
||
|
|
import HomeSetting from './HomeSetting.vue';
|
||
|
|
export default defineComponent({
|
||
|
|
components: {
|
||
|
|
ScrollContainer,
|
||
|
|
Tabs,
|
||
|
|
TabPane: Tabs.TabPane,
|
||
|
|
BaseSetting,
|
||
|
|
SecureSetting,
|
||
|
|
AccountBind,
|
||
|
|
MsgNotify,
|
||
|
|
UpdatePassword,
|
||
|
|
HomeSetting,
|
||
|
|
PageWrapper,
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
return {
|
||
|
|
prefixCls: 'account-setting',
|
||
|
|
settingList,
|
||
|
|
tabBarStyle: {
|
||
|
|
width: '220px',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.account-setting {
|
||
|
|
height: 100%;
|
||
|
|
background-color: @component-background;
|
||
|
|
margin-right: 7px;
|
||
|
|
|
||
|
|
.base-title {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-tabs-tab-active {
|
||
|
|
background-color: @item-active-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-tabs-content-holder),
|
||
|
|
:deep(.ant-tabs-content) {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|