+
用户信息
![用户头像]()
@@ -49,7 +50,7 @@
{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}
-
+
@@ -645,21 +646,29 @@
margin-top: 10px;
}
- /* 用户信息容器样式 */
- /* 用户卡片样式 */
- .user-card {
+ /* 用户信息图表容器样式 */
+ .user-info-chart {
+ text-align: center;
height: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 5px;
+ margin-bottom: 0;
+ box-shadow: none;
}
- .user-card .el-card__body {
- padding: 8px;
+ .user-info-chart h4 {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: 12px;
+ color: #606266;
}
.user-info-container {
padding: 0;
display: flex;
flex-direction: column;
- height: 100%;
+ flex: 1;
justify-content: center;
}
@@ -669,8 +678,8 @@
}
.user-avatar-container img {
- width: 56px; /* 原来80px的70% */
- height: 56px; /* 原来80px的70% */
+ width: 56px;
+ height: 56px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -679,40 +688,53 @@
.user-info-details {
display: flex;
flex-direction: column;
- gap: 5px; /* 原来8px的缩小版 */
+ gap: 5px;
}
.user-info-item {
display: flex;
align-items: center;
- font-size: 12px; /* 缩小字体 */
+ font-size: 12px;
+ justify-content: center;
}
.user-info-label {
- width: 50px; /* 原来70px的缩小版 */
+ width: 50px;
color: #606266;
font-weight: 500;
flex-shrink: 0;
+ text-align: right;
+ padding-right: 5px;
}
.user-info-value {
color: #303133;
flex: 1;
word-break: break-all;
+ text-align: left;
+ max-width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.user-home-path {
- font-size: 10px; /* 原来12px的缩小版 */
+ font-size: 10px;
}
- /* 移除不再需要的样式 */
- .user-info-header,
- .user-avatar,
- .user-details,
- .user-nickname,
- .user-wxid,
- .system-info-container {
- /* 这些类不再需要,但保留以防其他地方使用 */
+ .user-info-empty {
+ text-align: center;
+ color: #909399;
+ padding: 20px 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .user-info-empty i {
+ font-size: 24px;
+ margin-bottom: 10px;
}
.user-info-row {