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

- 调整用户卡片布局和间距，优化视觉层次
- 添加按钮区域样式和交互状态
- 实现消息盒子布局，包含头部、信息列表和统计标签
- 统一CSS和LESS文件中的样式修改

css/homepage-other.less

@@ -218,19 +218,23 @@ body {
             border: 1px solid rgba(233, 238, 242, 1);
             border-radius: 10px;
             flex-direction: column;
-            padding-top: 115px;
+            padding-top: 39px;
             padding-bottom: 40px;
 
             .avatar {
                 width: 120px;
                 height: 120px;
                 border-radius: 8px;
+                margin-bottom: 20px;
             }
 
             .name-area {
+                margin-bottom: 40px;
+
                 .username {
                     font-size: 15px;
                     color: #333;
+                    margin-bottom: 12px;
                 }
 
                 .uid {
@@ -246,11 +250,13 @@ body {
             }
 
             .medal-area {
-                margin: 0 30px;
+                margin: 0 30px 44px;
                 align-self: self-start;
+
                 .title {
                     font-size: 14px;
                     color: #7f7f7f;
+                    margin-bottom: 13px;
                 }
 
                 .list {
@@ -258,12 +264,104 @@ body {
                     .item {
                         height: 30px;
                         max-width: 30px;
+                        margin-right: 8px;
+                    }
+                }
+            }
+
+            .btn-area {
+                .item {
+                    width: 200px;
+                    height: 40px;
+                    background-color: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(235, 235, 235, 1);
+                    border-radius: 8px;
+                    font-size: 15px;
+                    color: #555555;
+
+                    &:not(:last-of-type) {
+                        margin-bottom: 15px;
+                    }
+
+                    &.msg {
+                        background-color: rgba(80, 227, 194, 1);
+                        border: 1px solid rgba(80, 227, 194, 1);
+                        color: #000000;
                     }
                 }
             }
         }
 
         .matter-content {
+            .message-box {
+                height: 452px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                padding-left: 95px;
+                padding-bottom: 5px;
+
+                .header {
+                    border-bottom: 1px dotted #d7d7d7;
+                    padding-top: 46px;
+                    padding-bottom: 19px;
+                    position: relative;
+
+                    .avatar {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        position: absolute;
+                        top: 40px;
+                        left: -55px;
+                    }
+
+                    .username {
+                        font-size: 14px;
+                        color: #333333;
+                    }
+
+                    .icon {
+                        height: 40px;
+                    }
+                }
+
+                .info-list {
+                    flex-flow: wrap;
+                    padding-top: 20px;
+                    border-bottom: 1px dotted #d7d7d7;
+                    
+                    .item {
+                        width: 50%;
+                        margin-bottom: 15px;
+                        .label {
+                            font-size: 14px;
+                            color: #7f7f7f;
+                            width: 87px;
+                        }
+                        .value {
+                            font-size: 14px;
+                            color: #000000;
+                        }
+
+                        .status {
+                            color: #555555;
+                            font-size: 13px;
+                            padding: 0 6px;
+                            height: 20px;
+                            line-height: 20px;
+                            background-color: rgba(240, 241, 236, 1);
+                            border-radius: 23px;
+                            margin-left: 10px;
+
+                            &.blue {
+                                color: #ffffff;
+                                background-color: rgba(4, 176, 213, 1);
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }