diff --git a/css/index.css b/css/index.css index 7838dcc..f0b8228 100644 --- a/css/index.css +++ b/css/index.css @@ -2478,7 +2478,7 @@ html { @media (max-width: 767px) { /* ===== 导航栏 - 极简设计 ===== */ #index .nav-header { - padding: 0 12px; + padding: 0 8px; height: 50px !important; } @@ -2492,27 +2492,75 @@ html { margin-right: 0; } + #index .nav-right { + gap: 6px; + } + #index .nav-right .nav-text-link { - font-size: 11px; - padding: 0 6px; + display: none; } #index .nav-right .nav-divider { - margin: 0 4px; + display: none; + } + + /* 移动端隐藏登录按钮和分隔符,只显示注册按钮 */ + #index .no-login { + display: flex !important; + gap: 0 !important; + align-items: center; + height: 100%; + } + + #index .no-login .nav-text-link, + #index .no-login .nav-divider { + display: none !important; } - #index .no-login .btn.btn-normal-light.mr-10#loginBtn, #index .no-login .btn.btn-normal#registBtn { padding: 0 10px !important; font-size: 10px !important; - min-width: 45px !important; + min-width: auto !important; height: 28px !important; line-height: 28px !important; } + /* 汉堡菜单按钮样式 */ + #index .mobile-menu-toggle { + display: flex !important; + flex-direction: column; + gap: 5px; + cursor: pointer; + width: 24px; + height: 20px; + justify-content: center; + margin-right: 8px; + } + + #index .mobile-menu-toggle span { + width: 100%; + height: 2px; + background: #E5E7EB; + border-radius: 1px; + transition: all 0.3s ease; + } + + #index .mobile-menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(8px, 8px); + } + + #index .mobile-menu-toggle.active span:nth-child(2) { + opacity: 0; + } + + #index .mobile-menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(8px, -8px); + } + /* ===== Banner 区域 - 大幅缩小 ===== */ .banner-cont .swiper-slide { - height: 280px !important; /* 从 450px 减到 280px */ + height: 100vh !important; + min-height: 350px; } .banner-cont .swiper-slide h1 { @@ -2526,10 +2574,10 @@ html { margin-top: 10px !important; margin-bottom: 20px !important; line-height: 1.5; - max-height: 60px; /* 限制最大高度 */ + max-height: 60px; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 3; /* 最多显示3行 */ + -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @@ -2545,7 +2593,7 @@ html { /* 调整进度条位置,避免和按钮重合 */ .banner-cont .swiper-pagination { - bottom: 150px !important; + bottom: 80px !important; } .banner-cont .swiper-pagination-bullet { @@ -2959,26 +3007,74 @@ html { } #index .nav-right .nav-text-link { - font-size: 10px; - padding: 0 5px; + display: none; } #index .nav-right .nav-divider { display: none; } - #index .no-login .btn.btn-normal-light.mr-10#loginBtn, + #index .nav-right { + gap: 4px; + } + + /* 移动端隐藏登录按钮和分隔符,只显示注册按钮 */ + #index .no-login { + display: flex !important; + gap: 0 !important; + align-items: center; + height: 100%; + } + + #index .no-login .nav-text-link, + #index .no-login .nav-divider { + display: none !important; + } + #index .no-login .btn.btn-normal#registBtn { padding: 0 10px !important; font-size: 10px !important; - min-width: 50px !important; + min-width: auto !important; height: 28px !important; line-height: 28px !important; } + /* 汉堡菜单按钮样式 */ + #index .mobile-menu-toggle { + display: flex !important; + flex-direction: column; + gap: 5px; + cursor: pointer; + width: 24px; + height: 20px; + justify-content: center; + margin-right: 6px; + } + + #index .mobile-menu-toggle span { + width: 100%; + height: 2px; + background: #E5E7EB; + border-radius: 1px; + transition: all 0.3s ease; + } + + #index .mobile-menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(8px, 8px); + } + + #index .mobile-menu-toggle.active span:nth-child(2) { + opacity: 0; + } + + #index .mobile-menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(8px, -8px); + } + /* ===== Banner ===== */ .banner-cont .swiper-slide { - height: 240px !important; + height: 100vh !important; + min-height: 350px; } .banner-cont .swiper-slide h1 { @@ -2989,7 +3085,7 @@ html { font-size: 11px !important; margin-top: 8px !important; margin-bottom: 16px !important; - -webkit-line-clamp: 2; /* 小屏只显示2行 */ + -webkit-line-clamp: 2; } .banner-tag-pill { @@ -3002,8 +3098,9 @@ html { font-size: 11px !important; } + /* 调整进度条位置 */ .banner-cont .swiper-pagination { - bottom: 60px !important; + bottom: 80px !important; } .banner-cont .swiper-pagination-bullet { @@ -3369,33 +3466,74 @@ html { } #index .nav-right .nav-text-link { - font-size: 9px; - padding: 0 4px; - margin: 0 2px; + display: none; } #index .nav-right .nav-divider { display: none; - margin: 0; } - #index .no-login .btn.btn-normal-light.mr-10#loginBtn, + #index .nav-right { + gap: 4px; + } + + /* 移动端隐藏登录按钮和分隔符,只显示注册按钮 */ + #index .no-login { + display: flex !important; + gap: 0 !important; + align-items: center; + height: 100%; + } + + #index .no-login .nav-text-link, + #index .no-login .nav-divider { + display: none !important; + } + #index .no-login .btn.btn-normal#registBtn { padding: 0 8px !important; font-size: 9px !important; - min-width: 45px !important; + min-width: auto !important; height: 26px !important; line-height: 26px !important; } - #index .no-login .btn.btn-normal#registBtn::before { - width: 12px; - height: 12px; + /* 汉堡菜单按钮样式 */ + #index .mobile-menu-toggle { + display: flex !important; + flex-direction: column; + gap: 4px; + cursor: pointer; + width: 20px; + height: 18px; + justify-content: center; + margin-right: 4px; + } + + #index .mobile-menu-toggle span { + width: 100%; + height: 2px; + background: #E5E7EB; + border-radius: 1px; + transition: all 0.3s ease; + } + + #index .mobile-menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(7px, 7px); + } + + #index .mobile-menu-toggle.active span:nth-child(2) { + opacity: 0; + } + + #index .mobile-menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -7px); } /* ===== Banner - 极简 ===== */ .banner-cont .swiper-slide { - height: 200px !important; + height: 100vh !important; + min-height: 300px; } .banner-cont .swiper-slide h1 { @@ -3408,7 +3546,7 @@ html { font-size: 10px !important; margin-top: 6px !important; margin-bottom: 12px !important; - -webkit-line-clamp: 1; /* 只显示1行 */ + -webkit-line-clamp: 1; max-height: 20px; } @@ -3423,7 +3561,7 @@ html { } .banner-cont .swiper-pagination { - bottom: 130px !important; + bottom: 80px !important; } /* ===== 快速入口 - 四宫格极简版 ===== */