188 lines
10 KiB
CSS
188 lines
10 KiB
CSS
/* 柏悦物流国内 PDA · 海外版视觉对齐层
|
|
只覆盖视觉 tokens、布局和交互状态，不参与业务逻辑。 */
|
|
:root {
|
|
--pda-blue: #0a66d8;
|
|
--pda-blue-deep: #084faa;
|
|
--pda-blue-soft: #eaf3ff;
|
|
--pda-ink: #344054;
|
|
--pda-muted: #667085;
|
|
--pda-bg: #f2f4f7;
|
|
--pda-surface: #fff;
|
|
--pda-line: #e4e7ec;
|
|
--pda-success: #087a62;
|
|
--pda-success-soft: #e8f7f2;
|
|
--pda-warning: #a75b0b;
|
|
--pda-warning-soft: #fff3e3;
|
|
--pda-danger: #b42318;
|
|
--pda-danger-soft: #fff0ee;
|
|
--pda-shadow-soft: 0 2px 8px rgba(16,24,40,.06);
|
|
--pda-shadow: 0 8px 24px rgba(16,24,40,.08);
|
|
--pda-focus: rgba(10,102,216,.24);
|
|
}
|
|
|
|
html { background: #e7ebf0; }
|
|
body {
|
|
background: var(--pda-bg);
|
|
color: var(--pda-ink);
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
}
|
|
button, input, select { font-family: inherit; }
|
|
button { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease; }
|
|
button:active:not(:disabled) { transform: scale(.985); }
|
|
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--pda-focus); outline-offset: 2px; }
|
|
|
|
/* 登录 / 工作台 */
|
|
.login-page {
|
|
justify-content: center;
|
|
min-height: 100dvh;
|
|
padding: 24px 18px;
|
|
background: linear-gradient(160deg, #eaf3ff 0%, #f2f4f7 54%, #f2f4f7 100%);
|
|
}
|
|
.login-logo {
|
|
width: min(430px, 100%);
|
|
margin: 0 auto;
|
|
padding: 28px 24px 24px;
|
|
border-radius: 18px 18px 0 0;
|
|
background: linear-gradient(140deg, var(--pda-blue-deep), var(--pda-blue));
|
|
}
|
|
.login-logo-icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); }
|
|
.login-logo-title { font-size: 20px; letter-spacing: 0; }
|
|
.login-status { margin-top: 20px; }
|
|
.login-card {
|
|
width: min(430px, 100%);
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
border: 1px solid var(--pda-line);
|
|
border-top: 0;
|
|
border-radius: 0 0 18px 18px;
|
|
background: var(--pda-surface);
|
|
box-shadow: var(--pda-shadow);
|
|
}
|
|
.login-card-title { font-size: 20px; color: #1d2939; }
|
|
.login-card-desc { color: var(--pda-muted); line-height: 1.55; }
|
|
.login-field-label { color: #475467; }
|
|
.login-field-input { height: 50px; border-color: #d0d5dd; border-radius: 11px; background: #fff; font-size: 16px; }
|
|
.login-field-input:focus { border-color: var(--pda-blue); box-shadow: 0 0 0 3px var(--pda-blue-soft); }
|
|
.login-btn { height: 50px; border-radius: 11px; background: var(--pda-blue); box-shadow: 0 6px 14px rgba(10,102,216,.2); font-weight: 750; }
|
|
.login-btn:hover { background: var(--pda-blue-deep); }
|
|
.login-demo-tip { border-radius: 9px; background: #f8fafc; color: var(--pda-muted); }
|
|
.login-accounts { border-color: var(--pda-line); }
|
|
.login-quick-btn { min-height: 56px; border-color: var(--pda-line); border-radius: 10px; background: #f8fafc; }
|
|
.login-quick-btn:hover { border-color: #b8d2f7; background: var(--pda-blue-soft); }
|
|
|
|
.app-shell { background: var(--pda-bg); }
|
|
.app-topbar {
|
|
padding: 12px 16px 18px;
|
|
border-radius: 0;
|
|
background: var(--pda-surface);
|
|
color: var(--pda-ink);
|
|
box-shadow: var(--pda-shadow-soft);
|
|
}
|
|
.app-topbar-row { min-height: 44px; }
|
|
.app-brand-mark { width: 40px; height: 40px; border-radius: 11px; color: #fff; background: var(--pda-blue); box-shadow: 0 4px 10px rgba(10,102,216,.2); }
|
|
.app-brand-title { color: #1d2939; font-size: 16px; }
|
|
.app-brand-sub { color: var(--pda-muted); opacity: 1; }
|
|
.profile-entry { width: 44px; height: 44px; border: 1px solid #d8e8ff; border-radius: 50%; color: var(--pda-blue); background: var(--pda-blue-soft); }
|
|
.profile-entry:hover { background: #dcecff; }
|
|
.welcome-card {
|
|
align-items: flex-start;
|
|
margin-top: 18px;
|
|
padding: 18px;
|
|
border-radius: 16px;
|
|
color: #fff;
|
|
background: linear-gradient(140deg, var(--pda-blue-deep), var(--pda-blue));
|
|
box-shadow: 0 8px 20px rgba(10,102,216,.18);
|
|
}
|
|
.welcome-kicker, .welcome-meta { color: rgba(255,255,255,.82); opacity: 1; }
|
|
.welcome-name { font-size: 23px; }
|
|
.shift-badge { min-height: 32px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(255,255,255,.12); }
|
|
.today-panel { gap: 8px; margin: 14px 0 20px; }
|
|
.today-stat { min-height: 88px; padding: 13px 10px; border-color: var(--pda-line); border-radius: 13px; background: var(--pda-surface); box-shadow: none; }
|
|
.today-stat-num { color: #1d2939; font-size: 25px; }
|
|
.today-stat-label { color: var(--pda-muted); font-size: 12px; }
|
|
.section-heading { margin: 22px 2px 10px; }
|
|
.section-heading-title { color: #1d2939; font-size: 16px; }
|
|
.section-heading-title::before { width: 4px; height: 16px; border-radius: 4px; background: var(--pda-blue); }
|
|
.module-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
|
|
.module-grid { gap: 10px; }
|
|
.module-item, .module-item.active-menu {
|
|
min-height: 116px;
|
|
margin: 0;
|
|
padding: 14px;
|
|
border: 1px solid var(--pda-line);
|
|
border-radius: 14px;
|
|
color: #344054;
|
|
background: var(--pda-surface);
|
|
box-shadow: var(--pda-shadow-soft);
|
|
}
|
|
.module-item:hover { border-color: #b8d2f7; background: #fbfdff; }
|
|
.module-icon { width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 12px; color: var(--pda-blue); background: var(--pda-blue-soft); box-shadow: none; font-size: 21px; }
|
|
.module-name { color: #475467; font-size: 13px; font-weight: 700; }
|
|
.module-badge { top: 10px; right: 10px; min-width: 22px; height: 22px; border-radius: 99px; background: var(--pda-warning); font-size: 10px; line-height: 22px; }
|
|
|
|
/* 个人中心 */
|
|
.profile-cover { height: 150px; background: linear-gradient(140deg, var(--pda-blue-deep), var(--pda-blue)); }
|
|
.profile-cover .page-back { color: #fff; background: rgba(255,255,255,.14); }
|
|
.profile-card { margin: -58px 14px 14px; border-radius: 16px; box-shadow: var(--pda-shadow); }
|
|
.profile-avatar { border-radius: 20px; background: var(--pda-blue-soft); color: var(--pda-blue); }
|
|
.profile-name { color: #1d2939; }
|
|
.profile-role, .profile-list-value { color: var(--pda-muted); }
|
|
.profile-list { margin: 12px 14px; border-color: var(--pda-line); border-radius: 14px; box-shadow: none; }
|
|
.profile-list-item { min-height: 60px; padding: 13px 0; color: #475467; border-color: #edf1f5; }
|
|
.profile-list-icon { border-radius: 10px; background: var(--pda-blue-soft); }
|
|
.profile-logout { width: calc(100% - 28px); margin: 6px 14px 24px; min-height: 48px; border-radius: 11px; color: var(--pda-danger); background: var(--pda-surface); }
|
|
|
|
/* 入库 / 合托公共工作面 */
|
|
.page-topbar { height: 62px; padding: 8px 14px; border-color: var(--pda-line); background: rgba(255,255,255,.96); box-shadow: var(--pda-shadow-soft); backdrop-filter: saturate(160%) blur(16px); }
|
|
.page-back { width: 44px; height: 44px; border-radius: 10px; color: var(--pda-blue); background: transparent; font-size: 30px; line-height: 1; }
|
|
.page-back:hover { background: var(--pda-blue-soft); }
|
|
.page-title { color: #1d2939; font-size: 18px; font-weight: 750; }
|
|
.page-user { width: 44px; height: 44px; border: 1px solid #d8e8ff; border-radius: 50%; color: var(--pda-blue); background: var(--pda-blue-soft); }
|
|
.inbound-content { padding: 18px 14px calc(28px + env(safe-area-inset-bottom)); }
|
|
.inbound-card { margin-bottom: 10px; padding: 16px; border-color: var(--pda-line); border-radius: 14px; background: var(--pda-surface); box-shadow: none; }
|
|
.inbound-card-title { color: #1d2939; font-size: 16px; }
|
|
.inbound-card-sub, .inbound-grid span, .inbound-sku-row span { color: var(--pda-muted); }
|
|
.inbound-status { padding: 6px 9px; border-radius: 99px; color: var(--pda-warning); background: var(--pda-warning-soft); }
|
|
.inbound-status.good { color: var(--pda-success); background: var(--pda-success-soft); }
|
|
.inbound-grid div { border-color: #edf1f5; }
|
|
.inbound-grid strong { color: #344054; }
|
|
.inbound-btn { min-height: 46px; border-radius: 10px; background: var(--pda-blue); }
|
|
.inbound-btn:hover { background: var(--pda-blue-deep); }
|
|
.inbound-btn.secondary { color: var(--pda-blue); background: var(--pda-blue-soft); }
|
|
.inbound-scan { margin-top: 14px; }
|
|
.inbound-scan input, .consolidation-field select, .consolidation-field input { height: 48px; border-color: #d0d5dd; border-radius: 10px; background: #fff; font-size: 16px; }
|
|
.inbound-scan input:focus, .consolidation-field select:focus, .consolidation-field input:focus { border-color: var(--pda-blue); box-shadow: 0 0 0 3px var(--pda-blue-soft); outline: 0; }
|
|
.inbound-scan button { width: 48px; border-radius: 10px; background: var(--pda-blue); }
|
|
.inbound-notice { border-radius: 10px; color: var(--pda-warning); background: var(--pda-warning-soft); }
|
|
.inbound-notice.error { color: var(--pda-danger); background: var(--pda-danger-soft); }
|
|
.consolidation-footer { border-color: var(--pda-line); background: rgba(255,255,255,.96); box-shadow: 0 -4px 14px rgba(16,24,40,.06); }
|
|
|
|
/* 集装箱拣货工作面 */
|
|
.header { padding: 12px 14px 14px; border-radius: 0 0 16px 16px; background: linear-gradient(140deg, var(--pda-blue-deep), var(--pda-blue)); box-shadow: 0 8px 20px rgba(10,102,216,.18); }
|
|
.header-title { font-size: 18px; }
|
|
.header-badge { padding: 6px 9px; border-radius: 99px; }
|
|
.box-select-wrap, .scan-section, .info-cards, .progress-section, .pick-list { margin-left: 14px; margin-right: 14px; }
|
|
.box-select-btn { min-height: 48px; border-color: #c7dbf7; border-radius: 11px; background: var(--pda-surface); color: #174d91; box-shadow: var(--pda-shadow-soft); }
|
|
.scan-section, .info-card, .progress-section, .pick-item { border-color: var(--pda-line); border-radius: 14px; box-shadow: none; }
|
|
.scan-section { padding: 14px; background: var(--pda-surface); }
|
|
.scan-input { height: 48px; border-color: #d0d5dd; border-radius: 10px; background: #fff; }
|
|
.scan-btn { width: 48px; height: 48px; border-radius: 10px; background: var(--pda-blue); }
|
|
.progress-bar-fill { background: var(--pda-success); }
|
|
.pick-item { padding: 15px; }
|
|
.pick-item.active { border-left-color: var(--pda-blue); box-shadow: 0 3px 12px rgba(10,102,216,.1); }
|
|
.pick-btn { min-height: 44px; border-radius: 9px; }
|
|
.pick-btn-confirm { background: var(--pda-success); }
|
|
.pick-btn-partial { color: var(--pda-blue); background: var(--pda-blue-soft); border-color: #9ebcec; }
|
|
.submit-section { box-shadow: 0 -4px 14px rgba(16,24,40,.07); }
|
|
.submit-btn { min-height: 50px; border-radius: 10px; background: var(--pda-blue); }
|
|
|
|
@media (max-width: 360px) {
|
|
.login-page { padding-inline: 14px; }
|
|
.login-logo { padding-inline: 18px; }
|
|
.login-card { padding-inline: 18px; }
|
|
.module-item, .module-item.active-menu { min-height: 104px; padding-inline: 8px; }
|
|
.module-name { font-size: 12px; }
|
|
.inbound-content { padding-inline: 12px; }
|
|
}
|