用户信息显示优化

This commit is contained in:
liuwei
2025-04-15 08:56:23 +08:00
parent 6178f254e0
commit 53204d1473

View File

@@ -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 {