1221 lines
40 KiB
SCSS
1221 lines
40 KiB
SCSS
$primary: #1a73e8;
|
|
$primary-light: #e8f0fe;
|
|
$success: #0d9488;
|
|
$success-light: #d1fae5;
|
|
$danger: #dc2626;
|
|
$danger-light: #fee2e2;
|
|
$warning: #f59e0b;
|
|
$warning-light: #fef3c7;
|
|
$skip: #6b7280;
|
|
$skip-light: #f3f4f6;
|
|
$page-bg: #f5f7fa;
|
|
$card: #ffffff;
|
|
$text: #1f2937;
|
|
$text-secondary: #6b7280;
|
|
$border: #e5e7eb;
|
|
|
|
page {
|
|
background: $page-bg;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
button::after,
|
|
uni-button::after {
|
|
border: 0 !important;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus {
|
|
outline: 3px solid rgba(26, 115, 232, 0.32);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.page-shell {
|
|
min-height: 100vh;
|
|
color: $text;
|
|
font-family: Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
|
background: $page-bg;
|
|
}
|
|
|
|
.login-page {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: calc(var(--status-bar-height, 0px) + 54px) 24px 52px;
|
|
background: linear-gradient(160deg, #287dea 0%, #1a73e8 48%, #1459ae 100%);
|
|
}
|
|
|
|
.login-brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.login-logo-icon {
|
|
display: block;
|
|
width: 78px;
|
|
height: 76px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.login-logo-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.login-logo-sub {
|
|
margin-top: 2px;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.login-card {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 430px;
|
|
margin-top: 35px;
|
|
padding: 24px 20px;
|
|
border-radius: 16px;
|
|
background: $card;
|
|
box-shadow: 0 18px 44px rgba(8, 49, 108, 0.26);
|
|
}
|
|
|
|
.login-field {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.login-field-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: $text-secondary;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.login-field-input,
|
|
.login-field-select {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 14px;
|
|
border: 1px solid #dfe3e8;
|
|
border-radius: 10px;
|
|
color: $text;
|
|
font-size: 16px;
|
|
background: #ffffff;
|
|
box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.02);
|
|
}
|
|
|
|
.login-field-select {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-chevron {
|
|
color: $text-secondary;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.login-error {
|
|
display: block;
|
|
margin: -6px 0 12px;
|
|
color: $danger;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 50px;
|
|
background: linear-gradient(90deg, #1a73e8, #438cf0);
|
|
}
|
|
|
|
.login-accounts {
|
|
margin-top: 18px;
|
|
padding-top: 17px;
|
|
border-top: 1px solid $border;
|
|
}
|
|
|
|
.login-accounts-title {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: $text-secondary;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-quick-btns {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.login-quick-btn {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 14px;
|
|
border: 1px solid $border;
|
|
border-radius: 8px;
|
|
color: $text;
|
|
font-size: 14px;
|
|
line-height: 46px;
|
|
text-align: left;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.login-quick-btn-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.login-quick-btn-role {
|
|
color: $text-secondary;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.work-page {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
|
|
background: $page-bg;
|
|
}
|
|
|
|
.app-header {
|
|
box-sizing: border-box;
|
|
padding: var(--status-bar-height, 0px) 10px 0;
|
|
color: #ffffff;
|
|
background: $primary;
|
|
box-shadow: 0 2px 8px rgba(26, 115, 232, 0.22);
|
|
}
|
|
|
|
.header-top,
|
|
.header-actions,
|
|
.scan-row,
|
|
.progress-header,
|
|
.pick-item-row1,
|
|
.pick-item-row2,
|
|
.submit-info,
|
|
.box-list-item,
|
|
.partial-input-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-top {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-back {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 4px;
|
|
color: #ffffff;
|
|
font-size: 30px;
|
|
line-height: 44px;
|
|
background: transparent;
|
|
}
|
|
|
|
.header-title {
|
|
flex: 1;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.header-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-badge {
|
|
border-radius: 6px;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.header-badge {
|
|
padding: 5px 9px;
|
|
}
|
|
|
|
.work-content {
|
|
box-sizing: border-box;
|
|
padding: 1px 0 104px;
|
|
}
|
|
|
|
.work-content.evidence-active {
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.box-select-wrap {
|
|
position: relative;
|
|
z-index: 5;
|
|
margin: 12px;
|
|
}
|
|
|
|
.box-select-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 14px;
|
|
border: 2px solid $primary;
|
|
border-radius: 12px;
|
|
color: $primary;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 44px;
|
|
text-align: left;
|
|
background: $card;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.box-chevron {
|
|
font-size: 12px;
|
|
transition: transform 160ms ease-out;
|
|
}
|
|
|
|
.stage-switch {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin: 0 12px 10px;
|
|
padding: 4px;
|
|
border: 1px solid $border;
|
|
border-radius: 10px;
|
|
background: #eef2f7;
|
|
}
|
|
|
|
.stage-tab {
|
|
flex: 1;
|
|
min-height: 42px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
color: $text-secondary;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 42px;
|
|
background: transparent;
|
|
}
|
|
|
|
.stage-tab.active {
|
|
color: $primary;
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12);
|
|
}
|
|
|
|
.stage-tab.locked {
|
|
color: #9aa5b1;
|
|
}
|
|
|
|
.stage-tab-hint {
|
|
display: block;
|
|
margin-top: -9px;
|
|
font-size: 9px;
|
|
font-weight: 400;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.evidence-stage-hint {
|
|
margin-top: 10px;
|
|
padding: 8px 10px;
|
|
border-left: 3px solid #d39a25;
|
|
color: #795b16;
|
|
font-size: 11px;
|
|
line-height: 17px;
|
|
background: #fff8e7;
|
|
}
|
|
|
|
.box-chevron.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.box-dropdown {
|
|
position: absolute;
|
|
top: 53px;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
border: 1px solid $border;
|
|
border-radius: 10px;
|
|
background: $card;
|
|
box-shadow: 0 10px 28px rgba(31, 41, 55, 0.18);
|
|
}
|
|
|
|
.box-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
min-height: 56px;
|
|
padding: 9px 14px;
|
|
border-bottom: 1px solid #f0f1f3;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.box-option:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.box-option.active {
|
|
color: $primary;
|
|
font-weight: 600;
|
|
background: $primary-light;
|
|
}
|
|
|
|
.box-option.completed { color: #596675; background: #f3f7f6; }
|
|
.box-option-number, .box-option-order { display: block; }
|
|
.box-option-number { font-size: 13px; font-weight: 700; }
|
|
.box-option-order { margin-top: 3px; color: $text-secondary; font-size: 11px; }
|
|
.box-option-state { padding: 5px 7px; border-radius: 5px; color: #08786c; font-size: 11px; background: $success-light; }
|
|
.box-option-state.draft { color: #865b0b; background: $warning-light; }
|
|
|
|
.scan-section {
|
|
margin: 0 12px 10px;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
background: $card;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.scan-row {
|
|
gap: 10px;
|
|
}
|
|
|
|
.scan-hardware-tip { display: block; margin-top: 9px; color: #41668f; font-size: 11px; font-weight: 600; line-height: 17px; }
|
|
|
|
.last-scan {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
color: #0b5f57;
|
|
background: #dff7f0;
|
|
}
|
|
|
|
.last-scan.warning { color: #77500a; background: #fff2cf; }
|
|
.last-scan.error { color: #a51d1d; background: #fee5e5; }
|
|
.last-scan-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; color: #ffffff; font-size: 20px; font-weight: 700; background: $success; }
|
|
.last-scan.warning .last-scan-icon { background: $warning; }
|
|
.last-scan.error .last-scan-icon { background: $danger; }
|
|
.last-scan-content { display: flex; min-width: 0; flex: 1; flex-direction: column; }
|
|
.last-scan-label { font-size: 12px; font-weight: 700; }
|
|
.last-scan-sku { margin-top: 3px; font-size: 17px; font-weight: 800; }
|
|
.last-scan-detail { margin-top: 3px; font-size: 12px; line-height: 18px; }
|
|
.scan-history { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
|
|
.scan-history-item { overflow: hidden; color: $text-secondary; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.progress-section {
|
|
margin: 0 12px 10px;
|
|
padding: 13px 14px;
|
|
border-radius: 12px;
|
|
background: $card;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.progress-header {
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.progress-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.progress-stats {
|
|
color: $text-secondary;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
|
|
.progress-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
|
|
.box-tasks-btn { height: 48px; padding: 0 12px; border: 1px solid #cdd9e7; border-radius: 8px; color: #3f5f81; font-size: 12px; line-height: 46px; background: #f7faff; }
|
|
|
|
.progress-number {
|
|
color: $success;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.progress-bar-bg {
|
|
overflow: hidden;
|
|
height: 7px;
|
|
margin-top: 10px;
|
|
border-radius: 999px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: $success;
|
|
transform-origin: left center;
|
|
transition: transform 180ms ease-out;
|
|
}
|
|
|
|
.pick-list {
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.pick-item {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
margin-bottom: 10px;
|
|
padding: 15px 13px 13px;
|
|
border-radius: 12px;
|
|
background: $card;
|
|
box-shadow: 0 2px 7px rgba(17, 24, 39, 0.08);
|
|
}
|
|
|
|
.pick-item.pending {
|
|
background: #f7fbff;
|
|
}
|
|
|
|
.pick-item.picked { background: #f1fbf8; }
|
|
.pick-item.partial { background: #f2f7ff; }
|
|
.pick-item.skipped { background: #f6f7f8; }
|
|
|
|
.pick-status-tag {
|
|
box-sizing: border-box;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tag-picked { color: #067568; background: $success-light; }
|
|
.tag-partial { color: #2563c9; background: #dbeafe; }
|
|
.tag-skipped { color: $skip; background: #e5e7eb; }
|
|
|
|
.pick-item-row1 {
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pick-item-sku {
|
|
flex-shrink: 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pick-item-meta {
|
|
display: flex;
|
|
max-width: 70%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.pick-item-qty {
|
|
max-width: 100%;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
text-align: right;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.qty-number {
|
|
color: $text;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.actual-number {
|
|
color: #4a7dff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pick-item-row2 {
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.pick-item-desc {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: $text-secondary;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.pick-item-location {
|
|
flex-shrink: 0;
|
|
padding: 6px 9px;
|
|
border-radius: 5px;
|
|
color: #2874c9;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
background: #e9f4ff;
|
|
}
|
|
|
|
.pick-item-actions {
|
|
display: grid;
|
|
grid-template-columns: 1.15fr 1fr 0.78fr;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.processed-actions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pick-btn {
|
|
height: 48px;
|
|
padding: 0 6px;
|
|
border-radius: 7px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.pick-btn-confirm { color: #ffffff; background: $success; }
|
|
.pick-btn-partial { border: 1px solid #75a5ef; color: #4a7dff; background: #eef5ff; }
|
|
.pick-btn-skip { color: $skip; background: #eef0f3; }
|
|
.pick-btn-undo { border: 1px solid #d8dde4; color: $text-secondary; background: #ffffff; }
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40px 20px;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 34px;
|
|
}
|
|
|
|
.empty-state-text {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.submit-section {
|
|
position: fixed;
|
|
z-index: 8;
|
|
left: 50%;
|
|
bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 20px);
|
|
max-width: 460px;
|
|
padding: 10px 12px;
|
|
border: 1px solid #dbe2ea;
|
|
border-radius: 14px;
|
|
background: #ffffff;
|
|
box-shadow: 0 6px 20px rgba(31, 41, 55, 0.16);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.submit-info {
|
|
display: flex;
|
|
width: 108px;
|
|
min-width: 108px;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.submit-pending { white-space: nowrap; }
|
|
.submit-pending-number { color: $warning; font-size: 20px; font-weight: 800; }
|
|
.submit-pending-label { color: $text-secondary; font-size: 12px; }
|
|
.submit-status-hint { display: block; margin-top: 3px; color: #66768a; font-size: 10px; line-height: 14px; }
|
|
|
|
.submit-btn {
|
|
box-sizing: border-box;
|
|
width: auto;
|
|
height: 56px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 56px;
|
|
background: $primary;
|
|
}
|
|
|
|
.submit-btn[disabled] {
|
|
color: #8a9099;
|
|
background: #e4e6eb;
|
|
opacity: 1;
|
|
}
|
|
|
|
.portal-page {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
background: linear-gradient(180deg, #eef5ff 0, #f4f7fb 180px, #f4f7fb 100%);
|
|
}
|
|
|
|
.portal-header-shell { position: sticky; top: 0; z-index: 30; }
|
|
|
|
.portal-header {
|
|
box-sizing: border-box;
|
|
padding: var(--status-bar-height, 0px) 8px 0;
|
|
color: #ffffff;
|
|
background: linear-gradient(115deg, #0f55d5 0%, #1769e8 58%, #2d7df0 100%);
|
|
box-shadow: 0 6px 18px rgba(15, 85, 213, 0.2);
|
|
}
|
|
|
|
.portal-header-row {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 48px minmax(0, 1fr) 48px;
|
|
}
|
|
|
|
.portal-title,
|
|
.summary-number,
|
|
.summary-label,
|
|
.profile-name,
|
|
.profile-role,
|
|
.history-empty-title,
|
|
.history-empty-desc {
|
|
display: block;
|
|
}
|
|
|
|
.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;
|
|
height: 48px;
|
|
padding: 0;
|
|
color: #ffffff;
|
|
font-size: 26px;
|
|
line-height: 48px;
|
|
background: transparent;
|
|
}
|
|
|
|
.avatar-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: #ffffff;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
line-height: 48px;
|
|
background: transparent;
|
|
}
|
|
.portal-header-spacer { width: 48px; height: 48px; }
|
|
|
|
.portal-content { padding: 12px 14px 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; 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: 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; 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; }
|
|
|
|
.header-menu-sheet { box-sizing: border-box; width: 100vw; max-width: 480px; }
|
|
.header-menu-content { padding-top: 1px; }
|
|
.header-menu-title { display: block; margin: 17px 16px 8px; color: #1f2937; font-size: 17px; font-weight: 700; }
|
|
.header-menu-item { display: grid; box-sizing: border-box; width: calc(100% - 32px); height: 54px; margin: 0 16px; padding: 0 4px; align-items: center; grid-template-columns: 32px minmax(0, 1fr) 24px; border-bottom: 1px solid #e5e7eb; color: #334155; font-size: 15px; line-height: 54px; text-align: left; background: #ffffff; }
|
|
.header-menu-close { box-sizing: border-box; width: calc(100% - 32px); height: 48px; margin: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 6px; color: #334155; font-size: 14px; line-height: 48px; background: #eef2f6; }
|
|
|
|
.group-title { font-size: 16px; font-weight: 700; }
|
|
|
|
.inline-back { height: 48px; padding: 0 4px; color: #42617f; font-size: 13px; line-height: 48px; background: transparent; }
|
|
.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; }
|
|
.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; }
|
|
.history-item:last-child { border-bottom: 0; }
|
|
.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-page { padding-top: 12px; }
|
|
.operation-page-title-row, .operation-scan-row, .task-toolbar, .prototype-task-head, .prototype-task-meta, .prototype-task-foot { display: flex; align-items: center; }
|
|
.operation-page-title-row { justify-content: space-between; gap: 12px; margin: 7px 2px 14px; }
|
|
.operation-page-title, .operation-page-subtitle, .operation-scan-label, .operation-scan-tip, .operation-metric-value, .operation-metric-label, .prototype-task-title { display: block; }
|
|
.operation-page-title { font-size: 21px; font-weight: 700; }
|
|
.operation-page-subtitle { margin-top: 4px; color: $text-secondary; font-size: 11px; }
|
|
.prototype-badge { flex-shrink: 0; padding: 6px 9px; border-radius: 6px; color: #45617f; font-size: 11px; background: #e4edf8; }
|
|
.operation-scan-card { padding: 15px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
|
|
.operation-scan-label { margin-bottom: 9px; font-size: 12px; font-weight: 700; }
|
|
.operation-scan-row { gap: 8px; }
|
|
.operation-scan-input { box-sizing: border-box; height: 48px; min-width: 0; flex: 1; padding: 0 12px; border: 2px solid #8cb7ef; border-radius: 9px; font-size: 13px; background: #fbfdff; }
|
|
.operation-scan-button { width: 68px; height: 48px; flex-shrink: 0; border-radius: 9px; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 48px; background: $primary; }
|
|
.operation-scan-tip { margin-top: 8px; color: #718095; font-size: 11px; line-height: 17px; }
|
|
.operation-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding: 14px 6px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.06); }
|
|
.operation-metric { display: flex; flex-direction: column; align-items: center; border-right: 1px solid $border; }
|
|
.operation-metric:last-child { border-right: 0; }
|
|
.operation-metric-value { font-size: 22px; font-weight: 700; }
|
|
.metric-primary { color: $primary; }
|
|
.metric-warning { color: $warning; }
|
|
.metric-success { color: $success; }
|
|
.operation-metric-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
|
|
.task-toolbar { justify-content: space-between; margin: 20px 2px 10px; }
|
|
.operation-group-title { margin: 0; }
|
|
.filter-button { height: 48px; padding: 0 14px; border: 1px solid #dbe2ea; border-radius: 8px; color: #52657c; font-size: 12px; line-height: 46px; background: #ffffff; }
|
|
.prototype-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; padding: 3px; border-radius: 9px; background: #e9edf3; }
|
|
.prototype-tab { height: 48px; border-radius: 7px; color: #5f7085; font-size: 12px; line-height: 48px; background: transparent; }
|
|
.prototype-tab.active { color: $primary; font-weight: 700; background: #ffffff; box-shadow: 0 2px 7px rgba(38, 71, 112, 0.12); }
|
|
.prototype-task-list { display: flex; flex-direction: column; gap: 10px; }
|
|
.prototype-task-card { padding: 14px; border: 1px solid #e7ebf0; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 13px rgba(32, 67, 111, 0.05); }
|
|
.prototype-task-head { justify-content: space-between; gap: 8px; }
|
|
.prototype-task-code { color: #45617f; font-size: 11px; }
|
|
.prototype-task-status { flex-shrink: 0; padding: 5px 8px; border-radius: 5px; font-size: 11px; }
|
|
.status-pending { color: #1f64c8; background: #e2edfc; }
|
|
.status-progress { color: #96610b; background: #fff0cf; }
|
|
.prototype-task-title { margin-top: 9px; font-size: 14px; font-weight: 700; }
|
|
.prototype-task-meta { justify-content: space-between; gap: 8px; margin-top: 7px; color: $text-secondary; font-size: 11px; line-height: 17px; }
|
|
.prototype-task-meta text:last-child { text-align: right; }
|
|
.prototype-task-foot { justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf0f3; }
|
|
.prototype-task-qty { color: #43556b; font-size: 11px; font-weight: 600; }
|
|
.prototype-task-action { min-width: 86px; height: 48px; padding: 0 12px; border-radius: 8px; color: #ffffff; font-size: 12px; line-height: 48px; background: $primary; }
|
|
.operation-empty { display: flex; flex-direction: column; align-items: center; padding: 42px 16px; border-radius: 12px; background: #ffffff; }
|
|
.operation-empty-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: $success; font-size: 21px; background: $success-light; }
|
|
|
|
.summary-card { display: grid; grid-template-columns: repeat(2, 1fr); padding: 18px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
|
|
.summary-card > view { display: flex; flex-direction: column; align-items: center; }
|
|
.summary-card > view + view { border-left: 1px solid $border; }
|
|
.summary-number { color: $success; font-size: 28px; font-weight: 700; }
|
|
.summary-number.pending-color { color: $warning; }
|
|
.summary-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
|
|
.history-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 18px; border-radius: 12px; color: $text-secondary; background: #ffffff; }
|
|
.history-empty-icon { color: #aeb8c4; font-size: 36px; }
|
|
.history-empty-title { margin-top: 12px; color: $text; font-size: 14px; font-weight: 600; }
|
|
.history-empty-desc { margin-top: 6px; font-size: 11px; }
|
|
.history-check { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #ffffff; background: $success; }
|
|
.history-status { flex-shrink: 0; color: $success; font-size: 11px; }
|
|
|
|
.profile-content { padding-top: 20px; }
|
|
.profile-card { display: flex; align-items: center; padding: 20px 16px; border-radius: 13px; background: #ffffff; box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07); }
|
|
.profile-avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-right: 14px; border-radius: 50%; color: #ffffff; font-size: 21px; font-weight: 700; background: linear-gradient(145deg, #2b82ed, #155dbb); }
|
|
.profile-name { font-size: 18px; font-weight: 700; }
|
|
.profile-role { margin-top: 5px; color: $text-secondary; font-size: 11px; }
|
|
.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 { max-width: 66%; color: $text-secondary; font-size: 12px; line-height: 18px; text-align: right; overflow-wrap: anywhere; }
|
|
.profile-row-action { box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0; border-radius: 0; color: $text; line-height: normal; text-align: left; background: transparent; }
|
|
.profile-row-action::after { border: 0; }
|
|
.profile-row-action:active { background: #f7f9fc; }
|
|
.profile-row-end { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
|
|
.profile-row-arrow { flex-shrink: 0; color: $text-secondary; font-size: 18px; }
|
|
.logout-action { box-sizing: border-box; width: 100%; height: 50px; margin-top: 14px; padding: 0 15px; border-radius: 11px; color: $danger; font-size: 13px; line-height: 50px; text-align: center; background: #ffffff; }
|
|
.logout-dialog-card { box-sizing: border-box; width: calc(100vw - 48px); max-width: 320px; overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); }
|
|
.logout-dialog-title { display: block; padding: 24px 22px 0; color: $danger; font-size: 17px; font-weight: 700; text-align: center; }
|
|
.logout-dialog-content { display: block; padding: 18px 22px 22px; color: $text-secondary; font-size: 14px; line-height: 22px; }
|
|
.logout-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid $border; }
|
|
.logout-dialog-cancel, .logout-dialog-confirm { height: 52px; border-radius: 0; font-size: 15px; line-height: 52px; background: #ffffff; }
|
|
.logout-dialog-cancel { color: $text; }
|
|
.logout-dialog-confirm { border-left: 1px solid $border; color: $danger; font-weight: 700; }
|
|
.logout-dialog-cancel:active, .logout-dialog-confirm:active { background: #f5f7fa; }
|
|
|
|
.modal-sheet {
|
|
box-sizing: border-box;
|
|
width: 100vw;
|
|
max-width: 480px;
|
|
padding: 20px 18px 18px;
|
|
border-radius: 16px 16px 0 0;
|
|
background: $card;
|
|
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.modal-title {
|
|
display: block;
|
|
margin-bottom: 14px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-empty {
|
|
padding: 26px 10px;
|
|
color: $text-secondary;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
.box-list-item {
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 9px;
|
|
padding: 12px;
|
|
min-height: 64px;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.box-list-item-done { background: #effaf7; }
|
|
.box-list-item-pending { background: #fff8e7; }
|
|
|
|
.box-list-info {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.box-list-number { font-size: 13px; font-weight: 600; }
|
|
.box-list-detail { margin-top: 4px; color: $text-secondary; font-size: 12px; line-height: 18px; }
|
|
|
|
.box-list-tag {
|
|
flex-shrink: 0;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.box-list-tag-done { color: #08786c; background: $success-light; }
|
|
.box-list-tag-pending { color: #986407; background: $warning-light; }
|
|
|
|
.modal-close-btn {
|
|
width: 100%;
|
|
height: 48px;
|
|
margin-top: 6px;
|
|
border: 1px solid $border;
|
|
border-radius: 9px;
|
|
color: $text-secondary;
|
|
font-size: 14px;
|
|
line-height: 46px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.skip-reasons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skip-reason-btn {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 48px;
|
|
padding: 10px 12px;
|
|
border: 1px solid $border;
|
|
border-radius: 8px;
|
|
color: $text;
|
|
font-size: 13px;
|
|
line-height: 21px;
|
|
text-align: left;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.skip-reason-btn.selected {
|
|
border-color: $warning;
|
|
color: #8a5a00;
|
|
background: $warning-light;
|
|
}
|
|
|
|
.modal-actions,
|
|
.complete-btns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.modal-cancel-btn,
|
|
.modal-confirm-btn,
|
|
.complete-btn-back,
|
|
.complete-btn-next {
|
|
height: 48px;
|
|
border-radius: 9px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.modal-cancel-btn,
|
|
.complete-btn-back {
|
|
border: 1px solid $border;
|
|
color: $text-secondary;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.modal-confirm-btn,
|
|
.complete-btn-next {
|
|
color: #ffffff;
|
|
background: $primary;
|
|
}
|
|
|
|
.skip-confirm-btn { background: $warning; }
|
|
|
|
.partial-modal-title { font-size: 17px; }
|
|
|
|
.partial-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px;
|
|
border-radius: 9px;
|
|
background: $primary-light;
|
|
}
|
|
|
|
.partial-info-sku { color: $primary; font-size: 15px; font-weight: 700; }
|
|
.partial-info-desc { margin-top: 4px; color: $text-secondary; font-size: 12px; }
|
|
.partial-info-qty { margin-top: 7px; font-size: 13px; }
|
|
.partial-info-qty text { font-size: 16px; font-weight: 700; }
|
|
|
|
.partial-input-row {
|
|
gap: 9px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.partial-input-label {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.partial-input {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 48px;
|
|
padding: 0 12px;
|
|
border: 2px solid $primary;
|
|
border-radius: 8px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.partial-input-unit { flex-shrink: 0; color: $text-secondary; font-size: 13px; }
|
|
|
|
.partial-quick-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.partial-quick-btn {
|
|
height: 48px;
|
|
padding: 0 6px;
|
|
border: 1px solid #b9c9df;
|
|
border-radius: 7px;
|
|
color: #436080;
|
|
font-size: 12px;
|
|
line-height: 48px;
|
|
background: #f4f8fc;
|
|
}
|
|
|
|
.partial-validation { display: block; margin-top: 10px; color: $danger; font-size: 12px; line-height: 18px; }
|
|
.modal-confirm-btn[disabled] { color: #8a9099; background: #e4e6eb; opacity: 1; }
|
|
.decision-desc { display: block; color: $text-secondary; font-size: 13px; line-height: 20px; text-align: center; }
|
|
.submit-decision-modal { padding: 18px 16px 16px; }
|
|
.submit-decision-title { margin-bottom: 8px; text-align: left; }
|
|
.submit-decision-desc { text-align: left; }
|
|
.submit-decision-actions { margin-top: 14px; }
|
|
.decision-summary { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 14px; padding: 12px; border-radius: 10px; background: #f6f8fb; }
|
|
.decision-summary > view { display: flex; flex-direction: column; align-items: center; gap: 3px; color: $text-secondary; font-size: 11px; }
|
|
.decision-summary > view + view { border-left: 1px solid $border; }
|
|
.decision-number { color: $success; font-size: 24px; font-weight: 800; }
|
|
.decision-number.warning { color: $warning; }
|
|
.pending-sku-list { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding: 12px; border-radius: 9px; color: #4d5d70; font-size: 12px; background: #f6f8fb; }
|
|
.decision-label { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 700; }
|
|
.incomplete-reasons { display: flex; flex-direction: column; gap: 8px; }
|
|
.incomplete-reason { box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1px solid $border; border-radius: 8px; color: $text; font-size: 13px; line-height: 20px; text-align: left; background: #ffffff; }
|
|
.incomplete-reason.selected { border-color: $danger; color: #a51d1d; background: $danger-light; }
|
|
.danger-confirm { background: $danger; }
|
|
.all-complete-btn { width: 100%; height: 48px; margin-top: 20px; border-radius: 9px; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 48px; background: $primary; }
|
|
|
|
.complete-modal {
|
|
box-sizing: border-box;
|
|
width: calc(100vw - 32px);
|
|
max-width: 380px;
|
|
padding: 24px 18px;
|
|
border-radius: 16px;
|
|
background: $card;
|
|
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.complete-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
margin: 0 auto 12px;
|
|
border-radius: 50%;
|
|
color: #ffffff;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
background: $success;
|
|
}
|
|
|
|
.complete-title,
|
|
.complete-desc {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.complete-title { font-size: 20px; font-weight: 700; }
|
|
.complete-desc { margin-top: 6px; color: $text-secondary; font-size: 12px; }
|
|
|
|
.complete-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 10px 18px;
|
|
margin-top: 18px;
|
|
padding: 14px 8px;
|
|
border-radius: 10px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.complete-stat {
|
|
display: flex;
|
|
min-width: 58px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.complete-stat-num { font-size: 22px; font-weight: 700; }
|
|
.complete-stat-label { margin-top: 3px; color: $text-secondary; font-size: 11px; }
|
|
.green { color: $success; }
|
|
.blue { color: #4a7dff; }
|
|
.gray { color: $skip; }
|
|
.red { color: $danger; }
|
|
|
|
.loading-evidence-section {
|
|
margin: 8px 12px 92px;
|
|
padding: 14px;
|
|
border: 1px solid #d8e4f4;
|
|
border-radius: 10px;
|
|
background: $card;
|
|
box-shadow: 0 4px 15px rgba(32, 67, 111, 0.07);
|
|
}
|
|
.section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
|
.section-title { display: block; color: $text; font-size: 15px; font-weight: 700; }
|
|
.section-subtitle { display: block; margin-top: 4px; color: $text-secondary; font-size: 11px; line-height: 17px; }
|
|
.sync-state { flex-shrink: 0; padding: 4px 7px; border-radius: 99px; font-size: 11px; background: #eef2f7; }
|
|
.sync-state.ready { color: $success; background: #e8f8ef; }
|
|
.sync-state.error { color: $danger; background: #fff0f0; }
|
|
.sync-state.loading { color: #8a5a00; background: #fff7df; }
|
|
.evidence-grid { display: flex; flex-direction: column; margin-top: 12px; }
|
|
.evidence-card { margin-bottom: 12px; padding: 10px; border: 1px solid #d7e1ed; border-radius: 9px; background: #f8fafc; }
|
|
.evidence-card:last-child { margin-bottom: 0; }
|
|
.evidence-card.filled { border-color: #a7d6ba; background: #f4fbf6; }
|
|
.evidence-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.evidence-card-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
|
|
.evidence-label { display: block; color: $text; font-size: 12px; font-weight: 700; }
|
|
.evidence-count { padding: 2px 6px; border-radius: 99px; color: $text-secondary; font-size: 10px; line-height: 16px; background: #e9eef5; }
|
|
.evidence-count.complete { color: #087443; background: #dff4e7; }
|
|
.evidence-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
|
|
.evidence-photo-item { position: relative; min-width: 0; padding: 4px; border: 1px solid #dbe5ef; border-radius: 8px; background: #ffffff; }
|
|
.evidence-thumbnail { display: flex; width: 100%; height: 68px; align-items: center; justify-content: center; border-radius: 6px; color: $text-secondary; font-size: 9px; line-height: 13px; text-align: center; background: #e7edf5; }
|
|
.evidence-thumbnail-placeholder { box-sizing: border-box; padding: 6px; }
|
|
.evidence-file { display: block; overflow: hidden; margin-top: 4px; padding: 0 2px; color: $text-secondary; font-size: 9px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.evidence-void-btn { position: absolute; top: 8px; right: 8px; min-width: 40px; height: 40px; padding: 0 7px; border: 0; border-radius: 20px; color: #ffffff; font-size: 10px; line-height: 40px; background: rgba(185, 28, 28, 0.9); }
|
|
.evidence-empty-hint { display: block; margin-top: 7px; color: $text-secondary; font-size: 10px; line-height: 15px; }
|
|
.evidence-upload-state { display: block; margin-top: 5px; color: $text-secondary; font-size: 10px; line-height: 15px; }
|
|
.evidence-upload-state.uploading, .evidence-upload-state.pending { color: #174d91; }
|
|
.evidence-upload-state.failed { color: $danger; }
|
|
.evidence-upload-state.succeeded { color: $success; }
|
|
.evidence-btn { min-height: 40px; margin-top: 8px; padding: 0 9px; border: 1px solid #9db7d9; border-radius: 7px; color: #174d91; font-size: 12px; line-height: 40px; background: #ffffff; }
|
|
.evidence-add-btn { flex-shrink: 0; min-width: 78px; min-height: 40px; margin-top: 0; line-height: 40px; }
|
|
.evidence-retry-btn { min-height: 40px; margin-top: 6px; padding: 0 9px; border: 1px solid $danger; border-radius: 7px; color: $danger; font-size: 12px; line-height: 40px; background: #fff5f4; }
|
|
.seal-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
|
|
.seal-input { flex: 1; height: 42px; box-sizing: border-box; padding: 0 10px; border: 1px solid $border; border-radius: 7px; font-size: 12px; background: #f8fafc; }
|
|
.seal-btn { flex-shrink: 0; margin-top: 0; }
|
|
.remote-error { display: block; margin-top: 9px; color: $danger; font-size: 11px; line-height: 17px; }
|
|
.loading-complete-btn { width: 100%; min-height: 46px; margin-top: 12px; border-radius: 8px; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 46px; background: $primary; }
|
|
.loading-complete-btn[disabled] { color: #8c96a3; background: #e5e9ef; }
|
|
.version-hint { display: block; margin-top: 6px; color: $text-secondary; font-size: 10px; line-height: 15px; text-align: center; }
|
|
|
|
.app-toast {
|
|
position: fixed;
|
|
z-index: 30;
|
|
top: calc(var(--status-bar-height, 0px) + 70px);
|
|
left: 50%;
|
|
box-sizing: border-box;
|
|
max-width: calc(100% - 40px);
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
background: #374151;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.app-toast.success { background: $success; }
|
|
.app-toast.warning { background: #b77905; }
|
|
.app-toast.error { background: $danger; }
|
|
|
|
@media (min-width: 481px) {
|
|
.work-page {
|
|
box-shadow: 0 0 28px rgba(31, 41, 55, 0.11);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 340px) {
|
|
.login-page { padding-right: 16px; padding-left: 16px; }
|
|
.header-title { font-size: 18px; }
|
|
.box-select-btn { padding: 0 10px; font-size: 12px; }
|
|
.pick-item { padding-right: 10px; padding-left: 10px; }
|
|
.pick-item-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.pick-btn-confirm { grid-column: 1 / -1; }
|
|
.processed-actions { grid-template-columns: 1fr; }
|
|
.evidence-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.submit-section { gap: 8px; width: calc(100% - 12px); padding-right: 8px; padding-left: 8px; }
|
|
.submit-info { width: 96px; min-width: 96px; }
|
|
}
|