feat: 撸个人页面
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user