用户信息显示优化
This commit is contained in:
@@ -21,33 +21,38 @@
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<!-- 左侧用户信息 -->
|
<!-- 左侧用户信息 -->
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div v-if="currentUser.success" class="user-info-container">
|
<el-card shadow="hover" class="user-card">
|
||||||
<div class="user-avatar-container">
|
<div slot="header">
|
||||||
<img :src="'/static/' + currentUser.data.avatar" alt="用户头像" />
|
<span>用户信息</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-info-details">
|
<div v-if="currentUser.success" class="user-info-container">
|
||||||
<div class="user-info-item">
|
<div class="user-avatar-container">
|
||||||
<span class="user-info-label">昵称:</span>
|
<img :src="'/static/' + currentUser.data.avatar" alt="用户头像" />
|
||||||
<span class="user-info-value">{% raw %}{{ currentUser.data.nickname || '未知用户' }}{% endraw %}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="user-info-item">
|
<div class="user-info-details">
|
||||||
<span class="user-info-label">微信ID:</span>
|
<div class="user-info-item">
|
||||||
<span class="user-info-value">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</span>
|
<span class="user-info-label">昵称:</span>
|
||||||
</div>
|
<span class="user-info-value">{% raw %}{{ currentUser.data.nickname || '未知用户' }}{% endraw %}</span>
|
||||||
<div class="user-info-item" v-if="currentUser.data.mobile">
|
</div>
|
||||||
<span class="user-info-label">手机号:</span>
|
<div class="user-info-item">
|
||||||
<span class="user-info-value">{% raw %}{{ currentUser.data.mobile }}{% endraw %}</span>
|
<span class="user-info-label">微信ID:</span>
|
||||||
</div>
|
<span class="user-info-value">{% raw %}{{ currentUser.data.wx_id }}{% endraw %}</span>
|
||||||
<div class="user-info-item" v-if="currentUser.data.home">
|
</div>
|
||||||
<span class="user-info-label">主目录:</span>
|
<div class="user-info-item" v-if="currentUser.data.mobile">
|
||||||
<span class="user-info-value user-home-path">{% raw %}{{ currentUser.data.home }}{% endraw %}</span>
|
<span class="user-info-label">手机号:</span>
|
||||||
|
<span class="user-info-value">{% raw %}{{ currentUser.data.mobile }}{% endraw %}</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-info-item" v-if="currentUser.data.home">
|
||||||
|
<span class="user-info-label">主目录:</span>
|
||||||
|
<span class="user-info-value user-home-path">{% raw %}{{ currentUser.data.home }}{% endraw %}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="user-info-empty">
|
||||||
<div v-else class="user-info-container user-info-empty">
|
<i class="el-icon-warning"></i>
|
||||||
<i class="el-icon-warning"></i>
|
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
||||||
<div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
|
</div>
|
||||||
</div>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- 移除中间系统信息部分,改为占位 -->
|
<!-- 移除中间系统信息部分,改为占位 -->
|
||||||
@@ -644,20 +649,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 用户信息容器样式 */
|
/* 用户信息容器样式 */
|
||||||
.user-info-container {
|
/* 用户卡片样式 */
|
||||||
background-color: #f9f9f9;
|
.user-card {
|
||||||
border-radius: 4px;
|
|
||||||
padding: 15px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-card .el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info-container {
|
||||||
|
padding: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
}
|
||||||
|
|
||||||
|
.user-avatar-container {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar-container img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info-empty {
|
.user-info-empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-size: 14px;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info-empty i {
|
.user-info-empty i {
|
||||||
|
|||||||
Reference in New Issue
Block a user