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