1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <template>
| <ScrollContainer>
| <div ref="wrapperRef" :class="prefixCls">
| <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
| <template v-for="item in settingList" :key="item.key">
| <TabPane :tab="item.name">
| <component :is="item.component" />
| </TabPane>
| </template>
| </Tabs>
| </div>
| </ScrollContainer>
| </template>
|
| <script lang="ts">
| import { defineComponent } from 'vue';
| import { Tabs } from 'ant-design-vue';
|
| 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';
|
| export default defineComponent({
| components: {
| ScrollContainer,
| Tabs,
| TabPane: Tabs.TabPane,
| BaseSetting,
| SecureSetting,
| AccountBind,
| MsgNotify,
| },
| setup() {
| return {
| prefixCls: 'account-setting',
| settingList,
| tabBarStyle: {
| width: '220px',
| },
| };
| },
| });
| </script>
| <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>
|
|
