|
1
2
3
4
5
6
7
8
9
|
<template>
<div class="account-settings-info-view">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form layout="vertical">
<a-form-item
label="昵称"
>
|
|
10
|
<a-input placeholder="给自己起个名字"/>
|
|
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
|
</a-form-item>
<a-form-item
label="Bio"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登录密码"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-col>
|
|
54
|
<!-- <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
|
|
55
|
<div class="ant-upload-preview" @click="$refs.modal.edit(1)">
|
|
56
57
|
<a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="mask">
|
|
58
|
<a-icon type="plus"/>
|
|
59
60
61
|
</div>
<img :src="option.img"/>
</div>
|
|
62
|
</a-col> -->
|
|
63
64
65
66
67
68
69
70
71
72
|
</a-row>
<avatar-modal ref="modal">
</avatar-modal>
</div>
</template>
<script>
|
|
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import AvatarModal from './AvatarModal'
export default {
components: {
AvatarModal
},
data() {
return {
// cropper
preview: {},
option: {
img: '/avatar2.jpg',
info: true,
size: 1,
outputType: 'jpeg',
canScale: false,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 180,
autoCropHeight: 180,
fixedBox: true,
// 开启宽度和高度比例
fixed: true,
fixedNumber: [1, 1]
|
|
97
98
|
}
}
|
|
99
100
101
|
},
methods: {}
}
|
|
102
103
104
105
|
</script>
<style lang="less" scoped>
|
|
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
.avatar-upload-wrapper {
height: 200px;
width: 100%;
}
.ant-upload-preview {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 180px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
.upload-icon {
position: absolute;
top: 0;
right: 10px;
font-size: 1.4rem;
padding: 0.5rem;
background: rgba(222, 221, 221, 0.7);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
128
129
|
}
|
|
130
131
132
133
134
135
|
.mask {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: opacity 0.4s;
|
|
136
|
|
|
137
138
|
&:hover {
opacity: 1;
|
|
139
140
|
}
|
|
141
142
143
144
145
146
147
148
|
i {
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1rem;
margin-top: -1rem;
color: #d6d6d6;
|
|
149
|
}
|
|
150
|
}
|
|
151
|
|
|
152
153
154
155
156
157
|
img, .mask {
width: 100%;
max-width: 180px;
height: 100%;
border-radius: 50%;
overflow: hidden;
|
|
158
|
}
|
|
159
|
}
|
|
160
|
</style>
|