A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(个人主页): 完善用户卡片和信息展示样式

Browse Source 
- 调整用户卡片布局和间距，优化视觉层次
- 添加按钮区域样式和交互状态
- 实现消息盒子布局，包含头部、信息列表和统计标签
- 统一CSS和LESS文件中的样式修改
This commit is contained in:
A1300399510
2025-10-22 09:53:20 +08:00
parent f1d4b25556
commit 5b4040ec05
3 changed files with 324 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
css/homepage-other.css
View File

@@ -190,17 +190,22 @@ body {
border: 1px solid #e9eef2;
border-radius: 10px;
flex-direction: column;
padding-top: 115px;
padding-top: 39px;
padding-bottom: 40px;
}
#homepage-other .matter .card-user .avatar {
width: 120px;
height: 120px;
border-radius: 8px;
margin-bottom: 20px;
}
#homepage-other .matter .card-user .name-area {
margin-bottom: 40px;
}
#homepage-other .matter .card-user .name-area .username {
font-size: 15px;
color: #333;
margin-bottom: 12px;
}
#homepage-other .matter .card-user .name-area .uid {
color: #7f7f7f;
@@ -213,12 +218,13 @@ body {
cursor: pointer;
}
#homepage-other .matter .card-user .medal-area {
margin: 0 30px;
margin: 0 30px 44px;
align-self: self-start;
}
#homepage-other .matter .card-user .medal-area .title {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 13px;
}
#homepage-other .matter .card-user .medal-area .list {
flex-direction: row;
@@ -226,4 +232,83 @@ body {
#homepage-other .matter .card-user .medal-area .list .item {
height: 30px;
max-width: 30px;
margin-right: 8px;
}
#homepage-other .matter .card-user .btn-area .item {
width: 200px;
height: 40px;
background-color: #ffffff;
border: 1px solid #ebebeb;
border-radius: 8px;
font-size: 15px;
color: #555555;
}
#homepage-other .matter .card-user .btn-area .item:not(:last-of-type) {
margin-bottom: 15px;
}
#homepage-other .matter .card-user .btn-area .item.msg {
background-color: #50e3c2;
border: 1px solid #50e3c2;
color: #000000;
}
#homepage-other .matter .matter-content .message-box {
height: 452px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding-left: 95px;
padding-bottom: 5px;
}
#homepage-other .matter .matter-content .message-box .header {
border-bottom: 1px dotted #d7d7d7;
padding-top: 46px;
padding-bottom: 19px;
position: relative;
}
#homepage-other .matter .matter-content .message-box .header .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 40px;
left: -55px;
}
#homepage-other .matter .matter-content .message-box .header .username {
font-size: 14px;
color: #333333;
}
#homepage-other .matter .matter-content .message-box .header .icon {
height: 40px;
}
#homepage-other .matter .matter-content .message-box .info-list {
flex-flow: wrap;
padding-top: 20px;
border-bottom: 1px dotted #d7d7d7;
}
#homepage-other .matter .matter-content .message-box .info-list .item {
width: 50%;
margin-bottom: 15px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .label {
font-size: 14px;
color: #7f7f7f;
width: 87px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .value {
font-size: 14px;
color: #000000;
}
#homepage-other .matter .matter-content .message-box .info-list .item .status {
color: #555555;
font-size: 13px;
padding: 0 6px;
height: 20px;
line-height: 20px;
background-color: #f0f1ec;
border-radius: 23px;
margin-left: 10px;
}
#homepage-other .matter .matter-content .message-box .info-list .item .status.blue {
color: #ffffff;
background-color: #04b0d5;
}