{"html":"

UIverse Logistics, Inc.

$900

$3.60/mi

Jun

Wed

\n \n

Marlboro, NJ

\n 16 mi\n

\n \n

Mansfield, PA

\n 157 mi\n

RATE CHECK

$950

$3.80/mi

\n TL\n F\n 48 ft\n 46000 lbs\n

197mi

\n","css":".load-card {\n --primary-color: #484848;\n --background: rgb(255, 255, 255);\n --hover-bg: rgb(255, 249, 241);\n --box-shadow: rgb(218, 226, 234);\n --border: rgb(255, 157, 31);\n --price-color: rgb(0, 181, 41);\n --unit-pills-bg: rgb(228, 247, 232);\n --unit-pills-color: rgb(72, 72, 72);\n --bold: 600;\n --semi-bold: 500;\n font-family: \"poppins\", sans-serif;\n display: grid;\n grid-row-gap: 4px;\n text-decoration: none;\n padding: 8px 16px;\n border-radius: 8px;\n box-shadow: var(--box-shadow) 0px 0px 10px 0px;\n background: var(--background);\n margin-bottom: 10px;\n color: var(--primary-color);\n transition: 0.4s ease-in-out;\n border-bottom: 6px solid var(--unit-pills-bg);\n cursor: pointer;\n margin: 8px;\n}\n.load-card:hover {\n box-shadow: var(--box-shadow) 0px 2px 4px 0px;\n background: var(--hover-bg);\n border-bottom: 6px solid var(--border);\n transition: 0.2s ease-in-out;\n}\n.card-name-price,\n.card-time,\n.card-info,\n.units-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.card-name-price {\n font-size: 20px;\n}\n.load-card-price {\n color: var(--price-color);\n font-weight: var(--bold);\n}\n.card-time {\n font-size: 12px;\n opacity: 0.5;\n}\n.card-info {\n column-gap: 12px;\n margin: 8px 0px 8px 19px;\n text-align: center;\n}\n.card-date-wrapper {\n display: flex;\n flex-direction: column;\n}\n.card-info .month,\n.card-info .day {\n font-size: 12px;\n opacity: 0.5;\n}\n.card-info .date {\n font-size: 28px;\n font-weight: var(--semi-bold);\n transition: 0.4s ease-in-out;\n}\n.city-with-mi {\n display: flex;\n align-items: center;\n}\n.city-nm {\n font-size: 14px;\n}\n.mi {\n font-size: 12px;\n opacity: 0.5;\n flex-shrink: 0;\n}\n.rc {\n font-size: 9px;\n opacity: 0.5;\n}\n.card-city-unit-wrapper {\n display: flex;\n flex-direction: column;\n row-gap: 30px;\n position: relative;\n overflow: hidden;\n}\n.card-city-unit-wrapper::before {\n content: \"\";\n position: absolute;\n height: 71%;\n top: 15%;\n left: 4px;\n border-left: 2px dotted gray;\n opacity: 0.5;\n z-index: 0;\n}\n.city-with-mi {\n display: flex;\n align-items: center;\n column-gap: 8px;\n}\n.round-icon {\n display: block;\n height: 9px;\n width: 9px;\n border-radius: 10px;\n border: 2px solid gray;\n background-color: #ffffff;\n z-index: 1;\n}\n.square-icon {\n display: block;\n height: 9px;\n width: 9px;\n border: 2px solid var(--border);\n background-color: #ffffff;\n z-index: 1;\n}\n.rate-check-box {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n row-gap: 4px;\n border: 1px dashed rgb(145, 145, 145);\n border-radius: 2px;\n padding: 4px;\n transition: 0.2s ease-in-out;\n}\n.load-card:hover .rate-check-box {\n border: 1px dashed var(--background);\n color: var(--background);\n background-color: var(--border);\n}\n.load-card:hover .rate-check-box .rc,\n.load-card:hover .rate-check-box .mi {\n opacity: 1;\n}\n.rate-check-box .rate {\n font-size: 12px;\n height: 15px;\n line-height: 16px;\n opacity: 1;\n transition: opacity 2s ease 0s;\n}\n.pills-wrapper {\n display: flex;\n align-items: center;\n column-gap: 4px;\n color: rgb(72, 72, 72);\n font-size: 12px;\n}\n.unit-pill {\n background-color: var(--unit-pills-bg);\n border-radius: 10px;\n padding: 4px 12px;\n transition: 0.4s ease-in-out;\n}\n.unit-pill:hover {\n background-color: var(--price-color);\n color: var(--background);\n}\n"}

dangerous-bird-100

👁 实时预览

📝 源代码