From c2da892059949a1d2de19b6791252f54a205e4cc Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Tue, 2 Dec 2025 20:01:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B7=BB=E5=8A=A0=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E4=BE=A7=E8=BE=B9=E8=8F=9C=E5=8D=95=E6=A0=8F?= =?UTF-8?q?=E5=8F=8A=E5=93=8D=E5=BA=94=E5=BC=8F=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加移动端侧边菜单栏组件，包含用户信息、导航链接和发布按钮 调整页面头部在不同屏幕尺寸下的响应式布局 新增菜单图标资源文件 优化logo间距和输入框在移动端的显示效果 --- css/details.css | 29 +++++++ css/details.less | 34 ++++++++ css/public.css | 138 ++++++++++++++++++++++++++++++++ css/public.less | 160 ++++++++++++++++++++++++++++++++++++++ details.html | 58 +++++++++++++- img/comment-icon-gray.png | Bin 0 -> 856 bytes img/like-icon-gray.png | Bin 1452 -> 1259 bytes img/menu-icon-gray.png | Bin 0 -> 733 bytes 8 files changed, 418 insertions(+), 1 deletion(-) create mode 100644 img/comment-icon-gray.png create mode 100644 img/menu-icon-gray.png diff --git a/css/details.css b/css/details.css index 6095fd6..38a6406 100644 --- a/css/details.css +++ b/css/details.css @@ -1287,7 +1287,29 @@ z-index: 1; background-color: rgba(0, 0, 0, 0.20392157); } +@media screen and (max-width: 1200px) { + header.page-header { + min-width: auto !important; + } + header.page-header .box { + width: 100vw; + } + .head-top.flexacenter { + max-width: 1200px !important; + width: initial !important; + margin: 20px 10px 30px !important; + } + .head-top.flexacenter .input-box { + margin-right: 0; + } +} @media screen and (max-width: 850px) { + header.page-header { + display: none !important; + } + .head-top .post-list { + display: none !important; + } #details { padding: 10px 10px 0; } @@ -1360,6 +1382,13 @@ } } @media screen and (max-width: 500px) { + .head-top.flexacenter .input-box { + width: inherit; + } + .head-top.flexacenter .input-box .input, + .head-top.flexacenter .input-box .placeholder { + display: none; + } #details .answer-discuss .comments-box .comments-item .comments-header { font-size: 12px; } diff --git a/css/details.less b/css/details.less index a4c07dd..a278c7e 100644 --- a/css/details.less +++ b/css/details.less @@ -1524,8 +1524,35 @@ background-color: rgba(0, 0, 0, 0.20392157); } +@media screen and (max-width: 1200px) { + header.page-header { + min-width: auto !important; + .box { + width: 100vw; + } + } + + .head-top.flexacenter { + max-width: 1200px !important; + width: initial !important; + margin: 20px 10px 30px !important; + + .input-box { + margin-right: 0; + } + } +} + // 媒体查询 最大宽度 850px 时 @media screen and (max-width: 850px) { + header.page-header { + display: none !important; + } + + .head-top .post-list { + display: none !important; + } + #details { padding: 10px 10px 0; @@ -1640,6 +1667,13 @@ } @media screen and (max-width: 500px) { + .head-top.flexacenter .input-box { + width: inherit; + .input, + .placeholder { + display: none; + } + } #details { .answer-discuss { .comments-box { diff --git a/css/public.css b/css/public.css index 124ec8f..9dadbc0 100644 --- a/css/public.css +++ b/css/public.css @@ -1576,6 +1576,7 @@ body { } .head-top .logo { height: 52px; + margin-right: 10px; } .head-top .input-box { width: 370px; @@ -1949,3 +1950,140 @@ td { -webkit-transform: scale(1); } } +.head-pop { + position: fixed; + top: 0; + left: 100%; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.70588235); + z-index: 100; +} +.head-pop.head-pop-show { + left: 0; +} +.head-pop.head-pop-show .head-more-pop { + animation: slide-in-left 0.5s ease-out forwards; +} +.head-pop .head-more-pop { + position: absolute; + top: 0; + height: 100vh; + width: 80vw; + right: 0; + background-color: #fff; + overflow: auto; + transition: all 0.2s; + right: -100%; + opacity: 0; + z-index: 100; +} +@keyframes slide-in-left { + 0% { + right: -100%; + opacity: 0; + } + 100% { + right: 0; + opacity: 1; + } +} +.head-pop .head-more-pop .head-more-userinfo { + height: 108px; + margin-left: 24px; + padding-right: 27px; + box-sizing: border-box; + border-bottom: 0.5px solid #ebebeb; + justify-content: space-between; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-avatar { + margin-right: 9px; + width: 48px; + height: 48px; + border-radius: 50%; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-left .head-more-userinfo-username { + font-size: 13.5px; + color: #333333; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-right { + width: 84px; + height: 30px; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box { + position: relative; + width: 16.5px; + height: 16.5px; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box .information-icon { + width: 16.5px; + height: 16.5px; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-right .red-dot { + position: absolute; + right: -7.5px; + top: -7.5px; + width: 13.5px; + height: 13.5px; + color: #fff; + border-radius: 24px; + background-color: #fd3f5d; + font-size: 9.75px; +} +.head-pop .head-more-pop .head-more-userinfo .head-more-right .loginBtn { + width: 84px; + height: 30px; + border-radius: 117px; + background-color: #62b1ff; + color: #fff; + font-size: 12.75px; +} +.head-pop .head-more-pop .tab-list { + padding-right: 27px; + margin-left: 24px; + border-bottom: 0.5px solid #ebebeb; +} +.head-pop .head-more-pop .tab-list .tab-item { + height: 54px; + margin: 12.3px 0; + border-radius: 8.25px; + padding-left: 24px; + font-size: 13.5px; + color: #555555; + text-decoration: none; +} +.head-pop .head-more-pop .tab-list .tab-item.pitch { + background-color: #50e3c2; + font-weight: 650; + color: #000; +} +.head-pop .head-more-pop .head-more-post { + color: #000; + font-size: 15px; + margin: 48px 0 100px; +} +.head-pop .head-more-pop .head-more-post .head-more-post-icon { + width: 18px; + height: 18px; + margin-right: 5px; + background-color: #fddf6d; + border-radius: 50%; +} +.head-pop .head-more-pop .head-more-post .head-more-post-icon .head-more-post-img { + width: 9px; + height: 9px; +} +.head-pop .head-more-pop .cross-icon { + width: 12px; + height: 12px; + padding: 15px; + position: fixed; + bottom: 11.25px; + left: calc(50% + 45px); + transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + box-sizing: content-box; +} diff --git a/css/public.less b/css/public.less index 4972a2d..107a286 100644 --- a/css/public.less +++ b/css/public.less @@ -1903,6 +1903,7 @@ body { .logo { height: 52px; + margin-right: 10px; } .input-box { @@ -2343,3 +2344,162 @@ td { -webkit-transform: scale(1); } } + +.head-pop { + position: fixed; + top: 0; + left: 100%; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.70588235); + z-index: 100; + + &.head-pop-show { + left: 0; + + .head-more-pop { + animation: slide-in-left 0.5s ease-out forwards; + } + } + + .head-more-pop { + position: absolute; + top: 0; + height: 100vh; + width: 80vw; + right: 0; + background-color: #fff; + overflow: auto; + transition: all 0.2s; + right: -100%; + opacity: 0; + z-index: 100; + + @keyframes slide-in-left { + 0% { + right: -100%; + opacity: 0; + } + 100% { + right: 0; + opacity: 1; + } + } + + .head-more-userinfo { + height: 108px; + margin-left: 24px; + padding-right: 27px; + box-sizing: border-box; + border-bottom: 0.5px solid #ebebeb; + justify-content: space-between; + + .head-more-left { + .head-more-userinfo-avatar { + margin-right: 9px; + width: 48px; + height: 48px; + border-radius: 50%; + } + + .head-more-userinfo-username { + font-size: 13.5px; + color: #333333; + } + } + + .head-more-right { + width: 84px; + height: 30px; + + .information-box { + position: relative; + width: 16.5px; + height: 16.5px; + + .information-icon { + width: 16.5px; + height: 16.5px; + } + } + + .red-dot { + position: absolute; + right: -7.5px; + top: -7.5px; + width: 13.5px; + height: 13.5px; + color: #fff; + border-radius: 24px; + background-color: #fd3f5d; + font-size: 9.75px; + } + + .loginBtn { + width: 84px; + height: 30px; + border-radius: 117px; + background-color: #62b1ff; + color: #fff; + font-size: 12.75px; + } + } + } + + .tab-list { + padding-right: 27px; + margin-left: 24px; + border-bottom: 0.5px solid #ebebeb; + + .tab-item { + height: 54px; + margin: 12.3px 0; + border-radius: 8.25px; + padding-left: 24px; + font-size: 13.5px; + color: #555555; + text-decoration: none; + + &.pitch { + background-color: #50e3c2; + font-weight: 650; + color: #000; + } + } + } + + .head-more-post { + color: #000; + font-size: 15px; + margin: 48px 0 100px; + + .head-more-post-icon { + width: 18px; + height: 18px; + margin-right: 5px; + background-color: #fddf6d; + border-radius: 50%; + + .head-more-post-img { + width: 9px; + height: 9px; + } + } + } + + .cross-icon { + width: 12px; + height: 12px; + padding: 15px; + position: fixed; + bottom: 11.25px; + left: calc(50% + 45px); + transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + box-sizing: content-box; + } + } +} diff --git a/details.html b/details.html index f6600ce..ef041a9 100644 --- a/details.html +++ b/details.html @@ -16,6 +16,62 @@ + + +
+
+
+
+ +
+
+
+
登录/注册
+
+
+ +
+ 寄托首页 + 论坛 + 招生官 + 加群 + Offer榜 +
+ + +
+ +
+ 发布帖子 + + + +
+
+ + +
@@ -25,7 +81,7 @@
-
4uPq5uKzTPTP
+
WObXKrbm1CSn
diff --git a/img/comment-icon-gray.png b/img/comment-icon-gray.png new file mode 100644 index 0000000000000000000000000000000000000000..786bef5640605ef21ef3217afd007eea1d5c643c GIT binary patch literal 856 zcmV-e1E>6nP)kVu%T+r>E^82zDte#4_U> zW6lo_4!YFO0=VlJq^6XMK2Jl-Fnm))R6rS-2=GK?izp)_6%bIA7OMajiES1MPnHN4 z`8tdIkTQf5-~>1UPC!5o;RHAVPJk2O1ULasfG10Y6W|0m0qG0iN83RVG$?C?M_+f5 zzFx0ay}!TjQEHzuT3=t^gR#tkbLt>%%DT|UIR~7xOC8I!Z%7#;u>kspq`JJP#b#q) zBA5>Um$E|4;v?bbUW^3J*%bT!rN=q9$&sWgfS#tuxN>qOl0({a2VdI7&s$wB( zfEjWX(3I#`;EoHakgd==Angz~F6nKMtTjv$}& zT|YfN4UUeEIx>f8-;grIrv&^@H~~(86W|0m0ZxDuFr*CO1ULasfD;gqLzG?sj0m4d z%9yXj%l-ZR0rjUjJ3ITuS6^L3s*;=vQ6oaA0H3@;WI>Rsb7H4KqDNhB08ykdw<_=tp}hF1)c8H-4eXPROm>*1A51t<$hu#(5{ zO6CHTk4ngEcqJDB%AykT9A3#yfHF@)-oq=o3Q(dX6fwM#y8z{_grbI53K8&vZc+#o ix%pD4fUiL51^fd$ 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 pmC0Xk>L83aS)imEx4n$^jH^|2