From 5b4040ec05efdb6b831e8a1c1866227ad514a7b9 Mon Sep 17 00:00:00 2001 From: A1300399510 <1300399510@qq.com> Date: Wed, 22 Oct 2025 09:53:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5):=20?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=A8=E6=88=B7=E5=8D=A1=E7=89=87=E5=92=8C?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整用户卡片布局和间距，优化视觉层次 - 添加按钮区域样式和交互状态 - 实现消息盒子布局，包含头部、信息列表和统计标签 - 统一CSS和LESS文件中的样式修改 --- css/homepage-other.css | 89 ++++++++++++++++- css/homepage-other.less | 102 ++++++++++++++++++- homepage-other.html | 214 +++++++++++++++++++++++++--------------- 3 files changed, 324 insertions(+), 81 deletions(-) diff --git a/css/homepage-other.css b/css/homepage-other.css index bd760c9..840727b 100644 --- a/css/homepage-other.css +++ b/css/homepage-other.css @@ -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; } diff --git a/css/homepage-other.less b/css/homepage-other.less index d9a815f..ee9a6fe 100644 --- a/css/homepage-other.less +++ b/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); + } + } + } + } + } } } } diff --git a/homepage-other.html b/homepage-other.html index e64c419..bb4b7a5 100644 --- a/homepage-other.html +++ b/homepage-other.html @@ -1,88 +1,148 @@ + + + + Document + + + - - - - Document - - - - - -
-
- -
-
- - -
- - - -
- -
- -
首页
- -
GTSuperstar 的个人主页
-
- -
-
- 用户头像 - -
-

GTSuperstar

-

- UID: 3276161 - -

+ +
+
+ +
+
+ +
-
-

勋章 6

-
- 勋章1 + + +
+ +
+ +
首页
+ +
GTSuperstar 的个人主页
+
+ +
+
+
+ 用户头像 + +

GTSuperstar

+

+ UID: 3276161 + +

+
+ +
+

勋章 6

+
+ 勋章1 +
+
+ +
+
发私信
+
用户管理
+
内容管理
+
+
+ +
+ 用户头像 + GTSuperstar + +
-
-
发私信
-
用户管理
-
内容管理
+ +
+
+ 注册时间 + 2019-7-26 16:38 +
+
+ 最后登录 + 2025-10-16 10:32 +
+
+ 在线时长 + 1304 小时 +
+
+ 上次访问 IP + 116.237.182.149 -- 上海长宁区 +
+
+ Email + skysuper007@qq.com + 未认证 +
+
+ 手机号 + 15934271290 + 已认证 +
+
+ 累计签到 + 1341 天 +
+
+ 本月签到 + 6 天 +
+
+ 寄托币 + 13813 +
+
+ + +
+ Offer × 6 + 总结 × 1 + 面经 × 3 + 回答 × 1 + 其他 × 4 +
+ + +
+ Offer 阿尔托大学 + Offer 坦佩雷大学 + Offer 悉尼大学 + Offer 巴黎理工学院 + Offer 悉尼大学 + Offer 巴黎理工学院 + Offer 阿尔托大学 +
+
-
- -
-
- - - - \ No newline at end of file + + +