Browse Source

style(业务代码): 横屏 sidebar 改用比例 flex 布局防溢出

- sidebar justify-content 改为 flex-start,去掉 justify-content: center 导致的双端溢出风险
- #app-logo-bar flex: 7 7 0 占 sidebar 高度 70%,#cta-btn-wrapper flex: 3 3 0 占 30%
- logo 图片加 max-height 百分比限制,防止矮屏下撑开父容器
- sidebar 添加 overflow: hidden 兜底裁剪
guoziyun 3 tuần trước cách đây
mục cha
commit
60913a1e32
1 tập tin đã thay đổi với 22 bổ sung9 xóa
  1. 22 9
      assets/css/tools.css

+ 22 - 9
assets/css/tools.css

@@ -102,16 +102,19 @@ body {
     order: 2;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    gap: clamp(12px, 2.5vh, 24px);
+    justify-content: flex-start;
+    gap: 0;
     width: clamp(140px, 36%, 260px);
+    height: 100%;
     background: transparent;
-    padding: clamp(12px, 2vh, 20px) clamp(10px, 2vw, 16px);
+    padding: clamp(8px, 1.5vh, 16px) clamp(10px, 2vw, 16px);
     box-sizing: border-box;
     box-shadow: none;
     pointer-events: auto;
+    overflow: hidden;
   }
 
+  /* spacer 布局改用比例 flex,无需 spacer */
   .sidebar-flex-spacer {
     display: none;
   }
@@ -402,10 +405,12 @@ body {
 
 @media (orientation: landscape) {
   #app-logo-bar {
-    flex: 0 0 auto;
+    /* sidebar 高度的 70%(logo图 4 + logo文字 3) */
+    flex: 7 7 0;
+    min-height: 0;
     order: 1;
     flex-direction: column;
-    gap: clamp(4px, 1vh, 8px);
+    gap: clamp(4px, 1.5vh, 10px);
     padding: 0;
     width: 80%;
     position: static;
@@ -413,17 +418,23 @@ body {
   }
 
   #app-logo {
-    width: 85%;
+    /* 占 logo-bar 的 ~57%(4/7),用 max-height 限高 */
+    width: 82%;
     height: auto;
     max-width: none;
+    max-height: 55%;
     object-fit: contain;
+    flex-shrink: 1;
   }
 
   #app-logo-txt {
-    width: 70%;
+    /* 占 logo-bar 的 ~43%(3/7) */
+    width: 68%;
     height: auto;
     max-width: none;
+    max-height: 40%;
     object-fit: contain;
+    flex-shrink: 1;
   }
 }
 
@@ -462,10 +473,12 @@ body {
 
 @media (orientation: landscape) {
   #cta-btn-wrapper {
-    flex: 0 0 auto;
+    /* sidebar 高度的 30% */
+    flex: 3 3 0;
+    min-height: 0;
     order: 10;
     width: 90%;
-    padding: 0 0 clamp(20px, 5vh, 44px);
+    padding: 0;
     position: static;
     z-index: auto;
   }