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.
88 lines
2.0 KiB
88 lines
2.0 KiB
<template> |
|
<ScrollContainer> |
|
<div class="account-setting"> |
|
<Tabs tab-position="left" |
|
:animated="false" |
|
:tabBarStyle="tabBarStyle" |
|
> |
|
<template v-for="item in settingList" :key="item.key"> |
|
<TabPane> |
|
<template #tab> |
|
<span> |
|
<Icon :icon="item.prefixIcon"/> |
|
{{ item.name }} |
|
</span> |
|
</template> |
|
<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 UserInfo from './UserInfo.vue'; |
|
import EntCertification from './EntCertification.vue'; |
|
import { Icon } from '/@/components/Icon'; |
|
|
|
export default defineComponent({ |
|
components: { |
|
ScrollContainer, |
|
Tabs, |
|
TabPane: Tabs.TabPane, |
|
UserInfo, |
|
EntCertification, |
|
Icon |
|
}, |
|
setup() { |
|
return { |
|
settingList, |
|
tabBarStyle: { |
|
width: '220px', |
|
'margin-bottom': '200px' |
|
}, |
|
}; |
|
}, |
|
}); |
|
</script> |
|
<style lang="less" scoped> |
|
.account-setting { |
|
margin: 12px; |
|
|
|
::v-deep(.ant-tabs-left) > .ant-tabs-left-bar { |
|
background-color: @component-background; |
|
height: 260px; |
|
|
|
.ant-tabs-tab { |
|
padding: 8px 24px; |
|
text-align: left; |
|
} |
|
|
|
.ant-tabs-tab-active { |
|
border-radius: 0 20px 20px 0; |
|
background-color: @primary-color !important; |
|
color: #fff!important; |
|
} |
|
|
|
.ant-tabs-nav { |
|
padding-top: 14px; |
|
padding-right: 14px; |
|
padding-bottom: 14px; |
|
} |
|
|
|
.ant-tabs-ink-bar { |
|
height: 0px !important; |
|
} |
|
} |
|
|
|
::v-deep(.ant-tabs) > .ant-tabs-left-content { |
|
padding-left: 10px; |
|
} |
|
|
|
} |
|
</style>
|
|
|