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