4103 lines
167 KiB
HTML
4103 lines
167 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>虫虫出海 - 移动端</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 30%, #312e81 60%, #4c1d95 100%);
|
||
background-size: 400% 400%;
|
||
animation: gradientBG 20s ease infinite;
|
||
min-height: 100vh;
|
||
color: #1e293b;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
@keyframes gradientBG {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: -50%;
|
||
right: -25%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
bottom: -30%;
|
||
left: -20%;
|
||
width: 80%;
|
||
height: 80%;
|
||
background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.15) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
.app {
|
||
max-width: 430px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 70px;
|
||
position: relative;
|
||
}
|
||
|
||
/* ==== COMMON COMPONENTS ==== */
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.98);
|
||
backdrop-filter: blur(24px);
|
||
-webkit-backdrop-filter: blur(24px);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
.glass-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%);
|
||
background-size: 200% 200%;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 14px 32px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 4px 15px rgba(102,126,234,0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(102,126,234,0.4);
|
||
background-position: 100% 0;
|
||
}
|
||
.input-field {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border: 1.5px solid rgba(102,126,234,0.2);
|
||
border-radius: 12px;
|
||
font-size: 15px;
|
||
background: rgba(255,255,255,0.9);
|
||
outline: none;
|
||
transition: all 0.3s;
|
||
}
|
||
.input-field:focus {
|
||
border-color: #667eea;
|
||
box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ==== BOTTOM TAB BAR ==== */
|
||
.tab-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 430px;
|
||
background: rgba(255,255,255,0.88);
|
||
backdrop-filter: blur(24px) saturate(1.4);
|
||
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 6px 8px env(safe-area-inset-bottom,10px);
|
||
z-index: 100;
|
||
box-shadow:
|
||
0 -2px 20px rgba(79,70,229,0.08),
|
||
0 -1px 3px rgba(0,0,0,0.04);
|
||
}
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 7px 4px 5px;
|
||
cursor: pointer;
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
border-radius: 14px;
|
||
position: relative;
|
||
}
|
||
.tab-item .icon-wrap {
|
||
width: 38px;
|
||
height: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 12px;
|
||
margin-bottom: 3px;
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
position: relative;
|
||
}
|
||
.tab-item .label {
|
||
font-size: 11px;
|
||
color: #9ca3af;
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
font-weight: 500;
|
||
letter-spacing: 0.15px;
|
||
}
|
||
|
||
/* inactive → subtle */
|
||
.tab-item .icon-wrap svg path,
|
||
.tab-item .icon-wrap svg circle,
|
||
.tab-item .icon-wrap svg rect {
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
|
||
/* active state */
|
||
.tab-item.active .icon-wrap {
|
||
background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(99,102,241,0.08));
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(124,58,237,0.18);
|
||
}
|
||
.tab-item.active .icon-wrap svg path,
|
||
.tab-item.active .icon-wrap svg circle:not([fill*="rgba"]),
|
||
.tab-item.active .icon-wrap svg rect {
|
||
stroke: #7c3aed !important;
|
||
}
|
||
.tab-item.active .label {
|
||
color: #7c3aed;
|
||
font-weight: 700;
|
||
}
|
||
/* active indicator dot */
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
width: 16px;
|
||
height: 3px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, #8b5cf6, #6366f1);
|
||
animation: dotIn 0.3s ease-out both;
|
||
}
|
||
@keyframes dotIn { from{width:0;opacity:0;} to{width:16px;opacity:1;} }
|
||
|
||
/* ==== PAGE CONTAINER ==== */
|
||
.page {
|
||
display: none;
|
||
padding: 5px;
|
||
animation: fadeInUp 0.4s ease-out;
|
||
}
|
||
.page.active { display: block; }
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ==== LOGIN PAGE ==== */
|
||
.login-page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 40px 24px;
|
||
}
|
||
.login-logo {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
.login-logo .logo-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba(255,255,255,0.95);
|
||
border-radius: 20px;
|
||
margin: 0 auto 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||
animation: logoFloat 3s ease-in-out infinite;
|
||
}
|
||
@keyframes logoFloat {
|
||
0%,100% { transform: translateY(0); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
.login-logo h1 {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
letter-spacing: 3px;
|
||
text-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||
}
|
||
.login-logo p {
|
||
color: rgba(255,255,255,0.8);
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.login-card {
|
||
padding: 32px 24px;
|
||
}
|
||
.login-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 8px;
|
||
}
|
||
.login-subtitle {
|
||
color: #71717a;
|
||
font-size: 14px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-label {
|
||
font-size: 13px;
|
||
color: #52525b;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
font-weight: 500;
|
||
}
|
||
.form-label::after {
|
||
content: '';
|
||
}
|
||
.form-label .required {
|
||
color: #ef4444;
|
||
margin-left: 2px;
|
||
}
|
||
.login-divider {
|
||
text-align: center;
|
||
color: #a1a1aa;
|
||
font-size: 13px;
|
||
margin: 24px 0;
|
||
position: relative;
|
||
}
|
||
.login-divider::before,
|
||
.login-divider::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 30%;
|
||
height: 1px;
|
||
background: #e4e4e7;
|
||
}
|
||
.login-divider::before { left: 0; }
|
||
.login-divider::after { right: 0; }
|
||
.switch-link {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
color: #667eea;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ==== DASHBOARD PAGE ==== */
|
||
.dashboard-header {
|
||
padding: 20px 0 28px;
|
||
position: relative;
|
||
}
|
||
.greeting-banner {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 16px;
|
||
padding: 12px 12px;
|
||
margin-bottom: 4px;
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
}
|
||
.greeting-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.greeting-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.9) 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #667eea;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.12);
|
||
}
|
||
.greeting-text {
|
||
flex: 1;
|
||
}
|
||
.greeting {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
margin-bottom: 4px;
|
||
text-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.sub-greeting {
|
||
color: rgba(255,255,255,0.85);
|
||
font-size: 13px;
|
||
}
|
||
.greeting-date {
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
.stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.stat-card {
|
||
padding: 12px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.stat-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -25px;
|
||
top: -25px;
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
opacity: 0.05;
|
||
}
|
||
.stat-card:nth-child(1)::before {
|
||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
}
|
||
.stat-card:nth-child(2)::before {
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
}
|
||
.stat-card:nth-child(3)::before {
|
||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||
}
|
||
.stat-card:nth-child(4)::before {
|
||
background: linear-gradient(135deg, #ec4899, #db2777);
|
||
}
|
||
.stat-card:hover {
|
||
transform: translateY(-3px) scale(1.01);
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: #94a3b8;
|
||
margin-bottom: 6px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.stat-value {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: #1e293b;
|
||
margin-bottom: 4px;
|
||
background: linear-gradient(135deg, #1e293b, #334155);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.stat-trend {
|
||
font-size: 10px;
|
||
color: #94a3b8;
|
||
font-weight: 500;
|
||
}
|
||
.stat-trend .up {
|
||
color: #10b981;
|
||
font-weight: 600;
|
||
}
|
||
.stat-trend .down {
|
||
color: #ef4444;
|
||
font-weight: 600;
|
||
}
|
||
.stat-icon {
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 16px;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.9;
|
||
}
|
||
.stat-card:nth-child(1) .stat-icon { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); }
|
||
.stat-card:nth-child(2) .stat-icon { background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(22,163,74,0.1)); }
|
||
.stat-card:nth-child(3) .stat-icon { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(234,88,12,0.1)); }
|
||
.stat-card:nth-child(4) .stat-icon { background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(219,39,119,0.1)); }
|
||
.quick-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
padding: 16px;
|
||
}
|
||
.quick-action {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 14px 6px;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border-radius: 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.quick-action::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.04));
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.quick-action:hover::before {
|
||
opacity: 1;
|
||
}
|
||
.quick-action:hover {
|
||
transform: translateY(-4px) scale(1.02);
|
||
background: rgba(139, 92, 246, 0.05);
|
||
box-shadow: 0 12px 32px rgba(139, 92, 246, 0.15);
|
||
}
|
||
.quick-action .icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.quick-action:hover .icon {
|
||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
transform: scale(1.1);
|
||
}
|
||
.quick-action:hover .icon svg path,
|
||
.quick-action:hover .icon svg circle,
|
||
.quick-action:hover .icon svg rect {
|
||
stroke: #fff;
|
||
}
|
||
.quick-action .label {
|
||
font-size: 12px;
|
||
color: #475569;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 1.3;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.quick-action:hover .label {
|
||
color: #6366f1;
|
||
}
|
||
.dashboard-section {
|
||
margin-bottom: 8px;
|
||
}
|
||
.price-section {
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
}
|
||
.price-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
margin-top: 12px;
|
||
}
|
||
.price-option {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 12px 8px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border: 2px solid transparent;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.price-option::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #8b5cf6, #6366f1);
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.price-option:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
|
||
}
|
||
.price-option.active {
|
||
border-color: #8b5cf6;
|
||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.03));
|
||
}
|
||
.price-option.active::before {
|
||
transform: scaleX(1);
|
||
}
|
||
.price-option-header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.price-days {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
.price-tag {
|
||
font-size: 10px;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, #64748b, #475569);
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
font-weight: 500;
|
||
}
|
||
.price-tag.recommend {
|
||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
}
|
||
.price-option-price {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #8b5cf6;
|
||
margin-bottom: 4px;
|
||
}
|
||
.price-option-desc {
|
||
font-size: 10px;
|
||
color: #94a3b8;
|
||
}
|
||
.selected-price {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
.selected-label {
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
.selected-value {
|
||
font-size: 15px;
|
||
color: #8b5cf6;
|
||
font-weight: 700;
|
||
}
|
||
.order-activity-list {
|
||
padding-top: 14px;
|
||
}
|
||
.activity-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid rgba(228,228,231,0.5);
|
||
}
|
||
.activity-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.activity-order {
|
||
font-size: 13px;
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
}
|
||
.activity-status {
|
||
font-size: 11px;
|
||
padding: 3px 8px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
}
|
||
.status-shipped {
|
||
background: rgba(102,126,234,0.12);
|
||
color: #667eea;
|
||
}
|
||
.status-completed {
|
||
background: rgba(34,197,94,0.12);
|
||
color: #22c55e;
|
||
}
|
||
.status-transit {
|
||
background: rgba(245,158,11,0.12);
|
||
color: #f59e0b;
|
||
}
|
||
.activity-time {
|
||
font-size: 12px;
|
||
color: #a1a1aa;
|
||
}
|
||
.settlement-item {
|
||
padding: 16px;
|
||
margin-top: 12px;
|
||
}
|
||
.settlement-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.settlement-order {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
.settlement-status {
|
||
font-size: 11px;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
}
|
||
.status-pending {
|
||
background: rgba(239,68,68,0.12);
|
||
color: #ef4444;
|
||
}
|
||
.status-approved {
|
||
background: rgba(34,197,94,0.12);
|
||
color: #22c55e;
|
||
}
|
||
.status-rejected {
|
||
background: rgba(107,114,128,0.12);
|
||
color: #6b7280;
|
||
}
|
||
.settlement-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid rgba(228,228,231,0.5);
|
||
}
|
||
.settlement-info span {
|
||
font-size: 12px;
|
||
color: #71717a;
|
||
}
|
||
.settlement-details {
|
||
margin-bottom: 14px;
|
||
}
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
}
|
||
.detail-row span:first-child {
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
}
|
||
.detail-row span:last-child {
|
||
font-size: 13px;
|
||
color: #3f3f46;
|
||
font-weight: 600;
|
||
}
|
||
.settlement-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid rgba(228,228,231,0.5);
|
||
}
|
||
.btn-settle {
|
||
flex: 1;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 12px 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 4px 15px rgba(102,126,234,0.35);
|
||
}
|
||
.btn-settle:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(102,126,234,0.45);
|
||
}
|
||
.btn-settle:active {
|
||
transform: translateY(0);
|
||
}
|
||
.order-tabs {
|
||
display: flex;
|
||
background: rgba(241,241,245,0.8);
|
||
border-radius: 10px;
|
||
padding: 4px;
|
||
}
|
||
.order-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 10px 8px;
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
.order-tab.active {
|
||
background: #fff;
|
||
color: #667eea;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
}
|
||
.order-item {
|
||
padding: 20px;
|
||
margin-top: 0;
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||
}
|
||
.order-header-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
.order-id {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
.order-status {
|
||
font-size: 11px;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
}
|
||
.order-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
.order-info span {
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
}
|
||
.order-service {
|
||
font-size: 14px;
|
||
color: #3f3f46;
|
||
font-weight: 600;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px solid rgba(228,228,231,0.6);
|
||
}
|
||
.order-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.order-meta {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.order-meta span {
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
}
|
||
.order-amount {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #667eea;
|
||
}
|
||
.chart-wrapper {
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.chart-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* ==== ORDER PAGE ==== */
|
||
.order-header {
|
||
padding: 16px 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.order-title {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
}
|
||
.header-left, .header-right {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
.form-section {
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid rgba(102,126,234,0.1);
|
||
}
|
||
.radio-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.radio-item {
|
||
flex: 1;
|
||
min-width: 45%;
|
||
padding: 12px 16px;
|
||
border: 1.5px solid rgba(102,126,234,0.2);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #52525b;
|
||
background: rgba(255,255,255,0.8);
|
||
}
|
||
.radio-item.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: #fff;
|
||
border-color: transparent;
|
||
font-weight: 600;
|
||
}
|
||
.submit-btn {
|
||
width: 100%;
|
||
padding: 16px;
|
||
font-size: 17px;
|
||
border-radius: 14px;
|
||
}
|
||
.goods-table {
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.goods-item {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
width: 100%;
|
||
}
|
||
.goods-item input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 10px 10px;
|
||
border: 1.5px solid rgba(102,126,234,0.2);
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
background: rgba(255,255,255,0.9);
|
||
box-sizing: border-box;
|
||
}
|
||
.goods-item input:first-child {
|
||
flex: 1.5;
|
||
}
|
||
.add-goods {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px;
|
||
border: 2px dashed rgba(102,126,234,0.4);
|
||
border-radius: 10px;
|
||
color: #667eea;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
margin-top: 12px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
.add-goods:hover {
|
||
background: rgba(102,126,234,0.08);
|
||
}
|
||
.order-list {
|
||
margin-top: 16px;
|
||
}
|
||
.order-list-item {
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid rgba(228,228,231,0.5);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.order-list-item:last-child { border-bottom: none; }
|
||
.order-list-title {
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
}
|
||
.order-list-value {
|
||
font-size: 14px;
|
||
color: #667eea;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ==== APPROVAL PAGE ==== */
|
||
.approval-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.approval-tab {
|
||
flex: 1;
|
||
padding: 10px 16px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #71717a;
|
||
cursor: pointer;
|
||
border-radius: 10px;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
.approval-tab.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
.approval-item {
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
position: relative;
|
||
}
|
||
.approval-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
}
|
||
.approval-order {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
.approval-status {
|
||
font-size: 12px;
|
||
padding: 4px 10px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
}
|
||
.status-pending {
|
||
background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(234,88,12,0.1));
|
||
color: #ea580c;
|
||
}
|
||
.status-approved {
|
||
background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(22,163,74,0.1));
|
||
color: #16a34a;
|
||
}
|
||
.status-rejected {
|
||
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1));
|
||
color: #dc2626;
|
||
}
|
||
.approval-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
margin-bottom: 12px;
|
||
}
|
||
.approval-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.approval-actions .btn {
|
||
flex: 1;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
border-radius: 10px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-approve {
|
||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||
color: #fff;
|
||
}
|
||
.btn-reject {
|
||
background: rgba(239,68,68,0.1);
|
||
color: #dc2626;
|
||
}
|
||
|
||
/* ==== PROFILE PAGE ==== */
|
||
.profile-header {
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
text-align: center;
|
||
}
|
||
.profile-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 50%;
|
||
margin: 0 auto 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
box-shadow: 0 8px 24px rgba(102,126,234,0.3);
|
||
}
|
||
.profile-name {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 4px;
|
||
}
|
||
.profile-company {
|
||
font-size: 14px;
|
||
color: #71717a;
|
||
}
|
||
.menu-list {
|
||
padding: 0;
|
||
}
|
||
.menu-item {
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border-bottom: 1px solid rgba(228,228,231,0.5);
|
||
}
|
||
.menu-item:last-child { border-bottom: none; }
|
||
.menu-item:hover { background: rgba(102,126,234,0.05); }
|
||
.menu-item .icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.menu-item .text {
|
||
flex: 1;
|
||
font-size: 15px;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
}
|
||
.menu-item .arrow {
|
||
color: #a1a1aa;
|
||
font-size: 16px;
|
||
}
|
||
.logout-btn {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 12px rgba(59,130,246,0.35);
|
||
transition: all 0.3s;
|
||
}
|
||
.logout-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(59,130,246,0.45);
|
||
}
|
||
|
||
/* ==== DETAIL PAGE ==== */
|
||
.detail-header {
|
||
padding: 16px 0 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.detail-back {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
margin-right: 12px;
|
||
}
|
||
.detail-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
.detail-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
.detail-section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #8c8c8c;
|
||
margin-bottom: 12px;
|
||
}
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid rgba(102,126,234,0.1);
|
||
}
|
||
.detail-item:last-child { border-bottom: none; }
|
||
.detail-label {
|
||
font-size: 14px;
|
||
color: #71717a;
|
||
}
|
||
.detail-value {
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
}
|
||
.approval-item {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.approval-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* ==== HOME BANNER ==== */
|
||
.hd-banner-wrap {
|
||
margin: 0 0 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hd-banner-track {
|
||
display: flex;
|
||
scroll-snap-type: x mandatory;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.hd-banner-track::-webkit-scrollbar { display: none; }
|
||
.hd-banner {
|
||
flex: 0 0 100%;
|
||
scroll-snap-align: start;
|
||
border-radius: 22px;
|
||
padding: 20px 18px 36px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
color: #fff;
|
||
min-height: 138px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
}
|
||
.hd-banner-1 { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #4f46e5 100%); box-shadow: 0 10px 30px rgba(79,70,229,0.30); }
|
||
.hd-banner-2 { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 60%, #7c3aed 100%); box-shadow: 0 10px 30px rgba(37,99,235,0.30); }
|
||
.hd-banner::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -40px;
|
||
top: -50px;
|
||
width: 200px;
|
||
height: 200px;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.hd-banner-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
align-self: flex-start;
|
||
background: rgba(255,255,255,0.22);
|
||
backdrop-filter: blur(8px);
|
||
padding: 5px 10px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.hd-banner-title {
|
||
font-size: 23px;
|
||
font-weight: 900;
|
||
line-height: 1.18;
|
||
letter-spacing: 0.5px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.hd-banner-sub {
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.88);
|
||
margin-top: 7px;
|
||
line-height: 1.5;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.hd-banner-cta {
|
||
align-self: flex-start;
|
||
margin-top: 12px;
|
||
background: #fff;
|
||
color: #4f46e5;
|
||
font-weight: 800;
|
||
font-size: 12px;
|
||
padding: 8px 16px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
|
||
transition: transform 0.2s;
|
||
}
|
||
.hd-banner-cta:hover { transform: translateY(-2px); }
|
||
.hd-banner-deco {
|
||
position: absolute;
|
||
right: 6px;
|
||
bottom: -14px;
|
||
opacity: 0.9;
|
||
pointer-events: none;
|
||
}
|
||
.hd-banner-dots {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 6px;
|
||
z-index: 2;
|
||
}
|
||
.hd-banner-dots .dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.45);
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
.hd-banner-dots .dot.active {
|
||
width: 18px;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
}
|
||
.hd-body { padding: 0 11px; }
|
||
.hd-feature {
|
||
background: linear-gradient(135deg, #7c3aed, #6366f1);
|
||
border-radius: 18px; padding: 18px 20px; margin-bottom: 16px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
cursor: pointer; color: #fff; position: relative; overflow: hidden;
|
||
box-shadow: 0 10px 28px rgba(99,102,241,0.32);
|
||
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
.hd-feature:hover { transform: translateY(-3px); }
|
||
.hd-feature::after {
|
||
content: ''; position: absolute; right: -30px; top: -30px;
|
||
width: 120px; height: 120px;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
|
||
}
|
||
.hd-feature-title { font-size: 17px; font-weight: 800; position: relative; z-index: 1; }
|
||
.hd-feature-desc { font-size: 12px; color: rgba(255,255,255,0.88); margin-top: 4px; position: relative; z-index: 1; }
|
||
.hd-feature-arrow {
|
||
width: 42px; height: 42px; border-radius: 50%;
|
||
background: rgba(255,255,255,0.22);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0; position: relative; z-index: 1;
|
||
transition: transform 0.3s;
|
||
}
|
||
.hd-feature:hover .hd-feature-arrow { transform: translateX(4px); }
|
||
.hd-section-title {
|
||
font-size: 16px; font-weight: 800; color: #1e293b; margin: 4px 2px 14px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.hd-section-title::before {
|
||
content: ''; width: 4px; height: 18px; border-radius: 3px;
|
||
background: linear-gradient(180deg, #8b5cf6, #6366f1);
|
||
}
|
||
.hd-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||
.hd-service {
|
||
background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
|
||
border: 1px solid rgba(139,92,246,0.09);
|
||
border-radius: 16px;
|
||
padding: 12px 8px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 7px;
|
||
cursor: pointer;
|
||
transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px rgba(139,92,246,0.06);
|
||
}
|
||
.hd-service::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 28px;
|
||
height: 3px;
|
||
border-radius: 0 0 999px 999px;
|
||
background: linear-gradient(90deg, #c084fc, #a78bfa);
|
||
opacity: 0;
|
||
transition: opacity 0.28s;
|
||
}
|
||
.hd-service:hover::before { opacity: 1; }
|
||
.hd-service:hover {
|
||
transform: translateY(-5px) scale(1.02);
|
||
box-shadow: 0 14px 32px rgba(124,58,237,0.18);
|
||
border-color: rgba(124,58,237,0.22);
|
||
}
|
||
.hd-service-icon {
|
||
width: 44px; height: 44px; border-radius: 14px;
|
||
background: linear-gradient(145deg, rgba(139,92,246,0.13), rgba(99,102,241,0.07));
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
|
||
box-shadow: inset 0 -2px 6px rgba(139,92,246,0.06), 0 2px 8px rgba(124,58,237,0.06);
|
||
}
|
||
.hd-service:hover .hd-service-icon {
|
||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||
box-shadow: 0 6px 20px rgba(124,58,237,0.35);
|
||
}
|
||
.hd-service:hover .hd-service-icon svg path,
|
||
.hd-service:hover .hd-service-icon svg circle,
|
||
.hd-service:hover .hd-service-icon svg rect {
|
||
stroke: #fff;
|
||
}
|
||
.hd-service-label { font-size: 12px; color: #334155; font-weight: 700; letter-spacing: 0.1px; }
|
||
.hd-services-card {
|
||
background: linear-gradient(180deg, #fff, #fafbff);
|
||
border: 1px solid rgba(139,92,246,0.08);
|
||
border-radius: 22px;
|
||
padding: 18px 14px 16px;
|
||
margin-bottom: 16px;
|
||
box-shadow:
|
||
0 2px 8px rgba(124,58,237,0.04),
|
||
0 8px 24px rgba(124,58,237,0.05);
|
||
}
|
||
|
||
/* ==== 服务流程 (4步) ==== */
|
||
.hd-process-title {
|
||
font-size: 16px; font-weight: 800; color: #fff; margin: 4px 2px 12px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.hd-process-title::before {
|
||
content: ''; width: 4px; height: 18px; border-radius: 3px;
|
||
background: linear-gradient(180deg, #10b981, #059669);
|
||
}
|
||
.hd-process-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
|
||
.hd-step-item {
|
||
background: linear-gradient(135deg, #fff, #f0fdf4);
|
||
border: 1px solid rgba(16,185,129,0.1);
|
||
border-radius: 18px;
|
||
padding: 14px;
|
||
display: flex; align-items: center; gap: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hd-step-item:hover {
|
||
transform: translateX(4px);
|
||
box-shadow: 0 6px 20px rgba(16,185,129,0.14);
|
||
border-color: rgba(16,185,129,0.25);
|
||
}
|
||
.hd-step-num {
|
||
width: 44px; height: 44px; min-width: 44px;
|
||
border-radius: 14px;
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
color: #fff;
|
||
font-size: 17px; font-weight: 900;
|
||
display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 4px 12px rgba(16,185,129,0.3);
|
||
}
|
||
.hd-step-icon {
|
||
width: 40px; height: 40px; min-width: 40px;
|
||
border-radius: 11px;
|
||
background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(5,150,105,0.07));
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.hd-step-info { flex: 1; min-width: 0; }
|
||
.hd-step-name { font-size: 15px; font-weight: 800; color: #1e293b; }
|
||
.hd-step-desc { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.45; }
|
||
|
||
/* ==== 运费报价表 ==== */
|
||
.hd-price-section {
|
||
background: linear-gradient(180deg, #faf5ff, #ede9fe);
|
||
border: 1px solid rgba(139,92,246,0.12);
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
}
|
||
.hd-price-header {
|
||
padding: 18px 16px 12px;
|
||
}
|
||
.hd-price-header .hd-price-title {
|
||
font-size: 17px; font-weight: 900; color: #1e293b; letter-spacing: 0.3px;
|
||
}
|
||
.hd-price-sub { font-size: 12px; color: #6d28d9; font-weight: 600; margin-top: 4px; }
|
||
.hd-price-table-wrap { padding: 0 12px 14px; }
|
||
.hd-price-row {
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
padding: 13px 14px;
|
||
margin-bottom: 8px;
|
||
display: grid;
|
||
grid-template-columns: 70px 1fr 80px 56px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
box-shadow: 0 1px 6px rgba(124,58,237,0.05);
|
||
transition: transform 0.2s;
|
||
}
|
||
.hd-price-row:last-child { margin-bottom: 0; }
|
||
.hd-price-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,0.08); }
|
||
.hd-pr-type { font-size: 13px; font-weight: 800; color: #4c1d95; }
|
||
.hd-pr-scene { font-size: 11.5px; color: #6b7280; }
|
||
.hd-pr-goods { font-size: 11.5px; color: #6b7280; }
|
||
.hd-pr-price { font-size: 15px; font-weight: 900; color: #7c3aed; text-align: right; white-space: nowrap; }
|
||
.hd-pr-time { font-size: 12px; font-weight: 700; color: #a78bfa; text-align: right; white-space: nowrap; background: rgba(124,58,237,0.06); padding: 3px 8px; border-radius: 999px; }
|
||
.hd-price-cta {
|
||
margin: 0 16px 16px;
|
||
background: linear-gradient(135deg, #7c3aed, #6366f1);
|
||
color: #fff; border: none;
|
||
border-radius: 999px; padding: 12px 0;
|
||
font-size: 14px; font-weight: 800;
|
||
cursor: pointer;
|
||
width: auto;
|
||
box-shadow: 0 6px 20px rgba(124,58,237,0.32);
|
||
transition: all 0.26s;
|
||
text-align: center;
|
||
}
|
||
.hd-price-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,0.38); }
|
||
.hd-price-hint {
|
||
text-align: center;
|
||
font-size: 11.5px; color: #7c3aed;
|
||
padding-bottom: 16px; line-height: 1.55;
|
||
}
|
||
|
||
/* ==== 咨询入口条 ==== */
|
||
.hd-consult-bar {
|
||
background: linear-gradient(135deg, #fff, #fafbff);
|
||
border: 1px solid rgba(139,92,246,0.09);
|
||
border-radius: 18px;
|
||
padding: 14px 16px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 10px rgba(124,58,237,0.05);
|
||
}
|
||
.hd-consult-avatar {
|
||
width: 42px; height: 42px; min-width: 42px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 19px;
|
||
}
|
||
.hd-consult-text { flex: 1; }
|
||
.hd-consult-name { font-size: 13px; font-weight: 800; color: #1e293b; }
|
||
.hd-consult-desc { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
|
||
.hd-consult-btn {
|
||
background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
|
||
border: none; border-radius: 999px; padding: 8px 16px;
|
||
font-size: 12.5px; font-weight: 800; cursor: pointer;
|
||
white-space: nowrap; box-shadow: 0 4px 14px rgba(124,58,237,0.25);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
/* ==== 我们每天都在运这些 ==== */
|
||
.hd-ship-section {
|
||
background: #fff; border-radius: 22px; padding: 18px 14px 16px;
|
||
margin-bottom: 16px; border: 1px solid rgba(0,0,0,0.05);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
||
}
|
||
.hd-ship-title {
|
||
font-size: 16px; font-weight: 800; color: #1e293b;
|
||
display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
|
||
}
|
||
.hd-ship-title::before {
|
||
content: ''; width: 4px; height: 18px; border-radius: 3px;
|
||
background: linear-gradient(180deg, #f59e0b, #d97706);
|
||
}
|
||
.hd-ship-sub { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
|
||
.hd-ship-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
|
||
}
|
||
.hd-ship-item {
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||
background: linear-gradient(180deg, #fffbeb, #fef3c7);
|
||
border: 1.5px solid rgba(245,158,11,0.25); border-radius: 16px;
|
||
padding: 16px 10px 12px; cursor: pointer;
|
||
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
.hd-ship-item:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 20px rgba(245,158,11,0.18);
|
||
border-color: rgba(245,158,11,0.45);
|
||
}
|
||
.hd-ship-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
|
||
.hd-ship-label {
|
||
font-size: 13px; font-weight: 700; color: #b45309;
|
||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hd-ship-cta {
|
||
width: 100%; padding: 11px;
|
||
background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
|
||
border: none; border-radius: 13px; font-size: 14px; font-weight: 800;
|
||
cursor: pointer; transition: all 0.28s;
|
||
box-shadow: 0 4px 14px rgba(124,58,237,0.25);
|
||
}
|
||
.hd-ship-cta:hover {
|
||
transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.35);
|
||
}
|
||
|
||
/* ==== 行业关注 ==== */
|
||
.hd-faq-section {
|
||
background: #fff; border-radius: 22px; padding: 18px 14px 16px;
|
||
margin-bottom: 16px; border: 1px solid rgba(0,0,0,0.05);
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
||
}
|
||
.hd-faq-title {
|
||
font-size: 16px; font-weight: 800; color: #1e293b;
|
||
display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
|
||
}
|
||
.hd-faq-title::before {
|
||
content: ''; width: 4px; height: 18px; border-radius: 3px;
|
||
background: linear-gradient(180deg, #f59e0b, #d97706);
|
||
}
|
||
.hd-faq-item {
|
||
padding: 12px 14px 12px 42px; position: relative;
|
||
border-left: 3px solid transparent; transition: all 0.24s;
|
||
border-radius: 0 10px 10px 0; margin-bottom: 6px;
|
||
}
|
||
.hd-faq-item:last-child { margin-bottom: 0; }
|
||
.hd-faq-item:hover { background: #fefce8; border-left-color: #f59e0b; }
|
||
.hd-faq-item::before {
|
||
content: 'Q'; position: absolute; left: 10px; top: 13px;
|
||
width: 22px; height: 22px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||
color: #78350f; font-size: 11px; font-weight: 900;
|
||
display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 2px 6px rgba(245,158,11,0.3);
|
||
}
|
||
.hd-faq-q { font-size: 14px; font-weight: 800; color: #b45309; margin-bottom: 4px; }
|
||
.hd-faq-a { font-size: 12.5px; color: #64748b; line-height: 1.55; }
|
||
|
||
/* ==== DROPSHIP PAGE (一件代发) ==== */
|
||
.dropship-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.dropship-flow {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
.flow-step {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
padding: 4px 2px;
|
||
}
|
||
.flow-step .step-num {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 8px;
|
||
box-shadow: 0 3px 10px rgba(102,126,234,0.3);
|
||
}
|
||
.flow-step .step-label {
|
||
font-size: 11px;
|
||
color: #475569;
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
}
|
||
.flow-step:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 14px;
|
||
right: -3px;
|
||
width: 6px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, #8b5cf6, #6366f1);
|
||
opacity: 0.4;
|
||
}
|
||
.hint-text {
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
margin-top: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.check-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.check-item {
|
||
flex: 1;
|
||
min-width: 28%;
|
||
padding: 12px 8px;
|
||
border: 1.5px solid rgba(102,126,234,0.2);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #52525b;
|
||
background: rgba(255,255,255,0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
user-select: none;
|
||
}
|
||
.check-item.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: #fff;
|
||
border-color: transparent;
|
||
font-weight: 600;
|
||
box-shadow: 0 4px 14px rgba(102,126,234,0.25);
|
||
}
|
||
.check-item .check-box {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
border: 1.5px solid rgba(102,126,234,0.4);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
flex-shrink: 0;
|
||
line-height: 1;
|
||
}
|
||
.check-item.active .check-box {
|
||
background: #fff;
|
||
border-color: #fff;
|
||
color: #667eea;
|
||
}
|
||
|
||
/* ==== TOAST ==== */
|
||
.toast {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0,0,0,0.8);
|
||
color: #fff;
|
||
padding: 12px 24px;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
animation: toastIn 0.3s ease-out;
|
||
display: none;
|
||
}
|
||
.toast.show { display: block; }
|
||
@keyframes toastIn {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app" id="app">
|
||
<!-- LOGIN PAGE -->
|
||
<div class="login-page" id="loginPage">
|
||
<div class="login-logo">
|
||
<div class="logo-icon">
|
||
<img src="logo.png" alt="虫虫出海" style="width:48px;height:48px;object-fit:contain;"/>
|
||
</div>
|
||
<h1>虫虫出海</h1>
|
||
<p>跨境物流 · 智慧服务</p>
|
||
</div>
|
||
<div class="glass-card login-card" id="loginCard">
|
||
<div class="login-title">欢迎回来</div>
|
||
<div class="login-subtitle">登录您的账户以继续</div>
|
||
<div class="form-group">
|
||
<label class="form-label">手机号</label>
|
||
<input type="tel" class="input-field" placeholder="请输入手机号" id="loginPhone">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">密码</label>
|
||
<input type="password" class="input-field" placeholder="请输入密码" id="loginPassword">
|
||
</div>
|
||
<button class="btn-primary" style="width:100%;" onclick="handleLogin()">登录</button>
|
||
<div class="switch-link" onclick="showRegister()">没有账号?立即注册</div>
|
||
</div>
|
||
<div class="glass-card login-card" id="registerCard" style="display:none;">
|
||
<div class="login-title">创建账号</div>
|
||
<div class="login-subtitle">注册以使用虫虫出海服务</div>
|
||
<div class="form-group">
|
||
<label class="form-label">手机号</label>
|
||
<input type="tel" class="input-field" placeholder="请输入手机号">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">企业名称</label>
|
||
<input type="text" class="input-field" placeholder="请输入企业名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">设置密码</label>
|
||
<input type="password" class="input-field" placeholder="请设置密码">
|
||
</div>
|
||
<button class="btn-primary" style="width:100%;" onclick="handleRegister()">注册</button>
|
||
<div class="switch-link" onclick="showLogin()">已有账号?去登录</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN APP (hidden by default) -->
|
||
<div id="mainApp" style="display:none;">
|
||
<!-- DASHBOARD PAGE -->
|
||
<div class="page active" id="dashboardPage">
|
||
<!-- BANNER carousel -->
|
||
<div class="hd-banner-wrap">
|
||
<div class="hd-banner-track" id="hdBannerTrack">
|
||
<div class="hd-banner hd-banner-1">
|
||
<div class="hd-banner-pill">🚀 新客专享 · 首单立减 ¥200</div>
|
||
<div class="hd-banner-title">全球仓配一体</div>
|
||
<div class="hd-banner-sub">头程 · 仓储 · 一件代发 · 本土派送<br/>全链路跨境物流专家</div>
|
||
<div class="hd-banner-cta" onclick="switchTab(1)">立即下单
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="#4f46e5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<svg class="hd-banner-deco" width="110" height="110" viewBox="0 0 120 120" fill="none">
|
||
<circle cx="60" cy="60" r="42" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<ellipse cx="60" cy="60" rx="42" ry="16" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
|
||
<ellipse cx="60" cy="60" rx="16" ry="42" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
|
||
<path d="M18 60h84M60 18v84" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
|
||
<circle cx="92" cy="40" r="4" fill="#fff"/>
|
||
</svg>
|
||
</div>
|
||
<div class="hd-banner hd-banner-2">
|
||
<div class="hd-banner-pill">🔥 7月限时活动</div>
|
||
<div class="hd-banner-title">海外仓福利季</div>
|
||
<div class="hd-banner-sub">仓储费 5 折起 · 美西/美东/美中三仓任选<br/>免费入库上架 + 30天免租</div>
|
||
<div class="hd-banner-cta" onclick="showToast('已为您预约仓储顾问')">立即咨询
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="#4f46e5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<svg class="hd-banner-deco" width="120" height="120" viewBox="0 0 120 120" fill="none">
|
||
<rect x="34" y="52" width="52" height="42" rx="4" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<path d="M34 64h52M52 52v42" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
|
||
<path d="M30 52l30-18 30 18" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linejoin="round"/>
|
||
<circle cx="86" cy="36" r="4" fill="#fff"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="hd-banner-dots" id="hdBannerDots">
|
||
<span class="dot active" onclick="goBanner(0)"></span>
|
||
<span class="dot" onclick="goBanner(1)"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hd-body">
|
||
<!-- Featured CTA: 头程下单 -->
|
||
<div class="hd-feature" onclick="switchTab(1)">
|
||
<div class="hd-feature-text">
|
||
<div class="hd-feature-title">头程下单</div>
|
||
<div class="hd-feature-desc">创建你的跨境头程物流订单 →</div>
|
||
</div>
|
||
<div class="hd-feature-arrow">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Services -->
|
||
<div class="hd-services-card">
|
||
<div class="hd-section-title">我的服务</div>
|
||
<div class="hd-service-grid">
|
||
<div class="hd-service" onclick="openService('procurePage')">
|
||
<div class="hd-service-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="21" r="1" stroke="#7c3aed" stroke-width="2"/><circle cx="20" cy="21" r="1" stroke="#7c3aed" stroke-width="2"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 001.99-1.61L23 6H6" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||
<div class="hd-service-label">海外采购</div>
|
||
</div>
|
||
<div class="hd-service" onclick="openService('truckPage')">
|
||
<div class="hd-service-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none"><circle cx="7" cy="17" r="2" stroke="#7c3aed" stroke-width="2"/><circle cx="17" cy="17" r="2" stroke="#7c3aed" stroke-width="2"/><path d="M1 6h22M5 6v6h14V6M5 12v5a2 2 0 002 2h10a2 2 0 002-2v-5" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||
<div class="hd-service-label">美本土卡车</div>
|
||
</div>
|
||
<div class="hd-service" onclick="openService('ltlPage')">
|
||
<div class="hd-service-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M3 3h18v2H3zM3 10h18v2H3zM3 17h18v2H3zM8 3v18M16 3v18" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||
<div class="hd-service-label">美本土散板</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务流程 -->
|
||
<div class="hd-process-title">服务流程</div>
|
||
<div class="hd-process-list">
|
||
<div class="hd-step-item" onclick="switchTab(1)">
|
||
<div class="hd-step-num">1</div>
|
||
<div class="hd-step-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5v14M17 7l5-3M2 10l5 3" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="hd-step-info">
|
||
<div class="hd-step-name">上门取件</div>
|
||
<div class="hd-step-desc">全国多地支持企业 / 工厂上门取件,预约即达</div>
|
||
</div>
|
||
</div>
|
||
<div class="hd-step-item" onclick="switchTab(1)">
|
||
<div class="hd-step-num">2</div>
|
||
<div class="hd-step-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="16" height="13" rx="2" stroke="#059669" stroke-width="2"/><path d="M8 11h8M8 15h5" stroke="#059669" stroke-width="2" stroke-linecap="round"/><path d="M4 9l8-4 8 4" stroke="#059669" stroke-width="2" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="hd-step-info">
|
||
<div class="hd-step-name">入仓清关</div>
|
||
<div class="hd-step-desc">全流程清关合规,免除买家额外税负</div>
|
||
</div>
|
||
</div>
|
||
<div class="hd-step-item" onclick="switchTab(1)">
|
||
<div class="hd-step-num">3</div>
|
||
<div class="hd-step-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="#059669" stroke-width="2"/><polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke="#059669" stroke-width="2"/><line x1="12" y1="22.08" x2="12" y2="12" stroke="#059669" stroke-width="2"/></svg>
|
||
</div>
|
||
<div class="hd-step-info">
|
||
<div class="hd-step-name">国际运输</div>
|
||
<div class="hd-step-desc">不拆包、不暴露内容,保障客户隐私</div>
|
||
</div>
|
||
</div>
|
||
<div class="hd-step-item" onclick="openService('storagePage')">
|
||
<div class="hd-step-num">4</div>
|
||
<div class="hd-step-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 11l3 3L22 4" stroke="#059669" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="hd-step-info">
|
||
<div class="hd-step-name">签收入库</div>
|
||
<div class="hd-step-desc">一对一专属服务,海外仓贴心陪伴每一步</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 运费报价 -->
|
||
<div class="hd-price-section">
|
||
<div class="hd-price-header">
|
||
<div class="hd-price-title">海运 / 一件代发 双核心业务</div>
|
||
<div class="hd-price-sub">自营专线 · 海外仓直发 · 更安全</div>
|
||
</div>
|
||
<div class="hd-price-table-wrap">
|
||
<div class="hd-price-row" onclick="switchTab(1)">
|
||
<div><div class="hd-pr-type">海运专线</div><div class="hd-pr-scene">大货 / 批量</div></div>
|
||
<div class="hd-pr-goods">大件 / 纺制品</div>
|
||
<div class="hd-pr-price">¥19起</div>
|
||
<div class="hd-pr-time">15–25天</div>
|
||
</div>
|
||
<div class="hd-price-row" onclick="openDropship()">
|
||
<div><div class="hd-pr-type">一件代发</div><div class="hd-pr-scene">电商 / 跨境卖家</div></div>
|
||
<div class="hd-pr-goods">多SKU / 尾程派送</div>
|
||
<div class="hd-pr-price">¥8起</div>
|
||
<div class="hd-pr-time">1–5天</div>
|
||
</div>
|
||
</div>
|
||
<div class="hd-price-hint">不确定选哪条线路?顾问帮你一对一比价格和时效</div>
|
||
</div>
|
||
|
||
<!-- 咨询入口 -->
|
||
<div class="hd-consult-bar">
|
||
<div class="hd-consult-avatar">👩</div>
|
||
<div class="hd-consult-text">
|
||
<div class="hd-consult-name">点这里咨询寄件问题</div>
|
||
<div class="hd-consult-desc">人工客服在线,请联系</div>
|
||
</div>
|
||
<button class="hd-consult-btn" onclick="showToast('已为您接通在线客服')">立即咨询</button>
|
||
</div>
|
||
|
||
<!-- 我们每天都在运这些 -->
|
||
<div class="hd-ship-section">
|
||
<div class="hd-ship-title">我们每天都在运这些</div>
|
||
<div class="hd-ship-sub">仅部分示例,更多品类欢迎咨询</div>
|
||
<div class="hd-ship-grid">
|
||
<div class="hd-ship-item" onclick="switchTab(1)">
|
||
<div class="hd-ship-icon">🔋</div>
|
||
<div class="hd-ship-label">带电池</div>
|
||
</div>
|
||
<div class="hd-ship-item" onclick="switchTab(1)">
|
||
<div class="hd-ship-icon">🧥</div>
|
||
<div class="hd-ship-label">衣物</div>
|
||
</div>
|
||
<div class="hd-ship-item" onclick="switchTab(1)">
|
||
<div class="hd-ship-icon">🍜</div>
|
||
<div class="hd-ship-label">食品</div>
|
||
</div>
|
||
<div class="hd-ship-item" onclick="switchTab(1)">
|
||
<div class="hd-ship-icon">📦</div>
|
||
<div class="hd-ship-label">大件货物</div>
|
||
</div>
|
||
<div class="hd-ship-item" onclick="switchTab(1)">
|
||
<div class="hd-ship-icon">✉️</div>
|
||
<div class="hd-ship-label">文件</div>
|
||
</div>
|
||
<div class="hd-ship-item" onclick="openService('returnPage')">
|
||
<div class="hd-ship-icon">🧲</div>
|
||
<div class="hd-ship-label">磁性物品</div>
|
||
</div>
|
||
</div>
|
||
<button class="hd-ship-cta" onclick="showToast('已为您安排物流顾问')">点这里,咨询寄件限制 →</button>
|
||
</div>
|
||
|
||
<!-- 行业关注 -->
|
||
<div class="hd-faq-section">
|
||
<div class="hd-faq-title">行业关注</div>
|
||
<div class="hd-faq-item">
|
||
<div class="hd-faq-q">拆封问题?</div>
|
||
<div class="hd-faq-a">正规渠道清关,不中途拆包。仅抽检高风险类货物(提前评估)</div>
|
||
</div>
|
||
<div class="hd-faq-item">
|
||
<div class="hd-faq-q">税费怎么算?</div>
|
||
<div class="hd-faq-a">采用"双清包税"模式,运费已含税,无需额外支付</div>
|
||
</div>
|
||
<div class="hd-faq-item">
|
||
<div class="hd-faq-q">发不出去怎么办?</div>
|
||
<div class="hd-faq-a">如遇政策临时变动导致扣货,可选"退货险"或"重新发货减免方案",去损有赔付</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ORDER PAGE -->
|
||
<div class="page" id="orderPage">
|
||
<div class="order-header">
|
||
<div class="order-title">头程下单</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">基本信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">取货方式<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">自送货-快递</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">我司提货</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">自送货-卡车</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">取货时间<span class="required">*</span></label>
|
||
<input type="datetime-local" class="input-field" placeholder="请选择取货时间">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">取货地址<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="请输入取货地址" style="min-height:60px;resize:vertical;"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">操作仓</label>
|
||
<select class="input-field">
|
||
<option>义乌仓</option>
|
||
<option>深圳仓</option>
|
||
<option>上海仓</option>
|
||
<option>宁波仓</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">渠道选择<span class="required">*</span></label>
|
||
<select class="input-field">
|
||
<option>请选择渠道</option>
|
||
<option>美线普货专线</option>
|
||
<option>美线敏感货专线</option>
|
||
<option>美线快线</option>
|
||
<option>美线FBA直送</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">买单/退税</label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">买单</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">退税</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">期望到达时间<span class="required">*</span></label>
|
||
<input type="date" class="input-field" placeholder="请选择期望到达时间">
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">货物信息</div>
|
||
<div class="goods-table" id="goodsTable">
|
||
<div class="goods-item">
|
||
<input type="text" placeholder="货物名称 *">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="重量(kg)">
|
||
</div>
|
||
<div class="goods-item">
|
||
<input type="text" placeholder="货物名称">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="重量(kg)">
|
||
</div>
|
||
</div>
|
||
<div class="add-goods" onclick="addGoods()">+ 添加货物</div>
|
||
<div class="form-group" style="margin-top:16px;">
|
||
<label class="form-label">总体积 (CBM)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="请输入体积">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">总重量 (kg)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="请输入总重量">
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">目的地信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目的仓类型<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">FBA仓</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">海外仓</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">私人仓</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">亚马逊仓代码<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 LAX9、ONT8">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">收件人姓名</label>
|
||
<input type="text" class="input-field" placeholder="请输入收件人">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">收件人电话</label>
|
||
<input type="tel" class="input-field" placeholder="请输入电话">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">备注</label>
|
||
<textarea class="input-field" placeholder="请输入备注信息" style="min-height:80px;resize:vertical;"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card price-section" id="priceSection">
|
||
<div class="section-title">费用预估</div>
|
||
<div class="price-options">
|
||
<div class="price-option" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">10天</span>
|
||
<span class="price-tag">最快</span>
|
||
</div>
|
||
<div class="price-option-price">¥ 3,310</div>
|
||
<div class="price-option-desc">优先配送,时效保障</div>
|
||
</div>
|
||
<div class="price-option active" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">13天</span>
|
||
<span class="price-tag recommend">推荐</span>
|
||
</div>
|
||
<div class="price-option-price">¥ 2,990</div>
|
||
<div class="price-option-desc">性价比之选</div>
|
||
</div>
|
||
<div class="price-option" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">16天</span>
|
||
<span class="price-tag">经济</span>
|
||
</div>
|
||
<div class="price-option-price">¥ 2,500</div>
|
||
<div class="price-option-desc">经济实惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="selected-price">
|
||
<span class="selected-label">已选择:</span>
|
||
<span class="selected-value" id="selectedPrice">13天到达 - ¥ 2,990</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitOrder()">提交订单</button>
|
||
</div>
|
||
|
||
<!-- APPROVAL PAGE -->
|
||
<div class="page" id="approvalPage">
|
||
<div class="order-header">
|
||
<div class="order-title">业务审批流</div>
|
||
</div>
|
||
|
||
<!-- Statistics Cards -->
|
||
<div class="stat-grid" style="grid-template-columns: repeat(3,1fr);">
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:12px;">待审批</div>
|
||
<div class="stat-value" style="font-size:24px;">8</div>
|
||
</div>
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:12px;">已通过</div>
|
||
<div class="stat-value" style="font-size:24px;">156</div>
|
||
</div>
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:12px;">已拒绝</div>
|
||
<div class="stat-value" style="font-size:24px;">12</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card" style="padding:8px; margin-top:16px; margin-bottom:12px;">
|
||
<div class="approval-tabs">
|
||
<div class="approval-tab active" onclick="switchApprovalTab(this, 'pending')">待审批 (8)</div>
|
||
<div class="approval-tab" onclick="switchApprovalTab(this, 'approved')">已通过</div>
|
||
<div class="approval-tab" onclick="switchApprovalTab(this, 'rejected')">已拒绝</div>
|
||
</div>
|
||
</div>
|
||
<div id="pendingList" style="margin-top:12px;">
|
||
<div class="glass-card approval-item" onclick="showDetail('20260613001', '浙江柏悦物流', '2026-06-13 09:32', '美线普货专线', '¥ 18,600', '120箱', '2,450 kg', 'LAX9', 'pending')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260613001</div>
|
||
<div class="approval-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-13 09:32</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线普货专线</span>
|
||
<span>¥ 18,600</span>
|
||
</div>
|
||
<div class="order-list">
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">货物件数</span>
|
||
<span class="order-list-value">120箱</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">总重量</span>
|
||
<span class="order-list-value">2,450 kg</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">目的地</span>
|
||
<span class="order-list-value">LAX9</span>
|
||
</div>
|
||
</div>
|
||
<div class="approval-actions" onclick="event.stopPropagation()">
|
||
<button class="btn btn-approve" onclick="handleApprove(this)">通过</button>
|
||
<button class="btn btn-reject" onclick="handleReject(this)">拒绝</button>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260613002', '华远贸易有限公司', '2026-06-13 10:15', '美线快线', '¥ 25,800', '85箱', '1,820 kg', 'ONT8', 'pending')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260613002</div>
|
||
<div class="approval-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>华远贸易有限公司</span>
|
||
<span>2026-06-13 10:15</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线快线</span>
|
||
<span>¥ 25,800</span>
|
||
</div>
|
||
<div class="order-list">
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">货物件数</span>
|
||
<span class="order-list-value">85箱</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">总重量</span>
|
||
<span class="order-list-value">1,820 kg</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">目的地</span>
|
||
<span class="order-list-value">ONT8</span>
|
||
</div>
|
||
</div>
|
||
<div class="approval-actions" onclick="event.stopPropagation()">
|
||
<button class="btn btn-approve" onclick="handleApprove(this)">通过</button>
|
||
<button class="btn btn-reject" onclick="handleReject(this)">拒绝</button>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260612005', '盛世供应链', '2026-06-12 16:42', '美线敏感货专线', '¥ 12,350', '56箱', '980 kg', 'FTW1', 'pending')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260612005</div>
|
||
<div class="approval-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>盛世供应链</span>
|
||
<span>2026-06-12 16:42</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线敏感货专线</span>
|
||
<span>¥ 12,350</span>
|
||
</div>
|
||
<div class="order-list">
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">货物件数</span>
|
||
<span class="order-list-value">56箱</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">总重量</span>
|
||
<span class="order-list-value">980 kg</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">目的地</span>
|
||
<span class="order-list-value">FTW1</span>
|
||
</div>
|
||
</div>
|
||
<div class="approval-actions" onclick="event.stopPropagation()">
|
||
<button class="btn btn-approve" onclick="handleApprove(this)">通过</button>
|
||
<button class="btn btn-reject" onclick="handleReject(this)">拒绝</button>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260613004', '恒信国际货运', '2026-06-13 09:08', '美线普货专线', '¥ 35,200', '200箱', '4,200 kg', 'LGB8', 'pending')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260613004</div>
|
||
<div class="approval-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>恒信国际货运</span>
|
||
<span>2026-06-13 09:08</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线普货专线</span>
|
||
<span>¥ 35,200</span>
|
||
</div>
|
||
<div class="order-list">
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">货物件数</span>
|
||
<span class="order-list-value">200箱</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">总重量</span>
|
||
<span class="order-list-value">4,200 kg</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">目的地</span>
|
||
<span class="order-list-value">LGB8</span>
|
||
</div>
|
||
</div>
|
||
<div class="approval-actions" onclick="event.stopPropagation()">
|
||
<button class="btn btn-approve" onclick="handleApprove(this)">通过</button>
|
||
<button class="btn btn-reject" onclick="handleReject(this)">拒绝</button>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260613003', '捷顺物流科技', '2026-06-13 08:55', '美线FBA直送', '¥ 48,600', '320箱', '6,800 kg', 'SMF3', 'pending')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260613003</div>
|
||
<div class="approval-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>捷顺物流科技</span>
|
||
<span>2026-06-13 08:55</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线FBA直送</span>
|
||
<span>¥ 48,600</span>
|
||
</div>
|
||
<div class="order-list">
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">货物件数</span>
|
||
<span class="order-list-value">320箱</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">总重量</span>
|
||
<span class="order-list-value">6,800 kg</span>
|
||
</div>
|
||
<div class="order-list-item">
|
||
<span class="order-list-title">目的地</span>
|
||
<span class="order-list-value">SMF3</span>
|
||
</div>
|
||
</div>
|
||
<div class="approval-actions" onclick="event.stopPropagation()">
|
||
<button class="btn btn-approve" onclick="handleApprove(this)">通过</button>
|
||
<button class="btn btn-reject" onclick="handleReject(this)">拒绝</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="approvedList" style="display:none;">
|
||
<div class="glass-card approval-item" onclick="showDetail('20260612003', '恒信国际货运', '2026-06-12 17:30', '美线快线', '¥ 28,900', '-', '-', '-', 'approved')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260612003</div>
|
||
<div class="approval-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>恒信国际货运</span>
|
||
<span>2026-06-12 17:30</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线快线</span>
|
||
<span>¥ 28,900</span>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260612002', '华远贸易有限公司', '2026-06-12 15:22', '美线普货专线', '¥ 42,150', '-', '-', '-', 'approved')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260612002</div>
|
||
<div class="approval-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>华远贸易有限公司</span>
|
||
<span>2026-06-12 15:22</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线普货专线</span>
|
||
<span>¥ 42,150</span>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260612001', '浙江柏悦物流', '2026-06-12 11:08', '美线FBA直送', '¥ 32,500', '-', '-', '-', 'approved')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260612001</div>
|
||
<div class="approval-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-12 11:08</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线FBA直送</span>
|
||
<span>¥ 32,500</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="rejectedList" style="display:none;">
|
||
<div class="glass-card approval-item" onclick="showDetail('20260611002', '恒信国际货运', '2026-06-11 14:25', '美线敏感货专线', '¥ 15,800', '-', '-', '-', 'rejected')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260611002</div>
|
||
<div class="approval-status status-rejected">已拒绝</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>恒信国际货运</span>
|
||
<span>2026-06-11 14:25</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>美线敏感货专线</span>
|
||
<span>¥ 15,800</span>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card approval-item" onclick="showDetail('20260611001', '测试客户', '2026-06-11 10:15', '敏感货专线', '¥ 5,200', '-', '-', '-', 'rejected')">
|
||
<div class="approval-header">
|
||
<div class="approval-order">订单 #20260611001</div>
|
||
<div class="approval-status status-rejected">已拒绝</div>
|
||
</div>
|
||
<div class="approval-info">
|
||
<span>测试客户</span>
|
||
<span>2026-06-11 10:15</span>
|
||
</div>
|
||
<div class="approval-info" style="color:#1e293b;font-weight:600;">
|
||
<span>敏感货专线</span>
|
||
<span>¥ 5,200</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DETAIL PAGE -->
|
||
<div class="page" id="detailPage">
|
||
<div class="detail-header">
|
||
<div class="detail-back" onclick="backToApproval()">‹</div>
|
||
<div class="detail-title" id="detailTitle">订单详情</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section">
|
||
<div class="section-title" id="detailOrderNumber">订单 #20260613001</div>
|
||
<div class="detail-section">
|
||
<div class="detail-item">
|
||
<span class="detail-label">状态</span>
|
||
<span class="detail-value" id="detailStatus">待审批</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">客户名称</span>
|
||
<span class="detail-value" id="detailCustomer">浙江柏悦物流</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">提交时间</span>
|
||
<span class="detail-value" id="detailTime">2026-06-13 09:32</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">订单信息</div>
|
||
<div class="detail-section">
|
||
<div class="detail-item">
|
||
<span class="detail-label">渠道</span>
|
||
<span class="detail-value" id="detailChannel">美线普货专线</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">操作仓</span>
|
||
<span class="detail-value" id="detailWarehouse">义乌仓</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">取货方式</span>
|
||
<span class="detail-value" id="detailPickup">自送货-快递</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">买单/退税</span>
|
||
<span class="detail-value" id="detailTax">买单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">货物信息</div>
|
||
<div class="detail-section">
|
||
<div class="detail-item">
|
||
<span class="detail-label">货物件数</span>
|
||
<span class="detail-value" id="detailQuantity">120箱</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">总重量</span>
|
||
<span class="detail-value" id="detailWeight">2,450 kg</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">总体积</span>
|
||
<span class="detail-value" id="detailVolume">12.5 CBM</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section-title">货物明细</div>
|
||
<div class="detail-section" id="detailGoodsList">
|
||
<div class="detail-item">
|
||
<span class="detail-label">电子产品配件</span>
|
||
<span class="detail-value">60箱 / 1,200 kg</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">服装</span>
|
||
<span class="detail-value">40箱 / 800 kg</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">家居用品</span>
|
||
<span class="detail-value">20箱 / 450 kg</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">目的地信息</div>
|
||
<div class="detail-section">
|
||
<div class="detail-item">
|
||
<span class="detail-label">目的地类型</span>
|
||
<span class="detail-value" id="detailDestType">FBA仓</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">仓库代码</span>
|
||
<span class="detail-value" id="detailDestCode">LAX9</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">收件人</span>
|
||
<span class="detail-value" id="detailReceiver">张三</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">联系电话</span>
|
||
<span class="detail-value" id="detailPhone">138****0000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">费用信息</div>
|
||
<div class="detail-section">
|
||
<div class="detail-item">
|
||
<span class="detail-label">运费</span>
|
||
<span class="detail-value">¥ 16,800</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">杂费</span>
|
||
<span class="detail-value">¥ 1,800</span>
|
||
</div>
|
||
<div class="detail-item" style="border-top: 1px dashed rgba(102,126,234,0.3); padding-top: 12px; margin-top: 4px;">
|
||
<span class="detail-label" style="font-weight: 600; color: #1e293b;">合计</span>
|
||
<span class="detail-value" id="detailTotal" style="font-size: 18px; font-weight: 700; color: #667eea;">¥ 18,600</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card form-section" id="detailActions" style="display: none;">
|
||
<div class="approval-actions">
|
||
<button class="btn btn-approve" onclick="approveFromDetail()">通过</button>
|
||
<button class="btn btn-reject" onclick="rejectFromDetail()">拒绝</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROFILE PAGE -->
|
||
<div class="page" id="profilePage">
|
||
<div class="glass-card profile-header">
|
||
<div class="profile-avatar">赵</div>
|
||
<div class="profile-name">赵女士</div>
|
||
<div class="profile-company">浙江柏悦物流有限公司</div>
|
||
</div>
|
||
<div class="glass-card menu-list">
|
||
<div class="menu-item">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<circle cx="12" cy="7" r="4" stroke="#667eea" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">个人信息</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">企业认证</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
<div class="menu-item" onclick="showMyOrders()">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M14 2v6h6" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M16 13H8" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M16 17H8" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">我的订单</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">操作记录</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card menu-list" style="margin-top:16px;">
|
||
<div class="menu-item">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="3" stroke="#667eea" stroke-width="2"/>
|
||
<path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42m12.72-12.72l1.42-1.42" stroke="#667eea" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">系统设置</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="#667eea" stroke-width="2"/>
|
||
<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" stroke="#667eea" stroke-width="2" stroke-linecap="round"/>
|
||
<path d="M12 17h.01" stroke="#667eea" stroke-width="3" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="text">帮助与反馈</div>
|
||
<div class="arrow">›</div>
|
||
</div>
|
||
</div>
|
||
<button class="logout-btn" onclick="handleLogout()">退出登录</button>
|
||
</div>
|
||
|
||
<!-- SETTLEMENT PAGE -->
|
||
<div class="page" id="settlementPage">
|
||
<div class="order-header">
|
||
<div class="order-title">账单结算</div>
|
||
</div>
|
||
|
||
<!-- Statistics Cards -->
|
||
<div class="stat-grid" style="grid-template-columns: repeat(2,1fr);">
|
||
<div class="glass-card stat-card" style="padding:16px;">
|
||
<div class="stat-label">待结算金额</div>
|
||
<div class="stat-value" style="color:#ef4444;">¥128,600</div>
|
||
<div class="stat-trend">共 <span style="color:#667eea;font-weight:600;">5</span> 笔待处理</div>
|
||
</div>
|
||
<div class="glass-card stat-card" style="padding:16px;">
|
||
<div class="stat-label">已结算金额</div>
|
||
<div class="stat-value" style="color:#22c55e;">¥856,200</div>
|
||
<div class="stat-trend">本月已完成 <span style="color:#667eea;font-weight:600;">23</span> 笔</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card" style="padding:8px; margin-top:16px;">
|
||
<div class="approval-tabs">
|
||
<div class="approval-tab active" onclick="switchSettlementTab(this, 'pending')">待结算 (5)</div>
|
||
<div class="approval-tab" onclick="switchSettlementTab(this, 'settled')">已结算</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pending Settlements -->
|
||
<div id="pendingSettlement">
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260613001</div>
|
||
<div class="settlement-status status-pending">待结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-13</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>12单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线普货专线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#ef4444;font-weight:700;">¥28,600</span>
|
||
</div>
|
||
</div>
|
||
<div class="settlement-actions">
|
||
<button class="btn-settle" onclick="handleSettle(this)">确认结算</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260613002</div>
|
||
<div class="settlement-status status-pending">待结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>华远贸易有限公司</span>
|
||
<span>2026-06-13</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>8单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线快线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#ef4444;font-weight:700;">¥35,200</span>
|
||
</div>
|
||
</div>
|
||
<div class="settlement-actions">
|
||
<button class="btn-settle" onclick="handleSettle(this)">确认结算</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260612001</div>
|
||
<div class="settlement-status status-pending">待结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>盛世供应链</span>
|
||
<span>2026-06-12</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>15单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线敏感货专线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#ef4444;font-weight:700;">¥42,800</span>
|
||
</div>
|
||
</div>
|
||
<div class="settlement-actions">
|
||
<button class="btn-settle" onclick="handleSettle(this)">确认结算</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260612002</div>
|
||
<div class="settlement-status status-pending">待结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>恒信国际货运</span>
|
||
<span>2026-06-12</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>6单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线FBA直送</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#ef4444;font-weight:700;">¥14,500</span>
|
||
</div>
|
||
</div>
|
||
<div class="settlement-actions">
|
||
<button class="btn-settle" onclick="handleSettle(this)">确认结算</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260611001</div>
|
||
<div class="settlement-status status-pending">待结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>捷顺物流科技</span>
|
||
<span>2026-06-11</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>4单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线普货专线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#ef4444;font-weight:700;">¥7,500</span>
|
||
</div>
|
||
</div>
|
||
<div class="settlement-actions">
|
||
<button class="btn-settle" onclick="handleSettle(this)">确认结算</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settled Settlements -->
|
||
<div id="settledSettlement" style="display:none;">
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260610001</div>
|
||
<div class="settlement-status status-approved">已结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-10</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>10单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线普货专线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#22c55e;font-weight:700;">¥52,300</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260609002</div>
|
||
<div class="settlement-status status-approved">已结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>华远贸易有限公司</span>
|
||
<span>2026-06-09</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>12单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线快线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#22c55e;font-weight:700;">¥68,500</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card settlement-item">
|
||
<div class="settlement-header">
|
||
<div class="settlement-order">账单 #BD20260608001</div>
|
||
<div class="settlement-status status-approved">已结算</div>
|
||
</div>
|
||
<div class="settlement-info">
|
||
<span>盛世供应链</span>
|
||
<span>2026-06-08</span>
|
||
</div>
|
||
<div class="settlement-details">
|
||
<div class="detail-row">
|
||
<span>订单数量</span>
|
||
<span>8单</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>服务类型</span>
|
||
<span>美线敏感货专线</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span>结算金额</span>
|
||
<span style="color:#22c55e;font-weight:700;">¥35,800</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MY ORDERS PAGE -->
|
||
<div id="myOrdersPage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="goBackFromOrders()">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="order-title">我的订单</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
|
||
<div class="page-content" style="padding: 16px;">
|
||
<div class="glass-card" style="padding:8px; margin-bottom:16px;">
|
||
<div class="order-tabs">
|
||
<div class="order-tab active" onclick="switchOrderTab(this, 'all')">全部</div>
|
||
<div class="order-tab" onclick="switchOrderTab(this, 'pending')">待审批</div>
|
||
<div class="order-tab" onclick="switchOrderTab(this, 'approved')">已通过</div>
|
||
<div class="order-tab" onclick="switchOrderTab(this, 'rejected')">已拒绝</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="allOrders">
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260613001</div>
|
||
<div class="order-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-13 09:32</span>
|
||
</div>
|
||
<div class="order-service">美线普货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>120箱</span>
|
||
<span>2,450 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 18,600</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260612003</div>
|
||
<div class="order-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>上海远洋贸易</span>
|
||
<span>2026-06-12 14:15</span>
|
||
</div>
|
||
<div class="order-service">欧线普货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>80箱</span>
|
||
<span>1,800 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 12,400</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260611002</div>
|
||
<div class="order-status status-rejected">已拒绝</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>广州南方物流</span>
|
||
<span>2026-06-11 10:08</span>
|
||
</div>
|
||
<div class="order-service">东南亚专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>50箱</span>
|
||
<span>1,200 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 8,200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260610001</div>
|
||
<div class="order-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>深圳前海供应链</span>
|
||
<span>2026-06-10 16:45</span>
|
||
</div>
|
||
<div class="order-service">美线敏感货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>200箱</span>
|
||
<span>4,500 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 35,800</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260609005</div>
|
||
<div class="order-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>青岛港务集团</span>
|
||
<span>2026-06-09 09:20</span>
|
||
</div>
|
||
<div class="order-service">日韩专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>65箱</span>
|
||
<span>1,560 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 9,600</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="pendingOrders" style="display:none;">
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260613001</div>
|
||
<div class="order-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>浙江柏悦物流</span>
|
||
<span>2026-06-13 09:32</span>
|
||
</div>
|
||
<div class="order-service">美线普货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>120箱</span>
|
||
<span>2,450 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 18,600</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260609005</div>
|
||
<div class="order-status status-pending">待审批</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>青岛港务集团</span>
|
||
<span>2026-06-09 09:20</span>
|
||
</div>
|
||
<div class="order-service">日韩专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>65箱</span>
|
||
<span>1,560 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 9,600</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="approvedOrders" style="display:none;">
|
||
<div class="glass-card order-item" style="margin-bottom:16px;">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260612003</div>
|
||
<div class="order-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>上海远洋贸易</span>
|
||
<span>2026-06-12 14:15</span>
|
||
</div>
|
||
<div class="order-service">欧线普货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>80箱</span>
|
||
<span>1,800 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 12,400</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card order-item">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260610001</div>
|
||
<div class="order-status status-approved">已通过</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>深圳前海供应链</span>
|
||
<span>2026-06-10 16:45</span>
|
||
</div>
|
||
<div class="order-service">美线敏感货专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>200箱</span>
|
||
<span>4,500 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 35,800</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="rejectedOrders" style="display:none;">
|
||
<div class="glass-card order-item">
|
||
<div class="order-header-row">
|
||
<div class="order-id">订单 #20260611002</div>
|
||
<div class="order-status status-rejected">已拒绝</div>
|
||
</div>
|
||
<div class="order-info">
|
||
<span>广州南方物流</span>
|
||
<span>2026-06-11 10:08</span>
|
||
</div>
|
||
<div class="order-service">东南亚专线</div>
|
||
<div class="order-footer">
|
||
<div class="order-meta">
|
||
<span>50箱</span>
|
||
<span>1,200 kg</span>
|
||
</div>
|
||
<div class="order-amount">¥ 8,200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DROPSHIP PAGE (一件代发) -->
|
||
<div id="dropshipPage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromDropship()">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="order-title">一件代发</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
|
||
<!-- 今日概览 -->
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:11px;">今日代发</div>
|
||
<div class="stat-value" style="font-size:22px;">38</div>
|
||
<div class="stat-trend">单</div>
|
||
</div>
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:11px;">在仓SKU</div>
|
||
<div class="stat-value" style="font-size:22px;">126</div>
|
||
<div class="stat-trend">种</div>
|
||
</div>
|
||
<div class="glass-card stat-card" style="padding:12px;">
|
||
<div class="stat-label" style="font-size:11px;">待出库</div>
|
||
<div class="stat-value" style="font-size:22px;">9</div>
|
||
<div class="stat-trend">单</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务流程 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-label">入库上架</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-label">接收订单</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-label">拣货打包</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">4</div>
|
||
<div class="step-label">尾程派送</div>
|
||
</div>
|
||
</div>
|
||
<div class="hint-text">您将货物备货至海外仓,系统对接店铺实时拉取订单,仓库自动拣货、贴标、打包,并由本地快递(USPS / UPS / FedEx 等)派送至终端消费者,全程物流轨迹可追踪。</div>
|
||
</div>
|
||
|
||
<!-- 平台与渠道 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">平台与渠道</div>
|
||
<div class="form-group">
|
||
<label class="form-label">订单来源平台<span class="required">*</span></label>
|
||
<select class="input-field">
|
||
<option>请选择店铺平台</option>
|
||
<option>亚马逊 Amazon</option>
|
||
<option>TikTok Shop</option>
|
||
<option>Shopify 独立站</option>
|
||
<option>Temu</option>
|
||
<option>eBay</option>
|
||
<option>其他 / 手动下单</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">操作仓<span class="required">*</span></label>
|
||
<select class="input-field">
|
||
<option>美西仓(洛杉矶)</option>
|
||
<option>美东仓(新泽西)</option>
|
||
<option>美中仓(芝加哥)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">尾程物流渠道<span class="required">*</span></label>
|
||
<select class="input-field">
|
||
<option>请选择派送渠道</option>
|
||
<option>USPS 美国邮政</option>
|
||
<option>UPS 联合包裹</option>
|
||
<option>FedEx 联邦快递</option>
|
||
<option>极兔国际 J&T</option>
|
||
<option>云途物流</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">派送时效<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">标准 5-8天</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">经济 8-12天</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">特快 2-4天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收货人信息 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">收货人信息(海外端消费者)</div>
|
||
<div class="form-group">
|
||
<label class="form-label">收件人姓名<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 John Smith">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">联系电话<span class="required">*</span></label>
|
||
<input type="tel" class="input-field" placeholder="如 +1 213-000-0000">
|
||
</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;">
|
||
<label class="form-label">州 / 省<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 CA">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label class="form-label">城市<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 Los Angeles">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细地址<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="请填写街道、门牌号等" style="min-height:60px;resize:vertical;"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">邮编 ZIP<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 90001">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品明细 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">商品明细</div>
|
||
<div class="goods-table" id="dsGoodsTable">
|
||
<div class="goods-item" style="flex-wrap:wrap;">
|
||
<input type="text" placeholder="商品名称 *" style="flex:2 1 100%;">
|
||
</div>
|
||
<div class="goods-item" style="margin-top:-4px;">
|
||
<input type="text" placeholder="SKU">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="重量(kg)">
|
||
<input type="text" placeholder="申报价值$">
|
||
</div>
|
||
</div>
|
||
<div class="add-goods" onclick="addDsGoods()">+ 添加商品</div>
|
||
</div>
|
||
|
||
<!-- 增值服务 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">增值服务(可多选)</div>
|
||
<div class="check-group">
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>贴标换标</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>质检验货</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>拍照核对</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>合并打包</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>退换货处理</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>独立包装</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注 -->
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">订单备注</div>
|
||
<div class="form-group" style="margin-bottom:0;">
|
||
<textarea class="input-field" placeholder="如特殊包装要求、赠品说明等" style="min-height:70px;resize:vertical;"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 费用预估 -->
|
||
<div class="glass-card price-section">
|
||
<div class="section-title">费用预估</div>
|
||
<div class="price-options">
|
||
<div class="price-option" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">2-4天</span>
|
||
<span class="price-tag">特快</span>
|
||
</div>
|
||
<div class="price-option-price">$ 6.8</div>
|
||
<div class="price-option-desc">优先派送,时效保障</div>
|
||
</div>
|
||
<div class="price-option active" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">5-8天</span>
|
||
<span class="price-tag recommend">推荐</span>
|
||
</div>
|
||
<div class="price-option-price">$ 4.5</div>
|
||
<div class="price-option-desc">性价比之选</div>
|
||
</div>
|
||
<div class="price-option" onclick="selectPriceOption(this)">
|
||
<div class="price-option-header">
|
||
<span class="price-days">8-12天</span>
|
||
<span class="price-tag">经济</span>
|
||
</div>
|
||
<div class="price-option-price">$ 3.2</div>
|
||
<div class="price-option-desc">经济实惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="selected-price">
|
||
<span class="selected-label">已选择:</span>
|
||
<span class="selected-value" id="dsSelectedPrice">5-8天到达 - $ 4.5</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-primary submit-btn" onclick="submitDsOrder()">提交代发订单</button>
|
||
</div>
|
||
|
||
<!-- STORAGE & TRANSSHIPMENT PAGE (仓储转运) -->
|
||
<div id="storagePage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromPage('storagePage')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="order-title">仓储转运</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">在仓库存</div><div class="stat-value" style="font-size:22px;">1,250</div><div class="stat-trend">m³</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">周转中</div><div class="stat-value" style="font-size:22px;">18</div><div class="stat-trend">单</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">库位利用率</div><div class="stat-value" style="font-size:22px;">78</div><div class="stat-trend">%</div></div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step"><div class="step-num">1</div><div class="step-label">入仓预报</div></div>
|
||
<div class="flow-step"><div class="step-num">2</div><div class="step-label">验收入库</div></div>
|
||
<div class="flow-step"><div class="step-num">3</div><div class="step-label">上架存储</div></div>
|
||
<div class="flow-step"><div class="step-num">4</div><div class="step-label">中转调拨</div></div>
|
||
</div>
|
||
<div class="hint-text">货物抵达海外仓后完成验收入库与上架存储,支持在美西/美东/美中多仓之间灵活中转调拨与分拨,就近发货降低尾程成本。</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">入库信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">入库类型<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">整柜入仓</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">散货入仓</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">中转调拨</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目的仓<span class="required">*</span></label>
|
||
<select class="input-field"><option>美西仓(洛杉矶)</option><option>美东仓(新泽西)</option><option>美中仓(芝加哥)</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">预计入库日<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 2026-07-20">
|
||
</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;"><label class="form-label">货物件数<span class="required">*</span></label><input type="number" class="input-field" placeholder="件"></div>
|
||
<div style="flex:1;"><label class="form-label">总重量(kg)<span class="required">*</span></label><input type="text" class="input-field" placeholder="kg"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">总体积(m³)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="立方米">
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">中转调拨</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目标仓</label>
|
||
<select class="input-field"><option>请选择调拨目标仓</option><option>美西仓(洛杉矶)</option><option>美东仓(新泽西)</option><option>美中仓(芝加哥)</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">调拨方式</label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">卡车</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">快递</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">海运</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">期望出库日</label>
|
||
<input type="text" class="input-field" placeholder="如 2026-07-25">
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">增值服务(可多选)</div>
|
||
<div class="check-group">
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>贴标换标</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>质检</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>拍照</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>打托</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>分拣</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">订单备注</div>
|
||
<div class="form-group" style="margin-bottom:0;"><textarea class="input-field" placeholder="如特殊存储要求、温湿度需求等" style="min-height:70px;resize:vertical;"></textarea></div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitService('storagePage','仓储转运单提交成功')">提交仓储转运单</button>
|
||
</div>
|
||
|
||
<!-- RETURN & RELABEL PAGE (退货换标) -->
|
||
<div id="returnPage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromPage('returnPage')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="order-title">退货换标</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">待处理退货</div><div class="stat-value" style="font-size:22px;">24</div><div class="stat-trend">件</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">已换标</div><div class="stat-value" style="font-size:22px;">56</div><div class="stat-trend">件</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">可二次销售</div><div class="stat-value" style="font-size:22px;">31</div><div class="stat-trend">件</div></div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step"><div class="step-num">1</div><div class="step-label">退货预报</div></div>
|
||
<div class="flow-step"><div class="step-num">2</div><div class="step-label">到仓收货</div></div>
|
||
<div class="flow-step"><div class="step-num">3</div><div class="step-label">质检分类</div></div>
|
||
<div class="flow-step"><div class="step-num">4</div><div class="step-label">换标重售</div></div>
|
||
</div>
|
||
<div class="hint-text">海外消费者退货由仓库统一收货,经质检分类后提供换标、翻新、重新包装等服务,让商品快速恢复可售状态、重返货架。</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">退货信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">退回仓<span class="required">*</span></label>
|
||
<select class="input-field"><option>美西仓(洛杉矶)</option><option>美东仓(新泽西)</option><option>美中仓(芝加哥)</option></select>
|
||
</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;"><label class="form-label">退货来源平台<span class="required">*</span></label><select class="input-field"><option>亚马逊</option><option>TikTok Shop</option><option>Shopify</option><option>Temu</option><option>eBay</option></select></div>
|
||
<div style="flex:1;"><label class="form-label">原订单号<span class="required">*</span></label><input type="text" class="input-field" placeholder="如 #A2026xxxx"></div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">退货明细</div>
|
||
<div class="goods-table" id="rtGoodsTable">
|
||
<div class="goods-item" style="flex-wrap:wrap;"><input type="text" placeholder="商品名称 *" style="flex:2 1 100%;"></div>
|
||
<div class="goods-item" style="margin-top:-4px;"><input type="text" placeholder="SKU"><input type="number" placeholder="数量"><input type="text" placeholder="退货原因"></div>
|
||
</div>
|
||
<div class="add-goods" onclick="addRtGoods()">+ 添加退货商品</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">处理方案<span class="required">*</span></div>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">换标重售</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">维修翻新</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">销毁处理</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">转仓调拨</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">增值服务(可多选)</div>
|
||
<div class="check-group">
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>质检拍照</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>清洁翻新</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>重新包装</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>合并换箱</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">订单备注</div>
|
||
<div class="form-group" style="margin-bottom:0;"><textarea class="input-field" placeholder="如换标内容、质检标准等" style="min-height:70px;resize:vertical;"></textarea></div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitService('returnPage','退货换标单提交成功')">提交退货换标单</button>
|
||
</div>
|
||
|
||
<!-- OVERSEAS PROCUREMENT PAGE (海外采购) -->
|
||
<div id="procurePage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromPage('procurePage')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="order-title">海外采购</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">采购中</div><div class="stat-value" style="font-size:22px;">9</div><div class="stat-trend">单</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">已入库</div><div class="stat-value" style="font-size:22px;">15</div><div class="stat-trend">单</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">合作供应商</div><div class="stat-value" style="font-size:22px;">28</div><div class="stat-trend">家</div></div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step"><div class="step-num">1</div><div class="step-label">需求提报</div></div>
|
||
<div class="flow-step"><div class="step-num">2</div><div class="step-label">供应商匹配</div></div>
|
||
<div class="flow-step"><div class="step-num">3</div><div class="step-label">采购下单</div></div>
|
||
<div class="flow-step"><div class="step-num">4</div><div class="step-label">质检入库</div></div>
|
||
</div>
|
||
<div class="hint-text">在美国本地完成货源采购、供应商对接与质检,货物直接入海外仓,支持"采购+质检+代发"一站式,缩短交付链路。</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">采购需求</div>
|
||
<div class="form-group">
|
||
<label class="form-label">采购品类<span class="required">*</span></label>
|
||
<select class="input-field"><option>请选择品类</option><option>3C电子</option><option>家居百货</option><option>服饰鞋包</option><option>美妆个护</option><option>玩具母婴</option><option>其他</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">商品规格 / 链接</label>
|
||
<input type="text" class="input-field" placeholder="如 ASIN、商品链接或规格说明">
|
||
</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;"><label class="form-label">采购数量<span class="required">*</span></label><input type="number" class="input-field" placeholder="件"></div>
|
||
<div style="flex:1;"><label class="form-label">预算单价($)<span class="required">*</span></label><input type="text" class="input-field" placeholder="USD"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目标仓<span class="required">*</span></label>
|
||
<select class="input-field"><option>美西仓(洛杉矶)</option><option>美东仓(新泽西)</option><option>美中仓(芝加哥)</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">服务类型<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">纯采购</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">采购+质检</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">采购+代发</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">采购明细</div>
|
||
<div class="goods-table" id="pcGoodsTable">
|
||
<div class="goods-item" style="flex-wrap:wrap;"><input type="text" placeholder="商品名称 *" style="flex:2 1 100%;"></div>
|
||
<div class="goods-item" style="margin-top:-4px;"><input type="text" placeholder="规格/链接"><input type="number" placeholder="数量"><input type="text" placeholder="单价$"></div>
|
||
</div>
|
||
<div class="add-goods" onclick="addProcureGoods()">+ 添加采购项</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">供应商要求(可多选)</div>
|
||
<div class="check-group">
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>优先本地现货</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>提供发票</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>支持退换</div>
|
||
<div class="check-item" onclick="toggleCheck(this)"><span class="check-box">✓</span>可海外直邮</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">订单备注</div>
|
||
<div class="form-group" style="margin-bottom:0;"><textarea class="input-field" placeholder="如交期要求、质检标准等" style="min-height:70px;resize:vertical;"></textarea></div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitService('procurePage','海外采购单提交成功')">提交采购需求</button>
|
||
</div>
|
||
|
||
<!-- US DOMESTIC TRUCKING PAGE (美本土卡车) -->
|
||
<div id="truckPage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromPage('truckPage')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="order-title">美本土卡车</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">在途卡车</div><div class="stat-value" style="font-size:22px;">12</div><div class="stat-trend">辆</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">今日发车</div><div class="stat-value" style="font-size:22px;">8</div><div class="stat-trend">趟</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">平均时效</div><div class="stat-value" style="font-size:22px;">3.2</div><div class="stat-trend">天</div></div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step"><div class="step-num">1</div><div class="step-label">提货预约</div></div>
|
||
<div class="flow-step"><div class="step-num">2</div><div class="step-label">装车发运</div></div>
|
||
<div class="flow-step"><div class="step-num">3</div><div class="step-label">干线运输</div></div>
|
||
<div class="flow-step"><div class="step-num">4</div><div class="step-label">到仓到港</div></div>
|
||
</div>
|
||
<div class="hint-text">覆盖美国全境的整车(FCL)卡车运输,支持港口提柜(drayage)、仓到仓(linehaul)与仓到门(delivery),专业司机与实时轨迹追踪。</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">运输信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">运输类型<span class="required">*</span></label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">港口提柜</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">仓到仓</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">仓到门</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">起运地(城市/州)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 Los Angeles, CA">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细地址 / 码头 / 仓号<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="起运地详细地址" style="min-height:56px;resize:vertical;"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目的地(城市/州)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 New York, NY">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细地址 / 码头 / 仓号<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="目的地详细地址" style="min-height:56px;resize:vertical;"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">货物信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">柜型<span class="required">*</span></label>
|
||
<select class="input-field"><option>20GP</option><option>40GP</option><option>40HQ</option><option>整车 FCL</option></select>
|
||
</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;"><label class="form-label">件数<span class="required">*</span></label><input type="number" class="input-field" placeholder="件"></div>
|
||
<div style="flex:1;"><label class="form-label">总重量<span class="required">*</span></label><input type="text" class="input-field" placeholder="kg / lb"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">总体积<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 2,400 ft³">
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">时效要求<span class="required">*</span></div>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">标准 3-5天</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">加急 1-2天</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card price-section">
|
||
<div class="section-title">费用预估</div>
|
||
<div class="price-options">
|
||
<div class="price-option" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">1-2天</span><span class="price-tag">加急</span></div><div class="price-option-price">$ 2,180</div><div class="price-option-desc">优先派车</div></div>
|
||
<div class="price-option active" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">3-5天</span><span class="price-tag recommend">推荐</span></div><div class="price-option-price">$ 1,560</div><div class="price-option-desc">性价比之选</div></div>
|
||
<div class="price-option" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">5-7天</span><span class="price-tag">经济</span></div><div class="price-option-price">$ 1,290</div><div class="price-option-desc">经济实惠</div></div>
|
||
</div>
|
||
<div class="selected-price"><span class="selected-label">已选择:</span><span class="selected-value">3-5天到达 - $ 1,560</span></div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitService('truckPage','卡车运输单提交成功')">提交卡车运输单</button>
|
||
</div>
|
||
|
||
<!-- US DOMESTIC LTL PAGE (美本土散板) -->
|
||
<div id="ltlPage" class="tab-content" style="display:none;">
|
||
<div class="order-header">
|
||
<div class="header-left" onclick="backFromPage('ltlPage')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 12H5m0 0l7-7m-7 7l7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="order-title">美本土散板</div>
|
||
<div class="header-right"></div>
|
||
</div>
|
||
<div class="dropship-stats">
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">拼车中</div><div class="stat-value" style="font-size:22px;">16</div><div class="stat-trend">票</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">今日发车</div><div class="stat-value" style="font-size:22px;">9</div><div class="stat-trend">趟</div></div>
|
||
<div class="glass-card stat-card" style="padding:12px;"><div class="stat-label" style="font-size:11px;">拼满率</div><div class="stat-value" style="font-size:22px;">84</div><div class="stat-trend">%</div></div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">服务流程</div>
|
||
<div class="dropship-flow">
|
||
<div class="flow-step"><div class="step-num">1</div><div class="step-label">仓库收货</div></div>
|
||
<div class="flow-step"><div class="step-num">2</div><div class="step-label">集货拼车</div></div>
|
||
<div class="flow-step"><div class="step-num">3</div><div class="step-label">干线运输</div></div>
|
||
<div class="flow-step"><div class="step-num">4</div><div class="step-label">到仓派送</div></div>
|
||
</div>
|
||
<div class="hint-text">小批量货物(LTL 零担)在仓库集货拼车,灵活配载、按需发车,是低货量、控成本的美国本土运输优选方案。</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">运输信息</div>
|
||
<div class="form-group">
|
||
<label class="form-label">起运地(城市/州)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 Los Angeles, CA">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细地址<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="起运地详细地址" style="min-height:56px;resize:vertical;"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">目的地(城市/州)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="如 Dallas, TX">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">详细地址<span class="required">*</span></label>
|
||
<textarea class="input-field" placeholder="目的地详细地址" style="min-height:56px;resize:vertical;"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">货物信息</div>
|
||
<div class="form-group" style="display:flex;gap:10px;">
|
||
<div style="flex:1;"><label class="form-label">件数<span class="required">*</span></label><input type="number" class="input-field" placeholder="件"></div>
|
||
<div style="flex:1;"><label class="form-label">总重量(lb)<span class="required">*</span></label><input type="text" class="input-field" placeholder="lb"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">总体积(ft³)<span class="required">*</span></label>
|
||
<input type="text" class="input-field" placeholder="立方英尺">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">是否打托盘</label>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">是</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">否</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card form-section">
|
||
<div class="section-title">运输方式<span class="required">*</span></div>
|
||
<div class="radio-group">
|
||
<div class="radio-item active" onclick="selectRadio(this)">经济拼车</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">定时定班</div>
|
||
<div class="radio-item" onclick="selectRadio(this)">优先拼载</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card price-section">
|
||
<div class="section-title">费用预估</div>
|
||
<div class="price-options">
|
||
<div class="price-option" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">优先拼载</span><span class="price-tag">优先</span></div><div class="price-option-price">$ 320</div><div class="price-option-desc">优先配载</div></div>
|
||
<div class="price-option active" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">定时定班</span><span class="price-tag recommend">推荐</span></div><div class="price-option-price">$ 210</div><div class="price-option-desc">班次稳定</div></div>
|
||
<div class="price-option" onclick="selectPriceOption(this)"><div class="price-option-header"><span class="price-days">经济拼车</span><span class="price-tag">经济</span></div><div class="price-option-price">$ 150</div><div class="price-option-desc">经济实惠</div></div>
|
||
</div>
|
||
<div class="selected-price"><span class="selected-label">已选择:</span><span class="selected-value">定时定班 - $ 210</span></div>
|
||
</div>
|
||
<button class="btn-primary submit-btn" onclick="submitService('ltlPage','散板拼车单提交成功')">提交散板拼车单</button>
|
||
</div>
|
||
|
||
<!-- BOTTOM TAB BAR -->
|
||
<div class="tab-bar">
|
||
<div class="tab-item active" data-tab="0" onclick="switchTab(0)">
|
||
<div class="icon-wrap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<polyline points="9 22 9 12 15 12 15 22" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="label">首页</div>
|
||
</div>
|
||
<div class="tab-item" data-tab="1" onclick="switchTab(1)">
|
||
<div class="icon-wrap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<polyline points="14 2 14 8 20 8" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<line x1="16" y1="13" x2="8" y2="13" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round"/>
|
||
<line x1="16" y1="17" x2="8" y2="17" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="label">下单</div>
|
||
</div>
|
||
<div class="tab-item" data-tab="2" onclick="switchTab(2)">
|
||
<div class="icon-wrap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="#94a3b8" stroke-width="1.8"/>
|
||
<polyline points="9 12 11 14 15 10" stroke="#94a3b8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="label">审批</div>
|
||
</div>
|
||
<div class="tab-item" data-tab="3" onclick="switchTab(3)">
|
||
<div class="icon-wrap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<line x1="1" y1="10" x2="23" y2="10" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round"/>
|
||
<line x1="12" y1="18" x2="12" y2="14" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round"/>
|
||
<line x1="8" y1="16" x2="16" y2="16" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="label">结算</div>
|
||
</div>
|
||
<div class="tab-item" data-tab="4" onclick="switchTab(4)">
|
||
<div class="icon-wrap">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="#94a3b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<circle cx="12" cy="7" r="4" stroke="#94a3b8" stroke-width="1.8"/>
|
||
</svg>
|
||
</div>
|
||
<div class="label">我的</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast">操作成功</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentTab = 0;
|
||
let isLoggedIn = false;
|
||
|
||
// Display current date
|
||
function displayDate() {
|
||
const el = document.getElementById('greetingDate');
|
||
if (!el) return;
|
||
const now = new Date();
|
||
const month = now.getMonth() + 1;
|
||
const date = now.getDate();
|
||
const weekday = ['周日','周一','周二','周三','周四','周五','周六'][now.getDay()];
|
||
el.textContent = month + '/' + date + ' ' + weekday;
|
||
}
|
||
displayDate();
|
||
|
||
// Banner carousel
|
||
(function () {
|
||
const track = document.getElementById('hdBannerTrack');
|
||
if (!track) return;
|
||
const dots = document.querySelectorAll('#hdBannerDots .dot');
|
||
let idx = 0;
|
||
function go(i) {
|
||
idx = i;
|
||
track.scrollTo({ left: i * track.clientWidth, behavior: 'smooth' });
|
||
}
|
||
window.goBanner = go;
|
||
track.addEventListener('scroll', () => {
|
||
const i = Math.round(track.scrollLeft / track.clientWidth);
|
||
dots.forEach((d, k) => d.classList.toggle('active', k === i));
|
||
});
|
||
const timer = setInterval(() => go((idx + 1) % dots.length), 4000);
|
||
track.addEventListener('touchstart', () => clearInterval(timer), { once: true });
|
||
})();
|
||
|
||
// Login/Register
|
||
function showRegister() {
|
||
document.getElementById('loginCard').style.display = 'none';
|
||
document.getElementById('registerCard').style.display = 'block';
|
||
}
|
||
|
||
function showLogin() {
|
||
document.getElementById('loginCard').style.display = 'block';
|
||
document.getElementById('registerCard').style.display = 'none';
|
||
}
|
||
|
||
function handleLogin() {
|
||
isLoggedIn = true;
|
||
document.getElementById('loginPage').style.display = 'none';
|
||
document.getElementById('mainApp').style.display = 'block';
|
||
initCharts();
|
||
showToast('登录成功');
|
||
}
|
||
|
||
// Add Goods
|
||
function addGoods() {
|
||
const table = document.getElementById('goodsTable');
|
||
const newItem = document.createElement('div');
|
||
newItem.className = 'goods-item';
|
||
newItem.innerHTML = `
|
||
<input type="text" placeholder="货物名称">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="重量(kg)">
|
||
`;
|
||
table.appendChild(newItem);
|
||
showToast('已添加货物');
|
||
}
|
||
|
||
function handleRegister() {
|
||
showToast('注册成功,请登录');
|
||
showLogin();
|
||
}
|
||
|
||
function handleLogout() {
|
||
isLoggedIn = false;
|
||
document.getElementById('loginPage').style.display = 'flex';
|
||
document.getElementById('mainApp').style.display = 'none';
|
||
showLogin();
|
||
showToast('已退出登录');
|
||
}
|
||
|
||
// Tab Switch
|
||
function switchTab(index) {
|
||
currentTab = index;
|
||
document.querySelectorAll('.tab-item').forEach((tab, i) => {
|
||
tab.classList.toggle('active', i === index);
|
||
});
|
||
const pages = ['dashboardPage', 'orderPage', 'approvalPage', 'settlementPage', 'profilePage'];
|
||
pages.forEach((page, i) => {
|
||
document.getElementById(page).classList.toggle('active', i === index);
|
||
});
|
||
}
|
||
|
||
function switchSettlementTab(el, type) {
|
||
document.querySelectorAll('.approval-tab').forEach(tab => tab.classList.remove('active'));
|
||
el.classList.add('active');
|
||
document.getElementById('pendingSettlement').style.display = type === 'pending' ? 'block' : 'none';
|
||
document.getElementById('settledSettlement').style.display = type === 'settled' ? 'block' : 'none';
|
||
}
|
||
|
||
function handleSettle(el) {
|
||
showToast('结算成功');
|
||
el.parentElement.parentElement.style.display = 'none';
|
||
}
|
||
|
||
// Price Option Selection
|
||
function selectPriceOption(el) {
|
||
const parent = el.parentElement;
|
||
parent.querySelectorAll('.price-option').forEach(item => item.classList.remove('active'));
|
||
el.classList.add('active');
|
||
|
||
const days = el.querySelector('.price-days').textContent;
|
||
const price = el.querySelector('.price-option-price').textContent;
|
||
const selVal = parent.parentElement.querySelector('.selected-value');
|
||
if (selVal) selVal.textContent = days + '到达 - ' + price;
|
||
showToast('已选择:' + days + '到达');
|
||
}
|
||
|
||
// Radio Selection
|
||
function selectRadio(el) {
|
||
const parent = el.parentElement;
|
||
parent.querySelectorAll('.radio-item').forEach(item => item.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
// Submit Order
|
||
function submitOrder() {
|
||
showToast('订单提交成功,等待审批');
|
||
setTimeout(() => switchTab(2), 1200);
|
||
}
|
||
|
||
// Approval
|
||
function switchApprovalTab(el, type) {
|
||
document.querySelectorAll('.approval-tab').forEach(tab => tab.classList.remove('active'));
|
||
el.classList.add('active');
|
||
document.getElementById('pendingList').style.display = type === 'pending' ? 'block' : 'none';
|
||
document.getElementById('approvedList').style.display = type === 'approved' ? 'block' : 'none';
|
||
document.getElementById('rejectedList').style.display = type === 'rejected' ? 'block' : 'none';
|
||
}
|
||
|
||
// My Orders
|
||
function showMyOrders() {
|
||
document.getElementById('myOrdersPage').style.display = 'block';
|
||
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
|
||
document.querySelector('.tab-bar').style.display = 'none';
|
||
}
|
||
|
||
function goBackFromOrders() {
|
||
document.getElementById('myOrdersPage').style.display = 'none';
|
||
document.getElementById('profilePage').classList.add('active');
|
||
document.querySelector('.tab-bar').style.display = 'flex';
|
||
document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
|
||
document.querySelector('.tab-item[data-tab="4"]').classList.add('active');
|
||
}
|
||
|
||
function switchOrderTab(el, type) {
|
||
document.querySelectorAll('.order-tab').forEach(tab => tab.classList.remove('active'));
|
||
el.classList.add('active');
|
||
document.getElementById('allOrders').style.display = type === 'all' ? 'block' : 'none';
|
||
document.getElementById('pendingOrders').style.display = type === 'pending' ? 'block' : 'none';
|
||
document.getElementById('approvedOrders').style.display = type === 'approved' ? 'block' : 'none';
|
||
document.getElementById('rejectedOrders').style.display = type === 'rejected' ? 'block' : 'none';
|
||
}
|
||
|
||
function handleApprove(el) {
|
||
const card = el.closest('.approval-item');
|
||
card.querySelector('.approval-status').className = 'approval-status status-approved';
|
||
card.querySelector('.approval-status').textContent = '已通过';
|
||
card.querySelector('.approval-actions').remove();
|
||
showToast('审批通过');
|
||
}
|
||
|
||
function handleReject(el) {
|
||
const card = el.closest('.approval-item');
|
||
card.querySelector('.approval-status').className = 'approval-status status-rejected';
|
||
card.querySelector('.approval-status').textContent = '已拒绝';
|
||
card.querySelector('.approval-actions').remove();
|
||
showToast('已拒绝');
|
||
}
|
||
|
||
// Detail Page
|
||
let currentDetailOrder = null;
|
||
let currentDetailStatus = null;
|
||
|
||
function showDetail(orderId, customer, time, channel, total, quantity, weight, dest, status) {
|
||
currentDetailOrder = orderId;
|
||
currentDetailStatus = status;
|
||
|
||
// Update detail page content
|
||
document.getElementById('detailOrderNumber').textContent = '订单 #' + orderId;
|
||
document.getElementById('detailCustomer').textContent = customer;
|
||
document.getElementById('detailTime').textContent = time;
|
||
document.getElementById('detailChannel').textContent = channel;
|
||
document.getElementById('detailTotal').textContent = total;
|
||
|
||
// Set status
|
||
const statusEl = document.getElementById('detailStatus');
|
||
statusEl.textContent = status === 'pending' ? '待审批' : (status === 'approved' ? '已通过' : '已拒绝');
|
||
statusEl.className = 'detail-value';
|
||
statusEl.style.color = status === 'pending' ? '#f59e0b' : (status === 'approved' ? '#22c55e' : '#ef4444');
|
||
statusEl.style.fontWeight = '600';
|
||
|
||
// Update other details
|
||
if (quantity !== '-') {
|
||
document.getElementById('detailQuantity').textContent = quantity;
|
||
document.getElementById('detailWeight').textContent = weight;
|
||
document.getElementById('detailDestCode').textContent = dest;
|
||
}
|
||
|
||
// Show/hide approval actions
|
||
const actionsEl = document.getElementById('detailActions');
|
||
actionsEl.style.display = status === 'pending' ? 'block' : 'none';
|
||
|
||
// Switch to detail page
|
||
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
|
||
document.getElementById('detailPage').classList.add('active');
|
||
}
|
||
|
||
function backToApproval() {
|
||
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
|
||
document.getElementById('approvalPage').classList.add('active');
|
||
}
|
||
|
||
function approveFromDetail() {
|
||
showToast('审批通过');
|
||
backToApproval();
|
||
}
|
||
|
||
function rejectFromDetail() {
|
||
showToast('已拒绝');
|
||
backToApproval();
|
||
}
|
||
|
||
// Dropship (一件代发)
|
||
function openDropship() {
|
||
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
|
||
document.getElementById('dropshipPage').style.display = 'block';
|
||
document.querySelector('.tab-bar').style.display = 'none';
|
||
}
|
||
|
||
function backFromDropship() {
|
||
document.getElementById('dropshipPage').style.display = 'none';
|
||
document.getElementById('dashboardPage').classList.add('active');
|
||
document.querySelector('.tab-bar').style.display = 'flex';
|
||
document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
|
||
document.querySelector('.tab-item[data-tab="0"]').classList.add('active');
|
||
}
|
||
|
||
function addDsGoods() {
|
||
const table = document.getElementById('dsGoodsTable');
|
||
const wrap = document.createElement('div');
|
||
wrap.innerHTML = `
|
||
<div class="goods-item" style="flex-wrap:wrap;margin-top:8px;">
|
||
<input type="text" placeholder="商品名称 *" style="flex:2 1 100%;">
|
||
</div>
|
||
<div class="goods-item" style="margin-top:-4px;">
|
||
<input type="text" placeholder="SKU">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="重量(kg)">
|
||
<input type="text" placeholder="申报价值$">
|
||
</div>
|
||
`;
|
||
table.appendChild(wrap);
|
||
showToast('已添加商品');
|
||
}
|
||
|
||
function toggleCheck(el) {
|
||
el.classList.toggle('active');
|
||
}
|
||
|
||
function submitDsOrder() {
|
||
showToast('代发订单提交成功,仓库将自动拣货出库');
|
||
setTimeout(() => backFromDropship(), 1200);
|
||
}
|
||
|
||
// Generic service page open/back/submit
|
||
function openService(pageId) {
|
||
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
|
||
document.getElementById(pageId).style.display = 'block';
|
||
document.querySelector('.tab-bar').style.display = 'none';
|
||
}
|
||
function backFromPage(pageId) {
|
||
document.getElementById(pageId).style.display = 'none';
|
||
document.getElementById('dashboardPage').classList.add('active');
|
||
document.querySelector('.tab-bar').style.display = 'flex';
|
||
document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
|
||
document.querySelector('.tab-item[data-tab="0"]').classList.add('active');
|
||
}
|
||
function submitService(pageId, msg) {
|
||
showToast(msg);
|
||
setTimeout(() => backFromPage(pageId), 1200);
|
||
}
|
||
function addGoodsRow(tableId, html) {
|
||
const table = document.getElementById(tableId);
|
||
if (!table) return;
|
||
const wrap = document.createElement('div');
|
||
wrap.innerHTML = html;
|
||
table.appendChild(wrap);
|
||
showToast('已添加');
|
||
}
|
||
function addRtGoods() {
|
||
addGoodsRow('rtGoodsTable', `
|
||
<div class="goods-item" style="flex-wrap:wrap;margin-top:8px;">
|
||
<input type="text" placeholder="商品名称 *" style="flex:2 1 100%;">
|
||
</div>
|
||
<div class="goods-item" style="margin-top:-4px;">
|
||
<input type="text" placeholder="SKU">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="退货原因">
|
||
</div>
|
||
`);
|
||
}
|
||
function addProcureGoods() {
|
||
addGoodsRow('pcGoodsTable', `
|
||
<div class="goods-item" style="flex-wrap:wrap;margin-top:8px;">
|
||
<input type="text" placeholder="商品名称 *" style="flex:2 1 100%;">
|
||
</div>
|
||
<div class="goods-item" style="margin-top:-4px;">
|
||
<input type="text" placeholder="规格/链接">
|
||
<input type="number" placeholder="数量">
|
||
<input type="text" placeholder="单价$">
|
||
</div>
|
||
`);
|
||
}
|
||
|
||
// Toast
|
||
function showToast(msg) {
|
||
const toast = document.getElementById('toast');
|
||
toast.textContent = msg;
|
||
toast.classList.add('show');
|
||
setTimeout(() => toast.classList.remove('show'), 2500);
|
||
}
|
||
|
||
// Charts
|
||
function initCharts() {
|
||
// Order Trend Chart
|
||
const orderCtx = document.getElementById('orderChart');
|
||
if (orderCtx) {
|
||
new Chart(orderCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
datasets: [{
|
||
label: '订单数',
|
||
data: [12, 19, 15, 22, 18, 25, 20],
|
||
borderColor: '#667eea',
|
||
backgroundColor: 'rgba(102,126,234,0.1)',
|
||
fill: true,
|
||
tension: 0.4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: { legend: { display: false } },
|
||
scales: {
|
||
y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
|
||
x: { grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Pie Chart
|
||
const pieCtx = document.getElementById('pieChart');
|
||
if (pieCtx) {
|
||
new Chart(pieCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['美线普货专线', '美线敏感货专线', '美线快线', '美线FBA直送'],
|
||
datasets: [{
|
||
data: [45, 25, 20, 10],
|
||
backgroundColor: ['#667eea', '#764ba2', '#f093fb', '#22c55e'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
labels: {
|
||
padding: 15,
|
||
usePointStyle: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|