Skip to content

G
gin-vue-admin

FLIPPED-AURORA / gin-vue-admin
9 个月 前同步成功

通知 324
Star 18154
Fork 5505
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 d8fa0db0 编写于 作者: Mr.奇淼（'s avatar Mr.奇淼（ 提交者： GitHub
浏览文件
操作

Tailwind css personel (#1509) 

* css

* 修改persion页面的样式

* 优化persion样式

---------
Co-authored-by: Nkrank666 <emosick@qq.com>
上级 687ac6c5
隐藏空白更改
内联 并排
Showing with 52 addition and 191 deletion
web/src/view/person/person.vue
浏览文件 @ d8fa0db0
<template>
<div>
<el-row>
<el-col :span="6">
<div class="float-left avatar-box">
<div class="user-card">
<div class="header-box">
<div class="grid grid-cols-12 w-full gap-2">
<div class="col-span-3 h-full">
<div class="w-full h-full bg-white px-4 py-8 rounded-lg shadow-lg box-border">
<div class="user-card px-6 text-center bg-white shrink-0">
<div class="flex justify-center">
<SelectImage v-model="userStore.userInfo.headerImg" />
</div>
<div class="user-personality">
<p v-if="!editFlag" class="nickName">
<div class="py-6 text-center">
<p v-if="!editFlag" class="text-3xl flex justify-center items-center gap-4">
{{ userStore.userInfo.nickName }}
<el-icon class="pointer" color="#66b1ff" @click="openEdit">
<el-icon class="cursor-pointer text-sm" color="#66b1ff" @click="openEdit">
<edit />
</el-icon>
</p>
<p v-if="editFlag" class="nickName">
<p v-if="editFlag" class="flex justify-center items-center gap-4">
<el-input v-model="nickName" />
<el-icon class="pointer" color="#67c23a" @click="enterEdit">
<el-icon class="cursor-pointer" color="#67c23a" @click="enterEdit">
<check />
</el-icon>
<el-icon class="pointer" color="#f23c3c" @click="closeEdit">
<el-icon class="cursor-pointer" color="#f23c3c" @click="closeEdit">
<close />
</el-icon>
</p>
<p class="person-info">这个家伙很懒，什么都没有留下</p>
<p class="text-gray-500 mt-2 text-md">这个家伙很懒，什么都没有留下</p>
</div>
<div class="user-information">
<ul>
<li>
<div class="w-full h-full text-left">
<ul class="inline-block h-full w-full">
<li class="info-list">
<el-icon>
<user />
</el-icon>
......@@ -39,14 +39,14 @@
content="北京反转极光科技有限公司-技术部-前端事业群"
placement="top"
>
<li>
<li class="info-list">
<el-icon>
<data-analysis />
</el-icon>
北京反转极光科技有限公司-技术部-前端事业群
</li>
</el-tooltip>
<li>
<li class="info-list">
<el-icon>
<video-camera />
</el-icon>
......@@ -58,7 +58,7 @@
content="GoLang/JavaScript/Vue/Gorm"
placement="top"
>
<li>
<li class="info-list">
<el-icon>
<medal />
</el-icon>
......@@ -69,40 +69,41 @@
</div>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="user-addcount">
</div>
<div class="col-span-9 ">
<div class="bg-white h-full px-4 py-8 rounded-lg shadow-lg box-border">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="账号绑定" name="second">
<ul>
<li>
<p class="title">密保手机</p>
<p class="desc">
<li class="borderd">
<p class="pb-2.5 text-xl text-gray-600">密保手机</p>
<p class="pb-2.5 text-lg text-gray-400">
已绑定手机:{{ userStore.userInfo.phone }}
<a href="javascript:void(0)" @click="changePhoneFlag = true">立即修改</a>
<a href="javascript:void(0)" @click="changePhoneFlag = true" class="float-right text-blue-400">立即修改</a>
</p>
</li>
<li>
<p class="title">密保邮箱</p>
<p class="desc">
<li class="borderd pt-2.5">
<p class="pb-2.5 text-xl text-gray-600">密保邮箱</p>
<p class="pb-2.5 text-lg text-gray-400">
已绑定邮箱：{{ userStore.userInfo.email }}
<a href="javascript:void(0)" @click="changeEmailFlag = true">立即修改</a>
<a href="javascript:void(0)" @click="changeEmailFlag = true" class="float-right text-blue-400">立即修改</a>
</p>
</li>
<li>
<p class="title">密保问题</p>
<p class="desc">
<li class="borderd pt-2.5">
<p class="pb-2.5 text-xl text-gray-600">密保问题</p>
<p class="pb-2.5 text-lg text-gray-400">
未设置密保问题
<a href="javascript:void(0)">去设置</a>
<a href="javascript:void(0)" class="float-right text-blue-400">去设置</a>
</p>
</li>
<li>
<p class="title">修改密码</p>
<p class="desc">
<li class="borderd pt-2.5">
<p class="pb-2.5 text-xl text-gray-600">修改密码</p>
<p class="pb-2.5 text-lg text-gray-400">
修改个人密码
<a
href="javascript:void(0)"
@click="showPassword = true"
class="float-right text-blue-400"
>修改密码</a>
</p>
</li>
......@@ -110,8 +111,8 @@
</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</div>
</div>
<el-dialog
v-model="showPassword"
......@@ -156,8 +157,8 @@
<el-input v-model="phoneForm.phone" placeholder="请输入手机号" autocomplete="off" />
</el-form-item>
<el-form-item label="验证码" label-width="120px">
<div class="code-box">
<el-input v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
<div class="flex w-full gap-4">
<el-input class="flex-1" v-model="phoneForm.code" autocomplete="off" placeholder="请自行设计短信服务，此处为模拟随便写" style="width:300px" />
<el-button type="primary" :disabled="time>0" @click="getCode">{{ time>0?`(${time}s)后重新获取`:'获取验证码' }}</el-button>
</div>
</el-form-item>
......@@ -183,8 +184,8 @@
<el-input v-model="emailForm.email" placeholder="请输入邮箱" autocomplete="off" />
</el-form-item>
<el-form-item label="验证码" label-width="120px">
<div class="code-box">
<el-input v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
<div class="flex w-full gap-4">
<el-input class="flex-1" v-model="emailForm.code" placeholder="请自行设计邮件服务，此处为模拟随便写" autocomplete="off" style="width:300px" />
<el-button type="primary" :disabled="emailTime>0" @click="getEmailCode">{{ emailTime>0?`(${emailTime}s)后重新获取`:'获取验证码' }}</el-button>
</div>
</el-form-item>
......@@ -387,155 +388,15 @@ const changeEmail = async() => {
</script>
<style lang="scss">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar-box {
box-shadow: -2px 0 20px -16px;
width: 80%;
height: 100%;
.user-card {
min-height: calc(90vh - 200px);
padding: 30px 20px;
text-align: center;
background-color: #fff;
border-radius: 8px;
flex-shrink: 0;
.el-avatar {
border-radius: 50%;
}
.user-personality {
padding: 24px 0;
text-align: center;
p {
font-size: 16px;
}
.nickName {
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
}
.person-info {
margin-top: 6px;
font-size: 14px;
color: #999;
}
}
.user-information {
width: 100%;
height: 100%;
text-align: left;
ul {
display: inline-block;
height: 100%;
width: 100%;
li {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
i {
margin-right: 8px;
}
padding: 20px 0;
font-size: 16px;
font-weight: 400;
color: #606266;
}
}
}
}
}
.user-addcount {
background-color: #fff;
padding: 20px;
border-radius: 8px;
ul {
li {
.title {
padding: 10px;
font-size: 18px;
color: #696969;
}
.desc {
font-size: 16px;
padding: 0 10px 20px 10px;
color: #a9a9a9;
a {
color: rgb(64, 158, 255);
float: right;
}
}
border-bottom: 2px solid #f0f2f5;
&:last-child{
border-bottom: none;
}
}
}
}
.user-headpic-update {
width: 120px;
height: 120px;
line-height: 120px;
margin: 0 auto;
display: flex;
justify-content: center;
border-radius: 20px;
&:hover {
color: #fff;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.15) 0%,
rgba(0, 0, 0, 0.15) 100%
),
radial-gradient(
at top center,
rgba(255, 255, 255, 0.4) 0%,
rgba(0, 0, 0, 0.4) 120%
)
#989898;
background-blend-mode: multiply, multiply;
.update {
color: #fff;
.borderd {
@apply border-b-2 border-solid border-gray-100 border-t-0 border-r-0 border-l-0;
&:last-child{
@apply border-b-0;
}
}
.update {
height: 120px;
width: 120px;
text-align: center;
color: transparent;
}
}
.pointer {
cursor: pointer;
}
.code-box{
display: flex;
justify-content: space-between;
}
.header-box{
display: flex;
justify-content: center;
}
.info-list{
@apply w-full whitespace-nowrap overflow-hidden text-ellipsis py-3 text-lg text-gray-700
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或