feat: 撸个人页面

This commit is contained in:
陈淳
2024-01-16 15:48:15 +08:00
parent 72b0135410
commit d324ddff3f
2 changed files with 940 additions and 8 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,5 +1,8 @@
<template>
<div class="app-container" style="width: 1300px">
<!-- 老版用户信息页面 -->
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
@@ -14,7 +17,7 @@
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<el-icon><User /></el-icon> 用户名称
<el-icon><User /></el-icon> 账号
<div class="pull-right">{{ state.user.userName }}</div>
</li>
<li class="list-group-item">
@@ -25,12 +28,6 @@
<el-icon><Message /></el-icon> 用户邮箱
<div class="pull-right">{{ state.user.email }}</div>
</li>
<li class="list-group-item">
<el-icon><HelpFilled /></el-icon> 所属部门
<div class="pull-right" v-if="state.dept">
{{ state.dept.deptName }}
</div>
</li>
<li class="list-group-item">
<el-icon><Avatar /></el-icon> 所属角色
<div class="pull-right">
@@ -40,7 +37,7 @@
</div>
</li>
<li class="list-group-item">
<el-icon><Stopwatch /></el-icon> 创建日期
<el-icon><Stopwatch /></el-icon> 注册日期
<div class="pull-right">{{ state.user.creationTime }}</div>
</li>
</ul>
@@ -68,6 +65,46 @@
</el-card>
</el-col>
</el-row>
<!-- 新版用户信息页面 -->
<!-- <el-row>
<el-col :span="24">
<div class="div-top">
<div class="div-top-1">
<div class="user-icon">用户头像</div>
<div class="user-info">
<div class="user-nick">
<div class="user-nick-left">CCNetCore</div>
<div class="user-nick-right">其他</div>
</div>
<div class="user-remark">
<span>100</span> 总访问 | <span>200</span> 排名 |
<span>36</span> 主题 | <span>836</span> 好友
</div>
</div>
</div>
<div class="user-edit">
<div class="user-info-bottom">
<p>个人简介你好</p>
<p>个人简介你好</p>
<p>注册时间2020-12-02</p>
<p>个人简介你好,很好非常的好</p>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row class="div-bottom">
<el-col :span="5" class="div-bottom-left"> </el-col>
<el-col :span="19" class="div-bottom-right">
<div class="div-bottom-right-content">个人主题内容</div>
</el-col>
</el-row> -->
</div>
</template>
@@ -135,4 +172,77 @@ onMounted(() => {
justify-content: center;
margin-bottom: 10px;
}
.div-top {
padding-bottom: 10px;
background-color: #ffffff;
height: 300px;
margin-top: 30px;
font-size: 14px;
color: #555666;
}
.user-icon {
flex: 1;
background-color: aqua;
height: 120px;
}
.user-info {
flex: 9;
background-color: bisque;
height: 120px;
}
.user-edit {
flex: 1 0 auto;
}
.div-top-1 {
display: flex;
width: 100%;
height: 120px;
}
.user-edit {
height: 180px;
padding-left: 10%;
background-color: burlywood;
}
.user-nick {
display: flex;
justify-content: space-between;
padding-top: 5px;
padding-bottom: 5px;
}
.user-remark > span {
font-size: larger;
font-weight: bold;
color: black;
}
.user-info-bottom p {
margin-bottom: 15px;
}
.user-nick-left {
color: #222226;
font-size: larger !important;
font-weight: 500 !important;
}
.div-bottom {
margin-top: 20px;
}
.div-bottom-left {
height: 1000px;
background-color: cornsilk;
}
.div-bottom-right {
height: 1000px;
background-color: #f0f2f5;
padding-left: 20px;
}
.div-bottom-right-content {
height: 100%;
width: 100%;
background-color: darkorange;
}
</style>