MME6 优化移动我的页自适应视觉
这个提交包含在:
@@ -16,6 +16,8 @@
|
||||
--mobile-bottom-nav-height: 68px;
|
||||
--mobile-sticky-action-height: 78px;
|
||||
--mobile-icon-action-min-height: 72px;
|
||||
--mobile-me-slot-gap: clamp(12px, 3.7vw, 16px);
|
||||
--mobile-me-action-icon-slot: 36px;
|
||||
}
|
||||
|
||||
.page-scaffold.mobile-fixed-action-page {
|
||||
@@ -37,6 +39,10 @@
|
||||
padding: var(--mobile-card-padding);
|
||||
}
|
||||
|
||||
.hyb-mobile-shell .section-panel::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
@@ -113,6 +119,87 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-me-entry-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--mobile-card-gap);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-me-profile-row {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
column-gap: var(--mobile-me-slot-gap);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-me-avatar-slot {
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mobile-me-profile-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-me-profile-copy > * {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-me-action-link {
|
||||
display: grid;
|
||||
grid-template-columns: var(--mobile-me-action-icon-slot) minmax(0, 1fr);
|
||||
column-gap: var(--mobile-me-slot-gap);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
border: 1px solid rgb(228 228 231);
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255);
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
|
||||
transition: background-color 150ms ease, border-color 150ms ease;
|
||||
}
|
||||
|
||||
.mobile-me-action-link:hover {
|
||||
background: rgb(250 250 250);
|
||||
}
|
||||
|
||||
.mobile-me-action-icon {
|
||||
width: var(--mobile-me-action-icon-slot);
|
||||
height: var(--mobile-me-action-icon-slot);
|
||||
border-radius: 10px;
|
||||
background: rgb(244 244 245);
|
||||
color: rgb(63 63 70);
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.mobile-me-action-icon svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mobile-me-action-copy {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-me-action-copy > * {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
|
||||
@@ -151,6 +238,8 @@
|
||||
--mobile-card-gap: 6px;
|
||||
--mobile-card-padding: 10px;
|
||||
--mobile-icon-action-min-height: 68px;
|
||||
--mobile-me-slot-gap: 12px;
|
||||
--mobile-me-action-icon-slot: 34px;
|
||||
}
|
||||
|
||||
.mobile-icon-action__icon {
|
||||
|
||||
在新工单中引用
屏蔽一个用户