Skip to content

Commit 33cb2ed

Browse files
奇淼（piexlmaxkrank666
奇淼（piexlmax
and
krank666
authored
Tailwind css personel (#1509)
* css * 修改persion页面的样式 * 优化persion样式 --------- Co-authored-by: krank666 <[email protected]>
1 parent b56e521 commit 33cb2ed

File tree

1 file changed

+52
-191
lines changed

1 file changed

+52
-191
lines changed

‎web/src/view/person/person.vue‎

Lines changed: 52 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<template>
22
<div>
3-
<el-row>
4-
<el-col :span="6">
5-
<div class="float-left avatar-box">
6-
<div class="user-card">
7-
<div class="header-box">
3+
<div class="grid grid-cols-12 w-full gap-2">
4+
<div class="col-span-3 h-full">
5+
<div class="w-full h-full bg-white px-4 py-8 rounded-lg shadow-lg box-border">
6+
<div class="user-card px-6 text-center bg-white shrink-0">
7+
<div class="flex justify-center">
88
<SelectImage v-model="userStore.userInfo.headerImg" />
99
</div>
10-
<div class="user-personality">
11-
<p v-if="!editFlag" class="nickName">
10+
<div class="py-6 text-center">
11+
<p v-if="!editFlag" class="text-3xl flex justify-center items-center gap-4">
1212
{{ userStore.userInfo.nickName }}
13-
<el-icon class="pointer" color="#66b1ff" @click="openEdit">
13+
<el-icon class="cursor-pointer text-sm" color="#66b1ff" @click="openEdit">
1414
<edit />
1515
</el-icon>
1616
</p>
17-
<p v-if="editFlag" class="nickName">
17+
<p v-if="editFlag" class="flex justify-center items-center gap-4">
1818
<el-input v-model="nickName" />
19-
<el-icon class="pointer" color="#67c23a" @click="enterEdit">
19+
<el-icon class="cursor-pointer" color="#67c23a" @click="enterEdit">
2020
<check />
2121
</el-icon>
22-
<el-icon class="pointer" color="#f23c3c" @click="closeEdit">
22+
<el-icon class="cursor-pointer" color="#f23c3c" @click="closeEdit">
2323
<close />
2424
</el-icon>
2525
</p>
26-
<p class="person-info">这个家伙很懒，什么都没有留下</p>
26+
<p class="text-gray-500 mt-2 text-md">这个家伙很懒，什么都没有留下</p>
2727
</div>
28-
<div class="user-information">
29-
<ul>
30-
<li>
28+
<div class="w-full h-full text-left">
29+
<ul class="inline-block h-full w-full">
30+
<li class="info-list">
3131
<el-icon>
3232
<user />
3333
</el-icon>
@@ -39,14 +39,14 @@
3939
content="北京反转极光科技有限公司-技术部-前端事业群"
4040
placement="top"
4141
>
42-
<li>
42+
<li class="info-list">
4343
<el-icon>
4444
<data-analysis />
4545
</el-icon>
4646
北京反转极光科技有限公司-技术部-前端事业群
4747
</li>
4848
</el-tooltip>
49-
<li>
49+
<li class="info-list">
5050
<el-icon>
5151
<video-camera />
5252
</el-icon>
@@ -58,7 +58,7 @@
5858
content="GoLang/JavaScript/Vue/Gorm"
5959
placement="top"
6060
>
61-
<li>
61+
<li class="info-list">
6262
<el-icon>
6363
<medal />
6464
</el-icon>
@@ -69,49 +69,50 @@
6969
</div>
7070
</div>
7171
</div>
72-
</el-col>
73-
<el-col :span="18">
74-
<div class="user-addcount">
72+
</div>
73+
<div class="col-span-9 ">
74+
<div class="bg-white h-full px-4 py-8 rounded-lg shadow-lg box-border">
7575
<el-tabs v-model="activeName" @tab-click="handleClick">
7676
<el-tab-pane label="账号绑定" name="second">
7777
<ul>
78-
<li>
79-
<p class="title">密保手机</p>
80-
<p class="desc">
78+
<li class="borderd">
79+
<p class="pb-2.5 text-xl text-gray-600">密保手机</p>
80+
<p class="pb-2.5 text-lg text-gray-400">
8181
已绑定手机:{{ userStore.userInfo.phone }}
82-
<a href="javascript:void(0)" @click="changePhoneFlag = true">立即修改</a>
82+
<a href="javascript:void(0)" @click="changePhoneFlag = true" class="float-right text-blue-400">立即修改</a>
8383
</p>
8484
</li>
85-
<li>
86-
<p class="title">密保邮箱</p>
87-
<p class="desc">
85+
<li class="borderd pt-2.5">
86+
<p class="pb-2.5 text-xl text-gray-600">密保邮箱</p>
87+
<p class="pb-2.5 text-lg text-gray-400">
8888
已绑定邮箱：{{ userStore.userInfo.email }}
89-
<a href="javascript:void(0)" @click="changeEmailFlag = true">立即修改</a>
89+
<a href="javascript:void(0)" @click="changeEmailFlag = true" class="float-right text-blue-400">立即修改</a>
9090
</p>
9191
</li>
92-
<li>
93-
<p class="title">密保问题</p>
94-
<p class="desc">
92+
<li class="borderd pt-2.5">
93+
<p class="pb-2.5 text-xl text-gray-600">密保问题</p>
94+
<p class="pb-2.5 text-lg text-gray-400">
9595
未设置密保问题
96-
<a href="javascript:void(0)">去设置</a>
96+
<a href="javascript:void(0)" class="float-right text-blue-400">去设置</a>
9797
</p>
9898
</li>
99-
<li>
100-
<p class="title">修改密码</p>
101-
<p class="desc">
99+
<li class="borderd pt-2.5">
100+
<p class="pb-2.5 text-xl text-gray-600">修改密码</p>
101+
<p class="pb-2.5 text-lg text-gray-400">
102102
修改个人密码
103103
<a
104104
href="javascript:void(0)"
105105
@click="showPassword = true"
106+
class="float-right text-blue-400"
106107
>修改密码</a>
107108
</p>
108109
</li>
109110
</ul>
110111
</el-tab-pane>
111112
</el-tabs>
112113
</div>
113-
</el-col>
114-
</el-row>
114+
</div>
115+
</div>
115116

116117
<el-dialog
117118
v-model="showPassword"
@@ -156,8 +157,8 @@
156157
<el-input v-model="phoneForm.phone" placeholder="请输入手机号" autocomplete="off" />
157158
</el-form-item>
158159
<el-form-item label="验证码" label-width="120px">
159-
<div class="code-box">
160-
<el-input v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
160+
<div class="flex w-full gap-4">
161+
<el-input class="flex-1" v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
161162
<el-button type="primary" :disabled="time>0" @click="getCode">{{ time>0?`(${time}s)后重新获取`:'获取验证码' }}</el-button>
162163
</div>
163164
</el-form-item>
@@ -183,8 +184,8 @@
183184
<el-input v-model="emailForm.email" placeholder="请输入邮箱" autocomplete="off" />
184185
</el-form-item>
185186
<el-form-item label="验证码" label-width="120px">
186-
<div class="code-box">
187-
<el-input v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
187+
<div class="flex w-full gap-4">
188+
<el-input class="flex-1" v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
188189
<el-button type="primary" :disabled="emailTime>0" @click="getEmailCode">{{ emailTime>0?`(${emailTime}s)后重新获取`:'获取验证码' }}</el-button>
189190
</div>
190191
</el-form-item>
@@ -387,155 +388,15 @@ const changeEmail = async() => {
387388
</script>
388389

389390
<style lang="scss">
390-
.avatar-uploader .el-upload {
391-
border: 1px dashed #d9d9d9;
392-
border-radius: 6px;
393-
cursor: pointer;
394-
position: relative;
395-
overflow: hidden;
396-
}
397-
.avatar-uploader .el-upload:hover {
398-
border-color: #409eff;
399-
}
400-
.avatar-uploader-icon {
401-
font-size: 28px;
402-
color: #8c939d;
403-
width: 178px;
404-
height: 178px;
405-
line-height: 178px;
406-
text-align: center;
407-
}
408-
.avatar {
409-
width: 178px;
410-
height: 178px;
411-
display: block;
412-
}
413-
.avatar-box {
414-
box-shadow: -2px 0 20px -16px;
415-
width: 80%;
416-
height: 100%;
417-
.user-card {
418-
min-height: calc(90vh - 200px);
419-
padding: 30px 20px;
420-
text-align: center;
421-
background-color: #fff;
422-
border-radius: 8px;
423-
flex-shrink: 0;
424-
.el-avatar {
425-
border-radius: 50%;
426-
}
427-
.user-personality {
428-
padding: 24px 0;
429-
text-align: center;
430-
p {
431-
font-size: 16px;
432-
}
433-
.nickName {
434-
display: flex;
435-
justify-content: center;
436-
align-items: center;
437-
font-size: 26px;
438-
}
439-
.person-info {
440-
margin-top: 6px;
441-
font-size: 14px;
442-
color: #999;
443-
}
444-
}
445-
.user-information {
446-
width: 100%;
447-
height: 100%;
448-
text-align: left;
449-
ul {
450-
display: inline-block;
451-
height: 100%;
452-
width: 100%;
453-
li {
454-
width: 100%;
455-
white-space: nowrap;
456-
overflow: hidden;
457-
text-overflow: ellipsis;
458-
i {
459-
margin-right: 8px;
460-
}
461-
padding: 20px 0;
462-
font-size: 16px;
463-
font-weight: 400;
464-
color: #606266;
465-
}
466-
}
467-
}
468-
}
469-
}
470-
.user-addcount {
471-
background-color: #fff;
472-
padding: 20px;
473-
border-radius: 8px;
474-
ul {
475-
li {
476-
.title {
477-
padding: 10px;
478-
font-size: 18px;
479-
color: #696969;
480-
}
481-
.desc {
482-
font-size: 16px;
483-
padding: 0 10px 20px 10px;
484-
color: #a9a9a9;
485-
a {
486-
color: rgb(64, 158, 255);
487-
float: right;
488-
}
489-
}
490-
border-bottom: 2px solid #f0f2f5;
491-
&:last-child{
492-
border-bottom: none;
493-
}
494-
}
495-
}
496-
}
497-
.user-headpic-update {
498-
width: 120px;
499-
height: 120px;
500-
line-height: 120px;
501-
margin: 0 auto;
502-
display: flex;
503-
justify-content: center;
504-
border-radius: 20px;
505-
&:hover {
506-
color: #fff;
507-
background: linear-gradient(
508-
to bottom,
509-
rgba(255, 255, 255, 0.15) 0%,
510-
rgba(0, 0, 0, 0.15) 100%
511-
),
512-
radial-gradient(
513-
at top center,
514-
rgba(255, 255, 255, 0.4) 0%,
515-
rgba(0, 0, 0, 0.4) 120%
516-
)
517-
#989898;
518-
background-blend-mode: multiply, multiply;
519-
.update {
520-
color: #fff;
391+
.borderd {
392+
@apply border-b-2 border-solid border-gray-100 border-t-0 border-r-0 border-l-0;
393+
&:last-child{
394+
@apply border-b-0;
521395
}
522-
}
523-
.update {
524-
height: 120px;
525-
width: 120px;
526-
text-align: center;
527-
color: transparent;
528-
}
529-
}
530-
.pointer {
531-
cursor: pointer;
532-
}
533-
.code-box{
534-
display: flex;
535-
justify-content: space-between;
536-
}
537-
.header-box{
538-
display: flex;
539-
justify-content: center;
396+
}
397+
398+
.info-list{
399+
@apply w-full whitespace-nowrap overflow-hidden text-ellipsis py-3 text-lg text-gray-700
540400
}
401+
541402
</style>

0 commit comments

Comments
 (0)