Files
docs/悦/虫虫出海小程序/index.html
T

4103 lines
167 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>