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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <template>
| <a-list itemLayout="horizontal" :dataSource="data">
| <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
| <a-list-item-meta>
| <a slot="title">{{ item.title }}</a>
| <span slot="description">
| <span class="security-list-description">{{ item.description }}</span>
| <span v-if="item.value"> : </span>
| <span class="security-list-value">{{ item.value }}</span>
| </span>
| </a-list-item-meta>
| <template v-if="item.actions">
| <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
| </template>
| </a-list-item>
| </a-list>
| </template>
|
| <script>
| export default {
| data() {
| return {
| data: [
| {
| title: '账户密码',
| description: '当前密码强度',
| value: '强',
| actions: {
| title: '修改',
| callback: () => {
| this.$message.info('This is a normal message')
| }
| }
| },
| {
| title: '密保手机',
| description: '已绑定手机',
| value: '138****8293',
| actions: {
| title: '修改',
| callback: () => {
| this.$message.success('This is a message of success')
| }
| }
| },
| {
| title: '密保问题',
| description: '未设置密保问题，密保问题可有效保护账户安全',
| value: '',
| actions: {
| title: '设置',
| callback: () => {
| this.$message.error('This is a message of error')
| }
| }
| },
| {
| title: '备用邮箱',
| description: '已绑定邮箱',
| value: 'ant***sign.com',
| actions: {
| title: '修改',
| callback: () => {
| this.$message.warning('This is message of warning')
| }
| }
| },
| {
| title: 'MFA 设备',
| description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
| value: '',
| actions: {
| title: '绑定',
| callback: () => {
| this.$message.info('This is a normal message')
| }
| }
| }
| ]
| }
| }
| }
| </script>
|
| <style scoped></style>
|
|
