优化
This commit is contained in:
+49
-16
@@ -678,7 +678,7 @@
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
background: #f4f7fb;
|
||||
background: linear-gradient(180deg, #eef5ff 0, #f4f7fb 180px, #f4f7fb 100%);
|
||||
}
|
||||
|
||||
.portal-header-shell { position: sticky; top: 0; z-index: 30; }
|
||||
@@ -687,7 +687,8 @@
|
||||
box-sizing: border-box;
|
||||
padding: var(--status-bar-height, 0px) 8px 0;
|
||||
color: #ffffff;
|
||||
background: #135ee8;
|
||||
background: linear-gradient(115deg, #0f55d5 0%, #1769e8 58%, #2d7df0 100%);
|
||||
box-shadow: 0 6px 18px rgba(15, 85, 213, 0.2);
|
||||
}
|
||||
|
||||
.portal-header-row {
|
||||
@@ -710,7 +711,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.portal-title { overflow: hidden; font-size: 17px; font-weight: 600; line-height: 48px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.portal-title { overflow: hidden; font-size: 17px; font-weight: 700; line-height: 48px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.portal-header-button {
|
||||
width: 48px;
|
||||
@@ -738,22 +739,40 @@
|
||||
|
||||
.portal-content { padding: 12px 14px 24px; }
|
||||
|
||||
.home-menu { padding: 12px 12px 24px; }
|
||||
.home-group + .home-group { margin-top: 18px; }
|
||||
.home-group-title { display: flex; align-items: center; margin-bottom: 10px; color: #445166; font-size: 16px; line-height: 24px; }
|
||||
.home-menu { padding: 14px 12px 28px; }
|
||||
.home-overview { position: relative; display: flex; box-sizing: border-box; min-height: 116px; margin-bottom: 20px; padding: 15px 16px; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 18px; color: #ffffff; background: linear-gradient(130deg, #135ee8 0%, #0f75c7 68%, #0d9488 130%); box-shadow: 0 10px 24px rgba(19, 94, 232, 0.2); }
|
||||
.home-overview::after { position: absolute; right: -38px; top: -54px; width: 150px; height: 150px; border: 26px solid rgba(255, 255, 255, 0.08); border-radius: 50%; content: ''; }
|
||||
.home-overview-copy { position: relative; z-index: 1; min-width: 0; flex: 1; }
|
||||
.home-overview-eyebrow, .home-overview-title, .home-overview-warehouse, .home-overview-status-value, .home-overview-status-label { display: block; }
|
||||
.home-overview-eyebrow { font-size: 9px; font-weight: 700; line-height: 14px; letter-spacing: 1.3px; opacity: 0.72; }
|
||||
.home-overview-title { overflow: hidden; margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 27px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.home-overview-warehouse { overflow: hidden; margin-top: 6px; font-size: 11px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.82; }
|
||||
.home-overview-status { position: relative; z-index: 1; display: flex; width: 68px; height: 68px; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 18px; background: rgba(255, 255, 255, 0.15); }
|
||||
.home-overview-status-value { font-size: 25px; font-weight: 800; line-height: 28px; }
|
||||
.home-overview-status-label { margin-top: 2px; font-size: 9px; line-height: 14px; opacity: 0.88; }
|
||||
.home-group + .home-group { margin-top: 20px; }
|
||||
.home-group-title { display: flex; align-items: center; margin-bottom: 11px; color: #27384d; font-size: 16px; font-weight: 700; line-height: 24px; }
|
||||
.home-group-mark { width: 4px; height: 20px; flex-shrink: 0; margin-right: 10px; background: #1769e8; }
|
||||
.home-group-mark-inventory { background: #e49a16; }
|
||||
.home-group-mark-relabel { background: #8b5cf6; }
|
||||
.home-group-mark-query { background: #0d9488; }
|
||||
.home-group-count { display: inline-flex; box-sizing: border-box; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 10px; color: #607086; font-size: 10px; line-height: 20px; background: #e4eaf1; }
|
||||
.home-group-disabled .home-group-title { color: #7b8795; }
|
||||
.home-group-disabled .home-group-mark { background: #aeb8c4; }
|
||||
.home-operation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||||
.home-operation { position: relative; display: flex; box-sizing: border-box; min-width: 0; height: 96px; padding: 10px 5px 9px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dce3eb; border-radius: 4px; color: #334155; background: #ffffff; }
|
||||
.home-operation { position: relative; display: flex; box-sizing: border-box; width: 100%; min-width: 0; height: 108px; padding: 9px 4px 8px; align-items: center; flex-direction: column; justify-content: center; border: 1px solid #dce3eb; border-radius: 12px; color: #334155; text-align: center; background: #ffffff; box-shadow: 0 3px 10px rgba(35, 62, 98, 0.06); }
|
||||
.home-operation:active { border-color: #9bbcf2; background: #edf4ff; }
|
||||
.home-operation-primary { border-color: #8cb5f5; color: #135ee8; background: #edf4ff; }
|
||||
.home-operation-primary { height: 88px; padding: 12px 16px; grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; border-color: #8cb5f5; border-radius: 14px; color: #135ee8; text-align: left; background: linear-gradient(145deg, #f7faff, #eaf2ff); box-shadow: 0 4px 12px rgba(19, 94, 232, 0.1); }
|
||||
.home-operation-disabled, .home-operation-disabled[disabled] { border-color: #e1e6ec; color: #8b97a5; opacity: 1; background: #f1f3f6; }
|
||||
.home-operation-disabled:active { border-color: #e1e6ec; background: #f1f3f6; }
|
||||
.home-operation-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; font-weight: 700; }
|
||||
.home-operation-name { display: block; width: 100%; margin-top: 3px; overflow: hidden; font-size: 14px; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.home-operation-pending { color: #52657c; font-size: 11px; line-height: 16px; }
|
||||
.home-operation-unavailable { color: #929dab; font-size: 11px; line-height: 16px; }
|
||||
.home-operation-icon { display: flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 10px; font-size: 20px; font-weight: 700; background: rgba(255, 255, 255, 0.75); }
|
||||
.home-operation-name { display: -webkit-box; width: 100%; min-height: 34px; margin-top: 5px; overflow: hidden; color: inherit; font-size: 12px; font-weight: 650; line-height: 17px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
||||
.home-operation-pending, .home-operation-unavailable { width: fit-content; margin-top: 3px; padding: 1px 6px; border-radius: 99px; font-size: 9px; line-height: 14px; }
|
||||
.home-operation-pending { color: #135ee8; background: #dceaff; }
|
||||
.home-operation-unavailable { color: #7d8997; background: #e5e9ee; }
|
||||
.home-operation-primary .home-operation-icon { width: 46px; height: 46px; }
|
||||
.home-operation-primary .home-operation-name { width: auto; min-width: 0; min-height: 0; margin-top: 0; flex: 1; font-size: 15px; line-height: 21px; text-align: left; }
|
||||
.home-operation-primary .home-operation-pending { flex-shrink: 0; margin-top: 0; padding: 3px 8px; font-size: 10px; line-height: 16px; }
|
||||
|
||||
.header-menu-sheet { box-sizing: border-box; width: 100vw; max-width: 480px; }
|
||||
.header-menu-content { padding-top: 1px; }
|
||||
@@ -772,16 +791,27 @@
|
||||
.operation-info { display: flex; min-width: 0; flex: 1; flex-direction: column; margin-left: 11px; }
|
||||
|
||||
.inline-back { height: 48px; padding: 0 4px; color: #42617f; font-size: 13px; line-height: 48px; background: transparent; }
|
||||
.module-hero { display: flex; align-items: center; margin-top: 5px; padding: 17px; border-radius: 13px; background: #e7f0ff; }
|
||||
.module-hero { position: relative; display: flex; align-items: center; margin-top: 5px; padding: 17px; overflow: hidden; border: 1px solid rgba(23, 105, 232, 0.09); border-radius: 16px; background: #e7f0ff; box-shadow: 0 5px 16px rgba(32, 67, 111, 0.07); }
|
||||
.module-hero-inbound { background: #e1f7f0; }
|
||||
.module-hero-inventory { background: #fff3da; }
|
||||
.module-hero-relabel { background: #f1eafe; }
|
||||
.module-hero-query { background: #f0e9ff; }
|
||||
.module-hero-icon { width: 52px; height: 52px; flex-shrink: 0; margin-right: 13px; border-radius: 14px; color: #ffffff; font-size: 18px; background: $primary; }
|
||||
.module-hero-inbound .module-hero-icon { background: #0d9488; }
|
||||
.module-hero-inventory .module-hero-icon { background: #d68c0c; }
|
||||
.module-hero-relabel .module-hero-icon { background: #7c3aed; }
|
||||
.module-hero-query .module-hero-icon { background: #6d55c7; }
|
||||
.module-hero-copy { min-width: 0; flex: 1; }
|
||||
.module-hero-title { font-size: 18px; font-weight: 700; }
|
||||
.module-hero-desc { margin-top: 4px; color: #617187; font-size: 11px; }
|
||||
.module-hero-desc { margin-top: 4px; color: #617187; font-size: 11px; line-height: 17px; }
|
||||
.module-hero-count { flex-shrink: 0; margin-left: 8px; padding: 4px 7px; border-radius: 99px; color: #49627d; font-size: 9px; line-height: 15px; background: rgba(255, 255, 255, 0.72); }
|
||||
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 22px 2px 11px; }
|
||||
.section-heading .group-title { margin: 0; }
|
||||
.section-heading-hint { color: #8190a3; font-size: 10px; line-height: 16px; }
|
||||
.group-title { display: block; margin: 22px 2px 11px; }
|
||||
.operation-list { overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.06); }
|
||||
.operation-item, .history-item { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 72px; padding: 12px; border-bottom: 1px solid #edf0f3; text-align: left; background: #ffffff; }
|
||||
.operation-item, .history-item { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 78px; padding: 13px 12px; border-bottom: 1px solid #edf0f3; text-align: left; background: #ffffff; }
|
||||
.operation-item:active { background: #f2f7ff; }
|
||||
.operation-item-disabled, .operation-item-disabled[disabled] { color: #8d98a6; opacity: 1; background: #f2f4f6; }
|
||||
.operation-item-disabled .operation-icon { color: #8b97a5; background: #e3e7eb; }
|
||||
.operation-item-disabled .operation-desc { color: #929daa; }
|
||||
@@ -789,6 +819,9 @@
|
||||
.operation-icon { width: 39px; height: 39px; flex-shrink: 0; border-radius: 10px; color: #366cae; font-size: 12px; background: #edf4fd; }
|
||||
.operation-name { font-size: 13px; font-weight: 700; }
|
||||
.operation-desc { margin-top: 4px; color: $text-secondary; font-size: 11px; line-height: 17px; }
|
||||
.operation-ready, .operation-locked { flex-shrink: 0; padding: 3px 6px; border-radius: 99px; font-size: 9px; line-height: 15px; }
|
||||
.operation-ready { color: #0b6f65; background: #dff7f0; }
|
||||
.operation-locked { color: #7c8795; background: #e5e9ee; }
|
||||
.operation-count { min-width: 22px; height: 22px; border-radius: 11px; color: #ffffff; font-size: 11px; line-height: 22px; text-align: center; background: $danger; }
|
||||
.operation-prototype { flex-shrink: 0; padding: 5px 7px; border-radius: 5px; color: #737f8d; font-size: 11px; background: #e1e5e9; }
|
||||
.operation-arrow { margin-left: 8px; color: #9aa5b1; font-size: 21px; }
|
||||
@@ -858,7 +891,7 @@
|
||||
.profile-list { margin-top: 14px; padding: 0 14px; border-radius: 12px; background: #ffffff; }
|
||||
.profile-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid $border; font-size: 13px; }
|
||||
.profile-row:last-child { border-bottom: 0; }
|
||||
.profile-value { color: $text-secondary; font-size: 12px; }
|
||||
.profile-value { max-width: 66%; color: $text-secondary; font-size: 12px; line-height: 18px; text-align: right; overflow-wrap: anywhere; }
|
||||
.profile-action, .logout-action { box-sizing: border-box; width: 100%; height: 50px; margin-top: 14px; padding: 0 15px; border-radius: 11px; font-size: 13px; line-height: 50px; text-align: left; background: #ffffff; }
|
||||
.profile-action { display: flex; justify-content: space-between; color: $text; }
|
||||
.logout-action { color: $danger; text-align: center; }
|
||||
|
||||
Reference in New Issue
Block a user