|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-row :gutter="24">
<a-col :md="24" :lg="7">
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
<img :src="getAvatar()"/>
</div>
<div class="username">{{ nickname() }}</div>
<div class="bio">海纳百川,有容乃大</div>
</div>
<div class="account-center-detail">
<p>
<i class="title"></i>交互专家
</p>
<p>
<i class="group"></i>蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED
</p>
<p>
<i class="address"></i><span>浙江省</span><span>杭州市</span>
</p>
</div>
|
|
25
|
<a-divider/>
|
|
26
27
28
29
30
31
32
33
34
35
|
<div class="account-center-tags">
<div class="tagsTitle">标签</div>
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
|
|
36
37
38
39
|
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{
tag
}}
</a-tag>
|
|
40
41
42
43
44
45
46
47
48
49
50
51
52
|
</template>
<a-input
v-if="tagInputVisible"
ref="tagInput"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputChange"
@blur="handleTagInputConfirm"
@keyup.enter="handleTagInputConfirm"
/>
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
|
|
53
54
|
<a-icon type="plus"/>
New Tag
|
|
55
56
57
|
</a-tag>
</div>
</div>
|
|
58
|
<a-divider :dashed="true"/>
|
|
59
60
61
62
63
64
65
66
|
<div class="account-center-team">
<div class="teamTitle">团队</div>
<a-spin :spinning="teamSpinning">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
|
|
67
|
<a-avatar size="small" :src="item.avatar"/>
|
|
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
</div>
</a-spin>
</div>
</a-card>
</a-col>
<a-col :md="24" :lg="17">
<a-card
style="width:100%"
:bordered="false"
:tabList="tabListNoTitle"
:activeTabKey="noTitleKey"
@tabChange="key => handleTabChange(key, 'noTitleKey')"
>
<article-page v-if="noTitleKey === 'article'"></article-page>
<app-page v-else-if="noTitleKey === 'app'"></app-page>
<project-page v-else-if="noTitleKey === 'project'"></project-page>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
|
|
97
98
99
100
101
|
import PageLayout from '@/components/page/PageLayout'
import RouteView from "@/components/layouts/RouteView"
import {AppPage, ArticlePage, ProjectPage} from './page'
import {mapGetters} from 'vuex'
import {getFileAccessHttpUrl} from '@/api/manage';
|
|
102
|
|
|
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
export default {
components: {
RouteView,
PageLayout,
AppPage,
ArticlePage,
ProjectPage
},
data() {
return {
tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
tagInputVisible: false,
tagInputValue: '',
teams: [],
teamSpinning: true,
tabListNoTitle: [{
key: 'article',
tab: '文章(8)',
}, {
key: 'app',
tab: '应用(8)',
}, {
key: 'project',
tab: '项目(8)',
|
|
130
|
}
|
|
131
132
133
134
135
136
137
138
139
140
141
|
],
noTitleKey: 'app',
}
},
mounted() {
this.getTeams()
},
methods: {
...mapGetters(["nickname", "avatar"]),
getAvatar() {
return getFileAccessHttpUrl(this.avatar());
|
|
142
|
},
|
|
143
144
145
146
147
|
getTeams() {
this.$http.get('/mock/api/workplace/teams')
.then(res => {
this.teams = res.result
this.teamSpinning = false
|
|
148
|
})
|
|
149
|
},
|
|
150
|
|
|
151
152
153
|
handleTabChange(key, type) {
this[type] = key
},
|
|
154
|
|
|
155
156
157
158
|
handleTagClose(removeTag) {
const tags = this.tags.filter(tag => tag != removeTag)
this.tags = tags
},
|
|
159
|
|
|
160
161
162
163
164
|
showTagInput() {
this.tagInputVisible = true
this.$nextTick(() => {
this.$refs.tagInput.focus()
})
|
|
165
|
},
|
|
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
handleInputChange(e) {
this.tagInputValue = e.target.value
},
handleTagInputConfirm() {
const inputValue = this.tagInputValue
let tags = this.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
}
},
}
|
|
186
187
188
|
</script>
<style lang="less" scoped>
|
|
189
190
191
192
193
|
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: .3s;
|
|
194
|
|
|
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
.account-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
img {
height: 100%;
width: 100%;
|
|
210
211
212
|
}
}
|
|
213
214
215
216
217
218
219
220
|
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
}
}
|
|
221
|
|
|
222
|
.account-center-detail {
|
|
223
|
|
|
224
225
226
227
228
|
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
|
|
229
|
|
|
230
231
232
233
234
235
236
|
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
|
|
237
238
|
}
|
|
239
240
241
242
243
244
245
246
247
248
|
.title {
background-position: 0 0;
}
.group {
background-position: 0 -22px;
}
.address {
background-position: 0 -44px;
|
|
249
|
}
|
|
250
251
252
253
254
255
256
|
}
.account-center-tags {
.ant-tag {
margin-bottom: 8px;
}
}
|
|
257
|
|
|
258
|
.account-center-team {
|
|
259
|
|
|
260
261
262
263
264
265
266
267
268
269
|
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
|
|
270
|
line-height: 24px;
|
|
271
272
273
274
275
276
277
278
279
280
|
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
|
|
281
282
283
284
|
}
}
}
}
|
|
285
|
}
|
|
286
|
|
|
287
288
289
290
|
.tagsTitle, .teamTitle {
font-weight: 500;
color: rgba(0, 0, 0, .85);
margin-bottom: 12px;
|
|
291
292
|
}
|
|
293
294
|
}
|
|
295
|
</style>
|