| 提交 | 用户 | age | ||
| 7ad4ce | 1 | <template> |
| C | 2 | <CollapseContainer title="账号绑定" :canExpan="false"> |
| 3 | <List> | |
| 4 | <template v-for="item in list" :key="item.key"> | |
| 5 | <ListItem> | |
| 6 | <ListItemMeta> | |
| 7 | <template #avatar> | |
| 8 | <Icon v-if="item.avatar" class="avatar" :icon="item.avatar" :color="item.color" /> | |
| 9 | </template> | |
| 10 | <template #title> | |
| 11 | {{ item.title }} | |
| abb0cf | 12 | <a-button type="link" size="small" v-if="item.extra" class="extra"> |
| V | 13 | {{ item.extra }} |
| 14 | </a-button> | |
| 7ad4ce | 15 | </template> |
| C | 16 | <template #description> |
| 56a966 | 17 | <div>{{ item.description }}</div> |
| 7ad4ce | 18 | </template> |
| C | 19 | </ListItemMeta> |
| 20 | </ListItem> | |
| 21 | </template> | |
| 22 | </List> | |
| 23 | </CollapseContainer> | |
| 24 | </template> | |
| 25 | <script lang="ts"> | |
| 26 | import { List } from 'ant-design-vue'; | |
| 78d4d4 | 27 | import { defineComponent } from 'vue'; |
| 7ad4ce | 28 | import { CollapseContainer } from '/@/components/Container/index'; |
| C | 29 | import Icon from '/@/components/Icon/index'; |
| 30 | ||
| 31 | import { accountBindList } from './data'; | |
| 32 | ||
| 33 | export default defineComponent({ | |
| 34 | components: { | |
| 35 | CollapseContainer, | |
| 36 | List, | |
| 37 | ListItem: List.Item, | |
| 38 | ListItemMeta: List.Item.Meta, | |
| 39 | Icon, | |
| 40 | }, | |
| 41 | setup() { | |
| 42 | return { | |
| 43 | list: accountBindList, | |
| 44 | }; | |
| 45 | }, | |
| 46 | }); | |
| 47 | </script> | |
| 48 | <style lang="less" scoped> | |
| 49 | .avatar { | |
| 50 | font-size: 40px !important; | |
| 51 | } | |
| 52 | ||
| 53 | .extra { | |
| 54 | float: right; | |
| 55 | margin-top: 10px; | |
| 56 | margin-right: 30px; | |
| 57 | cursor: pointer; | |
| 58 | } | |
| 59 | </style> | |
