From 82e67b2a0b2b2cb0636028f2c21ed1e8d78865fd Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Thu, 25 Dec 2025 19:09:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=93=8D=E5=BA=94?= =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96=EF=BC=8C=E9=80=82?= =?UTF-8?q?=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=AE=BE=E5=A4=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改主页和其他页面的宽度为百分比布局,添加最大宽度限制 - 增加媒体查询规则,针对不同屏幕尺寸调整布局和样式 - 优化导航栏、卡片和列表在移动端的显示效果 - 添加滚动条隐藏样式,提升移动端用户体验 --- css/homepage-me.css | 173 +++++++++++- css/homepage-me.less | 201 +++++++++++++- css/homepage-other.css | 135 ++++++++- css/homepage-other.less | 165 ++++++++++- homepage-me-V2.html | 588 ++++++++++++++++++++++++++++++++++++++++ homepage-other-V2.html | 2 +- 6 files changed, 1254 insertions(+), 10 deletions(-) create mode 100644 homepage-me-V2.html diff --git a/css/homepage-me.css b/css/homepage-me.css index fb96fcf..b6929ae 100644 --- a/css/homepage-me.css +++ b/css/homepage-me.css @@ -1,6 +1,9 @@ #homepage-me { - width: 1200px; + width: 100%; + max-width: 1200px; margin: 0 auto; + box-sizing: border-box; + padding: 0 10px; } #homepage-me .matter { align-items: flex-start; @@ -298,7 +301,8 @@ margin-right: 7px; } #homepage-me .matter .matter-content .list-area { - width: 860px; + width: 100%; + box-sizing: border-box; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; @@ -341,6 +345,13 @@ padding-bottom: 23px; padding-left: 95px; padding-right: 40px; + overflow-x: auto; + justify-content: flex-start; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} +#homepage-me .matter .matter-content .list-area .classify::-webkit-scrollbar { + display: none; } #homepage-me .matter .matter-content .list-area .classify .item { width: 50px; @@ -406,3 +417,161 @@ color: #7f7f7f; font-size: 14px; } +/* 响应式布局优化 */ +@media screen and (max-width: 880px) { + .head-top { + margin: 10px auto 15px !important; + } + .head-navigation { + display: none !important; + } + #homepage-me { + width: 100%; + padding: 0; + } + #homepage-me .matter { + flex-direction: column; + align-items: stretch; + } + #homepage-me .matter .card-user { + width: auto; + margin: 0 0 15px 0; + padding: 30px 20px; + position: static; + align-items: center; + border-radius: 0; + border-left: none; + border-right: none; + } + #homepage-me .matter .card-user .avatar-box { + margin-bottom: 15px; + } + #homepage-me .matter .card-user .avatar-box .pen-box { + right: 50%; + margin-right: -60px; + } + #homepage-me .matter .card-user .name-area { + text-align: center; + margin-bottom: 25px; + } + #homepage-me .matter .card-user .bi-box { + margin-bottom: 25px; + } + #homepage-me .matter .card-user .medal-area { + margin: 0; + align-self: center; + } + #homepage-me .matter .card-user .medal-area .list { + justify-content: center; + } + #homepage-me .matter .matter-content { + width: 100%; + } + #homepage-me .matter .matter-content .message-box { + width: auto; + margin: 0 0 15px 0; + padding: 20px; + border-radius: 0; + border-left: none; + border-right: none; + } + #homepage-me .matter .matter-content .message-box .header { + padding-top: 0; + text-align: center; + } + #homepage-me .matter .matter-content .message-box .header .avatar { + display: none; + } + #homepage-me .matter .matter-content .message-box .header .username { + font-size: 16px; + font-weight: 600; + } + #homepage-me .matter .matter-content .message-box .info-list { + padding-top: 15px; + } + #homepage-me .matter .matter-content .message-box .info-list .item { + width: 50%; + padding-right: 10px; + box-sizing: border-box; + } + #homepage-me .matter .matter-content .message-box .tags { + justify-content: center; + } + #homepage-me .matter .matter-content .list-area { + border-radius: 0; + border-left: none; + border-right: none; + } + #homepage-me .matter .matter-content .list-area .operation-box { + padding: 15px 20px; + overflow-x: auto; + white-space: nowrap; + display: flex; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + #homepage-me .matter .matter-content .list-area .operation-box::-webkit-scrollbar { + display: none; + } + #homepage-me .matter .matter-content .list-area .operation-box .operation-item { + flex-shrink: 0; + } + #homepage-me .matter .matter-content .list-area .operation-box .operation-item:not(:last-child) { + margin-right: 30px; + } + #homepage-me .matter .matter-content .list-area .classify { + padding: 10px 20px 20px; + overflow-x: auto; + white-space: nowrap; + display: flex; + justify-content: flex-start; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + #homepage-me .matter .matter-content .list-area .classify::-webkit-scrollbar { + display: none; + } + #homepage-me .matter .matter-content .list-area .classify .item { + flex-shrink: 0; + width: auto; + padding: 0 15px; + } + #homepage-me .matter .matter-content .list-area .issue-data { + padding: 0 20px 15px; + } + #homepage-me .matter .matter-content .list-area .list-box { + padding: 0 20px; + } + #homepage-me .matter .matter-content .list-area .empty { + width: auto; + height: auto; + min-height: 200px; + margin: 20px; + padding: 40px 0; + } + #homepage-me .matter .matter-content .list-area .empty .empty-icon { + width: 60px; + height: 60px; + } + #homepage-me .matter .matter-content .list-area .load-more { + margin-bottom: 30px; + } +} +@media screen and (max-width: 480px) { + #homepage-me .matter .card-user .bi-box { + width: 100%; + max-width: 320px; + } + #homepage-me .matter .card-user .bi-box .bi-masking { + width: 100%; + background-size: 100% 100%; + } + #homepage-me .matter .matter-content .message-box .info-list .item { + width: 100%; + margin-bottom: 12px; + justify-content: space-between; + } + #homepage-me .matter .matter-content .message-box .info-list .item .label { + width: auto; + } +} diff --git a/css/homepage-me.less b/css/homepage-me.less index c4e111e..641222a 100644 --- a/css/homepage-me.less +++ b/css/homepage-me.less @@ -1,6 +1,9 @@ #homepage-me { - width: 1200px; + width: 100%; + max-width: 1200px; margin: 0 auto; + box-sizing: border-box; + padding: 0 10px; .matter { align-items: flex-start; @@ -18,7 +21,7 @@ margin-right: 20px; position: sticky; top: 10px; - + .avatar-box { position: relative; margin-bottom: 20px; @@ -29,6 +32,8 @@ border-radius: 8px; } + + .pen-box { width: 24px; height: 24px; @@ -347,7 +352,8 @@ } .list-area { - width: 860px; + width: 100%; + box-sizing: border-box; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; @@ -394,6 +400,16 @@ padding-bottom: 23px; padding-left: 95px; padding-right: 40px; + + overflow-x: auto; + justify-content: flex-start; + -webkit-overflow-scrolling: touch; + + &::-webkit-scrollbar { + display: none; + } + scrollbar-width: none; + .item { width: 50px; height: 32px; @@ -472,3 +488,182 @@ } } } + +/* 响应式布局优化 */ +@media screen and (max-width: 880px) { + .head-top { + margin: 10px auto 15px !important; + } + + .head-navigation { + display: none !important; + } + + #homepage-me { + width: 100%; + padding: 0; + + .matter { + flex-direction: column; + align-items: stretch; + + .card-user { + width: auto; + margin: 0 0 15px 0; + padding: 30px 20px; + position: static; + align-items: center; + border-radius: 0; + border-left: none; + border-right: none; + + .avatar-box { + margin-bottom: 15px; + .pen-box { + right: 50%; + margin-right: -60px; + } + } + + .name-area { + text-align: center; + margin-bottom: 25px; + } + + .bi-box { + margin-bottom: 25px; + } + + .medal-area { + margin: 0; + align-self: center; + .list { + justify-content: center; + } + } + } + + .matter-content { + width: 100%; + + .message-box { + width: auto; + margin: 0 0 15px 0; + padding: 20px; + border-radius: 0; + border-left: none; + border-right: none; + + .header { + padding-top: 0; + text-align: center; + .avatar { display: none; } + .username { font-size: 16px; font-weight: 600; } + } + + .info-list { + padding-top: 15px; + .item { + width: 50%; + padding-right: 10px; + box-sizing: border-box; + } + } + + .tags { + justify-content: center; + } + } + + .list-area { + border-radius: 0; + border-left: none; + border-right: none; + + .operation-box { + padding: 15px 20px; + overflow-x: auto; + white-space: nowrap; + display: flex; + -webkit-overflow-scrolling: touch; + &::-webkit-scrollbar { display: none; } + scrollbar-width: none; + + .operation-item { + flex-shrink: 0; + &:not(:last-child) { margin-right: 30px; } + } + } + + .classify { + padding: 10px 20px 20px; + overflow-x: auto; + white-space: nowrap; + display: flex; + justify-content: flex-start; + -webkit-overflow-scrolling: touch; + &::-webkit-scrollbar { display: none; } + scrollbar-width: none; + + .item { + flex-shrink: 0; + width: auto; + padding: 0 15px; + } + } + + .issue-data { + padding: 0 20px 15px; + } + + .list-box { + padding: 0 20px; + } + + .empty { + width: auto; + height: auto; + min-height: 200px; + margin: 20px; + padding: 40px 0; + + .empty-icon { + width: 60px; + height: 60px; + } + } + + .load-more { + margin-bottom: 30px; + } + } + } + } + } +} + +@media screen and (max-width: 480px) { + #homepage-me .matter { + .card-user { + .bi-box { + width: 100%; + max-width: 320px; + .bi-masking { width: 100%; background-size: 100% 100%; } + } + } + + .matter-content { + .message-box { + .info-list { + .item { + width: 100%; + margin-bottom: 12px; + justify-content: space-between; + + .label { width: auto; } + } + } + } + } + } +} diff --git a/css/homepage-other.css b/css/homepage-other.css index a99d61f..953af4d 100644 --- a/css/homepage-other.css +++ b/css/homepage-other.css @@ -1,6 +1,9 @@ #homepage-other { - width: 1200px; + width: 100%; + max-width: 1200px; margin: 0 auto; + box-sizing: border-box; + padding: 0 10px; } #homepage-other .head-navigation { margin-bottom: 20px; @@ -205,7 +208,8 @@ margin-right: 7px; } #homepage-other .matter .matter-content .list-area { - width: 860px; + width: 100%; + box-sizing: border-box; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; @@ -272,3 +276,130 @@ color: #7f7f7f; font-size: 14px; } +@media screen and (max-width: 900px) { + #homepage-other .matter { + flex-direction: column; + } + #homepage-other .matter .card-user { + width: 100%; + margin-right: 0; + margin-bottom: 20px; + position: static; + padding: 20px; + } + #homepage-other .matter .card-user .avatar { + width: 80px; + height: 80px; + } + #homepage-other .matter .card-user .btn-area { + display: flex; + flex-wrap: nowrap; + justify-content: center; + gap: 10px; + width: 100%; + } + #homepage-other .matter .card-user .btn-area .item { + flex: 1; + width: auto; + margin-bottom: 0 !important; + } + #homepage-other .matter .matter-content { + width: 100%; + } + #homepage-other .matter .matter-content .message-box { + padding: 20px; + } + #homepage-other .matter .matter-content .message-box .header { + display: none; + } + #homepage-other .matter .matter-content .message-box .info-list { + padding: 0; + } + #homepage-other .matter .matter-content .message-box .info-list .item { + width: 100%; + justify-content: space-between; + } + #homepage-other .matter .matter-content .list-area { + padding: 20px; + } + #homepage-other .matter .matter-content .list-area .classify { + overflow-x: auto; + justify-content: flex-start; + } + #homepage-other .matter .matter-content .list-area .classify .item { + width: auto; + padding: 0 10px; + height: 28px; + line-height: 28px; + font-size: 13px; + border-radius: 8px; + } + #homepage-other .matter .matter-content .list-area .empty { + width: 100%; + } +} +@media screen and (max-width: 480px) { + #homepage-other .head-navigation { + font-size: 12px; + } + #homepage-other .matter .matter-content .list-area { + padding-left: 10px; + padding-right: 10px; + } + #homepage-other .matter .matter-content .list-area .classify { + padding: 20px 0; + } + #homepage-other .matter .matter-content .list-area .classify .item { + padding: 0 7px; + } + #homepage-other .matter .card-user .btn-area { + flex-direction: column; + } + #homepage-other .matter .card-user .btn-area .item { + flex: none; + width: 100%; + margin-bottom: 10px !important; + } +} +@media screen and (max-width: 430px) { + #homepage-other .matter .matter-content .list-area .classify .item:not(:last-child) { + margin-right: 7px; + } +} +@media screen and (max-width: 1015px) { + .item-box .bottom .bottom-item:not(:last-child) { + margin-right: 45px; + } +} +@media screen and (max-width: 955px) { + .item-box .bottom .bottom-item:not(:last-child) { + margin-right: 30px; + } +} +@media screen and (max-width: 900px) { + .head-top .post-list, + .head-top .sign-in { + display: none !important; + } +} +@media screen and (max-width: 480px) { + .head-top .logo { + height: 30px; + width: auto; + } + .head-top .input-box { + background: transparent !important; + border: none !important; + width: auto !important; + padding: 0 !important; + } + .head-top .input-box .placeholder, + .head-top .input-box .input, + .head-top .input-box .search-box-history { + display: none !important; + } + .head-top .input-box .icon { + margin: 0 10px; + display: block !important; + } +} diff --git a/css/homepage-other.less b/css/homepage-other.less index a76e99f..2ccf0d0 100644 --- a/css/homepage-other.less +++ b/css/homepage-other.less @@ -1,6 +1,9 @@ #homepage-other { - width: 1200px; + width: 100%; + max-width: 1200px; margin: 0 auto; + box-sizing: border-box; + padding: 0 10px; .head-navigation { margin-bottom: 20px; @@ -239,7 +242,8 @@ } .list-area { - width: 860px; + width: 100%; + box-sizing: border-box; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; @@ -321,4 +325,161 @@ } } } + + @media screen and (max-width: 900px) { + .matter { + flex-direction: column; + + .card-user { + width: 100%; + margin-right: 0; + margin-bottom: 20px; + position: static; + padding: 20px; + + .avatar { + width: 80px; + height: 80px; + } + + .btn-area { + display: flex; + flex-wrap: nowrap; + justify-content: center; + gap: 10px; + width: 100%; + + .item { + flex: 1; + width: auto; + margin-bottom: 0 !important; + } + } + } + + .matter-content { + width: 100%; + + .message-box { + padding: 20px; + + .header { + display: none; + } + + .info-list { + padding: 0; + .item { + width: 100%; + justify-content: space-between; + } + } + } + + .list-area { + padding: 20px; + + .classify { + overflow-x: auto; + justify-content: flex-start; + + .item { + width: auto; + padding: 0 10px; + height: 28px; + line-height: 28px; + font-size: 13px; + border-radius: 8px; + } + } + + .empty { + width: 100%; + } + } + } + } + } + + @media screen and (max-width: 480px) { + .head-navigation { + font-size: 12px; + } + + .matter { + .matter-content .list-area { + padding-left: 10px; + padding-right: 10px; + + .classify { + padding: 20px 0; + + .item { + padding: 0 7px; + } + } + } + .card-user { + .btn-area { + flex-direction: column; + .item { + flex: none; + width: 100%; + margin-bottom: 10px !important; + } + } + } + } + } + + @media screen and (max-width: 430px) { + .matter .matter-content .list-area .classify .item:not(:last-child) { + margin-right: 7px; + } + } +} + +@media screen and (max-width: 1015px) { + .item-box .bottom .bottom-item:not(:last-child) { + margin-right: 45px; + } +} +@media screen and (max-width: 955px) { + .item-box .bottom .bottom-item:not(:last-child) { + margin-right: 30px; + } +} + +@media screen and (max-width: 900px) { + .head-top { + .post-list, + .sign-in { + display: none !important; + } + } +} + +@media screen and (max-width: 480px) { + .head-top { + .logo { + height: 30px; + width: auto; + } + .input-box { + background: transparent !important; + border: none !important; + width: auto !important; + padding: 0 !important; + + .placeholder, + .input, + .search-box-history { + display: none !important; + } + .icon { + margin: 0 10px; + display: block !important; + } + } + } } diff --git a/homepage-me-V2.html b/homepage-me-V2.html new file mode 100644 index 0000000..e5ca3d5 --- /dev/null +++ b/homepage-me-V2.html @@ -0,0 +1,588 @@ + + + +
+ + + +勋章 {{ medallist.length }}
+