html/client-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(client): align customs and sailing pages with prototype

Browse Source
This commit is contained in:
ouyangxq
2026-09-26 18:10:37 +08:00
parent 92e0586089
commit c71a9945df
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/first-leg/views/CustomsDocumentsView.vue
+1 -1
View File
@@ -74,5 +74,5 @@ onMounted(() => { void load() })
</template>
<style scoped>
.customs-page { display:flex; flex-direction:column; gap:14px; }.customs-hero { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border:1px solid var(--client-border); border-radius:var(--client-radius); background:linear-gradient(135deg,#f1f8f6,#fff); }.eyebrow { color:var(--primary); font-size:11px; letter-spacing:.12em; }.customs-hero h1 { margin:7px 0 5px; color:var(--navy); font-size:24px; }.customs-hero p { margin:0; color:var(--muted); font-size:13px; }.customs-toolbar { display:flex; align-items:center; gap:16px; }.customs-toolbar .el-input { max-width:360px; }.customs-toolbar span { color:var(--muted); font-size:12px; }.customs-card { min-height:280px; padding:4px; overflow:hidden; border:1px solid var(--client-border); border-radius:var(--client-radius); background:#fff; }.state-error { display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#b42318; }.state-error p { margin:0; }
.customs-page { display:flex; flex-direction:column; gap:16px; }.customs-hero { display:flex; justify-content:space-between; align-items:flex-start; padding:0 2px 4px; }.eyebrow { color:#5b82c9; font-size:11px; font-weight:750; letter-spacing:.14em; }.customs-hero h1 { margin:6px 0 5px; color:#1f2f46; font-size:26px; line-height:1.25; letter-spacing:-.025em; }.customs-hero p { margin:0; color:#7d8da2; font-size:13px; }.customs-hero .el-button { margin-top:3px; border-color:#d9e3ef; border-radius:9px; background:#fff; color:#61738b; box-shadow:0 3px 8px rgba(26,55,91,.04); }.customs-toolbar { display:flex; min-height:82px; align-items:center; gap:16px; padding:16px 18px; border:1px solid #dce4ef; border-radius:16px; background:#fff; box-shadow:0 5px 16px rgba(31,56,88,.045); }.customs-toolbar .el-input { width:min(520px, 100%); }.customs-toolbar :deep(.el-input__wrapper) { min-height:42px; border-radius:10px; box-shadow:0 0 0 1px #d9e3ef inset; }.customs-toolbar span { color:#7d8da2; font-size:12px; }.customs-card { min-height:320px; padding:4px; overflow:hidden; border:1px solid #dce4ef; border-radius:16px; background:#fff; box-shadow:0 5px 16px rgba(31,56,88,.045); }.customs-card :deep(.el-table) { --el-table-header-bg-color:#f4f7fb; --el-table-row-hover-bg-color:#eaf2ff; --el-table-border-color:#edf1f6; color:#53647a; }.customs-card :deep(.el-table th.el-table__cell) { padding:13px 16px; color:#607089; font-size:12px; font-weight:750; }.customs-card :deep(.el-table td.el-table__cell) { height:58px; padding:13px 16px; font-size:13px; }.customs-card :deep(.el-table__row:nth-child(even)) { background:#f8fbff; }.state-error { display:flex; min-height:260px; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#b42318; }.state-error p { margin:0; }
</style>
src/modules/first-leg/views/SailingPricesView.vue
+4 -3
View File
@@ -41,12 +41,13 @@ watch(originWarehouseId, () => { void loadChannels() }); onMounted(() => { void
</script>
<template>
<div class="pricing-page"><section class="pricing-hero"><div><span class="eyebrow">SAILING PRICE INQUIRY</span><h1>船期价格查询</h1><p>输入货物重量和目的仓，获取匹配渠道、参考船期与预估运费。</p></div><el-button :loading="loading" @click="loadBase"><RefreshCcw :size="15" />刷新</el-button></section>
<section class="pricing-form"><el-form label-position="top"><el-form-item label="起运仓"><el-select v-model="originWarehouseId" filterable :loading="loading" placeholder="选择起运仓"><el-option v-for="item in warehouses" :key="String(item.id)" :label="`${item.warehouseName} · ${item.warehouseCode}`" :value="item.id" /></el-select></el-form-item><el-form-item label="货物重量"><el-input v-model.number="weight" type="number" placeholder="请输入重量"><template #append>KG</template></el-input></el-form-item><el-form-item label="货物立方数"><el-input v-model.number="volume" type="number" placeholder="请输入体积"><template #append>CBM</template></el-input></el-form-item><el-form-item label="目的仓"><el-input v-model="destinationCode" placeholder="如 ABE4" /></el-form-item><el-form-item label="报价方式"><el-radio-group v-model="taxMode"><el-radio-button value="TAX_INCLUDED" label="包税" /><el-radio-button value="TAX_EXCLUDED" label="不包税" /></el-radio-group></el-form-item><el-form-item><el-button type="primary" :loading="querying" @click="query"><Search :size="16" />立即查询</el-button></el-form-item></el-form></section>
<div class="pricing-page"><section class="pricing-heading"><div><span class="eyebrow">SAILING PRICE INQUIRY</span><h1>船期价格查询</h1><p>输入货物重量和目的仓，获取匹配渠道、参考船期与预估运费。</p></div><el-button class="refresh-button" :loading="loading" @click="loadBase"><RefreshCcw :size="15" />刷新</el-button></section>
<section class="pricing-inquiry"><div class="inquiry-copy"><span>SAILING PRICE INQUIRY</span><h2>船期价格查询</h2><p>输入货物重量和目的仓，快速获取匹配渠道、船期与预估运费</p></div><el-form class="pricing-form" label-position="top"><el-form-item label="起运仓"><el-select v-model="originWarehouseId" filterable :loading="loading" placeholder="选择起运仓"><el-option v-for="item in warehouses" :key="String(item.id)" :label="`${item.warehouseName} · ${item.warehouseCode}`" :value="item.id" /></el-select></el-form-item><el-form-item label="货物重量"><el-input v-model.number="weight" type="number" placeholder="请输入重量"><template #append>KG</template></el-input></el-form-item><el-form-item label="货物立方数"><el-input v-model.number="volume" type="number" placeholder="请输入体积"><template #append>CBM</template></el-input></el-form-item><el-form-item label="目的仓"><el-input v-model="destinationCode" placeholder="如 ABE4" /></el-form-item><el-form-item label="报价方式"><el-radio-group v-model="taxMode"><el-radio-button value="TAX_INCLUDED" label="包税" /><el-radio-button value="TAX_EXCLUDED" label="不包税" /></el-radio-group></el-form-item><el-form-item class="query-item"><el-button type="primary" :loading="querying" @click="query"><Search :size="16" />立即查询</el-button></el-form-item></el-form></section>
<section class="pricing-results"><div class="section-title"><div><h2>匹配渠道</h2><span>{{ channels.length }} 个渠道 · 参考价格以服务端估价为准</span></div><Calculator :size="20" /></div><el-skeleton v-if="loading || querying" :rows="4" animated /><el-alert v-else-if="errorMessage" :title="errorMessage" type="error" show-icon /><el-empty v-else-if="!channels.length" description="暂无可用船期价格" /><el-table v-else :data="channels" stripe><el-table-column label="渠道" min-width="160"><template #default="{ row }"><strong>{{ row.channelName }}</strong><small>{{ row.channelCode }}</small></template></el-table-column><el-table-column label="参考船期" min-width="150"><template #default="{ row }">{{ row.estimatedDepartureText || row.estimatedDepartureDate || '待更新' }}</template></el-table-column><el-table-column label="最晚进仓" min-width="130"><template #default="{ row }">{{ row.latestWarehouseEntry || '—' }}</template></el-table-column><el-table-column label="参考时效" width="120"><template #default="{ row }">{{ row.referenceTransit || '—' }}</template></el-table-column><el-table-column label="预估运费" width="150"><template #default="{ row }"><span v-if="quotes.find((quote) => quote.channelCode === row.channelCode)">{{ formatMoney(quotes.find((quote) => quote.channelCode === row.channelCode)!) }}</span><span v-else class="muted">查询后显示</span></template></el-table-column><el-table-column label="附加费说明" min-width="180" prop="surchargeDescription" /><el-table-column label="操作" width="100" fixed="right"><template #default="{ row }"><el-button link type="primary" :disabled="!quotes.some((quote) => quote.channelCode === row.channelCode)" @click="placeOrder(row.channelCode, row.channelName)">下单</el-button></template></el-table-column></el-table></section>
</div>
</template>
<style scoped>
.pricing-page { display:flex; flex-direction:column; gap:14px; }.pricing-hero { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border:1px solid var(--client-border); border-radius:var(--client-radius); background:linear-gradient(135deg,#eff7fb,#fff); }.eyebrow { color:var(--primary); font-size:11px; letter-spacing:.12em; }.pricing-hero h1 { margin:7px 0 5px; color:var(--navy); font-size:24px; }.pricing-hero p { margin:0; color:var(--muted); font-size:13px; }.pricing-form { padding:18px 20px 4px; border:1px solid var(--client-border); border-radius:var(--client-radius); background:#fff; }.pricing-form :deep(form) { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr 1.1fr auto; align-items:end; gap:14px; }.pricing-form :deep(.el-form-item) { margin-bottom:14px; }.pricing-results { padding:4px; overflow:hidden; border:1px solid var(--client-border); border-radius:var(--client-radius); background:#fff; }.section-title { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; }.section-title h2 { margin:0 0 4px; color:var(--navy); font-size:16px; }.section-title span { color:var(--muted); font-size:12px; }.section-title svg { color:var(--primary); }.pricing-results small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }.muted { color:var(--muted); }
.pricing-page { display:flex; flex-direction:column; gap:16px; }.pricing-heading { display:flex; justify-content:space-between; align-items:flex-start; padding:0 2px; }.eyebrow { color:#5b82c9; font-size:11px; font-weight:750; letter-spacing:.14em; }.pricing-heading h1 { margin:6px 0 5px; color:#1f2f46; font-size:26px; line-height:1.25; letter-spacing:-.025em; }.pricing-heading p { margin:0; color:#7d8da2; font-size:13px; }.refresh-button { margin-top:3px; border-color:#d9e3ef; border-radius:9px; background:#fff; color:#61738b; box-shadow:0 3px 8px rgba(26,55,91,.04); }.pricing-inquiry { position:relative; overflow:hidden; padding:24px; border:1px solid rgba(99,135,255,.36); border-radius:18px; background:linear-gradient(112deg,#152754 0%,#203d8f 42%,#315bd9 75%,#4c70f5 100%); box-shadow:0 14px 36px rgba(31,61,140,.2); }.pricing-inquiry::before { content:''; position:absolute; right:-75px; top:-165px; width:410px; height:410px; border:48px solid rgba(255,255,255,.07); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.07),transparent 64%); pointer-events:none; }.inquiry-copy { position:relative; z-index:1; margin-bottom:19px; }.inquiry-copy > span { color:rgba(255,255,255,.7); font-size:10px; font-weight:850; letter-spacing:.18em; }.inquiry-copy h2 { margin:5px 0 4px; color:#fff; font-size:22px; font-weight:850; }.inquiry-copy p { margin:0; color:rgba(255,255,255,.7); font-size:13px; }.pricing-form { position:relative; z-index:1; }.pricing-form :deep(form) { display:grid; grid-template-columns:minmax(175px,.9fr) minmax(150px,.7fr) minmax(150px,.7fr) minmax(180px,1fr) minmax(150px,.8fr) 140px; align-items:end; gap:14px; }.pricing-form :deep(.el-form-item) { margin-bottom:0; }.pricing-form :deep(.el-form-item__label) { height:auto; margin-bottom:8px; color:rgba(255,255,255,.82); font-size:12px; font-weight:750; line-height:1.2; }.pricing-form :deep(.el-input__wrapper), .pricing-form :deep(.el-select__wrapper) { min-height:48px; border:1px solid #d4e0ed; border-radius:11px; background:#fff; box-shadow:0 4px 13px rgba(45,72,105,.04); }.pricing-form :deep(.el-input__inner), .pricing-form :deep(.el-select__selected-item) { color:#24354d; font-size:14px; font-weight:600; }.pricing-form :deep(.el-input-group__append) { border:0; background:#fff; color:#7690ad; font-size:12px; font-weight:700; }.pricing-form :deep(.el-radio-group) { display:flex; min-height:48px; align-items:center; padding:0 4px; border-radius:11px; background:#fff; }.pricing-form :deep(.el-radio-button__inner) { height:40px; padding:12px 12px; border:0; border-radius:8px; color:#61738b; box-shadow:none; }.pricing-form :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) { border-color:#3d70e8; background:#3d70e8; color:#fff; box-shadow:0 5px 12px rgba(37,99,235,.2); }.query-item :deep(.el-form-item__content) { display:block; }.query-item :deep(.el-button) { width:100%; min-height:48px; border:0; border-radius:11px; background:linear-gradient(135deg,#ffca4b,#ffb82e); color:#48350b; box-shadow:0 9px 20px rgba(255,185,46,.25); font-size:14px; font-weight:850; }.query-item :deep(.el-button:hover) { background:linear-gradient(135deg,#ffd363,#ffc13e); box-shadow:0 12px 25px rgba(255,185,46,.35); color:#48350b; transform:translateY(-1px); }.pricing-results { padding:4px; overflow:hidden; border:1px solid #dce4ef; border-radius:16px; background:#fff; box-shadow:0 5px 16px rgba(31,56,88,.045); }.section-title { display:flex; align-items:center; justify-content:space-between; padding:17px 18px 13px; }.section-title h2 { margin:0 0 4px; color:#20324a; font-size:16px; }.section-title span { color:#7d8da2; font-size:12px; }.section-title svg { color:#3d70e8; }.pricing-results small { display:block; margin-top:3px; color:#7d8da2; font-size:11px; }.pricing-results :deep(.el-table) { --el-table-header-bg-color:#f4f7fb; --el-table-row-hover-bg-color:#eaf2ff; --el-table-border-color:#edf1f6; color:#53647a; }.pricing-results :deep(.el-table th.el-table__cell) { padding:13px 16px; color:#607089; font-size:12px; font-weight:750; }.pricing-results :deep(.el-table td.el-table__cell) { height:58px; padding:13px 16px; font-size:13px; }.pricing-results :deep(.el-table__row:nth-child(even)) { background:#f8fbff; }.pricing-results :deep(.el-button--link) { font-weight:750; }.muted { color:#94a0af; }
@media (max-width:1200px) { .pricing-form :deep(form) { grid-template-columns:repeat(3,minmax(0,1fr)); } }
</style>