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

fix(client): style sailing quote dialog root

Browse Source
This commit is contained in:
ouyangxq
2026-09-26 22:51:14 +08:00
parent 58c4be7fc0
commit 8aed079d02
1 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/first-leg/views/SailingPricesView.vue
+3
View File
@@ -62,4 +62,7 @@ watch(originWarehouseId, () => { void loadChannels() }); onMounted(() => { void
.quote-dialog { --el-dialog-bg-color:transparent; }.quote-dialog :deep(.el-dialog) { overflow:hidden; border-radius:22px; background:linear-gradient(125deg,#182e69 0%,#274cbd 55%,#416bf1 100%); box-shadow:0 24px 70px rgba(11,31,89,.34); }.quote-dialog :deep(.el-dialog__header) { margin:0; padding:0; }.quote-dialog :deep(.el-dialog__body) { padding:0 20px 22px; }.quote-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 22px 16px; color:#fff; }.quote-dialog-head h3 { margin:0 0 3px; font-size:22px; }.quote-dialog-head span { color:rgba(255,255,255,.72); font-size:14px; }.quote-close { width:42px; height:42px; border:1px solid #cfddf2; border-radius:13px; background:#fff; color:#8392a8; font-size:31px; line-height:34px; cursor:pointer; }.quote-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.quote-card { position:relative; min-height:300px; overflow:hidden; padding:28px 25px 21px; border:1px solid #d5deee; border-radius:20px; background:#f8f9fd; color:#263a55; box-shadow:0 8px 22px rgba(22,48,117,.12); }.quote-card.price { border:2px solid #ffae3c; }.quote-card.time { border:2px solid #27c28c; }.quote-ribbon { position:absolute; right:-42px; top:17px; width:145px; padding:7px 0; transform:rotate(43deg); background:#ff8d14; color:#fff; text-align:center; font-size:12px; font-weight:850; }.quote-card.time .quote-ribbon { background:#0db886; }.quote-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.quote-card-title strong { font-size:19px; }.quote-card-title span { flex:none; padding:7px 10px; border-radius:18px; background:#edf5ff; color:#367ae0; font-size:11px; font-weight:750; }.quote-price { display:flex; align-items:baseline; gap:8px; margin:25px 0 22px; }.quote-price b { color:#ed5a2a; font-size:33px; line-height:1; }.quote-price small { color:#96a4b8; font-size:15px; }.quote-meta { display:grid; grid-template-columns:1fr 1fr; gap:17px 13px; }.quote-meta span { display:block; margin-bottom:5px; color:#93a0b2; font-size:12px; }.quote-meta strong { display:block; color:#344961; font-size:14px; line-height:1.45; }.quote-order { width:100%; margin-top:20px; border-radius:9px; }.quote-card:not(.price):not(.time) .quote-order { background:#fff; } .quote-dialog { --el-dialog-bg-color:transparent; }.quote-dialog :deep(.el-dialog) { overflow:hidden; border-radius:22px; background:linear-gradient(125deg,#182e69 0%,#274cbd 55%,#416bf1 100%); box-shadow:0 24px 70px rgba(11,31,89,.34); }.quote-dialog :deep(.el-dialog__header) { margin:0; padding:0; }.quote-dialog :deep(.el-dialog__body) { padding:0 20px 22px; }.quote-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 22px 16px; color:#fff; }.quote-dialog-head h3 { margin:0 0 3px; font-size:22px; }.quote-dialog-head span { color:rgba(255,255,255,.72); font-size:14px; }.quote-close { width:42px; height:42px; border:1px solid #cfddf2; border-radius:13px; background:#fff; color:#8392a8; font-size:31px; line-height:34px; cursor:pointer; }.quote-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.quote-card { position:relative; min-height:300px; overflow:hidden; padding:28px 25px 21px; border:1px solid #d5deee; border-radius:20px; background:#f8f9fd; color:#263a55; box-shadow:0 8px 22px rgba(22,48,117,.12); }.quote-card.price { border:2px solid #ffae3c; }.quote-card.time { border:2px solid #27c28c; }.quote-ribbon { position:absolute; right:-42px; top:17px; width:145px; padding:7px 0; transform:rotate(43deg); background:#ff8d14; color:#fff; text-align:center; font-size:12px; font-weight:850; }.quote-card.time .quote-ribbon { background:#0db886; }.quote-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.quote-card-title strong { font-size:19px; }.quote-card-title span { flex:none; padding:7px 10px; border-radius:18px; background:#edf5ff; color:#367ae0; font-size:11px; font-weight:750; }.quote-price { display:flex; align-items:baseline; gap:8px; margin:25px 0 22px; }.quote-price b { color:#ed5a2a; font-size:33px; line-height:1; }.quote-price small { color:#96a4b8; font-size:15px; }.quote-meta { display:grid; grid-template-columns:1fr 1fr; gap:17px 13px; }.quote-meta span { display:block; margin-bottom:5px; color:#93a0b2; font-size:12px; }.quote-meta strong { display:block; color:#344961; font-size:14px; line-height:1.45; }.quote-order { width:100%; margin-top:20px; border-radius:9px; }.quote-card:not(.price):not(.time) .quote-order { background:#fff; }
@media (max-width:1200px) { .pricing-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.quote-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:1200px) { .pricing-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.quote-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .quote-grid { grid-template-columns:1fr; }.pricing-form { grid-template-columns:1fr; } } @media (max-width:720px) { .quote-grid { grid-template-columns:1fr; }.pricing-form { grid-template-columns:1fr; } }
:global(.quote-dialog.el-dialog) { overflow:hidden; border-radius:22px; background:linear-gradient(125deg,#182e69 0%,#274cbd 55%,#416bf1 100%); box-shadow:0 24px 70px rgba(11,31,89,.34); }
:global(.quote-dialog.el-dialog .el-dialog__header) { margin:0; padding:0; }
:global(.quote-dialog.el-dialog .el-dialog__body) { padding:0 20px 22px; }
</style> </style>